Fixed Vixen trailer scraping. Using album instead of expand for actor photos.

assets/components/actors/actor.vue

@@ -315,12 +315,20 @@
 				/>
 			</div>
 
+			<Album
+				v-if="showAlbum"
+				:items="actor.photos"
+				:title="actor.name"
+				class="portrait"
+				@close="showAlbum = false"
+			/>
+
 			<div class="actor-content">
 				<Scroll
 					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
 					v-slot="scroll"
-					:expanded="photosExpanded"
+					:expandable="false"
-					@expand="(state) => photosExpanded = state"
+					@album="showAlbum = true"
 				>
 					<Photos
 						:actor="actor"
@@ -329,6 +337,12 @@
 					/>
 				</Scroll>
 
+				<button
+					v-if="actor.photos && actor.photos.length > 2"
+					class="album-toggle"
+					@click="showAlbum = true"
+				><Icon icon="grid3" />View album</button>
+
 				<FilterBar
 					ref="filter"
 					:fetch-releases="fetchActor"
@@ -358,6 +372,7 @@ import Pagination from '../pagination/pagination.vue';
 import FilterBar from '../filters/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 import Photos from './photos.vue';
+import Album from '../album/album.vue';
 import Expand from '../expand/expand.vue';
 import Scroll from '../scroll/scroll.vue';
 import Gender from './gender.vue';
@@ -394,6 +409,7 @@ async function mounted() {
 
 export default {
 	components: {
+		Album,
 		FilterBar,
 		Pagination,
 		Photos,
@@ -408,6 +424,7 @@ export default {
 			actor: null,
 			releases: null,
 			totalCount: 0,
+			showAlbum: false,
 			limit: 20,
 			pageTitle: null,
 			bioExpanded: false,
@@ -694,6 +711,30 @@ export default {
 	border-bottom: solid 1px var(--shadow-hint);
 }
 
+.album-toggle {
+	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);
+	background: var(--background-dim);
+	font-size: 1rem;
+	font-weight: bold;
+
+	.icon {
+		fill: var(--shadow);
+		margin: -.1rem .5rem 0 0;
+	}
+
+	&:hover {
+		background: var(--shadow-hint);
+		cursor: pointer;
+	}
+}
+
 @media(max-width: $breakpoint4) {
     .descriptions-container {
         display: none;

assets/components/album/album.vue

@@ -122,6 +122,18 @@ export default {
 	margin: 0 0 1rem 0;
 }
 
+@media(max-width: $breakpoint-small) {
+	.album-items.portrait {
+		grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+	}
+}
+
+@media(max-width: $breakpoint-micro) {
+	.album-items {
+		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	}
+}
+
 @media(max-width: $breakpoint-pico) {
 	.album-items {
 		grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));

assets/components/scroll/scroll.vue

@@ -111,6 +111,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		items: {
+			type: Array,
+			default: null,
+		},
 	},
 	data() {
 		return {

src/scrapers/vixen.js

@@ -42,7 +42,8 @@ function getAvatarFallbacks(avatar) {
 		.flat();
 }
 
-async function getTrailer(scene, site, url) {
+/*
+async function getTrailerLegacy(scene, site, url) {
 	const qualities = [360, 480, 720, 1080, 2160];
 
 	const tokenRes = await http.post(`${site.url}/api/__record_tknreq`, {
@@ -72,6 +73,100 @@ async function getTrailer(scene, site, url) {
 
 	return null;
 }
+*/
+
+async function getTrailer(scene, channel, url) {
+	const res = await http.post(`${channel.url}/graphql`, {
+		operationName: 'getToken',
+		variables: {
+			videoId: scene.newId,
+			device: 'trailer',
+		},
+		query: `
+			query getToken($videoId: ID!, $device: Device!) {
+				generateVideoToken(input: {videoId: $videoId, device: $device}) {
+					p270 {
+						token
+						cdn
+						__typename
+					}
+					p360 {
+						token
+						cdn
+						__typename
+					}
+					p480 {
+						token
+						cdn
+						__typename
+					}
+					p480l {
+						token
+						cdn
+						__typename
+					}
+					p720 {
+						token
+						cdn
+						__typename
+					}
+					p1080 {
+						token
+						cdn
+						__typename
+					}
+					p2160 {
+						token
+						cdn
+						__typename
+					}
+					hls {
+						token
+						cdn
+						__typename
+					}
+					__typename
+				}
+			}
+		`,
+	}, {
+		headers: {
+			referer: url,
+			origin: channel.url,
+		},
+	});
+
+	if (res.ok && res.body.data?.generateVideoToken) {
+		return [
+			{
+				src: res.body.data.generateVideoToken.p2160?.token,
+				quality: 2160,
+			},
+			{
+				src: res.body.data.generateVideoToken.p1080?.token,
+				quality: 1080,
+			},
+			{
+				src: res.body.data.generateVideoToken.p720?.token,
+				quality: 720,
+			},
+			{
+				src: res.body.data.generateVideoToken.p480?.token,
+				quality: 480,
+			},
+			{
+				src: res.body.data.generateVideoToken.p360?.token,
+				quality: 360,
+			},
+			{
+				src: res.body.data.generateVideoToken.p270?.token,
+				quality: 270,
+			},
+		];
+	}
+
+	return null;
+}
 
 function scrapeAll(scenes, site, origin) {
 	return scenes.map((scene) => {