Added trailers. Improved scene page scaling.

assets/css/style.css

@@ -4,6 +4,7 @@
 @import 'forms';
 @import 'markdown';
 @import 'tooltip';
+@import 'video';
 
 html,
 body,

components/actors/actors.vue

@@ -65,8 +65,8 @@
 
 						<option
 							v-if="q"
-							:selected="order === 'relevance.desc'"
+							:selected="order === 'results.desc'"
-							value="relevance.desc"
+							value="results.desc"
 						>Relevance</option>
 
 						<option value="name.asc">Name</option>
@@ -172,10 +172,10 @@ async function search(options = {}) {
 
 	if (options.autoScope !== false) {
 		if (q.value) {
-			order.value = 'relevance.desc';
+			order.value = 'results.desc';
 		}
 
-		if (!q.value && order.value.includes('relevance')) {
+		if (!q.value && order.value.includes('results')) {
 			order.value = 'likes.desc';
 		}
 	}

components/actors/tile.vue

@@ -148,7 +148,6 @@ async function unstash() {
 	aspect-ratio: 2/3;
 	position: relative;
 	border-radius: .25rem;
-	margin: .25rem;
 	box-shadow: 0 0 3px var(--shadow-weak-30);
 	overflow: hidden;
 

components/header/header.vue

@@ -40,8 +40,8 @@
 				<li class="nav-item">
 					<Link
 						class="link"
-						:class="{ active: activePage === 'tags' }"
+						:class="{ active: activePage === 'cats' }"
-						href="/tags"
+						href="/cats"
 					>Tags</Link>
 				</li>
 

components/sidebar/sidebar.vue

@@ -49,10 +49,10 @@
 
 				<li
 					class="menu-item"
-					:class="{ active: activePage === 'tags' }"
+					:class="{ active: activePage === 'cats' }"
 				>
 					<a
-						href="/tags"
+						href="/cats"
 						class="menu-link nolink"
 					>Tags</a>
 				</li>

components/tiles/actor.vue

@@ -0,0 +1,275 @@
+<template>
+	<div
+		class="tile"
+		:class="{
+			unstashed: !favorited && pageStash && user && pageStash.id === user.primaryStash?.id
+		}"
+	>
+		<span class="name">{{ actor.name }}</span>
+
+		<div class="avatar-container">
+			<Link
+				:href="`/actor/${actor.id}/${actor.slug}`"
+				class="avatar-link no-link"
+			>
+				<img
+					v-if="actor.avatar"
+					:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
+					:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
+					loading="lazy"
+					class="avatar"
+				>
+
+				<img
+					v-else
+					:src="`/img/avatars/${actor.gender || 'female'}.svg`"
+					loading="lazy"
+					class="fallback"
+				>
+			</Link>
+
+			<Icon
+				v-show="favorited"
+				icon="heart7"
+				class="heart favorited"
+				@click.native.stop="unstash"
+			/>
+
+			<Icon
+				v-show="!favorited && user"
+				icon="heart8"
+				class="heart"
+				@click.native.stop="stash"
+			/>
+		</div>
+
+		<div class="details">
+			<span class="birth">
+				<Gender :gender="actor.gender" />
+
+				<span
+					v-if="actor.ageFromBirth"
+					:title="`Born ${formatDate(actor.dateOfBirth, 'MMMM d, yyyy')}`"
+					class="age"
+				>{{ actor.ageFromBirth }}</span>
+
+				<span
+					v-if="actor.ageThen && actor.ageThen < actor.ageFromBirth"
+					title="Age on date of release"
+					class="age age-then"
+				>{{ actor.ageThen }}</span>
+			</span>
+
+			<span
+				v-if="actor.origin?.country"
+				:title="`Born in ${actor.origin.country.name}`"
+				class="country"
+			>
+				{{ actor.origin.country.alpha2 }}
+				<img
+					:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
+					class="flag"
+				>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+
+import { formatDate } from '#/utils/format.js';
+import { post, del } from '#/src/api.js';
+import events from '#/src/events.js';
+
+import Gender from './gender.vue';
+
+const props = defineProps({
+	actor: {
+		type: Object,
+		default: null,
+	},
+});
+
+const pageContext = inject('pageContext');
+const { user } = pageContext;
+const pageStash = pageContext.pageProps.stash;
+
+// console.log(props.actor);
+
+const favorited = ref(props.actor.stashes?.some((sceneStash) => sceneStash.primary) || false);
+
+async function stash() {
+	try {
+		favorited.value = true;
+		await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: props.actor.id });
+
+		events.emit('feedback', {
+			type: 'success',
+			message: `${props.actor.name} stashed to ${user.primaryStash.name}`,
+		});
+	} catch (error) {
+		favorited.value = false;
+
+		events.emit('feedback', {
+			type: 'error',
+			message: `Failed to stash ${props.actor.name} to ${user.primaryStash.name}`,
+		});
+	}
+}
+
+async function unstash() {
+	try {
+		favorited.value = false;
+		await del(`/stashes/${user.primaryStash.id}/actors/${props.actor.id}`);
+
+		events.emit('feedback', {
+			type: 'remove',
+			message: `${props.actor.name} unstashed from ${user.primaryStash.name}`,
+		});
+	} catch (error) {
+		favorited.value = true;
+
+		console.error(error);
+
+		events.emit('feedback', {
+			type: 'error',
+			message: `Failed to unstash ${props.actor.name} from ${user.primaryStash.name}`,
+		});
+	}
+}
+</script>
+
+<style scoped>
+.tile {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	aspect-ratio: 2/3;
+	position: relative;
+	border-radius: .25rem;
+	margin: .25rem;
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+	overflow: hidden;
+
+	&:hover {
+		box-shadow: 0 0 3px var(--shadow-weak-20);
+
+		.name {
+			color: var(--primary);
+		}
+	}
+
+	&.unstashed {
+		opacity: .5;
+	}
+}
+
+.name {
+	flex-shrink: 0;
+	padding: .25rem .5rem;
+	font-weight: bold;
+	font-size: .9rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	user-select: all;
+}
+
+.avatar-container {
+	position: relative;
+	flex-grow: 1;
+	overflow: hidden;
+	background: var(--grey-dark-40);
+}
+
+.avatar-link {
+	height: 100%;
+	display: block;
+	overflow: hidden;
+}
+
+.avatar {
+	height: 100%;
+	width: 100%;
+	object-fit: cover;
+	object-position: center 0;
+	background-size: cover;
+	background-position: center 0;
+}
+
+.fallback {
+	height: 100%;
+	width: 100%;
+	display: block;
+	object-fit: contain;
+	opacity: .1;
+}
+
+.icon.heart {
+	width: 2rem;
+	height: 1.5rem;
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: .5rem .5rem 1rem 1rem;
+	fill: var(--highlight-strong-10);
+	filter: drop-shadow(0 0 3px var(--shadow));
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--primary);
+	}
+
+	&.favorited {
+		fill: var(--primary);
+	}
+}
+
+.details {
+	width: 100%;
+	height: 1.5rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	position: absolute;
+	bottom: 0;
+	box-sizing: border-box;
+	padding: 0 .5rem;
+	color: var(--text-light);
+	background: var(--shadow);
+	font-size: .9rem;
+	font-weight: bold;
+}
+
+.gender {
+	display: inline-block;
+	padding: .25rem 0;
+	margin-right: .25rem;
+	transform: translateY(1px);
+}
+
+.birth {
+	display: flex;
+	align-items: center;
+}
+
+.age {
+	margin-right: .25rem;
+}
+
+.age-then {
+	color: var(--grey-light-20);
+	font-weight: normal;
+}
+
+.country {
+	display: flex;
+	align-items: center;
+}
+
+.flag {
+	height: .75rem;
+	margin-left: .25rem;
+}
+</style>

