Added years filter. Changed default DMCA to generic content e-mail.

components/filters/years.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="years-container">
+		<select
+			v-model="selected"
+			class="years nobar"
+			multiple
+			@change="updateYears"
+		>
+			<option
+				v-for="year in years"
+				:key="`year-${year.year}`"
+				class="year"
+				:value="year.year"
+			>{{ year.year }}</option>
+		</select>
+
+		<Icon
+			v-show="selected.length > 0"
+			icon="cross2"
+			class="clear"
+			@click="clearYears"
+		/>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+	years: {
+		type: Array,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['update']);
+const selected = ref(props.filters.years);
+
+function updateYears() {
+	emit('update', 'years', selected.value);
+}
+
+function clearYears() {
+	selected.value = [];
+	emit('update', 'years', selected.value);
+}
+</script>
+
+<style scoped>
+.years-container {
+	display: flex;
+	align-items: stretch;
+	border-bottom: solid 1px var(--shadow-weak-30);
+}
+
+.years {
+	height: 2.5rem;
+	padding: .5rem;
+	flex-grow: 1;
+	border: none;
+	overflow-x: auto;
+	overflow-y: hidden;
+	background: none;
+
+	&:focus .year:checked {
+		background: var(--primary) linear-gradient(0deg, var(--primary) 0%, var(--primary) 100%);
+	}
+
+	&:focus {
+		outline: none;
+	}
+}
+
+.year {
+	display: inline-block;
+	padding: .25rem;
+	font-size: .8rem;
+
+	&:hover {
+		color: var(--primary);
+		cursor: pointer;
+	}
+
+	&:checked {
+		color: var(--primary);
+		background: none;
+		font-weight: bold;
+	}
+}
+
+.clear {
+	height: auto;
+	display: flex;
+	align-items: center;
+	padding: 0 .5rem;
+	fill: var(--shadow);
+
+	&:hover {
+		fill: var(--primary);
+		cursor: pointer;
+	}
+}
+</style>

components/footer/footer.vue

@@ -11,11 +11,11 @@
 		><Icon icon="discord" /></a>
 
 		<a
-			v-if="env.links.dmca"
-			:href="env.links.dmca"
+			v-if="env.links.content"
+			:href="env.links.content"
 			target="_blank"
 			class="footer-segment footer-link"
-		>dmca</a>
+		>Content Removal / DMCA</a>
 	</footer>
 </template>
 

components/movies/movies.vue

@@ -14,6 +14,12 @@
 				>
 			</div>
 
+			<YearsFilter
+				:filters="filters"
+				:years="aggYears"
+				@update="updateFilter"
+			/>
+
 			<TagsFilter
 				:filters="filters"
 				:tags="aggTags"
@@ -90,6 +96,7 @@ import events from '#/src/events.js';
 
 import MovieTile from '#/components/movies/tile.vue';
 import Filters from '#/components/filters/filters.vue';
+import YearsFilter from '#/components/filters/years.vue';
 import ActorsFilter from '#/components/filters/actors.vue';
 import TagsFilter from '#/components/filters/tags.vue';
 import ChannelsFilter from '#/components/filters/channels.vue';
@@ -106,6 +113,7 @@ const {
 } = pageProps;
 
 const movies = ref(pageProps.movies);
+const aggYears = ref(pageProps.aggYears || []);
 const aggActors = ref(pageProps.aggActors || []);
 const aggTags = ref(pageProps.aggTags || []);
 const aggChannels = ref(pageProps.aggChannels || []);
