From b9578d86e334efdfb1496c34e74ba79bfadb156a Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Tue, 27 Feb 2024 01:51:14 +0100
Subject: [PATCH] Added meta header with sort input to movie page. Highlighting
 active page in header.

---
 components/header/header.vue |   9 +-
 pages/movies/+Page.vue       | 200 +++++++++++++++++++++--------------
 2 files changed, 128 insertions(+), 81 deletions(-)

diff --git a/components/header/header.vue b/components/header/header.vue
index 900c6b2..f15ec72 100644
--- a/components/header/header.vue
+++ b/components/header/header.vue
@@ -14,6 +14,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'updates' }"
 						href="/updates"
 					>Updates</Link>
 				</li>
@@ -21,6 +22,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'actors' }"
 						href="/actors"
 					>Actors</Link>
 				</li>
@@ -28,6 +30,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'channels' }"
 						href="/channels"
 					>Channels</Link>
 				</li>
@@ -35,6 +38,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'tags' }"
 						href="/tags"
 					>Tags</Link>
 				</li>
@@ -42,6 +46,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'movies' }"
 						href="/movies"
 					>Movies</Link>
 				</li>
@@ -65,7 +70,7 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+import { ref, computed, inject } from 'vue';
 import navigate from '#/src/navigate.js';
 
 import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
@@ -73,6 +78,8 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
 const pageContext = inject('pageContext');
 const query = ref(pageContext.urlParsed.search.q || '');
 
+const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
+
 function search() {
 	navigate('/search', { q: query.value }, { redirect: true });
 }
diff --git a/pages/movies/+Page.vue b/pages/movies/+Page.vue
index 63a54c8..ff6640d 100644
--- a/pages/movies/+Page.vue
+++ b/pages/movies/+Page.vue
@@ -33,95 +33,116 @@
 			/>
 		</Filters>
 
-		<ul class="movies nolist">
-			<li
-				v-for="movie in movies"
-				:key="`movie-${movie.id}`"
-				class="movie"
-			>
-				<a
-					:href="`/movie/${movie.id}/${movie.slug}`"
-					:title="movie.title"
-					class="cover-container"
+		<div class="movies-container">
+			<div class="movies-header">
+				<div class="meta">{{ total }} results</div>
+
+				<select
+					v-model="scope"
+					class="input"
+					@change="search({ autoScope: false })"
 				>
-					<img
-						v-if="movie.covers[0]"
-						:src="movie.covers[0].isS3 ? `https://cdndev.traxxx.me/${movie.covers[0].thumbnail}` : `/media/${movie.covers[0].thumbnail}`"
-						:style="{ 'background-image': movie.covers[0].isS3 ? `url(https://cdndev.traxxx.me/${movie.covers[0].lazy})` : `url(/media/${movie.covers[0].lazy})` }"
-						class="cover"
-						loading="lazy"
-					>
+					<option value="likes">Likes</option>
+					<option value="latest">Latest</option>
+					<option value="upcoming">Upcoming</option>
+					<option value="new">New</option>
+					<option
+						value="results"
+						:disabled="!filters.search"
+					>Relevance</option>
+				</select>
+			</div>
 
-					<img
-						v-else
-						src="/public/img/icons/movie.svg"
-						class="nocover"
+			<ul class="movies nolist">
+				<li
+					v-for="movie in movies"
+					:key="`movie-${movie.id}`"
+					class="movie"
+				>
+					<a
+						:href="`/movie/${movie.id}/${movie.slug}`"
+						:title="movie.title"
+						class="cover-container"
 					>
-				</a>
-
-				<div class="meta">
-					<div class="channel">
-						<Link
-							:href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`"
-							class="favicon-link"
+						<img
+							v-if="movie.covers[0]"
+							:src="movie.covers[0].isS3 ? `https://cdndev.traxxx.me/${movie.covers[0].thumbnail}` : `/media/${movie.covers[0].thumbnail}`"
+							:style="{ 'background-image': movie.covers[0].isS3 ? `url(https://cdndev.traxxx.me/${movie.covers[0].lazy})` : `url(/media/${movie.covers[0].lazy})` }"
+							class="cover"
+							loading="lazy"
 						>
-							<img
-								:src="movie.channel.isIndependent || !movie.network ? `/logos/${movie.channel.slug}/favicon.png` : `/logos/${movie.network.slug}/favicon.png`"
-								class="favicon"
-							>
-						</Link>
 
