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="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
                :alt="release.title"
                :class="{ sfw: sfw && paused }"
                class="item trailer-video"
                controls
                @playing="playing = true; paused = false;"
                @pause="playing = false; paused = true;"
            >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="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
                :alt="release.title"
                :class="{ sfw: sfw && paused }"
                class="item trailer-video"
                controls
                @playing="playing = true; paused = false;"
                @pause="playing = false; paused = true;"
            >Sorry, the tailer cannot be played in your browser</video>

            <img
                v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
                :src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/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>

            <span
                v-if="sfw && !playing"
                class="warning"
            >
                <Icon icon="warning2" />NSFW
            </span>
        </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}`"
            :class="{ sfw }"
            class="item-link"
            target="_blank"
            rel="noopener noreferrer"
        >
            <img
                :src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
                :alt="`Photo ${photo.index + 1}`"
                class="item"
            >

            <span
                v-if="sfw"
                class="warning"
            >
                <Icon icon="warning2" />NSFW
            </span>
        </a>
    </div>
</template>

<script>
function sfw() {
    return this.$store.state.ui.sfw;
}

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,
            paused: false,
        };
    },
    computed: {
        photos,
        sfw,
    },
    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;
    }
}

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

    .icon {
        width: 1.5rem;
        height: 1.5rem;
        fill: var(--lighten-strong);
        filter: drop-shadow(0 0 1px var(--darken-weak));
    }

    &.playing {
        opacity: 0;
    }

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

        .icon {
            fill: var(--text-light);
        }
    }
}

.item-link,
.trailer {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    .warning {
        display: none;
        width: 100%;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        background: var(--darken-weak);
        color: var(--text-light);
        font-size: 1.2rem;
        font-weight: bold;
        text-shadow: 0 0 3px var(--darken-strong);
        pointer-events: none;
        animation: alert .5s ease infinite .1s;

        .icon {
            display: block;
            fill: var(--text-light);
            width: 3rem;
            height: 3rem;
            margin: 0 0 .25rem 0;
            filter: drop-shadow(0 0 3px var(--darken));
            animation: alert .5s ease infinite .1s;
        }
    }

    &:hover .warning {
        display: inline-flex;
    }
}

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

.trailer {
    max-width: 100vw;
}

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

    &.sfw {
        filter: blur(2rem);
    }
}

@keyframes alert {
    0% {
        color: var(--text-light);
        fill: var(--text-light);
    }
    50% {
        color: var(--alert);
        fill: var(--alert);
    }
}

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