2019-12-13 04:04:04 +00:00
|
|
|
<template>
|
2020-12-26 22:51:27 +00:00
|
|
|
<div class="media">
|
2020-07-01 02:47:05 +00:00
|
|
|
<div
|
|
|
|
v-if="release.trailer || release.teaser"
|
|
|
|
class="trailer-container"
|
|
|
|
>
|
2020-05-21 22:55:11 +00:00
|
|
|
<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 }"
|
2020-07-01 02:47:05 +00:00
|
|
|
class="item trailer"
|
2020-05-21 22:55:11 +00:00
|
|
|
controls
|
|
|
|
@playing="playing = true; paused = false;"
|
|
|
|
@pause="playing = false; paused = true;"
|
|
|
|
>Sorry, the tailer cannot be played in your browser</video>
|
2020-02-02 04:14:58 +00:00
|
|
|
|
2020-05-21 22:55:11 +00:00
|
|
|
<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 }"
|
2020-07-01 02:47:05 +00:00
|
|
|
class="item trailer"
|
2020-05-21 22:55:11 +00:00
|
|
|
controls
|
|
|
|
@playing="playing = true; paused = false;"
|
|
|
|
@pause="playing = false; paused = true;"
|
|
|
|
>Sorry, the tailer cannot be played in your browser</video>
|
2020-02-02 04:14:58 +00:00
|
|
|
|
2020-05-21 22:55:11 +00:00
|
|
|
<img
|
|
|
|
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
|
2020-12-26 22:51:27 +00:00
|
|
|
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
|
2020-05-21 22:55:11 +00:00
|
|
|
:alt="release.title"
|
2020-12-26 22:51:27 +00:00
|
|
|
loading="lazy"
|
2020-07-01 02:47:05 +00:00
|
|
|
class="item trailer"
|
2020-05-21 22:55:11 +00:00
|
|
|
>
|
2020-03-01 04:28:08 +00:00
|
|
|
|
2020-05-21 22:55:11 +00:00
|
|
|
<a
|
|
|
|
v-if="release.poster"
|
2020-07-01 03:04:02 +00:00
|
|
|
v-tooltip="'View poster'"
|
2020-05-21 22:55:11 +00:00
|
|
|
:href="`/media/${release.poster.path}`"
|
|
|
|
:class="{ playing }"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
class="poster-link"
|
|
|
|
><Icon icon="image" /></a>
|
2020-04-02 00:02:03 +00:00
|
|
|
|
2020-05-21 22:55:11 +00:00
|
|
|
<span
|
|
|
|
v-if="sfw && !playing"
|
|
|
|
class="warning"
|
|
|
|
>
|
|
|
|
<Icon icon="warning2" />NSFW
|
|
|
|
</span>
|
|
|
|
</div>
|
2019-12-13 04:04:04 +00:00
|
|
|
|
2020-05-21 22:55:11 +00:00
|
|
|
<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
|
2020-12-26 22:51:27 +00:00
|
|
|
:src="`/media/${cover.thumbnail}`"
|
2021-01-01 03:28:10 +00:00
|
|
|
:style="{ 'background-image': sfw ? `url(/media/${cover.sfw.lazy})` : `url(/media/${cover.lazy})` }"
|
2020-05-21 22:55:11 +00:00
|
|
|
class="item cover"
|
2020-12-26 22:51:27 +00:00
|
|
|
loading="lazy"
|
|
|
|
@load="$emit('load', $event)"
|
2020-05-21 22:55:11 +00:00
|
|
|
>
|
|
|
|
</a>
|
|
|
|
</template>
|
2020-03-09 01:02:29 +00:00
|
|
|
|
2020-07-06 00:40:10 +00:00
|
|
|
<div
|
2020-05-21 22:55:11 +00:00
|
|
|
v-for="photo in photos"
|
2020-08-12 01:30:20 +00:00
|
|
|
:key="`media-${photo.id}`"
|
2020-07-06 00:40:10 +00:00
|
|
|
class="item-container"
|
2020-05-21 22:55:11 +00:00
|
|
|
>
|
2020-07-06 00:40:10 +00:00
|
|
|
<a
|
|
|
|
:href="`/media/${photo.path}`"
|
|
|
|
:class="{ sfw }"
|
|
|
|
class="item-link"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2020-05-21 22:55:11 +00:00
|
|
|
>
|
2020-07-06 00:40:10 +00:00
|
|
|
<img
|
2020-12-26 22:51:27 +00:00
|
|
|
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
2021-01-01 03:28:10 +00:00
|
|
|
:style="{ 'background-image': sfw ? `url(/img/${photo.sfw.lazy})` : `url(/media/${photo.lazy})` }"
|
2020-07-06 00:40:10 +00:00
|
|
|
:alt="`Photo ${photo.index + 1}`"
|
2020-12-26 22:51:27 +00:00
|
|
|
loading="lazy"
|
2020-07-06 00:40:10 +00:00
|
|
|
class="item"
|
2020-12-26 22:51:27 +00:00
|
|
|
@load="$emit('load', $event)"
|
2020-07-06 00:40:10 +00:00
|
|
|
>
|
2020-04-02 00:02:03 +00:00
|
|
|
|
2020-07-06 00:40:10 +00:00
|
|
|
<span
|
|
|
|
v-if="sfw"
|
|
|
|
class="warning"
|
|
|
|
>
|
|
|
|
<Icon icon="warning2" />NSFW
|
|
|
|
</span>
|
|
|
|
</a>
|
|
|
|
</div>
|
2020-05-21 22:55:11 +00:00
|
|
|
</div>
|
2019-12-13 04:04:04 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-04-02 00:02:03 +00:00
|
|
|
function sfw() {
|
2020-05-21 22:55:11 +00:00
|
|
|
return this.$store.state.ui.sfw;
|
2020-04-02 00:02:03 +00:00
|
|
|
}
|
|
|
|
|
2019-12-13 04:04:04 +00:00
|
|
|
function photos() {
|
2020-09-08 00:20:15 +00:00
|
|
|
const clips = this.release.clips || [];
|
|
|
|
const clipPostersById = clips.reduce((acc, clip) => ({ ...acc, [clip.poster.id]: clip.poster }), {});
|
|
|
|
const uniqueClipPosters = Array.from(new Set(clips.map(clip => clip.poster.id) || [])).map(posterId => clipPostersById[posterId]);
|
2020-08-20 18:48:52 +00:00
|
|
|
const photosWithClipPosters = (this.release.photos || []).concat(uniqueClipPosters);
|
2020-08-20 02:57:38 +00:00
|
|
|
|
2021-01-15 03:04:32 +00:00
|
|
|
if (this.release.trailer || (this.release.teaser && this.release.teaser.mime !== 'image/gif')) {
|
2020-05-21 22:55:11 +00:00
|
|
|
// poster will be on trailer video
|
2020-08-20 17:52:02 +00:00
|
|
|
return photosWithClipPosters;
|
2020-05-21 22:55:11 +00:00
|
|
|
}
|
2019-12-13 04:04:04 +00:00
|
|
|
|
2020-05-21 22:55:11 +00:00
|
|
|
if (this.release.poster) {
|
2020-06-29 23:07:48 +00:00
|
|
|
// no trailer, add poster to photos
|
2020-09-03 21:30:42 +00:00
|
|
|
return [this.release.poster].concat(photosWithClipPosters);
|
2020-05-21 22:55:11 +00:00
|
|
|
}
|
2019-12-13 04:04:04 +00:00
|
|
|
|
2020-06-29 23:07:48 +00:00
|
|
|
// no poster available
|
2020-08-20 17:52:02 +00:00
|
|
|
return photosWithClipPosters;
|
2019-12-13 04:04:04 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default {
|
2020-05-21 22:55:11 +00:00
|
|
|
props: {
|
|
|
|
release: {
|
|
|
|
type: Object,
|
|
|
|
default: null,
|
|
|
|
},
|
2020-07-02 02:04:28 +00:00
|
|
|
expanded: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
2020-12-26 22:51:27 +00:00
|
|
|
test: {
|
|
|
|
type: String,
|
|
|
|
default: null,
|
|
|
|
},
|
2020-05-21 22:55:11 +00:00
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
playing: false,
|
|
|
|
paused: false,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
photos,
|
|
|
|
sfw,
|
|
|
|
},
|
2019-12-13 04:04:04 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import 'theme';
|
|
|
|
|
2020-06-29 23:07:48 +00:00
|
|
|
.media {
|
2019-12-13 04:04:04 +00:00
|
|
|
flex-shrink: 0;
|
|
|
|
white-space: nowrap;
|
|
|
|
font-size: 0;
|
|
|
|
|
2020-06-29 02:43:39 +00:00
|
|
|
&.expanded {
|
2020-07-06 00:40:10 +00:00
|
|
|
display: grid;
|
2021-01-17 01:07:02 +00:00
|
|
|
grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
|
2020-07-06 00:40:10 +00:00
|
|
|
grid-gap: 1rem;
|
2020-07-02 02:04:28 +00:00
|
|
|
justify-content: center;
|
2021-01-17 20:24:20 +00:00
|
|
|
padding: 1rem;
|
2020-07-06 00:40:10 +00:00
|
|
|
margin: 0 0 1rem 0;
|
2020-06-29 02:43:39 +00:00
|
|
|
}
|
2019-12-13 04:04:04 +00:00
|
|
|
}
|
|
|
|
|
2020-03-01 04:28:08 +00:00
|
|
|
.poster-link {
|
|
|
|
position: absolute;
|
|
|
|
top: .5rem;
|
|
|
|
right: .5rem;
|
|
|
|
transition: opacity .1s ease;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
width: 1.5rem;
|
|
|
|
height: 1.5rem;
|
2020-04-02 00:02:03 +00:00
|
|
|
fill: var(--lighten-strong);
|
|
|
|
filter: drop-shadow(0 0 1px var(--darken-weak));
|
2020-03-01 04:28:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&.playing {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
opacity: 1;
|
|
|
|
|
|
|
|
.icon {
|
2020-04-02 00:02:03 +00:00
|
|
|
fill: var(--text-light);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-06 00:40:10 +00:00
|
|
|
.item-container,
|
2020-06-29 23:07:48 +00:00
|
|
|
.trailer-container {
|
2020-07-06 00:40:10 +00:00
|
|
|
max-width: 100%;
|
2020-04-02 00:02:03 +00:00
|
|
|
position: relative;
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2020-07-06 00:40:10 +00:00
|
|
|
flex-shrink: 0;
|
2020-04-02 00:02:03 +00:00
|
|
|
|
|
|
|
.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;
|
2020-04-02 02:05:55 +00:00
|
|
|
text-shadow: 0 0 3px var(--darken-strong);
|
2020-04-02 00:02:03 +00:00
|
|
|
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;
|
2020-04-02 02:05:55 +00:00
|
|
|
filter: drop-shadow(0 0 3px var(--darken));
|
2020-04-02 00:02:03 +00:00
|
|
|
animation: alert .5s ease infinite .1s;
|
2020-03-01 04:28:08 +00:00
|
|
|
}
|
|
|
|
}
|
2020-04-02 00:02:03 +00:00
|
|
|
|
|
|
|
&:hover .warning {
|
|
|
|
display: inline-flex;
|
|
|
|
}
|
2020-03-01 04:28:08 +00:00
|
|
|
}
|
|
|
|
|
2019-12-13 04:04:04 +00:00
|
|
|
.item {
|
2021-01-17 01:07:02 +00:00
|
|
|
max-height: 18rem;
|
2020-07-06 00:40:10 +00:00
|
|
|
max-width: 100%;
|
2020-07-02 23:28:22 +00:00
|
|
|
box-shadow: 0 0 3px var(--shadow-weak);
|
2020-12-26 22:51:27 +00:00
|
|
|
background-size: cover;
|
2019-12-13 04:04:04 +00:00
|
|
|
}
|
2020-02-13 03:11:32 +00:00
|
|
|
|
2020-06-29 23:07:48 +00:00
|
|
|
.trailer-container {
|
2021-01-17 20:24:20 +00:00
|
|
|
height: 18rem;
|
2020-06-29 23:07:48 +00:00
|
|
|
width: 32rem;
|
|
|
|
max-width: 100%;
|
2020-04-02 00:02:03 +00:00
|
|
|
}
|
|
|
|
|
2020-07-01 02:47:05 +00:00
|
|
|
.trailer {
|
2020-07-02 02:04:28 +00:00
|
|
|
width: 100%;
|
2020-07-01 02:47:05 +00:00
|
|
|
max-height: 100%;
|
2020-06-29 23:07:48 +00:00
|
|
|
object-fit: cover;
|
2020-04-02 00:23:54 +00:00
|
|
|
|
|
|
|
&.sfw {
|
|
|
|
filter: blur(2rem);
|
|
|
|
}
|
2020-04-02 00:02:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes alert {
|
|
|
|
0% {
|
|
|
|
color: var(--text-light);
|
|
|
|
fill: var(--text-light);
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
color: var(--alert);
|
|
|
|
fill: var(--alert);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-29 23:07:48 +00:00
|
|
|
@media(max-width: $breakpoint0) {
|
|
|
|
.media:not(.expanded) .item,
|
|
|
|
.trailer-container {
|
|
|
|
height: 56vw; /* 16:9 ratio for full-width video */
|
2020-02-13 03:11:32 +00:00
|
|
|
}
|
|
|
|
}
|
2019-12-13 04:04:04 +00:00
|
|
|
</style>
|