-						<Link
-							:href="`/${movie.channel.type}/${movie.channel.slug}`"
-							class="nolink channel-link"
-						>{{ movie.channel.name }}</Link>
+						<img
+							v-else
+							src="/public/img/icons/movie.svg"
+							class="nocover"
+						>
+					</a>
+
+					<div class="tile-meta">
+						<div class="channel">
+							<Link
+								:href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`"
+								class="favicon-link"
+							>
+								<img
+									:src="movie.channel.isIndependent || !movie.network ? `/logos/${movie.channel.slug}/favicon.png` : `/logos/${movie.network.slug}/favicon.png`"
+									class="favicon"
+								>
+							</Link>
+
+							<Link
+								:href="`/${movie.channel.type}/${movie.channel.slug}`"
+								class="nolink channel-link"
+							>{{ movie.channel.name }}</Link>
+						</div>
+
+						<time
+							:datetime="movie.effectiveDate.toISOString()"
+							class="date"
+							:class="{ nodate: !movie.date }"
+						>{{ format(movie.effectiveDate, movie.effectiveDate.getFullYear() === currentYear ? 'MMM d' : 'MMM d, y') }}</time>
 					</div>
 
-					<time
-						:datetime="movie.effectiveDate.toISOString()"
-						class="date"
-						:class="{ nodate: !movie.date }"
-					>{{ format(movie.effectiveDate, movie.effectiveDate.getFullYear() === currentYear ? 'MMM d' : 'MMM d, y') }}</time>
-				</div>
+					<a
+						:href="`/movie/${movie.id}/${movie.slug}`"
+						:title="movie.title"
+						class="title nolink"
+					>{{ movie.title }}</a>
 
-				<a
-					:href="`/movie/${movie.id}/${movie.slug}`"
-					:title="movie.title"
-					class="title nolink"
-				>{{ movie.title }}</a>
-
-				<ul
-					:title="movie.actors.map((actor) => actor.name).join(', ')"
-					class="actors nolist"
-				>
-					<li
-						v-for="actor in movie.actors"
-						:key="`actor-${movie.id}-${actor.slug}`"
-						class="actor-item"
+					<ul
+						:title="movie.actors.map((actor) => actor.name).join(', ')"
+						class="actors nolist"
 					>
-						<a
-							:href="`/actor/${actor.id}/${actor.slug}`"
-							class="actor nolink"
-						>{{ actor.name }}</a>
-					</li>
-				</ul>
+						<li
+							v-for="actor in movie.actors"
+							:key="`actor-${movie.id}-${actor.slug}`"
+							class="actor-item"
+						>
+							<a
+								:href="`/actor/${actor.id}/${actor.slug}`"
+								class="actor nolink"
+							>{{ actor.name }}</a>
+						</li>
+					</ul>
 
-				<ul
-					:title="movie.tags.map((tag) => tag.name).join(', ')"
-					class="tags nolist"
-				>
-					<li
-						v-for="tag in movie.tags"
-						:key="`tag-${movie.id}-${tag.slug}`"
+					<ul
+						:title="movie.tags.map((tag) => tag.name).join(', ')"
+						class="tags nolist"
 					>
-						<a
-							:href="`/tag/${tag.slug}`"
-							class="tag nolink"
-						>{{ tag.name }}</a>
-					</li>
-				</ul>
-			</li>
-		</ul>
+						<li
+							v-for="tag in movie.tags"
+							:key="`tag-${movie.id}-${tag.slug}`"
+						>
+							<a
+								:href="`/tag/${tag.slug}`"
+								class="tag nolink"
+							>{{ tag.name }}</a>
+						</li>
+					</ul>
+				</li>
+			</ul>
+		</div>
 	</div>
 </template>
 
@@ -264,11 +285,30 @@ function updateFilter(prop, value, reload = true) {
 	background: var(--background-base-10);
 }
 
+.movies-container {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.movies-header {
+	display: flex;
+	align-items: center;
+	padding: .5rem 1rem .25rem 3rem;
+}
+
+.meta {
+	display: flex;
+	flex-grow: 1;
+	justify-content: space-between;
+	align-items: center;
+}
+
 .movies {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
 	gap: 1rem;
-	padding: 1rem;
+	padding: .5rem 1rem 1rem 1rem;
 }
 
 .movie {
@@ -307,7 +347,7 @@ function updateFilter(prop, value, reload = true) {
 	opacity: .1;
 }
 
-.meta {
+.tile-meta {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;