forked from DebaucheryLibrarian/traxxx
494 lines
9.5 KiB
Vue
494 lines
9.5 KiB
Vue
<template>
|
|
<div
|
|
v-if="release"
|
|
class="content"
|
|
>
|
|
<div class="details">
|
|
<div class="column">
|
|
<a
|
|
v-if="release.date"
|
|
v-tooltip.bottom="release.url && `View scene on ${release.entity.name}`"
|
|
:title="release.url && `View scene on ${release.entity.name}`"
|
|
:href="release.url"
|
|
:class="{ link: release.url }"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="tidbit date"
|
|
>
|
|
<Icon
|
|
v-if="isAfter(new Date(), release.date)"
|
|
icon="calendar2"
|
|
/>
|
|
|
|
<Icon
|
|
v-else
|
|
v-tooltip.bottom="'To be released'"
|
|
icon="sun3"
|
|
/>
|
|
|
|
<span class="showable">{{ formatDate(release.date, 'MMM D, YYYY') }}</span>
|
|
<span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY') }}</span>
|
|
</a>
|
|
|
|
<span
|
|
v-if="release.shootId"
|
|
v-tooltip.bottom="`Shoot #`"
|
|
class="tidbit shoot hideable"
|
|
>
|
|
<Icon icon="clapboard-play" />
|
|
{{ release.shootId }}
|
|
</span>
|
|
|
|
<span
|
|
v-if="release.duration"
|
|
v-tooltip.bottom="`Duration`"
|
|
class="tidbit duration hideable"
|
|
>
|
|
<Icon icon="stopwatch" />
|
|
|
|
<span
|
|
v-if="release.duration >= 3600"
|
|
class="duration-segment"
|
|
>{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</span>
|
|
<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
|
|
<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
|
|
</span>
|
|
|
|
<span class="tidbit site">
|
|
<template v-if="release.entity.parent">
|
|
<a :href="`/network/${release.entity.parent.slug}`">
|
|
<img
|
|
:src="`/img/logos/${release.entity.parent.slug}/thumbs/network.png`"
|
|
:title="release.entity.parent.name"
|
|
:alt="release.entity.parent.name"
|
|
class="logo logo-network"
|
|
>
|
|
</a>
|
|
|
|
<span class="chain">presents</span>
|
|
|
|
<a
|
|
:href="`/${release.entity.type}/${release.entity.slug}`"
|
|
>
|
|
<img
|
|
:src="`/img/logos/${release.entity.parent.slug}/thumbs/${release.entity.slug}.png`"
|
|
:title="release.entity.name"
|
|
class="logo logo-site"
|
|
>
|
|
</a>
|
|
</template>
|
|
|
|
<a
|
|
v-else
|
|
:href="`/channel/${release.entity.slug}`"
|
|
>
|
|
<img
|
|
:src="`/img/logos/${release.entity.slug}/thumbs/network.png`"
|
|
:title="release.entity.name"
|
|
class="logo logo-site"
|
|
>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Scroll class="scroll-light">
|
|
<Banner :release="release" />
|
|
|
|
<template v-slot:expanded>
|
|
<Banner
|
|
:release="release"
|
|
class="expanded"
|
|
/>
|
|
</template>
|
|
</Scroll>
|
|
|
|
<div class="info column">
|
|
<h2 class="row title">{{ release.title }}</h2>
|
|
|
|
<span class="row-label">Actors</span>
|
|
<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
|
|
v-if="release.movies && release.movies.length > 0"
|
|
class="movies"
|
|
>
|
|
<Release :release="release.movies[0]" />
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="release.scenes && release.scenes.length > 0"
|
|
class="scenes"
|
|
>
|
|
<h3>Scenes</h3>
|
|
<Releases
|
|
:releases="release.scenes"
|
|
class="row"
|
|
/>
|
|
</div>
|
|
|
|
<span class="row-label">Tags</span>
|
|
|
|
<div
|
|
v-if="release.tags.length > 0"
|
|
class="row"
|
|
>
|
|
<ul class="tags nolist">
|
|
<li
|
|
v-for="tag in release.tags"
|
|
:key="`tag-${tag.slug}`"
|
|
class="tag"
|
|
>
|
|
<a
|
|
:href="`/tag/${tag.slug}`"
|
|
class="link"
|
|
>{{ tag.name }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
v-if="release.duration"
|
|
class="row duration showable"
|
|
>
|
|
<Icon icon="stopwatch" />
|
|
|
|
<span
|
|
v-if="release.duration >= 3600"
|
|
class="duration-segment"
|
|
>{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</span>
|
|
<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
|
|
<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
|
|
</div>
|
|
|
|
<span class="row-label">Description</span>
|
|
|
|
<p
|
|
v-if="release.description"
|
|
class="row description"
|
|
>
|
|
{{ release.description }}
|
|
</p>
|
|
|
|
<div
|
|
v-if="release.studio"
|
|
class="row"
|
|
>
|
|
<Icon icon="video-camera2" />
|
|
|
|
<a
|
|
v-if="release.studio"
|
|
:href="release.studio.url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="link"
|
|
>{{ release.studio.name }}</a>
|
|
</div>
|
|
|
|
<div
|
|
v-if="release.shootId"
|
|
class="row showable"
|
|
>
|
|
<Icon icon="clapboard-play" />
|
|
|
|
<a
|
|
:href="release.url"
|
|
:title="`release.shootId`"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="link shoot"
|
|
>{{ release.shootId }}</a>
|
|
</div>
|
|
|
|
<span class="row-label">Added</span>
|
|
<span class="row">
|
|
<a
|
|
:href="`/added/${formatDate(release.dateAdded, 'YYYY-MM-DD')}`"
|
|
:title="`Added on ${formatDate(release.dateAdded, 'MMMM D, YYYY')}`"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="link added"
|
|
>{{ formatDate(release.createdAt, 'MMMM D, YYYY HH:mm') }}</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import config from 'config';
|
|
// import format from 'template-format';
|
|
|
|
import Banner from './banner.vue';
|
|
import Actor from '../tile/actor.vue';
|
|
import Release from '../tile/release.vue';
|
|
import Releases from './releases.vue';
|
|
import Scroll from '../scroll/scroll.vue';
|
|
|
|
function pageTitle() {
|
|
return this.release && this.release.title;
|
|
}
|
|
|
|
async function mounted() {
|
|
this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
|
|
/*
|
|
this.filename = format(config.filename.pattern, {
|
|
...this.release,
|
|
shootId: this.release.shootId || '',
|
|
date: this.formatDate(this.release.date, config.filename.date),
|
|
}, {
|
|
spreadSeparator: config.filename.separator,
|
|
});
|
|
*/
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
Actor,
|
|
Banner,
|
|
Release,
|
|
Releases,
|
|
Scroll,
|
|
},
|
|
data() {
|
|
return {
|
|
release: null,
|
|
filename: null,
|
|
};
|
|
},
|
|
computed: {
|
|
pageTitle,
|
|
},
|
|
mounted,
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'theme';
|
|
.column {
|
|
width: 1200px;
|
|
max-width: 100%;
|
|
padding: 0 1rem;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.info {
|
|
padding: 1rem;
|
|
border-left: solid 1px var(--shadow-hint);
|
|
border-right: solid 1px var(--shadow-hint);
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 0 1rem 0;
|
|
|
|
&.associations {
|
|
align-items: start;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
width: 1rem;
|
|
fill: var(--shadow-strong);
|
|
margin: 0 1rem 0 0;
|
|
}
|
|
}
|
|
|
|
.row-label {
|
|
display: block;
|
|
margin: 0 0 .5rem 0;
|
|
color: var(--shadow);
|
|
font-weight: bold;
|
|
|
|
.icon {
|
|
margin: 0 .5rem 0 0;
|
|
fill: var(--shadow);
|
|
}
|
|
}
|
|
|
|
.details {
|
|
background: var(--profile);
|
|
color: var(--text-light);
|
|
box-shadow: 0 0 3px var(--shadow-weak);
|
|
cursor: default;
|
|
|
|
.column {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.link {
|
|
color: var(--text-light);
|
|
}
|
|
}
|
|
|
|
.tidbit {
|
|
display: inline-block;
|
|
height: 100%;
|
|
|
|
&:not(:last-child) {
|
|
border-right: solid 1px var(--lighten-hint);
|
|
}
|
|
|
|
.icon {
|
|
fill: var(--lighten-weak);
|
|
margin: 0 .25rem 0 0;
|
|
}
|
|
|
|
&.date,
|
|
&.duration,
|
|
&.shoot {
|
|
flex-shrink: 0;
|
|
padding: 1.25rem 1rem 1.25rem 0;
|
|
margin: 0 1rem 0 0;
|
|
}
|
|
}
|
|
|
|
.site {
|
|
display: inline-flex;
|
|
flex-grow: 1;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: .25rem 0;
|
|
font-size: 0;
|
|
}
|
|
|
|
.logo {
|
|
display: inline-block;
|
|
}
|
|
|
|
.logo-site {
|
|
height: 3rem;
|
|
max-width: 15rem;
|
|
object-fit: contain;
|
|
object-position: 100% 50%;
|
|
}
|
|
|
|
.logo-network {
|
|
height: 1.5rem;
|
|
max-width: 10rem;
|
|
object-fit: contain;
|
|
object-position: 100% 50%;
|
|
}
|
|
|
|
.chain {
|
|
color: var(--lighten);
|
|
padding: 0 .5rem;
|
|
font-weight: bold;
|
|
font-size: .8rem;
|
|
}
|
|
|
|
.title {
|
|
margin: 0 0 1.5rem 0;
|
|
}
|
|
|
|
.description {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.duration {
|
|
font-size: 0;
|
|
}
|
|
|
|
.duration-segment {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.actors {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
|
grid-gap: 1rem;
|
|
flex-grow: 1;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.actor {
|
|
margin: 0 1rem .5rem 0;
|
|
}
|
|
|
|
.filename {
|
|
width: 100%;
|
|
padding: .5rem;
|
|
color: var(--text);
|
|
border: solid 1px var(--shadow-weak);
|
|
background: var(--background);
|
|
}
|
|
|
|
.link {
|
|
display: inline-block;
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--primary);
|
|
|
|
.icon {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tag .link {
|
|
background: var(--background);
|
|
display: inline-block;
|
|
padding: .5rem;
|
|
margin: 0 .25rem .25rem 0;
|
|
box-shadow: 0 0 2px var(--shadow-weak);
|
|
text-decoration: none;
|
|
text-transform: capitalize;
|
|
|
|
&:hover {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
.showable {
|
|
display: none;
|
|
}
|
|
|
|
@media(max-width: $breakpoint3) {
|
|
.logo-network,
|
|
.chain {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(max-width: $breakpoint) {
|
|
.hideable {
|
|
display: none;
|
|
}
|
|
|
|
.row .showable {
|
|
display: block;
|
|
}
|
|
|
|
.tidbit .showable {
|
|
display: inline-block;
|
|
}
|
|
|
|
.logo-site {
|
|
width: 15rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.actors {
|
|
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
|
}
|
|
}
|
|
</style>
|