@@ -127,6 +135,7 @@ const queryEntity = networks[urlParsed.search.e] || channels[urlParsed.search.e]
 
 const filters = ref({
 	search: urlParsed.search.q,
+	years: urlParsed.search.years?.split(',').map((year) => Number(year)).filter(Boolean) || [],
 	tags: urlParsed.search.tags?.split(',').filter(Boolean) || [],
 	entity: queryEntity,
 	actors: queryActors,
@@ -178,6 +187,7 @@ async function search(options = {}) {
 
 	navigate(getPath(scope.value, false), {
 		...query,
+		years: filters.value.years.join(',') || undefined,
 		actors: filters.value.actors.map((filterActor) => getActorIdentifier(filterActor)).join(',') || undefined, // don't include page actor ID in query, already a parameter
 		tags: filters.value.tags.join(',') || undefined,
 		e: filters.value.entity?.type === 'network' ? `_${filters.value.entity.slug}` : (filters.value.entity?.slug || undefined),
@@ -185,6 +195,7 @@ async function search(options = {}) {
 
 	const res = await get('/movies', {
 		...query,
+		years: filters.value.years.filter(Boolean).join(','), // if we're on an actor page, that actor ID needs to be included
 		actors: [pageActor, ...filters.value.actors].filter(Boolean).map((filterActor) => getActorIdentifier(filterActor)).join(','), // if we're on an actor page, that actor ID needs to be included
 		tags: [pageTag?.slug, ...filters.value.tags].filter(Boolean).join(','),
 		e: entitySlug,
@@ -194,6 +205,7 @@ async function search(options = {}) {
 	});
 
 	movies.value = res.movies;
+	aggYears.value = res.aggYears;
 	aggActors.value = res.aggActors;
 	aggTags.value = res.aggTags;
 	aggChannels.value = res.aggChannels;

components/scenes/scenes.vue

@@ -24,6 +24,12 @@
 					/>
 				</div>
 
+				<YearsFilter
+					:filters="filters"
+					:years="aggYears"
+					@update="updateFilter"
+				/>
+
 				<TagsFilter
 					:filters="filters"
 					:tags="aggTags"
@@ -157,6 +163,7 @@ import events from '#/src/events.js';
 import { getActorIdentifier, parseActorIdentifier } from '#/src/query.js';
 
 import Filters from '#/components/filters/filters.vue';
+import YearsFilter from '#/components/filters/years.vue';
 import ActorsFilter from '#/components/filters/actors.vue';
 import TagsFilter from '#/components/filters/tags.vue';
 import ChannelsFilter from '#/components/filters/channels.vue';
@@ -199,6 +206,7 @@ const {
 } = pageProps;
 
 const scenes = ref(pageProps.scenes);
+const aggYears = ref(pageProps.aggYears || []);
 const aggActors = ref(pageProps.aggActors || []);
 const aggTags = ref(pageProps.aggTags || []);
 const aggChannels = ref(pageProps.aggChannels || []);
@@ -218,6 +226,7 @@ const queryEntity = networks[urlParsed.search.e] || channels[urlParsed.search.e]
 
 const filters = ref({
 	search: urlParsed.search.q,
+	years: urlParsed.search.years?.split(',').filter(Boolean).map(Number) || [],
 	tags: urlParsed.search.tags?.split(',').filter(Boolean) || [],
 	entity: queryEntity,
 	actors: queryActors,
@@ -274,6 +283,7 @@ async function search(options = {}) {
 
 	navigate(getPath(scope.value, false), {
 		...query,
+		years: filters.value.years.join(',') || undefined,
 		actors: filters.value.actors.map((filterActor) => getActorIdentifier(filterActor)).join(',') || undefined, // don't include page actor ID in query, already a parameter
 		tags: filters.value.tags.join(',') || undefined,
 		e: filters.value.entity?.type === 'network' ? `_${filters.value.entity.slug}` : (filters.value.entity?.slug || undefined),
@@ -281,6 +291,7 @@ async function search(options = {}) {
 
 	const res = await get('/scenes', {
 		...query,
+		years: filters.value.years.filter(Boolean).join(','), // if we're on an actor page, that actor ID needs to be included
 		actors: [pageActor, ...filters.value.actors].filter(Boolean).map((filterActor) => getActorIdentifier(filterActor)).join(','), // if we're on an actor page, that actor ID needs to be included
 		tags: [pageTag?.slug, ...filters.value.tags].filter(Boolean).join(','),
 		stashId: pageStash?.id,
@@ -290,6 +301,7 @@ async function search(options = {}) {
 	});
 
 	scenes.value = res.scenes;
+	aggYears.value = res.aggYears;
 	aggActors.value = res.aggActors;
 	aggTags.value = res.aggTags;
 	aggChannels.value = res.aggChannels;