Changed scene year filter to range input.

components/movies/movies.vue

@@ -15,6 +15,7 @@ import { get } from '#/src/api.js';
 import events from '#/src/events.js';
 import navigate from '#/src/navigate.js';
 import { getActorIdentifier, parseActorIdentifier } from '#/src/query.js';
+import { formatYears, parseYears } from '#/utils/parse-range.js';
 
 const pageContext = inject('pageContext');
 const { pageProps, routeParams, urlParsed } = pageContext;
@@ -49,7 +50,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) || [],
+	...parseYears(urlParsed.search.years),
 	tags: urlParsed.search.tags?.split(',').filter(Boolean) || [],
 	entity: queryEntity,
 	actors: queryActors,
@@ -103,7 +104,7 @@ async function search(options = {}) {
 
 	navigate(getPath(scope.value, false), {
 		...query,
-		years: filters.value.years.join(',') || undefined,
+		years: formatYears(filters.value),
 		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),
@@ -111,7 +112,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
+		years: formatYears(filters.value),
 		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,