Upgraded dependencies, bumped to Node 24.
This commit is contained in:
+119
-119
@@ -1,129 +1,20 @@
|
||||
<template>
|
||||
<div class="movies-page">
|
||||
<Filters
|
||||
v-if="showFilters"
|
||||
:class="{ loading }"
|
||||
>
|
||||
<div class="filter search-container">
|
||||
<!-- onsearch not compatible with FF and Safari -->
|
||||
<input
|
||||
v-model="filters.search"
|
||||
type="input"
|
||||
placeholder="Search movies"
|
||||
class="search input"
|
||||
@keydown.enter="search"
|
||||
>
|
||||
|
||||
<Icon
|
||||
v-if="filters.search"
|
||||
icon="cross2"
|
||||
class="search-button"
|
||||
@click="filters.search = ''; search()"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
icon="search"
|
||||
class="search-button"
|
||||
@click="search"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<YearsFilter
|
||||
:filters="filters"
|
||||
:years="aggYears"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<TagsFilter
|
||||
:filters="filters"
|
||||
:tags="aggTags"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<ChannelsFilter
|
||||
:filters="filters"
|
||||
:channels="aggChannels"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<ActorsFilter
|
||||
:filters="filters"
|
||||
:actors="aggActors"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<div class="filter">
|
||||
<Checkbox
|
||||
:checked="filters.requireCover"
|
||||
label="Require box cover"
|
||||
@change="(checked) => updateFilter('requireCover', checked, true)"
|
||||
/>
|
||||
</div>
|
||||
</Filters>
|
||||
|
||||
<div class="movies-container">
|
||||
<div class="movies-header">
|
||||
<div class="meta">{{ total }} results</div>
|
||||
|
||||
<select
|
||||
v-model="scope"
|
||||
class="input"
|
||||
@change="search({ autoScope: false })"
|
||||
>
|
||||
<!-- not selected in SSR without prop -->
|
||||
<option
|
||||
v-if="pageStash"
|
||||
:selected="scope === 'stashed'"
|
||||
value="stashed"
|
||||
>Added</option>
|
||||
|
||||
<option
|
||||
v-if="filters.search"
|
||||
:selected="scope === 'results'"
|
||||
value="results"
|
||||
>Relevance</option>
|
||||
|
||||
<option value="likes">Popular</option>
|
||||
<option value="latest">Latest</option>
|
||||
<option value="upcoming">Upcoming</option>
|
||||
<option value="new">New</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<ul class="movies nolist">
|
||||
<li
|
||||
v-for="movie in movies"
|
||||
:key="`movie-${movie.id}`"
|
||||
>
|
||||
<MovieTile :movie="movie" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
:page="currentPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
import { parse } from 'path-to-regexp';
|
||||
import { inject, ref } from 'vue';
|
||||
|
||||
import navigate from '#/src/navigate.js';
|
||||
import { get } from '#/src/api.js';
|
||||
import { getActorIdentifier, parseActorIdentifier } from '#/src/query.js';
|
||||
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';
|
||||
import Filters from '#/components/filters/filters.vue';
|
||||
import TagsFilter from '#/components/filters/tags.vue';
|
||||
|
||||
import YearsFilter from '#/components/filters/years.vue';
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
import MovieTile from '#/components/movies/tile.vue';
|
||||
import Pagination from '#/components/pagination/pagination.vue';
|
||||
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';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const { pageProps, routeParams, urlParsed } = pageContext;
|
||||
@@ -250,6 +141,115 @@ function updateFilter(prop, value, reload = true) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="movies-page">
|
||||
<Filters
|
||||
v-if="showFilters"
|
||||
:class="{ loading }"
|
||||
>
|
||||
<div class="filter search-container">
|
||||
<!-- onsearch not compatible with FF and Safari -->
|
||||
<input
|
||||
v-model="filters.search"
|
||||
type="input"
|
||||
placeholder="Search movies"
|
||||
class="search input"
|
||||
@keydown.enter="search"
|
||||
>
|
||||
|
||||
<Icon
|
||||
v-if="filters.search"
|
||||
icon="cross2"
|
||||
class="search-button"
|
||||
@click="filters.search = ''; search()"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
icon="search"
|
||||
class="search-button"
|
||||
@click="search"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<YearsFilter
|
||||
:filters="filters"
|
||||
:years="aggYears"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<TagsFilter
|
||||
:filters="filters"
|
||||
:tags="aggTags"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<ChannelsFilter
|
||||
:filters="filters"
|
||||
:channels="aggChannels"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<ActorsFilter
|
||||
:filters="filters"
|
||||
:actors="aggActors"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<div class="filter">
|
||||
<Checkbox
|
||||
:checked="filters.requireCover"
|
||||
label="Require box cover"
|
||||
@change="(checked) => updateFilter('requireCover', checked, true)"
|
||||
/>
|
||||
</div>
|
||||
</Filters>
|
||||
|
||||
<div class="movies-container">
|
||||
<div class="movies-header">
|
||||
<div class="meta">{{ total }} results</div>
|
||||
|
||||
<select
|
||||
v-model="scope"
|
||||
class="input"
|
||||
@change="search({ autoScope: false })"
|
||||
>
|
||||
<!-- not selected in SSR without prop -->
|
||||
<option
|
||||
v-if="pageStash"
|
||||
:selected="scope === 'stashed'"
|
||||
value="stashed"
|
||||
>Added</option>
|
||||
|
||||
<option
|
||||
v-if="filters.search"
|
||||
:selected="scope === 'results'"
|
||||
value="results"
|
||||
>Relevance</option>
|
||||
|
||||
<option value="likes">Popular</option>
|
||||
<option value="latest">Latest</option>
|
||||
<option value="upcoming">Upcoming</option>
|
||||
<option value="new">New</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<ul class="movies nolist">
|
||||
<li
|
||||
v-for="movie in movies"
|
||||
:key="`movie-${movie.id}`"
|
||||
>
|
||||
<MovieTile :movie="movie" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
:page="currentPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.movies-page {
|
||||
display: flex;
|
||||
|
||||
@@ -1,5 +1,38 @@
|
||||
<script setup>
|
||||
import { format } from 'date-fns';
|
||||
import { ref, useId } from 'vue';
|
||||
|
||||
import { get } from '#/src/api.js';
|
||||
import getPath from '#/src/get-path.js';
|
||||
|
||||
defineProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['movie']);
|
||||
const dropdownId = useId();
|
||||
const movies = ref([]);
|
||||
const query = ref(null);
|
||||
const queryInput = ref(null);
|
||||
|
||||
async function search() {
|
||||
const data = await get('/movies', { q: query.value });
|
||||
|
||||
movies.value = data.movies;
|
||||
}
|
||||
|
||||
function focus() {
|
||||
setTimeout(() => {
|
||||
queryInput.value?.focus();
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDropdown
|
||||
:aria-id="dropdownId"
|
||||
:disabled="disabled"
|
||||
class="trigger"
|
||||
@show="focus"
|
||||
@@ -36,39 +69,6 @@
|
||||
</VDropdown>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import { get } from '#/src/api.js';
|
||||
import getPath from '#/src/get-path.js';
|
||||
|
||||
const movies = ref([]);
|
||||
const query = ref(null);
|
||||
const queryInput = ref(null);
|
||||
|
||||
defineProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['movie']);
|
||||
|
||||
async function search() {
|
||||
const data = await get('/movies', { q: query.value });
|
||||
|
||||
movies.value = data.movies;
|
||||
}
|
||||
|
||||
function focus() {
|
||||
setTimeout(() => {
|
||||
queryInput.value?.focus();
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.trigger {
|
||||
height: 100%;
|
||||
|
||||
+29
-29
@@ -1,3 +1,32 @@
|
||||
<script setup>
|
||||
import { format } from 'date-fns';
|
||||
import { inject, ref } from 'vue';
|
||||
|
||||
import Heart from '#/components/stashes/heart.vue';
|
||||
|
||||
import getPath from '#/src/get-path.js';
|
||||
|
||||
const props = defineProps({
|
||||
movie: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
showDetails: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const user = pageContext.user;
|
||||
const pageStash = pageContext.pageProps.stash;
|
||||
const currentStash = pageStash || pageContext.assets?.primaryStash;
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const favorited = ref(props.movie.stashes?.some((movieStash) => movieStash.id === currentStash?.id));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="movie-tile"
|
||||
@@ -118,35 +147,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import getPath from '#/src/get-path.js';
|
||||
|
||||
import Heart from '#/components/stashes/heart.vue';
|
||||
|
||||
const props = defineProps({
|
||||
movie: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
showDetails: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const user = pageContext.user;
|
||||
const pageStash = pageContext.pageProps.stash;
|
||||
const currentStash = pageStash || pageContext.assets?.primaryStash;
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const favorited = ref(props.movie.stashes?.some((movieStash) => movieStash.id === currentStash?.id));
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.movie-tile {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user