components/tiles/gender.vue

@@ -0,0 +1,39 @@
+<template>
+	<span
+		v-if="gender"
+		class="gender"
+		:class="{ [gender]: true }"
+	>
+		<Icon :icon="gender" />
+	</span>
+</template>
+
+<script setup>
+defineProps({
+	gender: {
+		type: String,
+		default: null,
+	},
+});
+</script>
+
+<style scoped>
+.gender {
+    &.female .icon {
+        fill: var(--female);
+        filter: drop-shadow(0 0 1px var(--shadow-weak-20));
+    }
+
+    &.male .icon {
+        fill: var(--male);
+        filter: drop-shadow(0 0 1px var(--shadow-weak-20));
+    }
+
+    &.transsexual .icon {
+        fill: var(--text-light);
+        filter: drop-shadow(1px 0 0 var(--female)) drop-shadow(-1px 0 0 var(--female)) drop-shadow(0 1px 0 var(--female)) drop-shadow(0 -1px 0 var(--female))
+            drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male))
+            drop-shadow(0 0 1px var(--shadow-weak-20))
+    }
+}
+</style>

components/video/player.vue

@@ -0,0 +1,148 @@
+<template>
+	<video
+		ref="player"
+		:poster="poster"
+		crossorigin="anonymous"
+		class="player video-js vjs-big-play-centered"
+		@playing="emit('play')"
+		@pause="emit('pause')"
+	/>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import videoJs from 'video.js';
+// import 'videojs-vr/dist/videojs-vr.min';
+
+import getPath from '#/src/get-path.js';
+
+const props = defineProps({
+	video: {
+		type: Object,
+		default: null,
+	},
+	poster: {
+		type: String,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['play', 'pause']);
+
+const player = ref(null);
+
+function updatePlayer() {
+	player.value.src(getPath(props.video));
+	player.value.poster(props.poster);
+}
+
+function initPlayer() {
+	player.value = videoJs(player.value, {
+		controls: true,
+		inactivityTimeout: 1000,
+		controlBar: {
+			pictureInPictureToggle: false,
+			volumePanel: {
+				inline: false,
+			},
+		},
+	}, () => {
+		player.value.src(getPath(props.video));
+
+		if (props.video.isVr) {
+			player.value.vr({ projection: '180' });
+		}
+	});
+}
+
+onMounted(() => {
+	if (typeof window !== 'undefined') {
+		window.HELP_IMPROVE_VIDEOJS = false;
+	}
+
+	initPlayer();
+});
+
+watch(() => props.video, () => updatePlayer());
+watch(() => props.poster, () => updatePlayer());
+</script>
+
+<style>
+.player.video-js {
+	.vjs-poster {
+		background-size: cover;
+	}
+
+	.vjs-control-bar {
+		background-color: var(--shadow);
+	}
+
+	.vjs-slider {
+		background-color: var(--shadow-weak-10);
+	}
+
+	.vjs-play-progress {
+		background-color: var(--primary);
+
+		.vjs-time-tooltip {
+			color: var(--shadow-strong-10);
+		}
+	}
+
+	.vjs-load-progress {
+		background-color: var(--highlight-weak-10);
+
+		div {
+			background-color: var(--shadow-weak-10);
+		}
+	}
+
+	.vjs-mouse-display .vjs-time-tooltip {
+		background-color: var(--shadow-strong-10);
+	}
+
+	.vjs-remaining-time {
+		line-height: 2rem;
+		font-size: .75rem;
+		font-weight: bold;
+	}
+
+	.vjs-big-play-button {
+		background-color: var(--shadow);
+		width: 4rem;
+		height: 4rem;
+		margin: -2rem 0 0 -2rem;
+		border: none;
+		border-radius: 50%;
+
+		.vjs-icon-placeholder {
+			font-size: 2.5rem;
+			line-height: 4rem;
+		}
+
+		&:hover {
+			background-color: var(--primary);
+		}
+	}
+
+	.vjs-control:focus::before,
+	.vjs-control:hover::before,
+	.vjs-control:focus {
+		text-shadow: 0 0 .5rem var(--highlight-strong-10);
+	}
+
+	.vjs-error-display {
+		overflow: hidden;
+	}
+
+	.vjs-modal-dialog-content {
+		white-space: normal;
+	}
+
+	&:hover {
+		.vjs-big-play-button {
+			background-color: var(--primary);
+		}
+	}
+}
+</style>

config/default.cjs

@@ -53,20 +53,11 @@ module.exports = {
 		username: null,
 		password: null,
 	},
-	location: {
-		userAgent: 'contact via https://traxxx.me/',
-	},
 	analytics: {
 		enabled: false,
 		address: 'http://localhost:3000/script.js',
 		siteId: '1b28ac3b-d229-43bf-aec9-75cf0a72a466',
 	},
-	s3: {
-		enabled: false,
-		bucket: 'traxxx',
-		accessKey: 'ABCDEFGHIJ1234567890',
-		secretKey: 'abcdefghijklmnopqrstuvwxyz1234567890ABCD',
-	},
 	auth: {
 		login: true,
 		signup: true,
@@ -76,330 +67,10 @@ module.exports = {
 	stashes: {
 		viewRefreshCooldown: 60, // minutes
 	},
-	exclude: {
-		channels: [
-			// 21sextreme, no longer updated
-			'mightymistress',
-			'dominatedgirls',
-			'homepornreality',
-			'peeandblow',
-			'cummingmatures',
-			'mandyiskinky',
-			'speculumplays',
-			'creampiereality',
-			// aziani
-			'amberathome',
-			'marycarey',
-			'racqueldevonshire',
-			'aziani',
-			// blowpass
-			'sunlustxxx',
-			// ddfnetwork
-			'fuckinhd',
-			'bustylover',
-			// famedigital
-			'daringsex',
-			'lowartfilms',
-			// freeones
-			'freeones',
-			// new sesations
-			'tabutales',
-			'talesfromtheedge',
-			'shanedieselsbangingbabes',
-			// pornpros
-			'milfhumiliation',
-			'humiliated',
-			'amateurviolations',
-			'cumdisgrace',
-			'webcamhackers',
-			'collegeteens',
-			// score
-			'bigboobbundle',
-			'milfbundle',
-			'pornmegaload',
-			'scorelandtv',
-			'scoretv',
-			// spizoo
-			'intimatelesbians',
-			'porngoespro',
-			'pornstartease',
-			'thestripperexperience',
-			// teenscoreclub
-			'maiko',
-			'ncuksinners',
-			'ncversocinema',
-			'pussybabes',
-			'uksinners',
-			// mindgeek
-			'pornhub',
-			// insex
-			'paintoy',
-			'aganmedon',
-			'sensualpain',
-		],
-		networks: [
-			// dummy network for testing
-			'traxxx',
-			// porn doe
-			'forbondage',
-			'score',
-		],
-	},
-	profiles: [
-		[
-			'evilangel',
-			'famedigital',
-			'devilsfilm',
-			'roccosiffredi',
-		],
-		[
-			// Gamma; Evil Angel + Devil's Film, Pure Taboo (unavailable), (sometimes) Burning Angel and Wicked have their own assets
-			'xempire',
-			'blowpass',
-		],
-		[
-			// MindGeek; Mile High Media has its own assets
-			'brazzers',
-			'realitykings',
-			'mofos',
-			'digitalplayground',
-			'twistys',
-			'babes',
-			'fakehub',
-			'sexyhub',
-			'metrohd',
-			'iconmale',
-			'men',
-			'transangels',
-		],
-		'wicked',
-		'burningangel',
-		'milehighmedia',
-		[
-			'vixen',
-			'tushy',
-			'blacked',
-			'tushyraw',
-			'blackedraw',
-			'deeper',
-		],
-		[
-			// Nubiles
-			'nubiles',
-			'nubilesporn',
-			'deeplush',
-			'brattysis',
-			'nfbusty',
-			'anilos',
-			'hotcrazymess',
-			'thatsitcomshow',
-		],
-		[
-			// Adult DVD Empire
-			'elegantangel',
-			'westcoastproductions',
-		],
-		'21sextury',
-		'julesjordan',
-		'dorcelclub',
-		'bang',
-		'pervcity',
-		'kink',
-		'peternorth',
-		'naughtyamerica',
-		'cherrypimps',
-		'pimpxxx',
-		'18vr',
-		'babevr',
-		'badoinkvr',
-		'realvr',
-		'vrcosplayx',
-		'teamskeet',
-		'mylf',
-		[
-			'letsdoeit',
-			'mamacitaz',
-			'forbondage',
-			'amateureuro',
-			'vipsexvault',
-			'transbella',
-		],
-		[
-			'hussiepass',
-			'hushpass',
-			'interracialpass',
-			'interracialpovs',
-			'povpornstars',
-			'seehimfuck',
-			'eyeontheguy',
-		],
-		[
-			// Full Porn Network
-			'analized',
-			'hergape',
-			'jamesdeen',
-			'dtfsluts',
-			'analbbc',
-			'analviolation',
-			'baddaddypov',
-			'girlfaction',
-			'homemadeanalwhores',
-			'mugfucked',
-			'onlyprince',
-			'pervertgallery',
-			'povperverts',
-		],
-		'wankzvr',
-		'milfvr',
-		'tranzvr',
-		'topwebmodels',
-		'pascalssubsluts',
-		'kellymadison',
-		'private',
-		'ddfnetwork',
-		'bangbros',
-		'hitzefrei',
-		'porncz',
-		'czechav',
-		'littlecapricedreams',
-		'gangbangcreampie',
-		'gloryholesecrets',
-		'aziani',
-		[
-			'firstanalquest',
-			'doubleviewcasting',
-		],
-		[
-			'silverstonedvd',
-			'silviasaint',
-		],
-		'legalporno',
-		'pierrewoodman',
-		'score',
-		'boobpedia',
-		'pornhub',
-		'freeones',
-	],
-	options: {
-		traxxx: {
-			// source: 'http://nsfw.unknown.name/random',
-		},
-	},
-	proxy: {
-		enable: false,
-		host: '',
-		port: 8888,
-		hostnames: [
-			'www.vixen.com',
-			'www.blacked.com',
-			'www.blackedraw.com',
-			'www.tushy.com',
-			'www.tushyraw.com',
-			'www.deeper.com',
-			'www.slayed.com',
-			'www.milfy.com',
-			'sthw-trailer-vixen.ssl-cdn.com',
-			'sthw-trailer-tushy.ssl-cdn.com',
-			'sthw-trailer-tushyraw.ssl-cdn.com',
-			'sthw-trailer-blacked.ssl-cdn.com',
-			'sthw-trailer-blackedraw.ssl-cdn.com',
-			'sthw-trailer-deeper.ssl-cdn.com',
-			'sthw-trailer-milfy.ssl-cdn.com',
-			'streamhw-trailer-vixen.ssl-cdn.com',
-			'streamhw-trailer-tushy.ssl-cdn.com',
-			'streamhw-trailer-tushyraw.ssl-cdn.com',
-			'streamhw-trailer-blacked.ssl-cdn.com',
-			'streamhw-trailer-blackedraw.ssl-cdn.com',
-			'streamhw-trailer-deeper.ssl-cdn.com',
-			'streamhw-trailer-milfy.ssl-cdn.com',
-			'cdn.vixen.com',
-			'cdn.tushy.com',
-			'cdn.blacked.com',
-			'cdn.deeper.com',
-			'cdn.blackedraw.com',
-			'cdn.tushyraw.com',
-			'cdn.slayed.com',
-			'cdn.milfy.com',
-			'www.vogov.com',
-			'www.vogov.com',
-			'www.nubiles.net',
-			'www.brattysis.com',
-			'www.deeplush.com',
-			'www.detentiongirls.com',
-			'www.daddyslilangel.com',
-			'www.myfamilypies.com',
-			'www.bountyhunterporn.com',
-			'www.anilos.com',
-			'www.thatsitcomshow.com',
-			'www.nubileset.com',
-			'www.nubilesunscripted.com',
-			'www.nubilefilms.com',
-			'www.badteenspunished.com',
-			'www.cumlouder.com',
-			'im0.imgcm.com',
-		],
-	},
-	bypass: {
-		browser: {
-			enable: false,
-			hostnames: [ // these can run in the same browser session
-				'www.kink.com',
-				'store2.psmcdn.net', // Team Skeet API
-			],
-		},
-		cloudflare: {
-			enable: false,
-			auto: true, // try bypass when CF challenge is detected
-			path: 'http://localhost:8191/v1',
-			sharedHostnames: [ // these can run in the same browser session
-				'store2.psmcdn.net', // Team Skeet API
-			],
-			independentHostnames: [], // these must run in their own browser session
-		},
-	},
-	limits: {
-		default: {
-			interval: 50,
-			concurrency: 20,
-		},
-		'www.deeper.com': {
-			enable: false, // can be omitted to enable
-			interval: 1000,
-			concurrency: 1,
-		},
-		'westcoastproductions.com': {
-			interval: 100,
-			concurrency: 1,
-		},
-		'images.mylfcdn.net': {
-			interval: 50,
-			concurrency: 1,
-		},
-	},
-	fetchAfter: [1, 'week'],
-	missingDateLimit: 3,
-	memorySampling: {
-		enabled: false,
-		sampleDuration: 300000, // 5 minutes
-		snapshotIntervals: [],
-	},
 	media: {
 		path: './media',
-		transferSources: {
+		assetPath: '/img',
-			local: 'http://localhost:5000/media',
+		mediaPath: '/media',
-			s3: 'https://cdn.traxxx.me',
+		s3Path: 'https://s3.wasabisys.com',
-		},
-		maxSize: 1000,
-		quality: 80,
-		thumbnailSize: 320, // width for 16:9 will be exactly 576px
-		thumbnailQuality: 100,
-		lazySize: 90,
-		lazyQuality: 90,
-		trailerQuality: [540, 720, 480, 360, 960, 1080, 320, 1440, 1600, 1920, 2160, 270, 240, 180],
-		limit: 25, // max number of photos per release
-		attempts: 2,
-		fetchStreams: true,
-		streamConcurrency: 2, // max number of video streams (m3u8 etc.) to fetch and process at once
 	},
-	titleSlugLength: 50,
 };

package-lock.json

@@ -46,6 +46,7 @@
         "redis": "^4.6.12",
         "sharp": "^0.32.6",
         "sirv": "^2.0.3",
+        "video.js": "^8.10.0",
         "vike": "^0.4.150",
         "vite": "^4.5.1",
         "vue": "^3.3.10",
@@ -3490,6 +3491,68 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@videojs/http-streaming": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.10.0.tgz",
+      "integrity": "sha512-Lf1rmhTalV4Gw0bJqHmH4lfk/FlepUDs9smuMtorblAYnqDlE2tbUOb7sBXVYoXGdbWbdTW8jH2cnS+6HWYJ4Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "4.0.0",
+        "aes-decrypter": "4.0.1",
+        "global": "^4.4.0",
+        "m3u8-parser": "^7.1.0",
+        "mpd-parser": "^1.3.0",
+        "mux.js": "7.0.2",
+        "video.js": "^7 || ^8"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "video.js": "^7 || ^8"
+      }
+    },
+    "node_modules/@videojs/http-streaming/node_modules/mux.js": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.2.tgz",
+      "integrity": "sha512-CM6+QuyDbc0qW1OfEjkd2+jVKzTXF+z5VOKH0eZxtZtnrG/ilkW/U7l7IXGtBNLASF9sKZMcK1u669cq50Qq0A==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/vhs-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
+      "integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.5.2.tgz",
@@ -3722,6 +3785,14 @@
         }
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -3754,6 +3825,31 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/aes-decrypter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
+      "integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
+    "node_modules/aes-decrypter/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -4732,6 +4828,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -6086,6 +6187,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -6292,6 +6402,11 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -6490,6 +6605,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -6762,6 +6882,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -6935,6 +7060,30 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/m3u8-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
+      "integrity": "sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      }
+    },
+    "node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
@@ -7101,6 +7250,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -7147,6 +7304,20 @@
         "node": "*"
       }
     },
