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="`/${release.trailer.path}`"
                    :poster="`/${release.poster && release.poster.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="`/${photo.path}`"
                target="_blank"
                rel="noopener noreferrer"
            >
                <img
                    :src="`/${photo.path}`"
                    :alt="`Photo ${photo.index + 1}`"
                    class="banner-item"
                >
            </a>
        </div>

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

        <span class="row">
            <a
                :href="release.url"
                :title="release.shootId || release.entryId"
                target="_blank"
                rel="noopener noreferrer"
                class="date"
            >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
        </span>

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

        <span class="row site">
            <a
                :href="release.site.url"
                target="_blank"
                rel="noopener noreferrer"
            >{{ release.site.name }}</a>

            (<a
                :href="release.network.url"
                target="_blank"
                rel="noopener noreferrer"
            >{{ release.network.name }}</a>)
        </span>

        <p class="row description">{{ release.description }}</p>

        <ul class="row tags">
            <li
                v-for="tag in release.tags"
                :key="`tag-${tag.id}`"
                class="tag"
            >
                <a
                    :href="`/tag/${tag.slug}`"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="tag-link"
                >{{ tag.name }}</a>
            </li>
        </ul>
    </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) {
        return this.release.photos.sort(({ index: indexA }, { index: indexB }) => indexA - indexB);
    }

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

    return [];
}

async function mounted() {
    [this.release] = await this.$store.dispatch('fetchReleases', 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;
}

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

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

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