<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>