Aggregating channels, filter inoperable.

components/filters/actors.vue

@@ -54,8 +54,8 @@
 				v-for="(actor, index) in group"
 				:key="`filter-actor-${actor.id}`"
 				class="filter-item"
-				:class="{ selected: filters.actors.includes(actor.id), first: groupKey === 'available' && index === 0 && filters.actors.length > 0 }"
-				@click="emit('update', 'actors', [actor.id])"
+				:class="{ selected: filters.actors.some((filterActor) => filterActor.id === actor.id), first: groupKey === 'available' && index === 0 && filters.actors.length > 0 }"
+				@click="emit('update', 'actors', [actor])"
 			>
 				<div
 					class="filter-include"
@@ -73,7 +73,10 @@
 				</div>
 
 				<span class="filter-name actor-name">
-					{{ actor.name }}
+					<span
+						class="filter-text"
+						:title="actor.name"
+					>{{ actor.name }}</span>
 
 					<span class="actor-details">
 						<div class="actor-gender">
@@ -121,9 +124,9 @@ const { pageProps } = inject('pageContext');
 const { actor: pageActor } = pageProps;
 
 const groupedActors = computed(() => ({
-	selected: props.filters.actors.map((actorId) => props.actors.find((actor) => actor.id === actorId)).filter(Boolean),
+	selected: props.filters.actors.map((filterActor) => props.actors.find((actor) => actor.id === filterActor.id)).filter(Boolean),
 	available: props.actors
-		.filter((actor) => !props.filters.actors.includes(actor.id)
+		.filter((actor) => !props.filters.actors.some((filterActor) => filterActor.id === actor.id)
 			&& actor.id !== pageActor?.id
 			&& searchRegexp.value.test(actor.name)
 			&& (!selectedGender.value || actor.gender === selectedGender.value))
@@ -139,12 +142,12 @@ const groupedActors = computed(() => ({
 const genders = computed(() => [null, ...['female', 'male', 'transsexual', 'other'].filter((gender) => props.actors.some((actor) => actor.gender === gender))]);
 
 function toggleActor(actor) {
-	if (props.filters.actors.includes(actor.id)) {
-		emit('update', 'actors', props.filters.actors.filter((actorId) => actorId !== actor.id));
+	if (props.filters.actors.some((filterActor) => filterActor.id === actor.id)) {
+		emit('update', 'actors', props.filters.actors.filter((filterActor) => filterActor.id !== actor.id));
 		return;
 	}
 
-	emit('update', 'actors', props.filters.actors.concat(actor.id));
+	emit('update', 'actors', props.filters.actors.concat(actor));
 }
 
 function selectGender() {
@@ -160,12 +163,6 @@ function selectGender() {
 </script>
 
 <style scoped>
-.gender-unselected {
-	.icon {
-		fill: var(--shadow);
-	}
-}
-
 .filter {
 	padding: 0;
 }
@@ -175,9 +172,7 @@ function selectGender() {
 }
 
 .filter-name {
-	height: 1rem;
 	align-items: stretch;
-	padding: .25rem 0 .25rem .25rem;
 }
 
 .actor-name {

components/filters/channels.vue

@@ -0,0 +1,151 @@
+<template>
+	<div class="filter channels-container">
+		<div class="filters-sort">
+			<input
+				v-model="search"
+				type="search"
+				placeholder="Filter channels"
+				class="input input-inline filters-search"
+			>
+
+			<div
+				v-show="order === 'name'"
+				class="filter-sort order noselect"
+				@click="order = 'count'"
+			>
+				<Icon
+					icon="sort-alpha-asc"
+				/>
+			</div>
+
+			<div
+				v-show="order === 'count'"
+				class="filter-sort order noselect"
+				@click="order = 'priority'"
+			>
+				<Icon
+					icon="sort-numeric-desc"
+				/>
+			</div>
+		</div>
+
+		<ul
+			class="filter-items nolist"
+		>
+			<template v-for="network in networks">
+				<li
+					v-for="(channel) in [network, ...(network.children || [])]"
+					:key="`filter-channel-${channel.id}`"
+					class="filter-item"
+					:class="{ channel: !channel.isIndependent && channel.type !== 'network', selected: filters.channel?.id === channel.id }"
+					@click="emit('update', 'channel', channel)"
+				>
+					<span class="filter-name">
+						<span
+							class="filter-text"
+							:title="channel.name"
+						>
+							<img
+								v-if="channel.isIndependent || channel.type === 'network'"
+								:src="`/logos/${channel.slug}/favicon_dark.png`"
+								class="favicon"
+							>
+
+							<Icon
+								v-else
+								icon="arrow-up4"
+							/>
+
+							{{ channel.name }}
+						</span>
+
+						<span class="channel-details">
+							<span
+								v-if="channel.count"
+								class="filter-count"
+							>{{ channel.count }}</span>
+						</span>
+					</span>
+				</li>
+			</template>
+		</ul>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const props = defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+	channels: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const emit = defineEmits(['update']);
+
+const search = ref('');
+const searchRegexp = computed(() => new RegExp(search.value, 'i'));
+const order = ref('name');
+
+const { pageProps } = inject('pageContext');
+const { channel: pageChannel } = pageProps;
+
+const networks = computed(() => {
+	const filteredChannels = props.channels.filter((channel) => channel.id !== pageChannel?.id
+		&& (searchRegexp.value.test(channel.name)
+		|| searchRegexp.value.test(channel.slug)
+		|| (channel.parent && searchRegexp.value.test(channel.parent.name))
+		|| (channel.parent && searchRegexp.value.test(channel.parent.slug))));
+
+	return Object.values(filteredChannels.reduce((acc, channel) => {
+		if (!channel.parent || channel.isIndependent) {
+			acc[channel.id] = channel;
+
+			return acc;
+		}
+
+		if (!acc[channel.parent.id]) {
+			acc[channel.parent.id] = {
+				...channel.parent,
+				children: [],
+			};
+		}
+
+		acc[channel.parent.id].children.push(channel);
+
+		return acc;
+	}, {}));
+});
+</script>
+
+<style scoped>
+.filter-items {
+	max-height: 10rem;
+	overflow-y: auto;
+}
+
+.filter {
+	padding: 0;
+}
+
+.filter-item.channel {
+	.icon {
+		width: 1.5rem;
+		height: 1rem;
+		transform: rotate(-135deg);
+		fill: var(--shadow-weak-30);
+	}
+}
+
+.favicon {
+	width: 1rem;
+	height: 1rem;
+	margin-right: .5rem;
+	object-fit: contain;
+}
+</style>

components/filters/filters.vue

@@ -186,11 +186,17 @@ function toggleFilters(state) {
 	justify-content: space-between;
 	align-items: center;
 	flex-grow: 1;
-	padding: .25rem .75rem .25rem 1rem;
+	padding: .25rem 0 .25rem .25rem;
 	color: var(--text);
 	text-decoration: none;
 }
 
+.filter-text {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .filter-include {
 	display: flex;
 	align-items: center;
@@ -222,13 +228,13 @@ function toggleFilters(state) {
 	align-items: center;
 	align-self: stretch;
 	justify-content: center;
-	padding: 0 .5rem;
+	padding: 0 .25rem;
 	cursor: pointer;
 	font-weight: bold;
 	color: var(--shadow);
 
 	&.order {
-		padding: 0 1rem 0 .25rem;
+		padding: 0 .5rem 0 .25rem;
 	}
 
 	.icon {

components/filters/range.vue

@@ -75,6 +75,3 @@ defineProps({
 
 const emit = defineEmits(['change', 'input', 'enable']);
 </script>
-
-<style scoped>
-</style>

components/filters/tags.vue

@@ -67,13 +67,18 @@
 					/>
 				</div>
 
-				<span class="filter-name tag-name">{{ tag.name }}</span>
-
-				<span class="tag-details">
+				<span class="filter-name tag-name">
 					<span
-						v-if="tag.count"
-						class="filter-count"
-					>{{ tag.count }}</span>
+						class="filter-text"
+						:title="tag.name"
+					>{{ tag.name }}</span>
+
+					<span class="tag-details">
+						<span
+							v-if="tag.count"
+							class="filter-count"
+						>{{ tag.count }}</span>
+					</span>
 				</span>
 			</li>
 		</ul>
@@ -170,7 +175,7 @@ function toggleTag(tag) {
 
 <style scoped>
 .filter-items {
-	max-height: 15rem;
+	max-height: 10rem;
 	overflow-y: auto;
 }