Configured Reality Kings to fetch session from RK scene overview.

assets/components/actors/actor.vue

@@ -6,7 +6,7 @@
 		<div class="actor-header">
 			<h2 class="header-name">
 				<span v-if="actor.entity">{{ actor.name }} ({{ actor.entity.name }})</span>
-				<span v-else="">{{ actor.name }}</span>
+				<span v-else>{{ actor.name }}</span>
 
 				<Gender
 					:gender="actor.gender"

assets/components/filters/filter-bar.vue

@@ -18,19 +18,16 @@
 		<div class="filters">
 			<ActorFilter
 				class="filters-filter"
-				:filter="filter"
 				:available-actors="availableActors"
 			/>
 
 			<ChannelFilter
 				class="filters-filter"
-				:filter="filter"
 				:available-channels="availableChannels"
 			/>
 
 			<TagFilter
 				class="filters-filter"
-				:filter="filter"
 				:available-tags="availableTags"
 			/>
 		</div>
@@ -44,10 +41,6 @@ import ActorFilter from './actor-filter.vue';
 import ChannelFilter from './channel-filter.vue';
 import TagFilter from './tag-filter.vue';
 
-function filter(state) {
-	return state.ui.filter;
-}
-
 function range() {
 	return this.$route.params.range;
 }
@@ -114,7 +107,6 @@ export default {
 	},
 	computed: {
 		...mapState({
-			filter,
 			range,
 			batch,
 		}),
@@ -129,6 +121,43 @@ export default {
 <style lang="scss">
 @import 'breakpoints';
 
+.filter {
+	color: var(--shadow);
+	display: inline-flex;
+	align-items: center;
+
+	.filter-applied {
+		flex-grow: 1;
+		padding: .75rem .5rem;
+		font-size: 1rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-align: right;
+
+		&.empty {
+			color: var(--shadow);
+		}
+	}
+
+	.icon {
+		fill: var(--shadow);
+		margin: -.1rem 0 0 0;
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		.applied {
+			color: var(--shadow-strong);
+		}
+
+		.icon {
+			fill: var(--shadow-strong);
+		}
+	}
+}
+
 .filter-mode {
 	width: 100%;
 	color: var(--shadow);
@@ -274,43 +303,6 @@ export default {
     }
 }
 
-::v-deep(.filter) {
-	color: var(--shadow);
-	display: inline-flex;
-	align-items: center;
-
-	.filter-applied {
-		flex-grow: 1;
-		padding: .75rem .5rem;
-		font-size: 1rem;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		text-align: right;
-
-		&.empty {
-			color: var(--shadow);
-		}
-	}
-
-	.icon {
-		fill: var(--shadow);
-		margin: -.1rem 0 0 0;
-	}
-
-	&:hover {
-		cursor: pointer;
-
-		.applied {
-			color: var(--shadow-strong);
-		}
-
-		.icon {
-			fill: var(--shadow-strong);
-		}
-	}
-}
-
 .filters {
 	flex-shrink: 0;
 }

assets/components/filters/tag-filter.vue

@@ -14,7 +14,7 @@
 			>Tags</div>
 		</div>
 
-		<template v-slot:tooltip>
+		<template #tooltip>
 			<div
 				class="filter-options"
 				@click.stop
@@ -70,7 +70,7 @@
 <script>
 function getNewRange(tag) {
 	if (this.selectedTags.includes(tag)) {
-		return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') || undefined };
+		return { tags: this.selectedTags.filter((selectedTag) => selectedTag !== tag).join(',') || undefined };
 	}
 
 	return { tags: this.selectedTags.concat(tag).join(',') };
@@ -82,10 +82,6 @@ function selectedTags() {
 
 export default {
 	props: {
-		filter: {
-			type: Array,
-			default: () => [],
-		},
 		compact: {
 			type: Boolean,
 			default: false,

assets/components/releases/movies.vue

@@ -3,6 +3,12 @@
 		<div class="content-inner">
 			<SearchBar :placeholder="`Search ${totalCount} movies`" />
 
+			<TagFilter
+				class="filters-filter"
+				:filter="filter"
+				:available-tags="availableTags"
+			/>
+
 			<div
 				ref="tiles"
 				class="tiles"
@@ -30,6 +36,7 @@
 import MovieTile from './movie-tile.vue';
 import SearchBar from '../search/bar.vue';
 import Pagination from '../pagination/pagination.vue';
+import TagFilter from '../filters/tag-filter.vue';
 
 async function fetchMovies() {
 	if (this.$route.query.query) {
@@ -73,6 +80,7 @@ export default {
 		MovieTile,
 		SearchBar,
 		Pagination,
+		TagFilter,
 	},
 	data() {
 		return {