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();
}
function scrollPhotos(event) {
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}
async function mounted() {
await this.fetchActor();
@ -355,7 +351,6 @@ export default {
mounted,
methods: {
fetchActor,
scrollPhotos,
},
};
</script>

View File

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

View File

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

View File

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

View File

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

View File

@ -101,9 +101,15 @@ export default {
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
grid-gap: 0 .5rem;
flex-grow: 1;
margin: 0 0 1rem 0;
}
@media(max-width: $breakpoint0) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
}
</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) {
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 $ = cheerio.load(html, { normalizeWhitespace: true });