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"
-					@expand="(state) => photosExpanded = state"
+					:expandable="false"
+					@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 {