Compare commits

...

3 Commits

Author SHA1 Message Date
DebaucheryLibrarian 7e52f6d18d Fixed album title overflow. 2021-01-23 23:50:15 +01:00
DebaucheryLibrarian e1b52de7a3 1.159.3 2021-01-23 23:27:02 +01:00
DebaucheryLibrarian 0a0a3ddd7b Improved appearence of empty scene media banner. 2021-01-23 23:26:56 +01:00
6 changed files with 110 additions and 97 deletions

View File

@ -72,16 +72,16 @@ export default {
} }
.album-title { .album-title {
display: flex; display: block;
flex-grow: 1; flex-grow: 1;
align-items: center; align-items: center;
justify-content: center; padding: 1rem;
padding: .5rem 1rem;
margin: 0; margin: 0;
color: var(--text-light); color: var(--text-light);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center;
} }
.close { .close {

View File

@ -1,108 +1,110 @@
<template> <template>
<div <div class="media-container">
class="media"
:class="{ center: release.photos.length < 2 }"
>
<div <div
v-if="release.trailer || release.teaser" class="media"
class="trailer-container" :class="{ center: release.photos.length < 2 }"
> >
<video <div
v-if="release.trailer" v-if="release.trailer || release.teaser"
:src="`/media/${release.trailer.path}`" class="trailer-container"
: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"
> >
<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 <video
v-if="release.poster" v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
v-tooltip="'View poster'" :src="`/media/${release.teaser.path}`"
:href="`/media/${release.poster.path}`" :poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
:class="{ playing }" :alt="release.title"
target="_blank" :class="{ sfw: sfw && paused }"
rel="noopener noreferrer" class="item trailer"
class="poster-link" controls
><Icon icon="image" /></a> @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 <img
:src="`/media/${cover.thumbnail}`" v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
:style="{ 'background-image': sfw ? `url(/media/${cover.sfw.lazy})` : `url(/media/${cover.lazy})` }" :src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
class="item cover" :alt="release.title"
loading="lazy" loading="lazy"
@load="$emit('load', $event)" class="item trailer"
> >
</a>
</template>
<div <a
v-for="photo in photos" v-if="release.poster"
:key="`media-${photo.id}`" v-tooltip="'View poster'"
class="item-container" :href="`/media/${release.poster.path}`"
> :class="{ playing }"
<a target="_blank"
:href="`/media/${photo.path}`" rel="noopener noreferrer"
:class="{ sfw }" class="poster-link"
class="item-link" ><Icon icon="image" /></a>
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 <span
v-if="sfw" v-if="sfw && !playing"
class="warning" class="warning"
> >
<Icon icon="warning2" />NSFW <Icon icon="warning2" />NSFW
</span> </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>
</div> </div>
</template> </template>
@ -163,6 +165,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import 'breakpoints'; @import 'breakpoints';
.media-container {
backdrop-filter: blur(1rem);
}
.media { .media {
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
@ -171,6 +177,7 @@ export default {
.media.center { .media.center {
width: 1200px; width: 1200px;
max-width: 100%;
margin: 0 auto; margin: 0 auto;
} }

View File

@ -5,7 +5,8 @@
> >
<Scroll <Scroll
v-slot="slotProps" v-slot="slotProps"
class="scroll-light" class="scroll-light banner"
:style="{ 'background-image': `url(/media/${release.poster.thumbnail})` }"
:expandable="false" :expandable="false"
> >
<Banner <Banner
@ -259,6 +260,11 @@ export default {
border-bottom: solid 1px var(--shadow-hint); border-bottom: solid 1px var(--shadow-hint);
} }
.banner {
background-position: center;
background-size: cover;
}
.info { .info {
padding: 1rem; padding: 1rem;
border-left: solid 1px var(--shadow-hint); border-left: solid 1px var(--shadow-hint);

View File

@ -24,7 +24,7 @@
<div <div
ref="content" ref="content"
class="content" class="scroll-content"
> >
<slot :loaded="loaded" /> <slot :loaded="loaded" />
</div> </div>
@ -145,7 +145,7 @@ export default {
position: relative; position: relative;
} }
.content { .scroll-content {
overflow-x: scroll; overflow-x: scroll;
scroll-behavior: smooth; scroll-behavior: smooth;
scrollbar-width: none; scrollbar-width: none;

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "traxxx", "name": "traxxx",
"version": "1.159.2", "version": "1.159.3",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

View File

@ -1,6 +1,6 @@
{ {
"name": "traxxx", "name": "traxxx",
"version": "1.159.2", "version": "1.159.3",
"description": "All the latest porn releases in one place", "description": "All the latest porn releases in one place",
"main": "src/app.js", "main": "src/app.js",
"scripts": { "scripts": {