Added basic co-star actor filter to actor page.

assets/components/filters/actor-filter.vue

@@ -0,0 +1,86 @@
+<template>
+	<v-popover class="filter-container">
+		<div class="filter">
+			<Icon icon="users" />
+
+			<div
+				v-if="selectedActors.length > 0"
+				class="filter-applied"
+			>{{ selectedActors.length }} {{ selectedActors.length > 1 ? 'actors' : 'actor' }}</div>
+
+			<div
+				v-else
+				class="filter-applied empty"
+			>Actors</div>
+		</div>
+
+		<div slot="popover">
+			<router-link
+				class="filter-clear"
+				:to="{ query: { ...$route.query, actors: undefined } }"
+				:class="{ active: selectedActors.length > 0 }"
+			>clear all<Icon icon="cross2" /></router-link>
+
+			<ul class="filter-items nolist">
+				<li
+					v-for="actor in availableActors"
+					:key="actor.id"
+					class="filter-item"
+					:class="{ selected: selectedActors.includes(actor.slug) }"
+				>
+					<router-link
+						:to="{ query: {
+							...$route.query,
+							actors: actor.slug,
+						}, params: { pageNumber: 1 } }"
+						class="filter-name"
+					>{{ actor.name }}</router-link>
+
+					<router-link
+						:to="{ query: { ...$route.query, ...getNewRange(actor) }, params: { pageNumber: 1 } }"
+						class="filter-include"
+					>
+						<Icon
+							icon="checkmark"
+							class="filter-add"
+						/>
+
+						<Icon
+							icon="cross2"
+							class="filter-remove"
+						/>
+					</router-link>
+				</li>
+			</ul>
+		</div>
+	</v-popover>
+</template>
+
+<script>
+function getNewRange(actor) {
+	if (this.selectedActors.includes(actor.slug)) {
+		return { actors: this.selectedActors.filter(selectedActor => selectedActor !== actor.slug).join(',') || undefined };
+	}
+
+	return { actors: this.selectedActors.concat(actor.slug).join(',') };
+}
+
+function selectedActors() {
+	return this.$route.query.actors ? this.$route.query.actors.split(',') : [];
+}
+
+export default {
+	props: {
+		availableActors: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	computed: {
+		selectedActors,
+	},
+	methods: {
+		getNewRange,
+	},
+};
+</script>

assets/components/filters/channel-filter.vue

@@ -42,7 +42,7 @@
 						class="filter-name"
 					>
 						<img
-							v-if="channel.independent || !channel.parent"
+							v-if="channel.type === 'network' || channel.independent || !channel.parent "
 							:src="`/img/logos/${channel.slug}/favicon.png`"
 							class="favicon"
 						>
@@ -109,7 +109,7 @@ function selectedNetworks() {
 
 function channelsPerNetwork() {
 	const networks = this.availableChannels.reduce((acc, channel) => {
-		if (channel.independent || !channel.parent) {
+		if (channel.type === 'network' || channel.independent || !channel.parent) {
 			acc[channel.slug] = { ...channel, children: [] };
 			return acc;
 		}

assets/components/filters/filter-bar.vue

@@ -21,6 +21,12 @@
 		</div>
 
 		<div class="filters">
+			<ActorFilter
+				class="filters-filter"
+				:filter="filter"
+				:available-actors="availableActors"
+			/>
+
 			<ChannelFilter
 				class="filters-filter"
 				:filter="filter"
@@ -38,6 +44,8 @@
 
 <script>
 import { mapState } from 'vuex';
+
+import ActorFilter from './actor-filter.vue';
 import ChannelFilter from './channel-filter.vue';
 import TagFilter from './tag-filter.vue';
 
@@ -67,6 +75,7 @@ async function setBatch(newBatch) {
 
 export default {
 	components: {
+		ActorFilter,
 		ChannelFilter,
 		TagFilter,
 	},
@@ -95,6 +104,10 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		availableActors: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	computed: {
 		...mapState({
@@ -253,7 +266,7 @@ export default {
 	background: var(--darken-hint);
 }
 
-@media(max-width: $breakpoint-micro) {
+@media(max-width: $breakpoint-small) {
 	.filter-applied {
 		display: none;
 	}