+    "node_modules/mpd-parser": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.0.tgz",
+      "integrity": "sha512-WgeIwxAqkmb9uTn4ClicXpEQYCEduDqRKfmUdp4X8vmghKfBNXZLYpREn9eqrDx/Tf5LhzRcJLSpi4ohfV742Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "mpd-to-m3u8-json": "bin/parse.js"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -7160,6 +7331,22 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/mux.js": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.3.tgz",
+      "integrity": "sha512-gzlzJVEGFYPtl2vvEiJneSWAWD4nfYRHD5XgxmB2gWvXraMPOYk+sxfvexmNfjQUFpmk6hwLR5C6iSFmuwCHdQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/mysql": {
       "version": "2.18.1",
       "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz",
@@ -7702,6 +7889,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      },
+      "bin": {
+        "pkcs7": "bin/cli.js"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
@@ -7908,6 +8106,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -8279,6 +8485,14 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "dependencies": {
+        "individual": "^2.0.0"
+      }
+    },
     "node_modules/safe-array-concat": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
@@ -8302,6 +8516,14 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "dependencies": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
@@ -9355,6 +9577,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -9376,6 +9603,55 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/video.js": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.10.0.tgz",
+      "integrity": "sha512-7UeG/flj/pp8tNGW8WKPP1VJb3x2FgLoqUWzpZqkoq5YIyf6MNzmIrKtxprl438T5RVkcj+OzV8IX4jYSAn4Sw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "3.10.0",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "^4.0.1",
+        "global": "4.4.0",
+        "keycode": "2.2.0",
+        "m3u8-parser": "^7.1.0",
+        "mpd-parser": "^1.2.2",
+        "mux.js": "^7.0.1",
+        "safe-json-parse": "4.0.0",
+        "videojs-contrib-quality-levels": "4.0.0",
+        "videojs-font": "4.1.0",
+        "videojs-vtt.js": "0.15.5"
+      }
+    },
+    "node_modules/videojs-contrib-quality-levels": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.0.0.tgz",
+      "integrity": "sha512-u5rmd8BjLwANp7XwuQ0Q/me34bMe6zg9PQdHfTS7aXgiVRbNTb4djcmfG7aeSrkpZjg+XCLezFNenlJaCjBHKw==",
+      "dependencies": {
+        "global": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "video.js": "^8"
+      }
+    },
+    "node_modules/videojs-font": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz",
+      "integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w=="
+    },
+    "node_modules/videojs-vtt.js": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    },
     "node_modules/vike": {
       "version": "0.4.150",
       "resolved": "https://registry.npmjs.org/vike/-/vike-0.4.150.tgz",
@@ -12419,6 +12695,52 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "@videojs/http-streaming": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.10.0.tgz",
+      "integrity": "sha512-Lf1rmhTalV4Gw0bJqHmH4lfk/FlepUDs9smuMtorblAYnqDlE2tbUOb7sBXVYoXGdbWbdTW8jH2cnS+6HWYJ4Q==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "4.0.0",
+        "aes-decrypter": "4.0.1",
+        "global": "^4.4.0",
+        "m3u8-parser": "^7.1.0",
+        "mpd-parser": "^1.3.0",
+        "mux.js": "7.0.2",
+        "video.js": "^7 || ^8"
+      },
+      "dependencies": {
+        "mux.js": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.2.tgz",
+          "integrity": "sha512-CM6+QuyDbc0qW1OfEjkd2+jVKzTXF+z5VOKH0eZxtZtnrG/ilkW/U7l7IXGtBNLASF9sKZMcK1u669cq50Qq0A==",
+          "requires": {
+            "@babel/runtime": "^7.11.2",
+            "global": "^4.4.0"
+          }
+        }
+      }
+    },
+    "@videojs/vhs-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
+      "integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      }
+    },
+    "@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "@vitejs/plugin-vue": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.5.2.tgz",
@@ -12582,6 +12904,11 @@
         }
       }
     },
