Added components.

This commit is contained in:
ThePendulum 2020-05-22 00:55:11 +02:00
parent c3de881a2c
commit f38be7a706
9 changed files with 125 additions and 125 deletions

View File

@ -318,10 +318,6 @@ 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();
@ -355,7 +351,6 @@ export default {
mounted, mounted,
methods: { methods: {
fetchActor, fetchActor,
scrollPhotos,
}, },
}; };
</script> </script>

View File

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

View File

@ -67,6 +67,7 @@ export default {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
padding: 1rem; padding: 1rem;
border-bottom: solid 1px var(--darken-hint);
font-size: 0; font-size: 0;
overflow-x: scroll; overflow-x: scroll;
scrollbar-width: none; scrollbar-width: none;
@ -79,11 +80,9 @@ export default {
display: none; display: none;
} }
/*
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
*/
} }
.photo-link { .photo-link {

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,8 +3,6 @@
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
@ -95,6 +93,8 @@
</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,9 +101,15 @@ export default {
.tiles { .tiles {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(11rem, 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.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

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 });