Added album button and component to scene page.

\

@@ -1,68 +0,0 @@
-'use strict';
-
-const qu = require('../utils/qu');
-const http = require('../utils/http');
-const slugify = require('../utils/slugify');
-
-function scrapeAll(scenes) {
-	return scenes.map((scene) => {
-		const release = {};
-
-		release.entryId = scene.id;
-		release.url = `https://tour.topwebmodels.com/scenes/${scene.id}/${slugify(scene.title)}`;
-
-		release.title = scene.title;
-		release.description = scene.description;
-
-		release.duration = qu.durationToSeconds(scene.videos_duration);
-		release.date = new Date(scene.release_date);
-
-		release.actors = scene.models.map(actor => ({
-			name: actor.name,
-			gender: actor.gender || null,
-			avatar: actor.thumb,
-			url: `https://tour.topwebmodels.com/models/${actor.id}/${slugify(actor.name)}`,
-		}));
-
-		release.stars = scene.rating;
-		release.tags = scene.tags.map(tag => tag.name);
-
-		release.poster = scene.thumb;
-
-		release.channel = slugify(scene.sites[0]?.name, '');
-
-		console.log(scene);
-		console.log(release);
-		return release;
-	});
-}
-
-async function fetchLatest(channel, page) {
-	console.log(channel);
-	const res = await http.get(`https://tour.topwebmodels.com/api/sites/${channel.parameters?.slug || channel.slug}?page=${page}`, {
-		headers: {
-			Referer: 'https://tour.topwebmodels.com',
-			'api-key': channel.parameters?.apiKey || channel.parent?.parameters?.apiKey,
-			'x-Requested-With': 'XMLHttpRequest',
-		},
-	});
-
-	console.log(res.body, res.request);
-
-	if (res.ok) {
-		return scrapeAll(res.body.videos.items);
-	}
-
-	return res.status;
-}
-
-async function fetchScene(url) {
-	const res = await http.get(url, { extract: { runScripts: 'dangerously', } });
-
-	console.log(res.);
-}
-
-module.exports = {
-	fetchLatest,
-	fetchScene,
-};

assets/components/album/album.vue

@@ -0,0 +1,126 @@
+<template>
+	<teleport to="body">
+		<div class="album">
+			<div class="album-header">
+				<h3 class="album-title">{{ title }}</h3>
+
+				<Icon
+					icon="cross2"
+					class="close"
+					@click.native="$emit('close')"
+				/>
+			</div>
+
+			<div class="album">
+				<div
+					v-for="item in items"
+					:key="item.id"
+					class="item-container"
+				>
+					<a
+						:href="`/media/${item.path}`"
+						class="item-link"
+						target="_blank"
+					>
+						<img
+							:src="`/media/${item.thumbnail}`"
+							loading="lazy"
+							class="item image"
+						>
+					</a>
+				</div>
+			</div>
+		</div>
+	</teleport>
+</template>
+
+<script>
+export default {
+	props: {
+		items: {
+			type: Array,
+			default: () => [],
+		},
+		title: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['close'],
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.album {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: var(--shadow-extreme);
+	z-index: 10;
+	overflow-y: auto;
+}
+
+.album-header {
+	display: flex;
+	justify-content: space-between;
+	flex-shrink: 0;
+	overflow: hidden;
+}
+
+.album-title {
+	display: flex;
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+	margin: 0;
+	color: var(--text-light);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.close {
+	width: 2rem;
+	height: 2rem;
+	padding: 1rem;
+	fill: var(--lighten);
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--text-light);
+	}
+}
+
+.album {
+	display: grid;
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+	grid-gap: 1rem;
+	padding: 1rem;
+}
+
+.item-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.item {
+	height: 15rem;
+}
+
+@media(max-width: $breakpoint) {
+	.album {
+		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	}
+}
+</style>

assets/components/releases/release.vue

@@ -3,13 +3,6 @@
 		v-if="release"
 		class="content"
 	>
-		<Expand
-			v-if="expanded"
-			class="expand expand-dark"
-			:expanded="expanded"
-			@expand="(state) => expanded = state"
-		/>
-
 		<Scroll
 			v-slot="slotProps"
 			class="scroll-light"
@@ -17,15 +10,26 @@
 		>
 			<Media
 				:release="release"
-				:class="{ expanded }"
 				@load="slotProps.loaded"
 			/>
 		</Scroll>
 
 		<Details :release="release" />
 
+		<button
+			class="album-toggle"
+			@click="showAlbum = true"
+		><Icon icon="grid3" />View album</button>
+
+		<Album
+			v-if="showAlbum"
+			:items="release.photos"
+			:title="release.title"
+			@close="showAlbum = false"
+		/>
+
 		<div class="info column">
-			<div class="row">
+			<div class="row row-title">
 				<h2
 					v-if="release.title"
 					class="title"
@@ -192,14 +196,14 @@
 </template>
 
 <script>
-import Media from './media.vue';
 import Details from './details.vue';
+import Media from './media.vue';
+import Album from '../album/album.vue';
 import Tags from './tags.vue';
 import Clips from './clips.vue';
 import Actor from '../actors/tile.vue';
 import Releases from './releases.vue';
 import Scroll from '../scroll/scroll.vue';
-import Expand from '../expand/expand.vue';
 
 async function fetchRelease() {
 	if (this.$route.name === 'scene') {
@@ -220,10 +224,10 @@ function pageTitle() {
 export default {
 	components: {
 		Actor,
+		Album,
 		Details,
 		Media,
 		Scroll,
-		Expand,
 		Releases,
 		Clips,
 		Tags,
@@ -231,7 +235,7 @@ export default {
 	data() {
 		return {
 			release: null,
-			expanded: false,
+			showAlbum: false,
 		};
 	},
 	computed: {
@@ -285,8 +289,13 @@ export default {
 	margin: 0 2rem 0 0;
 }
 
+.row-title {
+	display: flex;
+	justify-content: space-between;
+}
+
 .title {
-	display: inline-block;
+	display: inline-flex;
 	margin: 0;
 
 	.icon {
@@ -304,11 +313,28 @@ export default {
 	color: var(--shadow);
 }
 
-.title-shoot {
+.album-toggle {
-	margin: 0 0 0 .5rem;
+	height: fit-content;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: .5rem 1rem;
+	border: none;
+	border-bottom: solid 1px var(--shadow-hint);
 	color: var(--shadow);
-	font-size: .9rem;
+	background: none;
+	font-size: 1rem;
 	font-weight: bold;
+
+	.icon {
+		fill: var(--shadow);
+		margin: -.1rem .5rem 0 0;
+	}
+
+	&:hover {
+		background: var(--shadow-hint);
+		cursor: pointer;
+	}
 }
 
 .description {