traxxx/assets/components/releases/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)}`"
                :alt="release.title"
                class="item trailer-video"
                controls
                @playing="playing = true"
                @pause="playing = false"
            >Sorry, the tailer cannot be played in your browser</video>

            <video
                v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
                :src="`/media/${release.teaser.path}`"
                :poster="`/media/${(release.poster && release.poster.thumbnail)}`"
                :alt="release.title"
                class="item trailer-video"
                controls
                @playing="playing = true"
                @pause="playing = false"
            >Sorry, the tailer cannot be played in your browser</video>

            <img
                v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
                :src="`/media/${release.teaser.path}`"
                :alt="release.title"
                class="item trailer-video"
            >

            <a
                v-if="release.poster"
                :href="`/media/${release.poster.path}`"
                :class="{ playing }"
                target="_blank"
                rel="noopener noreferrer"
                class="poster-link"
            ><Icon icon="image" /></a>
        </div>

        <template v-if="release.covers && release.covers.length > 0">
            <a
                v-for="cover in release.covers"
                :key="`cover-${cover.id}`"
                :href="`/media/${cover.path}`"
                target="_blank"
                rel="noopener noreferrer"
            >
                <img
                    :src="`/media/${cover.thumbnail}`"
                    class="item cover"
                >
            </a>
        </template>

        <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.trailer || this.release.teaser) {
        // poster will be on trailer video
        return this.release.photos;
    }

    if (this.release.poster) {
        return [this.release.poster].concat(this.release.photos);
    }

    return this.release.photos;
}

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

export default {
    props: {
        release: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            playing: false,
        };
    },
    computed: {
        photos,
    },
    methods: {
        scrollBanner,
    },
};
</script>

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

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

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

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

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

.poster-link {
    position: absolute;
    top: .5rem;
    right: .5rem;
    transition: opacity .1s ease;

    .icon {
        width: 1.5rem;
        height: 1.5rem;
        fill: var(--lighten);
    }

    &.playing {
        opacity: 0;
    }

    &:hover {
        cursor: pointer;
        opacity: 1;

        .icon {
            fill: var(--lighten-strong);
        }
    }
}

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

@media(max-width: $breakpoint2) {
    .trailer-video {
        object-fit: contain;
    }
}
</style>