<template> <div v-if="release" class="content" > <Expand v-if="expanded" class="expand" :expanded="expanded" @expand="(state) => expanded = state" /> <Scroll class="scroll-light" :expandable="false" > <Media :release="release" :class="{ expanded }" /> </Scroll> <Details :release="release" /> <Expand v-if="release.photos && release.photos.length > 0" class="expand-bottom" :expanded="expanded" @expand="(state) => expanded = state" /> <div class="info column"> <div class="row"> <h2 v-if="release.title" class="title" >{{ release.title }}</h2> <h2 v-else-if="release.actors.length > 0" class="title title-composed" > {{ release.actors.map(actor => actor.name).join(', ') }} for {{ release.entity.name }} <Icon v-tooltip="`This scene has no known official title`" icon="question2" /> </h2> </div> <div v-if="release.tags.length > 0" class="row" > <Tags :tags="release.tags" /> </div> <div class="row associations"> <ul v-lazy-container="{ selector: '.lazy' }" class="actors nolist" > <li v-for="actor in release.actors" :key="actor.id" > <Actor :actor="actor" /> </li> </ul> </div> <div v-if="release.movies && release.movies.length > 0" class="row" > <span class="row-label">Part of</span> <div class="movies"> <router-link v-for="movie in release.movies" :key="`movie-${movie.id}`" :to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }" class="movie" > <span class="movie-title">{{ movie.title }}</span> <img :src="`/media/${movie.covers[0].thumbnail}`" class="movie-cover" > </router-link> </div> </div> <Releases v-if="release.scenes && release.scenes.length > 0" :releases="release.scenes" /> <div v-if="release.description" class="row" > <span class="row-label">Description</span> <p class="description">{{ release.description }}</p> </div> <div class="row row-tidbits"> <div v-if="release.duration" class="row-tidbit" > <span class="row-label">Duration</span> <div class="duration">{{ formatDuration(release.duration) }}</div> </div> <div v-if="release.shootId" class="row-tidbit" > <span class="row-label">Shoot #</span> {{ release.shootId }} </div> <div v-if="release.studio" class="row-tidbit" > <span class="row-label">Studio</span> <router-link :to="`/studio/${release.studio.slug}`" class="link studio" >{{ release.studio.name }}</router-link> </div> <div v-if="release.productionDate" class="row-tidbit" > <span class="row-label">Shoot date</span> {{ formatDate(release.productionDate, 'MMMM D, YYYY') }} </div> <div v-if="release.productionLocation" class="row-tidbit" > <span class="row-label">Location</span> <span class="location"> <span v-if="release.productionLocation.city" class="location-segment" >{{ release.productionLocation.city }}, </span> <span v-if="release.productionLocation.state" class="location-segment" >{{ release.productionLocation.state }}, </span> <span v-if="release.productionLocation.country" class="location-segment" >{{ release.productionLocation.country.alias || release.productionLocation.country.name }} <img class="flag" :src="`/img/flags/${release.productionLocation.country.alpha2.toLowerCase()}.svg`" > </span> </span> </div> </div> <div v-if="release.clips && release.clips.length > 0" class="row nolist" > <span class="row-label">Clips</span> <Clips :clips="release.clips" /> </div> <div v-if="release.comment" class="row" > <span class="row-label">Comment</span> <span>{{ release.comment }}</span> </div> <div class="row"> <span class="row-label">Added</span> <router-link :to="`/added/${formatDate(release.createdAt, 'YYYY/MM/DD')}`" :title="`Added on ${formatDate(release.createdAt, 'MMMM D, YYYY HH:mm')}`" class="link added" >{{ formatDate(release.createdAt, 'MMMM D, YYYY HH:mm') }}</router-link> </div> </div> </div> </template> <script> import Media from './media.vue'; import Details from './details.vue'; import Tags from './tags.vue'; import Clips from './clips.vue'; import Actor from '../actors/tile.vue'; import Releases from './releases.vue'; import Scroll from '../scroll/scroll.vue'; import Expand from '../expand/expand.vue'; async function fetchRelease() { if (this.$route.name === 'scene') { this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId); } if (this.$route.name === 'movie') { this.release = await this.$store.dispatch('fetchMovieById', this.$route.params.releaseId); } } function pageTitle() { return this.release && (this.release.title || (this.release.actors.length > 0 ? `${this.release.actors.map(actor => actor.name).join(', ')} for ${this.release.entity.name}` : null)); } export default { components: { Actor, Details, Media, Scroll, Expand, Releases, Clips, Tags, }, data() { return { release: null, expanded: false, }; }, computed: { pageTitle, }, watch: { $route: fetchRelease, }, mounted: fetchRelease, methods: { fetchRelease, }, }; </script> <style lang="scss" scoped> @import 'breakpoints'; .expand-bottom { border-bottom: solid 1px var(--shadow-hint); } .info { padding: 1rem; border-left: solid 1px var(--shadow-hint); border-right: solid 1px var(--shadow-hint); flex-grow: 1; } .row { margin: 0 0 1.5rem 0; &.associations { align-items: start; } } .row-label { display: block; margin: 0 0 .5rem 0; color: var(--shadow); font-weight: bold; .icon { margin: 0 .5rem 0 0; fill: var(--shadow); } } .row-tidbit { display: inline-block; margin: 0 2rem 0 0; } .title { display: inline-block; margin: 0; .icon { fill: var(--shadow); padding: .25rem; &:hover { fill: var(--primary); cursor: pointer; } } } .title-composed { color: var(--shadow); } .title-shoot { margin: 0 0 0 .5rem; color: var(--shadow); font-size: .9rem; font-weight: bold; } .description { line-height: 1.5; margin: -.25rem 0 0 0; } .actors { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-gap: .5rem; flex-grow: 1; flex-wrap: wrap; } .movies { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-gap: .5rem; flex-grow: 1; flex-wrap: wrap; } .movie { display: flex; flex-direction: column; background: var(--background); box-shadow: 0 0 3px var(--shadow-weak); color: var(--text); text-decoration: none; &:hover .movie-title { color: var(--primary); } } .movie-cover { width: 100%; } .movie-title { padding: .5rem; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flag { height: 1rem; margin: 0 0 -.15rem .1rem; } .link { display: inline-flex; color: var(--link); text-decoration: none; &:hover { color: var(--primary); .icon { fill: var(--primary); } } } .showable { display: none; } @media(max-width: $breakpoint) { .hideable { display: none; } .row .showable { display: block; } .tidbit .showable { display: inline-block; } .actors { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); } } </style>