+    "@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
+    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -12603,6 +12930,29 @@
       "dev": true,
       "requires": {}
     },
+    "aes-decrypter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
+      "integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      },
+      "dependencies": {
+        "@videojs/vhs-utils": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+          "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "global": "^4.4.0",
+            "url-toolkit": "^2.2.1"
+          }
+        }
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -13298,6 +13648,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -14326,6 +14681,15 @@
         "is-glob": "^4.0.1"
       }
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -14457,6 +14821,11 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -14601,6 +14970,11 @@
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -14787,6 +15161,11 @@
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
+    },
     "keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -14915,6 +15294,28 @@
         "yallist": "^3.0.2"
       }
     },
+    "m3u8-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
+      "integrity": "sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      },
+      "dependencies": {
+        "@videojs/vhs-utils": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+          "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "global": "^4.4.0",
+            "url-toolkit": "^2.2.1"
+          }
+        }
+      }
+    },
     "magic-string": {
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
@@ -15035,6 +15436,14 @@
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
       "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -15069,6 +15478,17 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
       "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
     },
+    "mpd-parser": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.0.tgz",
+      "integrity": "sha512-WgeIwxAqkmb9uTn4ClicXpEQYCEduDqRKfmUdp4X8vmghKfBNXZLYpREn9eqrDx/Tf5LhzRcJLSpi4ohfV742Q==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      }
+    },
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -15079,6 +15499,15 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "mux.js": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.3.tgz",
+      "integrity": "sha512-gzlzJVEGFYPtl2vvEiJneSWAWD4nfYRHD5XgxmB2gWvXraMPOYk+sxfvexmNfjQUFpmk6hwLR5C6iSFmuwCHdQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      }
+    },
     "mysql": {
       "version": "2.18.1",
       "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz",
@@ -15483,6 +15912,14 @@
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
       "dev": true
     },
