Added album button and component to scene page.
This commit is contained in:
DebaucheryLibrarian
parent
985b523031
commit
59ba84b7b1
68
\
68
\
|
|
@ -1,68 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
const qu = require('../utils/qu');
|
||||
const http = require('../utils/http');
|
||||
const slugify = require('../utils/slugify');
|
||||
|
||||
function scrapeAll(scenes) {
|
||||
return scenes.map((scene) => {
|
||||
const release = {};
|
||||
|
||||
release.entryId = scene.id;
|
||||
release.url = `https://tour.topwebmodels.com/scenes/${scene.id}/${slugify(scene.title)}`;
|
||||
|
||||
release.title = scene.title;
|
||||
release.description = scene.description;
|
||||
|
||||
release.duration = qu.durationToSeconds(scene.videos_duration);
|
||||
release.date = new Date(scene.release_date);
|
||||
|
||||
release.actors = scene.models.map(actor => ({
|
||||
name: actor.name,
|
||||
gender: actor.gender || null,
|
||||
avatar: actor.thumb,
|
||||
url: `https://tour.topwebmodels.com/models/${actor.id}/${slugify(actor.name)}`,
|
||||
}));
|
||||
|
||||
release.stars = scene.rating;
|
||||
release.tags = scene.tags.map(tag => tag.name);
|
||||
|
||||
release.poster = scene.thumb;
|
||||
|
||||
release.channel = slugify(scene.sites[0]?.name, '');
|
||||
|
||||
console.log(scene);
|
||||
console.log(release);
|
||||
return release;
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchLatest(channel, page) {
|
||||
console.log(channel);
|
||||
const res = await http.get(`https://tour.topwebmodels.com/api/sites/${channel.parameters?.slug || channel.slug}?page=${page}`, {
|
||||
headers: {
|
||||
Referer: 'https://tour.topwebmodels.com',
|
||||
'api-key': channel.parameters?.apiKey || channel.parent?.parameters?.apiKey,
|
||||
'x-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
});
|
||||
|
||||
console.log(res.body, res.request);
|
||||
|
||||
if (res.ok) {
|
||||
return scrapeAll(res.body.videos.items);
|
||||
}
|
||||
|
||||
return res.status;
|
||||
}
|
||||
|
||||
async function fetchScene(url) {
|
||||
const res = await http.get(url, { extract: { runScripts: 'dangerously', } });
|
||||
|
||||
console.log(res.);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
fetchLatest,
|
||||
fetchScene,
|
||||
};
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<template>
|
||||
<teleport to="body">
|
||||
<div class="album">
|
||||
<div class="album-header">
|
||||
<h3 class="album-title">{{ title }}</h3>
|
||||
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="close"
|
||||
@click.native="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
class="item-container"
|
||||
>
|
||||
<a
|
||||
:href="`/media/${item.path}`"
|
||||
class="item-link"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
:src="`/media/${item.thumbnail}`"
|
||||
loading="lazy"
|
||||
class="item image"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
emits: ['close'],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'breakpoints';
|
||||
|
||||
.album {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: var(--shadow-extreme);
|
||||
z-index: 10;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.album-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.album-title {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
color: var(--text-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 1rem;
|
||||
fill: var(--lighten);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
.album {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
|
||||
grid-gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.album {
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,13 +3,6 @@
|
|||
v-if="release"
|
||||
class="content"
|
||||
>
|
||||
<Expand
|
||||
v-if="expanded"
|
||||
class="expand expand-dark"
|
||||
:expanded="expanded"
|
||||
@expand="(state) => expanded = state"
|
||||
/>
|
||||
|
||||
<Scroll
|
||||
v-slot="slotProps"
|
||||
class="scroll-light"
|
||||
|
|
@ -17,15 +10,26 @@
|
|||
>
|
||||
<Media
|
||||
:release="release"
|
||||
:class="{ expanded }"
|
||||
@load="slotProps.loaded"
|
||||
/>
|
||||
</Scroll>
|
||||
|
||||
<Details :release="release" />
|
||||
|
||||
<button
|
||||
class="album-toggle"
|
||||
@click="showAlbum = true"
|
||||
><Icon icon="grid3" />View album</button>
|
||||
|
||||
<Album
|
||||
v-if="showAlbum"
|
||||
:items="release.photos"
|
||||
:title="release.title"
|
||||
@close="showAlbum = false"
|
||||
/>
|
||||
|
||||
<div class="info column">
|
||||
<div class="row">
|
||||
<div class="row row-title">
|
||||
<h2
|
||||
v-if="release.title"
|
||||
class="title"
|
||||
|
|
@ -192,14 +196,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Media from './media.vue';
|
||||
import Details from './details.vue';
|
||||
import Media from './media.vue';
|
||||
import Album from '../album/album.vue';
|
||||
import Tags from './tags.vue';
|
||||
import Clips from './clips.vue';
|
||||
import Actor from '../actors/tile.vue';
|
||||
import Releases from './releases.vue';
|
||||
import Scroll from '../scroll/scroll.vue';
|
||||
import Expand from '../expand/expand.vue';
|
||||
|
||||
async function fetchRelease() {
|
||||
if (this.$route.name === 'scene') {
|
||||
|
|
@ -220,10 +224,10 @@ function pageTitle() {
|
|||
export default {
|
||||
components: {
|
||||
Actor,
|
||||
Album,
|
||||
Details,
|
||||
Media,
|
||||
Scroll,
|
||||
Expand,
|
||||
Releases,
|
||||
Clips,
|
||||
Tags,
|
||||
|
|
@ -231,7 +235,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
release: null,
|
||||
expanded: false,
|
||||
showAlbum: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -285,8 +289,13 @@ export default {
|
|||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
.row-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
|
||||
.icon {
|
||||
|
|
@ -304,11 +313,28 @@ export default {
|
|||
color: var(--shadow);
|
||||
}
|
||||
|
||||
.title-shoot {
|
||||
margin: 0 0 0 .5rem;
|
||||
.album-toggle {
|
||||
height: fit-content;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: .5rem 1rem;
|
||||
border: none;
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
color: var(--shadow);
|
||||
font-size: .9rem;
|
||||
background: none;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
margin: -.1rem .5rem 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--shadow-hint);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
|
|
|
|||
Loading…
Reference in New Issue