traxxx/assets/components/release/release.vue

<template>
    <div v-if="release">
        <div
            class="banner"
            @wheel.prevent="scrollBanner"
        >
            <div class="banner-trailer">
                <video
                    v-if="release.trailer"
                    :src="`/media/${release.trailer.path}`"
                    :poster="`/media/${(release.poster && release.poster.thumbnail) || (release.photos.length && release.photos[Math.floor(Math.random() * release.photos.length)].path)}`"
                    :alt="release.title"
                    class="banner-item"
                    controls
                >Sorry, the tailer cannot be played in your browser</video>
            </div>

            <a
                v-for="photo in photos"
                :key="`banner-${photo.index}`"
                :href="`/media/${photo.path}`"
                target="_blank"
                rel="noopener noreferrer"
            >
                <img
                    :src="`/media/${photo.thumbnail}`"
                    :alt="`Photo ${photo.index + 1}`"
                    class="banner-item"
                >
            </a>
        </div>

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

        <ul class="row actors">
            <Icon icon="star" />

            <li
                v-for="actor in release.actors"
                :key="actor.id"
                class="actor"
            >
                <a
                    :href="`/actor/${actor.slug}`"
                    class="actor-link"
                >{{ actor.name }}</a>
            </li>
        </ul>

        <span
            v-if="release.date"
            class="row"
        >
            <Icon icon="calendar2" />

            <a
                :href="release.url"
                :title="`Released on ${formatDate(release.date, 'MMMM D, YYYY')}`"
                target="_blank"
                rel="noopener noreferrer"
                class="date date-link"
            >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
        </span>

        <span class="row site">
            <Icon icon="clapboard-play" />

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

            <a
                :href="`/network/${release.network.slug}`"
                class="network-link"
            >{{ release.network.name }}:</a>

            <a
                :href="`/site/${release.site.slug}`"
                class="site-link"
            >{{ release.site.name }}</a>
        </span>

        <p
            v-if="release.duration"
            class="row duration"
        >
            <Icon icon="stopwatch" />

            <span
                v-if="release.duration >= 3600"
                class="duration-segment"
            >{{ Math.floor(release.duration / 3600) }}:</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>
        </p>

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

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

            <li
                v-for="tag in release.tags"
                :key="`tag-${tag.slug}`"
                class="tag"
            >
                <a
                    :href="`/tag/${tag.slug}`"
                    class="tag-link"
                >{{ tag.name }}</a>
            </li>
        </ul>

        <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="date date-link"
            >{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a>
        </span>
    </div>
</template>

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

function scrollBanner(event) {
    event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}

function photos() {
    if (this.release.photos.length) {
        const set = this.release.photos.sort(({ index: indexA }, { index: indexB }) => indexA - indexB);

        if (this.release.trailer) {
            return set;
        }

        return [this.release.poster].concat(set);
    }

    if (this.release.poster && !this.release.trailer) {
        return [this.release.poster];
    }

    return [];
}

async function mounted() {
    [this.release] = await this.$store.dispatch('fetchReleases', { id: this.$route.params.releaseId });
}

export default {
    data() {
        return {
            release: null,
        };
    },
    computed: {
        pageTitle,
        photos,
    },
    mounted,
    methods: {
        scrollBanner,
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.banner {
    background: $empty;
    white-space: nowrap;
    overflow-x: auto;
    margin: 0 0 1rem 0;
    scrollbar-width: none;
    box-shadow: 0 0 3px $shadow;
    font-size: 0;

    &::-webkit-scrollbar {
        display: none;
    }
}

.banner-trailer {
    display: inline-block;
}

.banner-item {
    height: 20rem;
    vertical-align: middle;
}

.row {
    display: block;
    padding: 0 1rem;
    margin: 0 0 .5rem 0;

    .icon {
        width: 1rem;
        fill: $shadow-strong;
        margin: 0 .5rem 0 0;
    }
}

.actors,
.tags {
    list-style: none;
}

.actor,
.tag {
    display: inline-block;
    text-transform: capitalize;

    &:not(:last-child)::after {
        content: ',';
        display: inline-block;
        width: .6rem;
    }
}

.duration {
    font-size: 0;
}

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

.date-link,
.site-link,
.network-link,
.actor-link,
.tag-link {
    color: $link;
    text-decoration: none;

    &:hover {
        color: $primary;
    }
}
</style>