+    "pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "postcss": {
       "version": "8.4.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
@@ -15605,6 +16042,11 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -15865,6 +16307,14 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "safe-array-concat": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
@@ -15882,6 +16332,14 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safe-regex-test": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
@@ -16629,6 +17087,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -16644,6 +17107,48 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
+    "video.js": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.10.0.tgz",
+      "integrity": "sha512-7UeG/flj/pp8tNGW8WKPP1VJb3x2FgLoqUWzpZqkoq5YIyf6MNzmIrKtxprl438T5RVkcj+OzV8IX4jYSAn4Sw==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "3.10.0",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "^4.0.1",
+        "global": "4.4.0",
+        "keycode": "2.2.0",
+        "m3u8-parser": "^7.1.0",
+        "mpd-parser": "^1.2.2",
+        "mux.js": "^7.0.1",
+        "safe-json-parse": "4.0.0",
+        "videojs-contrib-quality-levels": "4.0.0",
+        "videojs-font": "4.1.0",
+        "videojs-vtt.js": "0.15.5"
+      }
+    },
+    "videojs-contrib-quality-levels": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.0.0.tgz",
+      "integrity": "sha512-u5rmd8BjLwANp7XwuQ0Q/me34bMe6zg9PQdHfTS7aXgiVRbNTb4djcmfG7aeSrkpZjg+XCLezFNenlJaCjBHKw==",
+      "requires": {
+        "global": "^4.4.0"
+      }
+    },
+    "videojs-font": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz",
+      "integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w=="
+    },
+    "videojs-vtt.js": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vike": {
       "version": "0.4.150",
       "resolved": "https://registry.npmjs.org/vike/-/vike-0.4.150.tgz",

package.json

@@ -46,6 +46,7 @@
     "redis": "^4.6.12",
     "sharp": "^0.32.6",
     "sirv": "^2.0.3",
+    "video.js": "^8.10.0",
     "vike": "^0.4.150",
     "vite": "^4.5.1",
     "vue": "^3.3.10",

pages/scene/+Page.vue

@@ -6,16 +6,32 @@
 				:style="{ 'background-image': scene.poster.isS3 ? `url('https://cdndev.traxxx.me/${scene.poster.thumbnail}')` : `url('/media/${scene.poster.thumbnail}')` }"
 			>
 				<div class="banner">
-					<div class="poster-container">
+					<div
+						v-if="scene.trailer"
+						class="trailer"
+					>
+						<Player
+							:video="scene.trailer"
+							:poster="poster"
+							class="item"
+							:class="{ playing }"
+							@play="playing = true; paused = false;"
+							@pause="playing = false; paused = true;"
+						/>
+					</div>
+
+					<div
+						v-else-if="scene.poster"
+						class="poster-container"
+					>
 						<a
-							:href="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.path}` : `/media/${scene.poster.path}`"
+							:href="getPath(scene.poster)"
 							target="_blank"
 							class="poster-link"
 						>
 							<img
