Allowing image sources to specify queue method. Using 5s queue for Whale Member to avoid CDN time-outs.

assets/components/expand/expand.vue

@@ -2,13 +2,13 @@
 	<div>
 		<div
 			v-show="expanded"
-			class="expand expanded"
+			class="expand-button expanded noselect"
 			@click="$emit('expand', false)"
 		><Icon icon="arrow-up3" /></div>
 
 		<div
 			v-show="!expanded"
-			class="expand"
+			class="expand-button noselect"
 			@click="$emit('expand', true)"
 		><Icon icon="arrow-down3" /></div>
 	</div>
@@ -26,7 +26,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.expand {
+.expand-button {
 	width: 100%;
 	display: flex;
 	align-items: center;

assets/components/header/filters.vue

@@ -91,6 +91,18 @@ export default {
 		fill: var(--shadow);
 		margin: 0 .5rem 0 0;
 	}
+
+	&:hover {
+		cursor: pointer;
+
+		.applied {
+			color: var(--shadow-strong);
+		}
+
+		.icon {
+			fill: var(--shadow-strong);
+		}
+	}
 }
 
 .applied {

assets/components/releases/media.vue

@@ -1,13 +1,16 @@
 <template>
 	<div class="media">
-		<div class="trailer-container">
+		<div
+			v-if="release.trailer || release.teaser"
+			class="trailer-container"
+		>
 			<video
 				v-if="release.trailer"
 				:src="`/media/${release.trailer.path}`"
 				:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
 				:alt="release.title"
 				:class="{ sfw: sfw && paused }"
-				class="item trailer-video"
+				class="item trailer"
 				controls
 				@playing="playing = true; paused = false;"
 				@pause="playing = false; paused = true;"
@@ -19,7 +22,7 @@
 				:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
 				:alt="release.title"
 				:class="{ sfw: sfw && paused }"
-				class="item trailer-video"
+				class="item trailer"
 				controls
 				@playing="playing = true; paused = false;"
 				@pause="playing = false; paused = true;"
@@ -29,7 +32,7 @@
 				v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
 				:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
 				:alt="release.title"
-				class="item trailer-video"
+				class="item trailer"
 			>
 
 			<a
@@ -242,9 +245,9 @@ export default {
     max-width: 100%;
 }
 
-.trailer-video {
-    width: 100%;
-	height: 100%;
+.trailer {
+	max-width: 100%;
+	max-height: 100%;
 	object-fit: cover;
 
     &.sfw {

assets/components/releases/release.vue

@@ -3,18 +3,21 @@
 		v-if="release"
 		class="content"
 	>
+		<Expand
+			v-if="expanded"
+			class="expand"
+			:expanded="expanded"
+			@expand="(state) => expanded = state"
+		/>
+
 		<Scroll
 			class="scroll-light"
 			:expandable="false"
 		>
-			<Media :release="release" />
-
-			<template v-slot:expanded>
-				<Media
-					:release="release"
-					class="expanded"
-				/>
-			</template>
+			<Media
+				:release="release"
+				:class="{ expanded }"
+			/>
 		</Scroll>
 
 		<div class="details">
@@ -82,6 +85,13 @@
 			</div>
 		</div>
 
+		<Expand
+			v-if="release.photos.length > 0 || release.trailer || release.teaser"
+			class="expand-bottom"
+			:expanded="expanded"
+			@expand="(state) => expanded = state"
+		/>
+
 		<div class="info column">
 			<div class="row title-container">
 				<h2 class="title">{{ release.title }}</h2>
@@ -92,6 +102,24 @@
 				>{{ release.shootId }}</span>
 			</div>
 
+			<div
+				v-if="release.tags.length > 0"
+				class="row"
+			>
+				<ul class="tags nolist">
+					<li
+						v-for="tag in release.tags"
+						:key="`tag-${tag.slug}`"
+						class="tag"
+					>
+						<a
+							:href="`/tag/${tag.slug}`"
+							class="link"
+						>{{ tag.name }}</a>
+					</li>
+				</ul>
+			</div>
+
 			<div class="row associations">
 				<ul
 					v-lazy-container="{ selector: '.lazy' }"
@@ -124,66 +152,48 @@
 				/>
 			</div>
 
-			<span class="row-label">Tags</span>
-
 			<div
-				v-if="release.tags.length > 0"
+				v-if="release.description"
 				class="row"
 			>
-				<ul class="tags nolist">
-					<li
-						v-for="tag in release.tags"
-						:key="`tag-${tag.slug}`"
-						class="tag"
-					>
-						<a
-							:href="`/tag/${tag.slug}`"
-							class="link"
-						>{{ tag.name }}</a>
-					</li>
-				</ul>
-			</div>
+				<span class="row-label">Description</span>
 
-			<span class="row-label">Duration</span>
+				<p class="description">{{ release.description }}</p>
+			</div>
 
 			<div
 				v-if="release.duration"
-				class="row duration"
+				class="row"
 			>
-				<span
-					v-if="release.duration >= 3600"
-					class="duration-segment"
-				>{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</span>
-				<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
-				<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
+				<span class="row-label">Duration</span>
+
+				<div class="duration">
+					<span
+						v-if="release.duration >= 3600"
+						class="duration-segment"
+					>{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</span>
+					<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
+					<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
+				</div>
 			</div>
 
-			<span class="row-label">Description</span>
-
-			<p
-				v-if="release.description"
-				class="row description"
-			>{{ release.description }}</p>
-
-			<span class="row-label">Studio</span>
-
 			<div
 				v-if="release.studio"
 				class="row"
 			>
+				<span class="row-label">Studio</span>
+
 				<router-link
 					:to="`/studio/${release.studio.slug}`"
-					class="link"
+					class="link studio"
 				>{{ release.studio.name }}</router-link>
 			</div>
 
-			<span class="row-label">Shoot #</span>
-
 			<div
 				v-if="release.shootId"
 				class="row"
 			>
-				<Icon icon="clapboard-play" />
+				<span class="row-label">Shoot #</span>
 
 				<a
 					:href="release.url"
@@ -194,8 +204,9 @@
 				>{{ release.shootId }}</a>
 			</div>
 
-			<span class="row-label">Added</span>
 			<span class="row">
+				<span class="row-label">Added</span>
+
 				<a
 					:href="`/added/${formatDate(release.dateAdded, 'YYYY-MM-DD')}`"
 					:title="`Added on ${formatDate(release.dateAdded, 'MMMM D, YYYY')}`"
@@ -217,6 +228,7 @@ import Actor from '../actors/tile.vue';
 import Release from './tile.vue';
 import Releases from './releases.vue';
 import Scroll from '../scroll/scroll.vue';
+import Expand from '../expand/expand.vue';
 
 function pageTitle() {
 	return this.release && this.release.title;
@@ -233,11 +245,12 @@ export default {
 		Release,
 		Releases,
 		Scroll,
+		Expand,
 	},
 	data() {
 		return {
 			release: null,
-			filename: null,
+			expanded: false,
 		};
 	},
 	computed: {
@@ -315,7 +328,6 @@ export default {
 
 .logo-site {
     height: 2.5rem;
-	width: 100%;
     max-width: 15rem;
 	margin: .25rem 0;
     object-fit: contain;
@@ -336,6 +348,10 @@ export default {
     font-size: .8rem;
 }
 
+.expand-bottom {
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
 .info {
     padding: 1rem;
     border-left: solid 1px var(--shadow-hint);
@@ -344,8 +360,6 @@ export default {
 }
 
 .row {
-    display: flex;
-    align-items: center;
     margin: 0 0 1rem 0;
 
     &.associations {
@@ -390,6 +404,7 @@ export default {
 
 .description {
     line-height: 1.5;
+	margin: -.25rem 0 0 0;
 }
 
 .duration {
@@ -408,14 +423,6 @@ export default {
     flex-wrap: wrap;
 }
 
-.filename {
-    width: 100%;
-    padding: .5rem;
-    color: var(--text);
-    border: solid 1px var(--shadow-weak);
-    background: var(--background);
-}
-
 .link {
     display: inline-flex;
     color: var(--link);
@@ -453,6 +460,10 @@ export default {
     .chain {
         display: none;
     }
+
+	.logo-site {
+		width: 100%;
+	}
 }
 
 @media(max-width: $breakpoint) {

assets/components/scroll/scroll.vue

@@ -4,7 +4,7 @@
 			v-if="expanded"
 			:expanded="expanded"
 			class="expand-dark"
-			@expand="(state) => expanded = state"
+			@expand="(state) => $emit('expand', state)"
 		/>
 
 		<div class="scrollable">
@@ -12,7 +12,7 @@
 				v-if="expanded"
 				:expanded="expanded"
 				class="expand-light"
-				@expand="(state) => expanded = state"
+				@expand="(state) => $emit('expand', state)"
 			/>
 
 			<div
@@ -22,12 +22,7 @@
 				@click="scroll('left')"
 			><Icon icon="arrow-left3" /></div>
 
-			<slot v-if="!expanded" />
-
-			<slot
-				v-if="expanded"
-				name="expanded"
-			/>
+			<slot />
 
 			<div
 				v-show="enabled && !expanded"
@@ -41,14 +36,14 @@
 			v-if="expanded || (expandable && scrollable)"
 			:expanded="expanded"
 			class="expand-dark"
-			@expand="(state) => expanded = state"
+			@expand="(state) => $emit('expand', state)"
 		/>
 
 		<Expand
 			v-if="expanded || (expandable && scrollable)"
 			:expanded="expanded"
 			class="expand-light"
-			@expand="(state) => expanded = state"
+			@expand="(state) => $emit('expand', state)"
 		/>
 	</div>
 </template>
@@ -107,6 +102,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		expanded: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -114,7 +113,6 @@ export default {
 			scrollable: true,
 			scrollAtStart: true,
 			scrollAtEnd: false,
-			expanded: false,
 		};
 	},
 	mounted,