Added series page and scene page section, no overview (yet).

components/movies/tile.vue

@@ -15,8 +15,8 @@
 			>
 				<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})` }"
+					:src="getPath(movie.covers[0], 'thumbnail')"
+					:style="{ 'background-image': `url(${getPath(movie.covers[0], 'lazy')})` }"
 					class="thumbnail"
 					loading="lazy"
 				>
@@ -119,6 +119,8 @@
 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({

components/series/tile.vue

@@ -0,0 +1,81 @@
+<template>
+	<div class="serie-tile">
+		<a
+			:href="`/serie/${serie.id}/${serie.slug}`"
+			class="poster-container"
+		>
+			<img
+				v-if="serie.poster"
+				:src="getPath(serie.poster, 'thumbnail')"
+				:style="{ 'background-image': `url(${getPath(serie.poster, 'lazy')})` }"
+				class="poster"
+				loading="lazy"
+			>
+		</a>
+
+		<div class="tile-info">
+			<a
+				:href="`/serie/${serie.id}/${serie.slug}`"
+				class="title nolink"
+			>{{ serie.title }}</a>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import getPath from '#/src/get-path.js';
+
+defineProps({
+	serie: {
+		type: Object,
+		default: null,
+	},
+});
+</script>
+
+<style scoped>
+.serie-tile {
+	display: flex;
+	flex-direction: column;
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+	border-radius: .25rem;
+	overflow: hidden;
+	background: var(--background-base);
+
+	&:hover {
+		box-shadow: 0 0 3px var(--shadow-weak-20);
+
+		:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
+			fill: var(--text-light);
+		}
+	}
+
+	&.unstashed {
+		opacity: .5;
+	}
+}
+
+.poster-container {
+	aspect-ratio: 16/9;
+	overflow: hidden;
+}
+
+.poster {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	background-size: cover;
+	background-position: center;
+}
+
+.tile-info {
+	display: flex;
+	flex-shrink: 0;
+}
+
+.title {
+	width: 100%;
+	padding: .25rem .5rem;
+	flex-shrink: 0;
+}
+</style>