forked from DebaucheryLibrarian/traxxx
Improved appearence of empty scene media banner.
This commit is contained in:
DebaucheryLibrarian
parent
fdb48f0d6d
commit
0a0a3ddd7b
|
|
@ -1,108 +1,110 @@
|
|||
<template>
|
||||
<div
|
||||
class="media"
|
||||
:class="{ center: release.photos.length < 2 }"
|
||||
>
|
||||
<div class="media-container">
|
||||
<div
|
||||
v-if="release.trailer || release.teaser"
|
||||
class="trailer-container"
|
||||
class="media"
|
||||
:class="{ center: release.photos.length < 2 }"
|
||||
>
|
||||
<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 }"
|
||||
class="item trailer"
|
||||
controls
|
||||
@playing="playing = true; paused = false;"
|
||||
@pause="playing = false; paused = true;"
|
||||
>Sorry, the tailer cannot be played in your browser</video>
|
||||
|
||||
<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 }"
|
||||
class="item trailer"
|
||||
controls
|
||||
@playing="playing = true; paused = false;"
|
||||
@pause="playing = false; paused = true;"
|
||||
>Sorry, the tailer cannot be played in your browser</video>
|
||||
|
||||
<img
|
||||
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
|
||||
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
|
||||
:alt="release.title"
|
||||
loading="lazy"
|
||||
class="item trailer"
|
||||
<div
|
||||
v-if="release.trailer || release.teaser"
|
||||
class="trailer-container"
|
||||
>
|
||||
<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 }"
|
||||
class="item trailer"
|
||||
controls
|
||||
@playing="playing = true; paused = false;"
|
||||
@pause="playing = false; paused = true;"
|
||||
>Sorry, the tailer cannot be played in your browser</video>
|
||||
|
||||
<a
|
||||
v-if="release.poster"
|
||||
v-tooltip="'View poster'"
|
||||
:href="`/media/${release.poster.path}`"
|
||||
:class="{ playing }"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="poster-link"
|
||||
><Icon icon="image" /></a>
|
||||
<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 }"
|
||||
class="item trailer"
|
||||
controls
|
||||
@playing="playing = true; paused = false;"
|
||||
@pause="playing = false; paused = true;"
|
||||
>Sorry, the tailer cannot be played in your browser</video>
|
||||
|
||||
<span
|
||||
v-if="sfw && !playing"
|
||||
class="warning"
|
||||
>
|
||||
<Icon icon="warning2" />NSFW
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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
|
||||
:src="`/media/${cover.thumbnail}`"
|
||||
:style="{ 'background-image': sfw ? `url(/media/${cover.sfw.lazy})` : `url(/media/${cover.lazy})` }"
|
||||
class="item cover"
|
||||
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
|
||||
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
|
||||
:alt="release.title"
|
||||
loading="lazy"
|
||||
@load="$emit('load', $event)"
|
||||
class="item trailer"
|
||||
>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-for="photo in photos"
|
||||
:key="`media-${photo.id}`"
|
||||
class="item-container"
|
||||
>
|
||||
<a
|
||||
:href="`/media/${photo.path}`"
|
||||
:class="{ sfw }"
|
||||
class="item-link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
||||
:style="{ 'background-image': sfw ? `url(/img/${photo.sfw.lazy})` : `url(/media/${photo.lazy})` }"
|
||||
:alt="`Photo ${photo.index + 1}`"
|
||||
loading="lazy"
|
||||
class="item"
|
||||
@load="$emit('load', $event)"
|
||||
>
|
||||
<a
|
||||
v-if="release.poster"
|
||||
v-tooltip="'View poster'"
|
||||
:href="`/media/${release.poster.path}`"
|
||||
:class="{ playing }"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="poster-link"
|
||||
><Icon icon="image" /></a>
|
||||
|
||||
<span
|
||||
v-if="sfw"
|
||||
v-if="sfw && !playing"
|
||||
class="warning"
|
||||
>
|
||||
<Icon icon="warning2" />NSFW
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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
|
||||
:src="`/media/${cover.thumbnail}`"
|
||||
:style="{ 'background-image': sfw ? `url(/media/${cover.sfw.lazy})` : `url(/media/${cover.lazy})` }"
|
||||
class="item cover"
|
||||
loading="lazy"
|
||||
@load="$emit('load', $event)"
|
||||
>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-for="photo in photos"
|
||||
:key="`media-${photo.id}`"
|
||||
class="item-container"
|
||||
>
|
||||
<a
|
||||
:href="`/media/${photo.path}`"
|
||||
:class="{ sfw }"
|
||||
class="item-link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
||||
:style="{ 'background-image': sfw ? `url(/img/${photo.sfw.lazy})` : `url(/media/${photo.lazy})` }"
|
||||
:alt="`Photo ${photo.index + 1}`"
|
||||
loading="lazy"
|
||||
class="item"
|
||||
@load="$emit('load', $event)"
|
||||
>
|
||||
|
||||
<span
|
||||
v-if="sfw"
|
||||
class="warning"
|
||||
>
|
||||
<Icon icon="warning2" />NSFW
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -163,6 +165,10 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
@import 'breakpoints';
|
||||
|
||||
.media-container {
|
||||
backdrop-filter: blur(1rem);
|
||||
}
|
||||
|
||||
.media {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
|
@ -171,6 +177,7 @@ export default {
|
|||
|
||||
.media.center {
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
>
|
||||
<Scroll
|
||||
v-slot="slotProps"
|
||||
class="scroll-light"
|
||||
class="scroll-light banner"
|
||||
:style="{ 'background-image': `url(/media/${release.poster.thumbnail})` }"
|
||||
:expandable="false"
|
||||
>
|
||||
<Banner
|
||||
|
|
@ -259,6 +260,11 @@ export default {
|
|||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
|
||||
.banner {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 1rem;
|
||||
border-left: solid 1px var(--shadow-hint);
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
<div
|
||||
ref="content"
|
||||
class="content"
|
||||
class="scroll-content"
|
||||
>
|
||||
<slot :loaded="loaded" />
|
||||
</div>
|
||||
|
|
@ -145,7 +145,7 @@ export default {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
.scroll-content {
|
||||
overflow-x: scroll;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
|
|
|||
Loading…
Reference in New Issue