-								v-if="scene.poster"
+								:src="getPath(scene.poster, 'thumbnail')"
-								:src="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.thumbnail}` : `/media/${scene.poster.thumbnail}`"
+								:style="{ 'background-image': getPath(scene.poster, 'lazy') }"
-								:style="{ 'background-image': scene.poster.isS3 ? `url(https://cdndev.traxxx.me/${scene.poster.lazy})` : `url(/media/${scene.poster.lazy})` }"
 								:width="scene.poster.width"
 								:height="scene.poster.height"
 								class="poster"
@@ -34,13 +50,13 @@
 							class="photo-container"
 						>
 							<a
-								:href="photo.isS3 ? `https://cdndev.traxxx.me/${photo.path}` : `/media/${photo.path}`"
+								:href="getPath(photo)"
 								target="_blank"
 								class="photo-link"
 							>
 								<img
-									:src="photo.isS3 ? `https://cdndev.traxxx.me/${photo.thumbnail}` : `/media/${photo.thumbnail}`"
+									:src="getPath(photo, 'thumbnail')"
-									:style="{ 'background-image': photo.isS3 ? `url(https://cdndev.traxxx.me/${photo.lazy})` : `url(/media/${photo.lazy})` }"
+									:style="{ 'background-image': getPath(photo, 'lazy') }"
 									:width="photo.width"
 									:height="photo.height"
 									class="photo"
@@ -65,7 +81,10 @@
 						>
 					</Link>
 
-					<template v-if="!scene.channel.isIndependent && scene.network">
+					<span
+						v-if="!scene.channel.isIndependent && scene.network"
+						class="network-container"
+					>
 						by
 						<Link
 							:href="`/${scene.network.type}/${scene.network.slug}`"
@@ -77,21 +96,32 @@
 								class="network-logo entity-logo"
 							>
 						</Link>
-					</template>
+					</span>
 				</div>
 
 				<time
 					:datetime="scene.effectiveDate.toISOString()"
-					class="date"
+					class="date ellipsis"
 				>{{ formatDate(scene.effectiveDate, 'MMMM d, y') }}</time>
 			</div>
 
 			<div class="header">
 				<h2
+					v-if="scene.title"
 					:title="scene.title"
 					class="title"
 				>{{ scene.title }}</h2>
 
+				<h2
+					v-else-if="scene.actors.length > 0"
+					class="title notitle"
+				>Scene featuring {{ scene.actors.map((actor) => actor.name).join(', ') }}</h2>
+
+				<h2
+					v-else
+					class="title notitle"
+				>No title</h2>
+
 				<div class="actions">
 					<div
 						v-if="user"
@@ -178,6 +208,14 @@
 						<h3 class="heading">Director</h3>
 						{{ scene.directors.map((director) => director.name).join(', ') }}
 					</div>
+
+					<div
+						v-if="scene.shootId"
+						class="detail"
+					>
+						<h3 class="heading">Shoot</h3>
+						{{ scene.shootId }}
+					</div>
 				</div>
 
 				<div class="section details">
@@ -204,19 +242,40 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+import { ref, computed, inject } from 'vue';
 
 import { post, del } from '#/src/api.js';
 import { formatDate, formatDuration } from '#/utils/format.js';
+import getPath from '#/src/get-path.js';
 
-import Icon from '../../components/icon/icon.vue';
+import Icon from '#/components/icon/icon.vue';
-import ActorTile from '../../components/actors/tile.vue';
+import ActorTile from '#/components/actors/tile.vue';
+import Player from '#/components/video/player.vue';
 
 const { pageProps, user } = inject('pageContext');
 const { scene } = pageProps;
 
 const favorited = ref(scene.stashes.some((sceneStash) => sceneStash.primary));
 
