traxxx/assets/components/releases/release.vue

<template>
	<div
		v-if="release"
		class="content"
	>
		<Banner :release="release" />

		<div class="details">
			<div class="column">
				<a
					v-if="release.date"
					v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
					:title="release.url && `View scene on ${release.site.name}`"
					:href="release.url"
					:class="{ link: release.url }"
					target="_blank"
					rel="noopener noreferrer"
					class="tidbit date"
				>
					<Icon
						v-if="isAfter(new Date(), release.date)"
						icon="calendar2"
					/>

					<Icon
						v-else
						v-tooltip.bottom="'To be released'"
						icon="sun3"
					/>

					<span class="showable">{{ formatDate(release.date, 'MMM D, YYYY') }}</span>
					<span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY') }}</span>
				</a>

				<span
					v-if="release.shootId"
					v-tooltip.bottom="`Shoot #`"
					class="tidbit shoot hideable"
				>
					<Icon icon="clapboard-play" />
					{{ release.shootId }}
				</span>

				<span
					v-if="release.duration"
					v-tooltip.bottom="`Duration`"
					class="tidbit duration hideable"
				>
					<Icon icon="stopwatch" />

					<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>

				<span class="tidbit site">
					<a
						v-if="release.site.independent"
						:href="`/network/${release.network.slug}`"
					>
						<img
							:src="`/img/logos/${release.network.slug}/thumbs/network.png`"
							:title="release.network.name"
							class="logo logo-site"
						>
					</a>

					<template v-else>
						<a :href="`/network/${release.network.slug}`">
							<img
								:src="`/img/logos/${release.network.slug}/thumbs/network.png`"
								:title="release.network.name"
								:alt="release.network.name"
								class="logo logo-network"
							>
						</a>

						<span class="chain">presents</span>

						<a
							:href="`/site/${release.site.slug}`"
						>
							<img
								:src="`/img/logos/${release.network.slug}/thumbs/${release.site.slug}.png`"
								:title="release.site.name"
								class="logo logo-site"
							>
						</a>
					</template>

				</span>
			</div>
		</div>

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

			<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
					v-if="release.movies && release.movies.length > 0"
					class="movies"
				>
					<Release :release="release.movies[0]" />
				</div>
			</div>

			<div
				v-if="release.scenes && release.scenes.length > 0"
				class="scenes"
			>
				<h3>Scenes</h3>
				<Releases
					:releases="release.scenes"
					class="row"
				/>
			</div>

			<div
				v-if="release.tags.length > 0"
				class="row"
			>
				<Icon icon="price-tags3" />

				<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
				v-if="release.duration"
				class="row duration showable"
			>
				<Icon icon="stopwatch" />

				<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>

			<p
				v-if="release.description"
				class="row description"
			>
				<Icon icon="info2" />
				{{ release.description }}
			</p>

			<div
				v-if="release.studio"
				class="row"
			>
				<Icon icon="video-camera2" />

				<a
					v-if="release.studio"
					:href="release.studio.url"
					target="_blank"
					rel="noopener noreferrer"
					class="link"
				>{{ release.studio.name }}</a>
			</div>

			<div
				v-if="release.shootId"
				class="row showable"
			>
				<Icon icon="clapboard-play" />

				<a
					:href="release.url"
					:title="`release.shootId`"
					target="_blank"
					rel="noopener noreferrer"
					class="link shoot"
				>{{ release.shootId }}</a>
			</div>

			<span class="row">
				<Icon icon="drawer-in" />

				<a
					:href="`/added/${formatDate(release.dateAdded, 'YYYY-MM-DD')}`"
					:title="`Added on ${formatDate(release.dateAdded, 'MMMM D, YYYY')}`"
					target="_blank"
					rel="noopener noreferrer"
					class="link added"
				>{{ formatDate(release.createdAt, 'MMMM D, YYYY HH:mm') }}</a>
			</span>
		</div>
	</div>
</template>

<script>
// import config from 'config';
// import format from 'template-format';

import Banner from './banner.vue';
import Actor from '../tile/actor.vue';
import Release from '../tile/release.vue';
import Releases from './releases.vue';

function pageTitle() {
	return this.release && this.release.title;
}

async function mounted() {
	this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
	/*
	this.filename = format(config.filename.pattern, {
		...this.release,
		shootId: this.release.shootId || '',
		date: this.formatDate(this.release.date, config.filename.date),
	}, {
		spreadSeparator: config.filename.separator,
	});
	*/
}

export default {
	components: {
		Actor,
		Banner,
		Release,
		Releases,
	},
	data() {
		return {
			release: null,
			filename: null,
		};
	},
	computed: {
		pageTitle,
	},
	mounted,
};
</script>

<style lang="scss" scoped>
@import 'theme';
.column {
    width: 1200px;
    max-width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
    box-sizing: border-box;
}

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

.row {
    display: flex;
    align-items: center;
    margin: 0 0 1rem 0;

    &.associations {
        align-items: start;
    }

    .icon {
        display: inline-block;
        width: 1rem;
        fill: var(--shadow-strong);
        margin: 0 1rem 0 0;
    }
}

.details {
    background: var(--profile);
    color: var(--text-light);
    box-shadow: 0 0 3px var(--shadow-weak);
    cursor: default;

    .column {
        display: flex;
        align-items: center;
        padding: 0 1rem;
    }

    .link {
        color: var(--text-light);
    }
}

.tidbit {
    display: inline-block;
    height: 100%;

    &:not(:last-child) {
        border-right: solid 1px var(--lighten-hint);
    }

    .icon {
        fill: var(--lighten-weak);
        margin: 0 .25rem 0 0;
    }

    &.date,
    &.duration,
    &.shoot {
        flex-shrink: 0;
        padding: 1.25rem 1rem 1.25rem 0;
        margin: 0 1rem 0 0;
    }
}

.site {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
    padding: .25rem 0;
    font-size: 0;
}

.logo {
    display: inline-block;
}

.logo-site {
    height: 3rem;
    max-width: 15rem;
    object-fit: contain;
    object-position: 100% 50%;
}

.logo-network {
    height: 1.5rem;
    max-width: 10rem;
    object-fit: contain;
    object-position: 100% 50%;
}

.chain {
    color: var(--lighten);
    padding: 0 .5rem;
    font-weight: bold;
    font-size: .8rem;
}

.title {
    margin: 0 0 1.5rem 0;
}

.description {
    line-height: 1.5;
}

.duration {
    font-size: 0;
}

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

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

.actor {
    margin: 0 1rem .5rem 0;
}

.movies {
}

.filename {
    width: 100%;
    padding: .5rem;
    color: var(--text);
    border: solid 1px var(--shadow-weak);
    background: var(--background);
}

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

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

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

.tag .link {
    background: var(--background);
    display: inline-block;
    padding: .5rem;
    margin: 0 .25rem .25rem 0;
    box-shadow: 0 0 2px var(--shadow-weak);
    text-decoration: none;
    text-transform: capitalize;

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

.showable {
    display: none;
}

@media(max-width: $breakpoint3) {
    .logo-network,
    .chain {
        display: none;
    }
}

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

    .row .showable {
        display: block;
    }

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

    .logo-site {
        width: 15rem;
        max-width: 100%;
    }

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