<template> <div v-if="release"> <div class="banner" @wheel.prevent="scrollBanner" > <div class="banner-trailer"> <video v-if="release.trailer" :src="`/media/${release.trailer.path}`" :poster="`/media/${(release.poster && release.poster.path) || (release.photos.length && release.photos[Math.floor(Math.random() * release.photos.length)].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="`/media/${photo.path}`" target="_blank" rel="noopener noreferrer" > <img :src="`/media/${photo.path}`" :alt="`Photo ${photo.index + 1}`" class="banner-item" > </a> </div> <h2 class="row title">{{ release.title }}</h2> <ul class="row actors"> <Icon icon="star" /> <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 v-if="release.date" class="row" > <Icon icon="calendar2" /> <a :href="release.url" :title="`Released on ${formatDate(release.date, 'MMMM D, YYYY')}`" target="_blank" rel="noopener noreferrer" class="date date-link" >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a> </span> <span class="row site"> <Icon icon="clapboard-play" /> <template v-if="release.studio"> <a v-if="release.studio" :href="release.studio.url" target="_blank" rel="noopener noreferrer" class="site-link" >{{ release.studio.name }}</a>, </template> <a :href="release.network.url" target="_blank" rel="noopener noreferrer" class="network-link" >{{ release.network.name }}</a>: <a :href="release.site.url" target="_blank" rel="noopener noreferrer" class="site-link" >{{ release.site.name }}</a> </span> <p v-if="release.description" class="row description" > <Icon icon="info2" /> {{ release.description }} </p> <ul v-if="release.tags.length > 0" class="row tags" > <Icon icon="price-tags" /> <li v-for="tag in release.tags" :key="`tag-${tag.slug}`" class="tag" > <a :href="`/tag/${tag.slug}`" target="_blank" rel="noopener noreferrer" class="tag-link" >{{ tag.name }}</a> </li> </ul> <span class="row"> <Icon icon="drawer-in" /> <a :href="`/added/${formatDate(release.dateAdded, 'YYYY-MM-DD')}`" :title="`Added on ${formatDate(release.dateAdded, 'MMMM D, YYYY')}`" target="_blank" rel="noopener noreferrer" class="date date-link" >{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a> </span> </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; .icon { fill: $shadow-strong; margin: 0 .5rem 0 0; } } .actors, .tags { list-style: none; } .actor, .tag { display: inline-block; text-transform: capitalize; &:not(:last-child)::after { content: ','; display: inline-block; width: .6rem; } } .date-link, .site-link, .network-link, .actor-link, .tag-link { color: $link; text-decoration: none; &:hover { color: $primary; } } </style>