forked from DebaucheryLibrarian/traxxx
Added dedicated stash page. Using preview tiles for stashes on user page.
This commit is contained in:
DebaucheryLibrarian
parent
cc27f202af
commit
f0265c2f5d
|
|
@ -27,7 +27,7 @@
|
|||
>
|
||||
<img
|
||||
:src="getPath(item, 'thumbnail', { local })"
|
||||
:style="{ 'background-image': `url('${getPath(item, 'lazy', { local })}')` }"
|
||||
:style="{ 'background-image': getBgPath(item, 'lazy', { local }) }"
|
||||
:width="item.thumbnailWidth"
|
||||
:height="item.thumbnailHeight"
|
||||
:title="item.title"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<ul class="rules">
|
||||
<li class="rule">You are at least 18 years old, and legally permitted to view adult material in your jurisdiction.</li>
|
||||
<li class="rule">You do not regard erotic, sexual and pornographic material as obscene or offensive.</li>
|
||||
<li class="rule">You do not regard erotic and frankly pornographic media as obscene or offensive.</li>
|
||||
<li class="rule">You understand that most sexual scenarios depicted on this website are fictional, performed by professional actors for the purpose of entertainment, and not representative of real-life interactions.</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,14 +55,14 @@
|
|||
v-show="me && isStashed"
|
||||
icon="heart7"
|
||||
class="stash stashed noselect"
|
||||
@click="unstashRelease"
|
||||
@click="unstashScene"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-show="me && !isStashed"
|
||||
icon="heart8"
|
||||
class="stash unstashed noselect"
|
||||
@click="stashRelease"
|
||||
@click="stashScene"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -251,8 +251,8 @@ async function fetchRelease(scroll = true) {
|
|||
}
|
||||
}
|
||||
|
||||
async function stashRelease() {
|
||||
this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashRelease', {
|
||||
async function stashScene() {
|
||||
this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
|
||||
sceneId: this.release.id,
|
||||
movieId: this.release.id,
|
||||
stashId: this.$store.getters.favorites.id,
|
||||
|
|
@ -261,8 +261,8 @@ async function stashRelease() {
|
|||
this.fetchRelease(false);
|
||||
}
|
||||
|
||||
async function unstashRelease() {
|
||||
this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashRelease', {
|
||||
async function unstashScene() {
|
||||
this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
|
||||
sceneId: this.release.id,
|
||||
movieId: this.release.id,
|
||||
stashId: this.$store.getters.favorites.id,
|
||||
|
|
@ -323,8 +323,8 @@ export default {
|
|||
mounted: fetchRelease,
|
||||
methods: {
|
||||
fetchRelease,
|
||||
stashRelease,
|
||||
unstashRelease,
|
||||
stashScene,
|
||||
unstashScene,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="stash"
|
||||
class="stash content"
|
||||
>
|
||||
<div class="stash-header">
|
||||
<h2 class="stash-name">{{ stash.name }}</h2>
|
||||
|
||||
<router-link
|
||||
v-if="stash.user"
|
||||
:to="{ name: 'user', params: { username: stash.user.username } }"
|
||||
class="stash-username nolink"
|
||||
><Icon icon="user3" />{{ stash.user.username }}</router-link>
|
||||
</div>
|
||||
|
||||
<div class="content-inner">
|
||||
<ul
|
||||
v-if="stash.scenes?.length > 0"
|
||||
class="stash-section stash-scenes nolist"
|
||||
>
|
||||
<li
|
||||
v-for="item in stash.scenes"
|
||||
:key="item.id"
|
||||
><Scene :release="item.scene" /></li>
|
||||
</ul>
|
||||
|
||||
<ul
|
||||
v-if="stash.actors?.length > 0"
|
||||
class="stash-section stash-actors nolist"
|
||||
>
|
||||
<li
|
||||
v-for="item in stash.actors"
|
||||
:key="item.id"
|
||||
><Actor :actor="item.actor" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Actor from '../actors/tile.vue';
|
||||
import Scene from '../releases/scene-tile.vue';
|
||||
|
||||
async function fetchStash() {
|
||||
this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
this.fetchStash();
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Actor,
|
||||
Scene,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stash: null,
|
||||
};
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
fetchStash,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.stash-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--profile);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.stash-name,
|
||||
.stash-username {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: .5rem 1rem;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
fill: var(--text-light);
|
||||
margin: -.1rem .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stash-section {
|
||||
padding: 1rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
}
|
||||
|
||||
.stash-actors,
|
||||
.stash-scenes {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
grid-gap: .5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stash-actors {
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
}
|
||||
|
||||
.stash-scenes {
|
||||
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
>
|
||||
<img
|
||||
:src="getPath(photo, 'thumbnail', { local: true })"
|
||||
:style="{ 'background-image': `url(${getPath(photo, 'lazy', { local: true })})` }"
|
||||
:style="{ 'background-image': getBgPath(photo, 'lazy', { local: true }) }"
|
||||
:alt="photo.comment"
|
||||
:width="photo.thumbnailWidth"
|
||||
:height="photo.thumbnailHeight"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<router-link
|
||||
:to="`/actor/${actor.id}/${actor.slug}`"
|
||||
class="actor nolink"
|
||||
>
|
||||
<div class="avatar">
|
||||
<img
|
||||
v-if="actor.avatar"
|
||||
:src="getPath(actor.avatar)"
|
||||
class="avatar-image"
|
||||
>
|
||||
|
||||
<Icon
|
||||
v-else-if="actor.gender"
|
||||
:icon="actor.gender"
|
||||
class="avatar-fallback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span class="name">{{ actor.name }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
async function unstashActor(actorId, stashId) {
|
||||
await this.$store.dispatch('unstashActor', { actorId, stashId });
|
||||
|
||||
this.$emit('unstash');
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
actor: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
stash: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
unstashActor,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.actor {
|
||||
height: 2.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: solid 1px var(--shadow-hint);
|
||||
|
||||
&:hover {
|
||||
border: solid 1px var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 100%;
|
||||
background: var(--profile);
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 0;
|
||||
}
|
||||
|
||||
.avatar-fallback {
|
||||
fill: var(--lighten-weak);
|
||||
}
|
||||
|
||||
.name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 .5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<a
|
||||
:href="`/scene/${scene.id}/${scene.slug || ''}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="scene nolink"
|
||||
>
|
||||
<img
|
||||
:src="getPath(scene.poster, 'thumbnail')"
|
||||
class="scene-poster"
|
||||
>
|
||||
|
||||
<div class="scene-header">
|
||||
<span class="scene-actors nolist">{{ scene.actors.map(actor => actor.name).join(', ') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="scene-footer">
|
||||
<img
|
||||
:src="`/img/logos/${scene.entity.parent.slug}/favicon_light.png`"
|
||||
class="scene-favicon"
|
||||
>
|
||||
|
||||
<span class="scene-title">{{ scene.title }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
scene: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
stash: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scene {
|
||||
width: 14rem;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.scene-poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 0;
|
||||
}
|
||||
|
||||
.scene-header,
|
||||
.scene-footer {
|
||||
width: 100%;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: var(--shadow-weak);
|
||||
color: var(--text-light);
|
||||
font-size: .7rem;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scene-header {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.scene-footer {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.scene-title {
|
||||
padding: .25rem .5rem;
|
||||
text-shadow: 0 0 2px var(--shadow);
|
||||
}
|
||||
|
||||
.scene-actors {
|
||||
padding: 0 .5rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.scene-unstash {
|
||||
fill: var(--lighten-strong);
|
||||
padding: .25rem;
|
||||
filter: drop-shadow(0 0 1px var(--shadow));
|
||||
|
||||
&:hover {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
.scene-favicon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
padding: .1rem 0 0 .25rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,16 +19,28 @@
|
|||
:key="stash.id"
|
||||
class="stash"
|
||||
>
|
||||
<h4 class="stash-name">{{ stash.name }}</h4>
|
||||
<router-link
|
||||
:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
|
||||
class="stash-link stash-section"
|
||||
>
|
||||
<h4 class="stash-name">{{ stash.name }}</h4>
|
||||
</router-link>
|
||||
|
||||
<ul
|
||||
v-if="stash.scenes?.length > 0"
|
||||
class="stash-section stash-scenes nolist"
|
||||
>
|
||||
<li
|
||||
v-for="item in stash.scenes"
|
||||
:key="item.id"
|
||||
><Scene :release="item.scene" /></li>
|
||||
v-for="{ scene } in stash.scenes"
|
||||
:key="scene.id"
|
||||
class="stash-scene"
|
||||
>
|
||||
<ScenePreview
|
||||
:scene="scene"
|
||||
:stash="stash"
|
||||
@unstash="fetchUser"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul
|
||||
|
|
@ -36,9 +48,16 @@
|
|||
class="stash-section stash-actors nolist"
|
||||
>
|
||||
<li
|
||||
v-for="item in stash.actors"
|
||||
:key="item.id"
|
||||
><Actor :actor="item.actor" /></li>
|
||||
v-for="{ actor } in stash.actors"
|
||||
:key="actor.id"
|
||||
class="stash-actor"
|
||||
>
|
||||
<ActorPreview
|
||||
:actor="actor"
|
||||
:stash="stash"
|
||||
@unstash="fetchUser"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -47,18 +66,22 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Actor from '../actors/tile.vue';
|
||||
import Scene from '../releases/scene-tile.vue';
|
||||
import ActorPreview from './actor-preview.vue';
|
||||
import ScenePreview from './scene-preview.vue';
|
||||
|
||||
async function mounted() {
|
||||
async function fetchUser() {
|
||||
this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
|
||||
this.pageTitle = this.user?.username;
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
await this.fetchUser();
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Actor,
|
||||
Scene,
|
||||
ActorPreview,
|
||||
ScenePreview,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -69,6 +92,9 @@ export default {
|
|||
};
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
fetchUser,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -89,25 +115,34 @@ export default {
|
|||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.stashes {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.stash {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
background: var(--background);
|
||||
margin: 0 0 1rem 0;
|
||||
box-shadow: 0 0 3px var(--shadow-weak);
|
||||
}
|
||||
|
||||
.stash-link.stash-section {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.stash-name {
|
||||
color: var(--shadow-strong);
|
||||
padding: 1rem .5rem 0 .5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stash-section {
|
||||
padding: 1rem .5rem;
|
||||
padding: .5rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
|
|
@ -116,17 +151,27 @@ export default {
|
|||
|
||||
.stash-actors,
|
||||
.stash-scenes {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
grid-gap: .5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
||||
.stash-actors {
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stash-scenes {
|
||||
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
|
||||
height: 8rem;
|
||||
grid-gap: .5rem;
|
||||
}
|
||||
|
||||
.stash-actors {
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.stash-actor,
|
||||
.stash-scene {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,10 @@ async function init() {
|
|||
}
|
||||
|
||||
function getPath(media, type, options) {
|
||||
if (!media) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const path = getBasePath(media, type, options);
|
||||
const filename = getFilename(media, type, options);
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import Actors from '../components/actors/actors.vue';
|
|||
import Movies from '../components/releases/movies.vue';
|
||||
import Tag from '../components/tags/tag.vue';
|
||||
import Tags from '../components/tags/tags.vue';
|
||||
import Stash from '../components/stashes/stash.vue';
|
||||
import Search from '../components/search/search.vue';
|
||||
import Stats from '../components/stats/stats.vue';
|
||||
import NotFound from '../components/errors/404.vue';
|
||||
|
|
@ -201,6 +202,11 @@ const routes = [
|
|||
component: Tags,
|
||||
name: 'tags',
|
||||
},
|
||||
{
|
||||
path: '/stash/:stashId/:stashSlug?',
|
||||
component: Stash,
|
||||
name: 'stash',
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
component: Search,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,62 @@
|
|||
import { post, del } from '../api';
|
||||
import { graphql, post, del } from '../api';
|
||||
import { releaseFields } from '../fragments';
|
||||
import { curateStash } from '../curate';
|
||||
|
||||
function initStashesActions(_store, _router) {
|
||||
async function fetchStash(context, stashId) {
|
||||
const { stash } = await graphql(`
|
||||
query Stash(
|
||||
$stashId: Int!
|
||||
) {
|
||||
stash(id: $stashId) {
|
||||
id
|
||||
name
|
||||
slug
|
||||
public
|
||||
user {
|
||||
id
|
||||
username
|
||||
}
|
||||
actors: stashesActors {
|
||||
comment
|
||||
actor {
|
||||
id
|
||||
name
|
||||
slug
|
||||
gender
|
||||
age
|
||||
ageFromBirth
|
||||
dateOfBirth
|
||||
birthCity
|
||||
birthState
|
||||
birthCountry: countryByBirthCountryAlpha2 {
|
||||
alpha2
|
||||
name
|
||||
alias
|
||||
}
|
||||
avatar: avatarMedia {
|
||||
id
|
||||
path
|
||||
thumbnail
|
||||
lazy
|
||||
}
|
||||
}
|
||||
}
|
||||
scenes: stashesScenes {
|
||||
comment
|
||||
scene {
|
||||
${releaseFields}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`, {
|
||||
stashId: Number(stashId),
|
||||
});
|
||||
|
||||
return curateStash(stash);
|
||||
}
|
||||
|
||||
async function stashActor(context, { actorId, stashId }) {
|
||||
await post(`/stashes/${stashId}/actors`, { actorId });
|
||||
}
|
||||
|
|
@ -26,6 +82,7 @@ function initStashesActions(_store, _router) {
|
|||
}
|
||||
|
||||
return {
|
||||
fetchStash,
|
||||
stashActor,
|
||||
stashScene,
|
||||
stashMovie,
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function initUsersActions(_store, _router) {
|
|||
}
|
||||
}
|
||||
}
|
||||
scenes: stashesScenes {
|
||||
scenes: stashesScenes(first: 20) {
|
||||
comment
|
||||
scene {
|
||||
${releaseFields}
|
||||
|
|
|
|||
|
|
@ -1087,6 +1087,10 @@ exports.up = knex => Promise.resolve()
|
|||
table.unique(['stash_id', 'scene_id']);
|
||||
|
||||
table.string('comment');
|
||||
|
||||
table.datetime('created_at')
|
||||
.notNullable()
|
||||
.defaultTo(knex.fn.now());
|
||||
}))
|
||||
.then(() => knex.schema.createTable('stashes_movies', (table) => {
|
||||
table.integer('stash_id')
|
||||
|
|
@ -1104,6 +1108,10 @@ exports.up = knex => Promise.resolve()
|
|||
table.unique(['stash_id', 'movie_id']);
|
||||
|
||||
table.string('comment');
|
||||
|
||||
table.datetime('created_at')
|
||||
.notNullable()
|
||||
.defaultTo(knex.fn.now());
|
||||
}))
|
||||
.then(() => knex.schema.createTable('stashes_actors', (table) => {
|
||||
table.integer('stash_id')
|
||||
|
|
@ -1121,6 +1129,10 @@ exports.up = knex => Promise.resolve()
|
|||
table.unique(['stash_id', 'actor_id']);
|
||||
|
||||
table.string('comment');
|
||||
|
||||
table.datetime('created_at')
|
||||
.notNullable()
|
||||
.defaultTo(knex.fn.now());
|
||||
}))
|
||||
// SEARCH
|
||||
.then(() => { // eslint-disable-line arrow-body-style
|
||||
|
|
|
|||
Loading…
Reference in New Issue