traxxx/assets/components/releases/scene.vue

<template>
	<div
		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"
				:class="{ expanded }"
			/>
		</Scroll>

		<Details :release="release" />

		<Expand
			v-if="release.photos.length > 0"
			class="expand-bottom"
			:expanded="expanded"
			@expand="(state) => expanded = state"
		/>

		<div class="info column">
			<div class="row">
				<h2
					v-if="release.title"
					class="title"
				>{{ release.title }}</h2>

				<h2
					v-else-if="release.actors.length > 0"
					class="title title-composed"
				>
					{{ release.actors.map(actor => actor.name).join(', ') }} for {{ release.entity.name }}
					<Icon
						v-tooltip="`This scene has no known official title`"
						icon="question2"
					/>
				</h2>
			</div>

			<div
				v-if="release.tags.length > 0"
				class="row"
			>
				<Tags :tags="release.tags" />
			</div>

			<div class="row associations">
				<ul
					v-lazy-container="{ selector: '.lazy' }"
					class="actors nolist"
				>
					<li
						v-for="actor in release.actors"
						:key="actor.id"
					>
						<Actor :actor="actor" />
					</li>
				</ul>
			</div>

			<div
				v-if="release.movies && release.movies.length > 0"
				class="row"
			>
				<span class="row-label">Part of</span>

				<div class="movies">
					<router-link
						v-for="movie in release.movies"
						:key="`movie-${movie.id}`"
						:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
						class="movie"
					>
						<span class="movie-title">{{ movie.title }}</span>
						<img
							:src="`/media/${movie.covers[0].thumbnail}`"
							class="movie-cover"
						>
					</router-link>
				</div>
			</div>

			<div
				v-if="release.description"
				class="row"
			>
				<span class="row-label">Description</span>
				<p class="description">{{ release.description }}</p>
			</div>

			<div class="row row-tidbits">
				<div
					v-if="release.duration"
					class="row-tidbit"
				>
					<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>

				<div
					v-if="release.shootId"
					class="row-tidbit"
				>
					<span class="row-label">Shoot #</span>
					{{ release.shootId }}
				</div>

				<div
					v-if="release.studio"
					class="row-tidbit"
				>
					<span class="row-label">Studio</span>

					<router-link
						:to="`/studio/${release.studio.slug}`"
						class="link studio"
					>{{ release.studio.name }}</router-link>
				</div>

				<div
					v-if="release.productionDate"
					class="row-tidbit"
				>
					<span class="row-label">Shoot date</span>
					{{ formatDate(release.productionDate, 'MMMM D, YYYY') }}
				</div>
			</div>

			<div
				v-if="release.comment"
				class="row"
			>
				<span class="row-label">Comment</span>
				<span>{{ release.comment }}</span>
			</div>

			<div class="row">
				<span class="row-label">Added</span>

				<router-link
					:to="`/added/${formatDate(release.createdAt, 'YYYY/MM/DD')}`"
					:title="`Added on ${formatDate(release.createdAt, 'MMMM D, YYYY HH:mm')}`"
					class="link added"
				>{{ formatDate(release.createdAt, 'MMMM D, YYYY HH:mm') }}</router-link>
			</div>
		</div>
	</div>
</template>

<script>
import Media from './media.vue';
import Details from './details.vue';
import Tags from './tags.vue';
import Actor from '../actors/tile.vue';
import Scroll from '../scroll/scroll.vue';
import Expand from '../expand/expand.vue';

function pageTitle() {
	return this.release
		&& (this.release.title
		|| (this.release.actors.length > 0 ? `${this.release.actors.map(actor => actor.name).join(', ')} for ${this.release.entity.name}` : null));
}

async function mounted() {
	this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
}

export default {
	components: {
		Actor,
		Details,
		Media,
		Scroll,
		Expand,
		Tags,
	},
	data() {
		return {
			release: null,
			expanded: false,
		};
	},
	computed: {
		pageTitle,
	},
	mounted,
};
</script>

<style lang="scss" scoped>
@import 'breakpoints';
.expand-bottom {
	border-bottom: solid 1px var(--shadow-hint);
}

.info {
    padding: 1rem;
    border-left: solid 1px var(--shadow-hint);
    border-right: solid 1px var(--shadow-hint);
    flex-grow: 1;
}

.row {
    margin: 0 0 1.5rem 0;

    &.associations {
        align-items: start;
    }
}

.row-label {
	display: block;
	margin: 0 0 .5rem 0;
	color: var(--shadow);
	font-weight: bold;

	.icon {
		margin: 0 .5rem 0 0;
		fill: var(--shadow);
	}
}

.row-tidbit {
	display: inline-block;
	margin: 0 2rem 0 0;
}

.title {
	display: inline-block;
	margin: 0;

	.icon {
		fill: var(--shadow);
		padding: .25rem;

		&:hover {
			fill: var(--primary);
			cursor: pointer;
		}
	}
}

.title-composed {
	color: var(--shadow);
}

.title-shoot {
	margin: 0 0 0 .5rem;
	color: var(--shadow);
	font-size: .9rem;
	font-weight: bold;
}

.description {
    line-height: 1.5;
	margin: -.25rem 0 0 0;
}

.duration {
    font-size: 0;
}

.duration-segment {
    font-size: 1rem;
}

.actors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    grid-gap: .5rem;
    flex-grow: 1;
    flex-wrap: wrap;
}

.movies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    grid-gap: .5rem;
    flex-grow: 1;
    flex-wrap: wrap;
}

.movie {
	display: flex;
	flex-direction: column;
	background: var(--background);
	box-shadow: 0 0 3px var(--shadow-weak);
	color: var(--text);
	text-decoration: none;

	&:hover .movie-title {
		color: var(--primary);
	}
}

.movie-cover {
	width: 100%;
}

.movie-title {
	padding: .5rem;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.link {
    display: inline-flex;
    color: var(--link);
    text-decoration: none;

    &:hover {
        color: var(--primary);

        .icon {
            fill: var(--primary);
        }
    }
}

.showable {
    display: none;
}

@media(max-width: $breakpoint) {
    .hideable {
        display: none;
    }

    .row .showable {
        display: block;
    }

    .tidbit .showable {
        display: inline-block;
    }

    .actors {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    }
}
</style>