Compare commits

..

No commits in common. "f38be7a7064bc2a30f1435f90f520829cffb350c" and "532a4b679b8040e9b5afef385e10d091347ee308" have entirely different histories.

9 changed files with 198 additions and 166 deletions

View File

@ -285,12 +285,20 @@
</div> </div>
<div class="actor-content"> <div class="actor-content">
<Photos
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
:actor="actor"
/>
<Releases :releases="actor.releases" /> <Releases :releases="actor.releases" />
<div
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
class="photos-container"
>
<Photos :actor="actor" />
<Photos
:actor="actor"
:class="{ expanded }"
class="compact"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -318,6 +326,10 @@ async function route() {
await this.fetchActor(); await this.fetchActor();
} }
function scrollPhotos(event) {
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}
async function mounted() { async function mounted() {
await this.fetchActor(); await this.fetchActor();
@ -351,6 +363,7 @@ export default {
mounted, mounted,
methods: { methods: {
fetchActor, fetchActor,
scrollPhotos,
}, },
}; };
</script> </script>
@ -416,6 +429,7 @@ export default {
} }
.avatar-link { .avatar-link {
font-size: 0;
padding: 0 0 1rem 1rem; padding: 0 0 1rem 1rem;
flex-shrink: 0; flex-shrink: 0;
} }
@ -423,7 +437,6 @@ export default {
.avatar { .avatar {
height: 100%; height: 100%;
flex-shrink: 0; flex-shrink: 0;
border: solid 3px var(--lighten-hint);
margin: 0 .5rem 0 0; margin: 0 .5rem 0 0;
} }
} }
@ -600,7 +613,7 @@ export default {
.actor-content { .actor-content {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: row;
} }
.heading { .heading {
@ -608,6 +621,13 @@ export default {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
} }
.photos-container {
box-sizing: border-box;
border-left: solid 1px $shadow-hint;
padding: 1rem 1rem 1rem 1.5rem;
margin: 0 0 0 .5rem;
}
.photos.compact { .photos.compact {
display: none; display: none;
} }
@ -640,6 +660,20 @@ export default {
.actor-content { .actor-content {
flex-direction: column; flex-direction: column;
} }
.photos-container {
border: none;
border-bottom: solid 1px $shadow-hint;
margin: 0 0 .5rem 0;
}
.photos {
display: none;
}
.photos.compact {
display: flex;
}
} }
@media(max-width: $breakpoint) { @media(max-width: $breakpoint) {

View File

@ -155,7 +155,7 @@ export default {
.tiles { .tiles {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-gap: 0 .5rem; grid-gap: 0 .5rem;
padding: 1rem; padding: 1rem;
flex-grow: 1; flex-grow: 1;

View File

@ -1,12 +1,7 @@
<template> <template>
<div <div
v-lazy-container
class="photos" class="photos"
:class="{ :class="{ wide: actor.photos.length > 2 }"
avatar: !!actor.avatar,
empty: actor.photos.length === 0,
wide: actor.photos.length > 2
}"
> >
<a <a
v-if="actor.avatar" v-if="actor.avatar"
@ -16,8 +11,7 @@
class="avatar-link photo-link" class="avatar-link photo-link"
> >
<img <img
:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`" :src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`" :title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
class="avatar photo" class="avatar photo"
> >
@ -32,8 +26,7 @@
class="photo-link" class="photo-link"
> >
<img <img
:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`" :src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
:title="photo.copyright && `© ${photo.copyright}`" :title="photo.copyright && `© ${photo.copyright}`"
class="photo" class="photo"
> >
@ -63,48 +56,59 @@ export default {
@import 'theme'; @import 'theme';
.photos { .photos {
width: 100%; display: inline-grid;
display: flex; grid-template-columns: repeat(auto-fit, 12rem);
box-sizing: border-box; grid-gap: .5rem;
padding: 1rem;
border-bottom: solid 1px var(--darken-hint);
font-size: 0; font-size: 0;
overflow-x: scroll;
scrollbar-width: none;
&.empty {
display: none;
}
.avatar-link { .avatar-link {
display: none; display: none;
} }
&::-webkit-scrollbar { &.compact {
display: none; .photo {
} width: auto;
}
}
} }
.photo-link { .photo-link {
height: 16rem;
flex-shrink: 0;
margin: 0 .5rem 0 0;
} }
.photo { .photo {
width: 100%;
height: 100%; height: 100%;
object-fit: cover;
box-shadow: 0 0 3px $shadow-weak; box-shadow: 0 0 3px $shadow-weak;
} }
@media(max-width: $breakpoint3) { @media(min-width: $breakpoint3) {
.photos { .photos.wide {
&.empty.avatar { max-width: 30vw;
display: flex; }
} }
.avatar-link { @media(max-width: $breakpoint3) {
display: inline-block; .photos {
} width: 100%;
max-width: 100%;
display: flex;
overflow-x: scroll;
scrollbar-width: none;
.avatar-link {
display: inline-block;
}
&::-webkit-scrollbar {
display: none;
}
}
.photo-link {
height: 15rem;
flex-shrink: 0;
margin: 0 .5rem 0 0;
} }
} }
</style> </style>

View File

@ -1,139 +1,139 @@
<template> <template>
<div <div
class="banner" class="banner"
@wheel.prevent="scrollBanner" @wheel.prevent="scrollBanner"
> >
<div class="trailer"> <div class="trailer">
<video <video
v-if="release.trailer" v-if="release.trailer"
:src="`/media/${release.trailer.path}`" :src="`/media/${release.trailer.path}`"
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)" :poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
:alt="release.title" :alt="release.title"
:class="{ sfw: sfw && paused }" :class="{ sfw: sfw && paused }"
class="item trailer-video" class="item trailer-video"
controls controls
@playing="playing = true; paused = false;" @playing="playing = true; paused = false;"
@pause="playing = false; paused = true;" @pause="playing = false; paused = true;"
>Sorry, the tailer cannot be played in your browser</video> >Sorry, the tailer cannot be played in your browser</video>
<video <video
v-else-if="release.teaser && /^video\//.test(release.teaser.mime)" v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
:src="`/media/${release.teaser.path}`" :src="`/media/${release.teaser.path}`"
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)" :poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
:alt="release.title" :alt="release.title"
:class="{ sfw: sfw && paused }" :class="{ sfw: sfw && paused }"
class="item trailer-video" class="item trailer-video"
controls controls
@playing="playing = true; paused = false;" @playing="playing = true; paused = false;"
@pause="playing = false; paused = true;" @pause="playing = false; paused = true;"
>Sorry, the tailer cannot be played in your browser</video> >Sorry, the tailer cannot be played in your browser</video>
<img <img
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)" v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`" :src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
:alt="release.title" :alt="release.title"
class="item trailer-video" class="item trailer-video"
> >
<a <a
v-if="release.poster" v-if="release.poster"
:href="`/media/${release.poster.path}`" :href="`/media/${release.poster.path}`"
:class="{ playing }" :class="{ playing }"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="poster-link" class="poster-link"
><Icon icon="image" /></a> ><Icon icon="image" /></a>
<span <span
v-if="sfw && !playing" v-if="sfw && !playing"
class="warning" class="warning"
> >
<Icon icon="warning2" />NSFW <Icon icon="warning2" />NSFW
</span> </span>
</div> </div>
<template v-if="release.covers && release.covers.length > 0"> <template v-if="release.covers && release.covers.length > 0">
<a <a
v-for="cover in release.covers" v-for="cover in release.covers"
:key="`cover-${cover.id}`" :key="`cover-${cover.id}`"
:href="`/media/${cover.path}`" :href="`/media/${cover.path}`"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<img <img
:src="`/media/${cover.thumbnail}`" :src="`/media/${cover.thumbnail}`"
class="item cover" class="item cover"
> >
</a> </a>
</template> </template>
<a <a
v-for="photo in photos" v-for="photo in photos"
:key="`banner-${photo.index}`" :key="`banner-${photo.index}`"
:href="`/media/${photo.path}`" :href="`/media/${photo.path}`"
:class="{ sfw }" :class="{ sfw }"
class="item-link" class="item-link"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<img <img
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`" :src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:alt="`Photo ${photo.index + 1}`" :alt="`Photo ${photo.index + 1}`"
class="item" class="item"
> >
<span <span
v-if="sfw" v-if="sfw"
class="warning" class="warning"
> >
<Icon icon="warning2" />NSFW <Icon icon="warning2" />NSFW
</span> </span>
</a> </a>
</div> </div>
</template> </template>
<script> <script>
function sfw() { function sfw() {
return this.$store.state.ui.sfw; return this.$store.state.ui.sfw;
} }
function photos() { function photos() {
if (this.release.trailer || this.release.teaser) { if (this.release.trailer || this.release.teaser) {
// poster will be on trailer video // poster will be on trailer video
return this.release.photos; return this.release.photos;
} }
if (this.release.poster) { if (this.release.poster) {
return [this.release.poster].concat(this.release.photos); return [this.release.poster].concat(this.release.photos);
} }
return this.release.photos; return this.release.photos;
} }
function scrollBanner(event) { function scrollBanner(event) {
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
} }
export default { export default {
props: { props: {
release: { release: {
type: Object, type: Object,
default: null, default: null,
}, },
}, },
data() { data() {
return { return {
playing: false, playing: false,
paused: false, paused: false,
}; };
}, },
computed: { computed: {
photos, photos,
sfw, sfw,
}, },
methods: { methods: {
scrollBanner, scrollBanner,
}, },
}; };
</script> </script>

View File

@ -3,6 +3,8 @@
v-if="release" v-if="release"
class="content" class="content"
> >
<Banner :release="release" />
<div class="details"> <div class="details">
<div class="column"> <div class="column">
<a <a
@ -93,8 +95,6 @@
</div> </div>
</div> </div>
<Banner :release="release" />
<div class="info column"> <div class="info column">
<h2 class="row title">{{ release.title }}</h2> <h2 class="row title">{{ release.title }}</h2>

View File

@ -101,15 +101,9 @@ export default {
.tiles { .tiles {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-gap: 0 .5rem; grid-gap: 0 .5rem;
flex-grow: 1; flex-grow: 1;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
} }
@media(max-width: $breakpoint0) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
}
</style> </style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

View File

@ -49,7 +49,7 @@ function scrapePhotos(html, type) {
async function getPhotosLegacy(entryId, site, type = 'highres', page = 1) { async function getPhotosLegacy(entryId, site, type = 'highres', page = 1) {
const albumUrl = `${site.url}/trial/gallery.php?id=${entryId}&type=${type}&page=${page}`; const albumUrl = `${site.url}/trial/gallery.php?id=${entryId}&type=${type}&page=${page}`;
// logger.warn(`Jules Jordan is using legacy photo scraper for ${albumUrl} (page ${page})`); logger.warn(`Jules Jordan is using legacy photo scraper for ${albumUrl} (page ${page})`);
const html = await fetchPhotos(albumUrl); const html = await fetchPhotos(albumUrl);
const $ = cheerio.load(html, { normalizeWhitespace: true }); const $ = cheerio.load(html, { normalizeWhitespace: true });