Compare commits

..

No commits in common. "7e52f6d18d4a686624d09fd8f1dd240c053ceec2" and "fdb48f0d6dbb539f0df33b8ef6dd08dd90293bd5" have entirely different histories.

6 changed files with 98 additions and 111 deletions

View File

@ -72,16 +72,16 @@ export default {
} }
.album-title { .album-title {
display: block; display: flex;
flex-grow: 1; flex-grow: 1;
align-items: center; align-items: center;
padding: 1rem; justify-content: center;
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,110 +1,108 @@
<template> <template>
<div class="media-container"> <div
class="media"
:class="{ center: release.photos.length < 2 }"
>
<div <div
class="media" v-if="release.trailer || release.teaser"
:class="{ center: release.photos.length < 2 }" class="trailer-container"
> >
<div <video
v-if="release.trailer || release.teaser" v-if="release.trailer"
class="trailer-container" :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"
> >
<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 <a
v-else-if="release.teaser && /^video\//.test(release.teaser.mime)" v-if="release.poster"
:src="`/media/${release.teaser.path}`" v-tooltip="'View poster'"
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)" :href="`/media/${release.poster.path}`"
:alt="release.title" :class="{ playing }"
:class="{ sfw: sfw && paused }" target="_blank"
class="item trailer" rel="noopener noreferrer"
controls class="poster-link"
@playing="playing = true; paused = false;" ><Icon icon="image" /></a>
@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
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)" :src="`/media/${cover.thumbnail}`"
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`" :style="{ 'background-image': sfw ? `url(/media/${cover.sfw.lazy})` : `url(/media/${cover.lazy})` }"
:alt="release.title" class="item cover"
loading="lazy" loading="lazy"
class="item trailer" @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)"
> >
<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 <span
v-if="sfw && !playing" v-if="sfw"
class="warning" class="warning"
> >
<Icon icon="warning2" />NSFW <Icon icon="warning2" />NSFW
</span> </span>
</div> </a>
<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>
@ -165,10 +163,6 @@ 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;
@ -177,7 +171,6 @@ export default {
.media.center { .media.center {
width: 1200px; width: 1200px;
max-width: 100%;
margin: 0 auto; margin: 0 auto;
} }

View File

@ -5,8 +5,7 @@
> >
<Scroll <Scroll
v-slot="slotProps" v-slot="slotProps"
class="scroll-light banner" class="scroll-light"
:style="{ 'background-image': `url(/media/${release.poster.thumbnail})` }"
:expandable="false" :expandable="false"
> >
<Banner <Banner
@ -260,11 +259,6 @@ 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="scroll-content" class="content"
> >
<slot :loaded="loaded" /> <slot :loaded="loaded" />
</div> </div>
@ -145,7 +145,7 @@ export default {
position: relative; position: relative;
} }
.scroll-content { .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.3", "version": "1.159.2",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

View File

@ -1,6 +1,6 @@
{ {
"name": "traxxx", "name": "traxxx",
"version": "1.159.3", "version": "1.159.2",
"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": {