+const playing = ref(false);
+const paused = ref(false);
+
+const poster = computed(() => {
+	if (scene.poster) {
+		return getPath(scene.poster, 'thumbnail');
+	}
+
+	if (scene.covers?.length > 0) {
+		return getPath(scene.covers[0], 'thumbnail');
+	}
+
+	if (scene.photos?.length > 0) {
+		return getPath(scene.photos[0], 'thumbnail');
+	}
+
+	return null;
+});
+
 async function stash() {
 	try {
 		favorited.value = true;
@@ -247,6 +306,7 @@ async function unstash() {
 .content {
 	width: 100%;
 	max-width: 1200px;
+	margin: 0 .5rem;
 	display: flex;
 	flex-direction: column;
 }
@@ -287,6 +347,28 @@ async function unstash() {
 	box-shadow: 0 0 3px var(--shadow-weak-10);
 }
 
+.trailer {
+	max-width: 100%;
+	width: calc(21/9 * 16rem);
+	margin-right: .5rem;
+	flex-shrink: 0;
+	aspect-ratio: 16/9;
+}
+
+:deep(.player) {
+	width: 100%;
+	height: 100%;
+	flex-shrink: 0;
+
+	&:not(.playing) {
+		&[poster],
+		.vjs-tech[poster],
+		.vjs-poster img {
+			object-fit: cover;
+		}
+	}
+}
+
 .album {
 	height: auto;
 	flex-grow: 1;
@@ -346,7 +428,14 @@ async function unstash() {
 }
 
 .entity-logo {
-	height: 1.5rem;
+	width: 10rem;
+	max-height: 100%;
+	object-fit: contain;
+}
+
+.network-container {
+	display: flex;
+	align-items: center;
 }
 
 .date {
@@ -356,23 +445,32 @@ async function unstash() {
 
 .info,
 .header {
-	border: solid 1px var(--shadow-weak-40);
 	border-top: none;
 	border-bottom: none;
 }
 
+.info {
+	padding: 0;
+}
+
 .header {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: space-between;
-	padding: 1rem 1rem 0.5rem 1rem;
+	padding: 1rem .5rem .5rem .5rem;
 }
 
 .title {
 	margin: 0 .5rem 0 0;
-	white-space: nowrap;
+	line-height: 1.25;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
 	overflow: hidden;
-	text-overflow: ellipsis;
+}
+
+.notitle {
+	color: var(--grey-dark-10);
 }
 
 .actions {
@@ -390,6 +488,9 @@ async function unstash() {
 	.button {
 		flex-shrink: 0;
 		padding: .75rem;
+	}
+
+	.button:not(:last-child) {
 		margin-right: .5rem;
 	}
 }
@@ -418,10 +519,6 @@ async function unstash() {
 	color: var(--text-light);
 }
 
-.info {
-	padding: 0 1rem;
-}
-
 .actors,
 .tags {
 	margin-bottom: 1rem;
@@ -475,19 +572,62 @@ async function unstash() {
 	margin-left: .25rem;
 }
 
-@media(--small-10) {
+@media(--small) {
+	.content {
+		margin: 0;
+	}
+
+	.info {
+		margin: 0 .5rem;
+	}
+
 	.banner-container {
 		border-radius: 0;
 		margin-top: 0;
 	}
 
+	.network-container {
+		display: none;
+	}
+
+	.header {
+		flex-direction: column-reverse;
+	}
+
+	.actions {
+		width: 100%;
+		justify-content: space-between;
+		margin-bottom: 1.5rem;
+	}
+
+	.title {
+		width: 100%;
+		margin-left: .5rem;
+		white-space: wrap;
+	}
+
+	.meta {
+		border-radius: 0;
+	}
+
+	.entity-logo {
+		width: 7.5rem;
+	}
+}
+
+@media(--small-10) {
 	.banner {
 		justify-content: center;
+		border-radius: 0;
 	}
 
 	.poster-container {
-		padding: 0;
+		margin: 0;
-		border-radius: 0;
+		flex-shrink: 1;
+	}
+
+	.trailer {
+		margin: 0;
 		flex-shrink: 1;
 	}
 
@@ -506,27 +646,15 @@ async function unstash() {
 	.info {
 		padding: 0 .5rem;
 	}
+
+	.actors {
+		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+	}
 }
 
-@media (--small) {
+@media(--small-60) {
-	.header {
+	.actors {
-		flex-direction: column-reverse;
+		grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
-	}
-
-	.actions {
-		width: 100%;
-		justify-content: space-between;
-		margin-bottom: 1.5rem;
-	}
-
-	.title {
-		width: 100%;
-		margin-left: 1rem;
-		white-space: wrap;
-	}
-
-	.meta {
-		border-radius: 0;
 	}
 }
 </style>

pages/stashes/@username/@stashSlug/actors/+Page.vue

@@ -6,5 +6,5 @@
 
 <script setup>
 import Stash from '#/components/stashes/stash.vue';
-import Actors from '#/components/actors/actors.vue';
+import Actors from '#/components/actor/actors.vue';
 </script>

pages/tags/+route.js

@@ -0,0 +1 @@
+export default '/cats';

renderer/container.vue

@@ -95,18 +95,6 @@ onMounted(() => {
 </script>
 
 <style>
-.scroller {
-	height: 30rem;
-	overflow-y: auto;
-}
-
-.item {
-	height: 32px;
-	padding: 0 12px;
-	display: flex;
-	align-items: center;
-}
-
 .slide-enter-active,
 .slide-leave-active {
 	&.sidebar-container {

renderer/usePageContext.js

@@ -4,12 +4,20 @@
 import { inject } from 'vue';
 
 const key = Symbol(); // eslint-disable-line symbol-description
+let localPageContext = null; // eslint-disable-line import/no-mutable-exports
 
 export function usePageContext() {
 	const pageContext = inject(key);
 	return pageContext;
 }
 
+export function getPageContext() {
+	return localPageContext;
+}
+
 export function setPageContext(app, pageContext) {
+	localPageContext = pageContext;
 	app.provide(key, pageContext);
 }
+
+export { localPageContext as pageContext };

src/actors.js

@@ -71,7 +71,7 @@ export function sortActorsByGender(actors, context = {}) {
 	}
 
 	const alphaActors = actors.sort((actorA, actorB) => actorA.name.localeCompare(actorB.name, 'en'));
-	const genderActors = ['transsexual', 'female', 'male', undefined, null, 'male'].flatMap((gender) => alphaActors.filter((actor) => actor.gender === gender));
+	const genderActors = ['transsexual', 'female', undefined, null, 'male'].flatMap((gender) => alphaActors.filter((actor) => actor.gender === gender));
 
 	const titleSlug = slugify(context.title);
 	const titleActors = titleSlug ? genderActors.sort((actorA, actorB) => {
@@ -344,7 +344,7 @@ async function queryManticoreSql(filters, options, _reqUser) {
 						actors.gender as gender,
 						actors.country as country,
 						actors.height as height,
-						actors.weight as weight,
+						actors.mass as mass,
 						actors.cup as cup,
 						actors.natural_boobs as natural_boobs,
 						actors.date_of_birth as date_of_birth,
@@ -352,16 +352,15 @@ async function queryManticoreSql(filters, options, _reqUser) {
 						actors.scenes as scenes,
 						actors.stashed as stashed,
 						created_at as stashed_at,
-						if(actors.date_of_birth, floor((now() - actors.date_of_birth) / 31556952), 0) as age
+						if(actors.date_of_birth, floor((now() - actors.date_of_birth) / 31556952), 0) as age,
+						weight() as _score
 					`));
-					// weight() as _score
 
 					builder
 						.innerJoin('actors', 'actors.id', 'actors_stashed.actor_id')
 						.where('stash_id', filters.stashId);
 				} else {
-					// builder.select(knex.raw('*, weight() as _score'));
+					builder.select(knex.raw('*, weight() as _score'));
-					builder.select(knex.raw('*'));
 				}
 
 				if (filters.query) {
@@ -374,7 +373,7 @@ async function queryManticoreSql(filters, options, _reqUser) {
 					}
 				});
 
-				['age', 'height', 'weight'].forEach((attribute) => {
+				['age', 'height'].forEach((attribute) => {
 					if (filters[attribute]) {
 						builder
 							.where(attribute, '>=', filters[attribute][0])
@@ -382,6 +381,13 @@ async function queryManticoreSql(filters, options, _reqUser) {
 					}
 				});
 
+				if (filters.weight) {
+					// weight is a reserved keyword in manticore
+					builder
+						.where('mass', '>=', filters.weight[0])
+						.where('mass', '<=', filters.weight[1]);
+				}
+
 				if (filters.dateOfBirth && filters.dobType === 'dateOfBirth') {
 					builder.where('date_of_birth', Math.floor(filters.dateOfBirth.getTime() / 1000));
 				}
@@ -420,6 +426,11 @@ async function queryManticoreSql(filters, options, _reqUser) {
 						{ column: 'actors.scenes', order: options.order[1] },
 						{ column: 'actors.slug', order: 'asc' },
 					]);
+				} else if (options.order?.[0] === 'results') {
+					builder.orderBy([
+						{ column: 'actors._score', order: options.order[1] },
+						{ column: 'actors.slug', order: 'asc' },
+					]);
 				} else if (options.order?.[0] === 'stashed' && filters.stashId) {
 					builder.orderBy([
 						{ column: 'stashed_at', order: options.order[1] },

src/get-path.js

@@ -0,0 +1,49 @@
+// import config from 'config';
+import { pageContext } from '../renderer/usePageContext.js';
+
+function getBasePath(media, type, options) {
+	/*
+	if (store.state.ui.sfw) {
+		return config.media.assetPath;
+	}
+	*/
+
+	if (media.isS3) {
+		return options.s3Path;
+	}
+
+	if (options?.local) {
+		return options.assetPath;
+	}
+
+	return options.mediaPath;
+}
+
+function getFilename(media, type, options) {
+	/*
+	if (store.state.ui.sfw && type && !options?.original) {
+		return media.sfw[type];
+	}
+
+	if (store.state.ui.sfw) {
+		return media.sfw.path;
+	}
+	*/
+
+	if (type && !options?.original) {
+		return media[type];
+	}
+
+	return media.path;
+}
+
+export default function getPath(media, type, options) {
+	if (!media) {
+		return null;
+	}
+
+	const path = getBasePath(media, type, { ...pageContext.env.media, ...options });
+	const filename = getFilename(media, type, { ...pageContext.env.media, ...options });
+
+	return `${path}/${filename}`;
+}

src/scenes.js

@@ -1,7 +1,7 @@
 import config from 'config';
 import util from 'util'; /* eslint-disable-line no-unused-vars */
 
-import { knexOwner as knex, knexManticore } from './knex.js';
+import { knexQuery as knex, knexOwner, knexManticore } from './knex.js';
 import { utilsApi } from './manticore.js';
 import { HttpError } from './errors.js';
 import { fetchActorsById, curateActor, sortActorsByGender } from './actors.js';
@@ -20,6 +20,7 @@ function curateMedia(media) {
 		path: media.path,
 		thumbnail: media.thumbnail,
 		lazy: media.lazy,
+		hash: media.hash,
 		isS3: media.is_s3,
 		width: media.width,
 		height: media.height,
@@ -41,6 +42,7 @@ function curateScene(rawScene, assets) {
 		effectiveDate: rawScene.effective_date,
 		description: rawScene.description,
 		duration: rawScene.duration,
+		shootId: rawScene.shoot_id,
 		channel: {
 			id: assets.channel.id,
 			slug: assets.channel.slug,
@@ -71,6 +73,8 @@ function curateScene(rawScene, assets) {
 			name: tag.name,
 		})),
 		poster: curateMedia(assets.poster),
+		trailer: curateMedia(assets.trailer),
+		teaser: curateMedia(assets.teaser),
 		photos: assets.photos.map((photo) => curateMedia(photo)),
 		stashes: assets.stashes?.map((stash) => curateStash(stash)) || [],
 		createdBatchId: rawScene.created_batch_id,
@@ -88,6 +92,8 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
 		tags,
 		posters,
 		photos,
+		trailers,
+		teasers,
 		stashes,
 		lastBatch: { id: lastBatchId },
 	} = await promiseProps({
@@ -119,16 +125,40 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
 		posters: knex('releases_posters')
 			.whereIn('release_id', sceneIds)
 			.leftJoin('media', 'media.id', 'releases_posters.media_id'),
-		photos: knex('releases_photos')
+		photos: knex.transaction(async (trx) => {
-			.whereIn('release_id', sceneIds)
+			if (reqUser) {
-			.leftJoin('media', 'media.id', 'releases_photos.media_id'),
+				await trx.select(knex.raw('set_config(\'user.id\', :userId, true)', { userId: reqUser.id }));
+			}
+
+			return trx('releases_photos')
+				.whereIn('release_id', sceneIds)
+				.leftJoin('media', 'media.id', 'releases_photos.media_id');
+		}),
+		trailers: knex.transaction(async (trx) => {
+			if (reqUser) {
+				await trx.select(knex.raw('set_config(\'user.id\', :userId, true)', { userId: reqUser.id }));
+			}
+
+			return trx('releases_trailers')
+				.whereIn('release_id', sceneIds)
+				.leftJoin('media', 'media.id', 'releases_trailers.media_id');
+		}),
+		teasers: knex.transaction(async (trx) => {
+			if (reqUser) {
+				await trx.select(knex.raw('set_config(\'user.id\', :userId, true)', { userId: reqUser.id }));
+			}
+
+			return trx('releases_teasers')
+				.whereIn('release_id', sceneIds)
+				.leftJoin('media', 'media.id', 'releases_teasers.media_id');
+		}),
 		lastBatch: knex('batches')
 			.select('id')
 			.where('showcased', true)
 			.orderBy('created_at', 'desc')
 			.first(),
 		stashes: reqUser
-			? knex('stashes_scenes')
+			? knexOwner('stashes_scenes')
 				.leftJoin('stashes', 'stashes.id', 'stashes_scenes.stash_id')
 				.where('stashes.user_id', reqUser.id)
 				.whereIn('stashes_scenes.scene_id', sceneIds)
@@ -155,9 +185,13 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
 		const sceneTags = tags.filter((tag) => tag.release_id === sceneId);
 		const scenePoster = posters.find((poster) => poster.release_id === sceneId);
 		const scenePhotos = photos.filter((photo) => photo.release_id === sceneId);
+		const sceneTrailers = trailers.find((trailer) => trailer.release_id === sceneId);
+		const sceneTeasers = teasers.find((teaser) => teaser.release_id === sceneId);
 		const sceneStashes = stashes.filter((stash) => stash.scene_id === sceneId);
 		const sceneActorStashes = sceneActors.map((actor) => actorStashes.find((stash) => stash.actor_id === actor.id)).filter(Boolean);
 
+		console.log(sceneActors);
+
 		return curateScene(scene, {
 			channel: sceneChannel,
 			actors: sceneActors,
@@ -165,6 +199,8 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
 			tags: sceneTags,
 			poster: scenePoster,
 			photos: scenePhotos,
+			trailer: sceneTrailers,
+			teaser: sceneTeasers,
 			stashes: sceneStashes,
 			actorStashes: sceneActorStashes,
 			lastBatchId,

src/web/server.js

@@ -137,6 +137,7 @@ export default async function initServer() {
 				allowSignup: config.auth.signup,
 				maxMatches: config.database.manticore.maxMatches,
 				maxAggregateSize: config.database.manticore.maxAggregateSize,
+				media: config.media,
 			},
 		};
 

vite.config.js

@@ -19,7 +19,7 @@ export default {
 			redirects: {
 				'/': '/updates',
 			},
-			trailingSlash: true, // for some reason /tags breaks without this
+			trailingSlash: false, // for some reason /tags breaks without this, ERR_TOO_MANY_REDIRECTS
 		}),
 	],
 	css: {