traxxx/assets/components/release/banner.vue

<template>
    <div
        class="banner"
        @wheel.prevent="scrollBanner"
    >
        <div class="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="item trailer-video"
                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="item"
            >
        </a>
    </div>
</template>

<script>
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 [];
}

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

export default {
    props: {
        release: {
            type: Object,
            default: null,
        },
    },
    computed: {
        photos,
    },
    methods: {
        scrollBanner,
    },
};
</script>

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

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

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

.trailer {
    display: inline-block;
    max-width: 100vw;
}

.trailer-video {
    max-width: 100%;
}

.item {
    height: 18rem;
    vertical-align: middle;
}
</style>