boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Added stash menu to release page, returning stashes from stash API to avoid reloading or local interpolation.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2021-03-21 03:23:58 +01:00
parent de5d104e1e
commit 348aa91832
18 changed files with 309 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
assets/components/releases/release.vue
View File

@@ -51,19 +51,52 @@
/>
</h2>
<Icon
v-show="me && stashed"
icon="heart7"
class="stash stashed noselect"
@click="unstashScene"
/>
<span>
<Tooltip class="stash-trigger">
<Icon
v-show="me"
icon="menu"
class="stash noselect"
:class="{ stashed, stashing }"
/>
<Icon
v-show="me && !stashed"
icon="heart8"
class="stash unstashed noselect"
@click="stashScene"
/>
<template v-slot:tooltip>
<StashMenu
v-if="$route.name === 'scene'"
:item="release"
:stashed-by="stashedBy"
:class="{ stashing }"
@stash="(stashId) => stashScene(stashId)"
@unstash="(stashId) => unstashScene(stashId)"
/>
<StashMenu
v-if="$route.name === 'movie'"
:item="release"
:stashed-by="stashedBy"
:class="{ stashing }"
@stash="(stashId) => stashScene(stashId)"
@unstash="(stashId) => unstashScene(stashId)"
/>
</template>
</Tooltip>
<Icon
v-show="me && favorited"
:class="{ stashing }"
icon="heart7"
class="stash stashed noselect"
@click="() => unstashScene()"
/>
<Icon
v-show="me && !favorited"
:class="{ stashing }"
icon="heart8"
class="stash unstashed noselect"
@click="() => stashScene()"
/>
</span>
</div>
<div class="row associations">
@@ -230,6 +263,7 @@
<script>
import Details from './details.vue';
import Banner from './banner.vue';
import StashMenu from '../stashes/menu.vue';
import Album from '../album/album.vue';
import Tags from './tags.vue';
import Chapters from './chapters.vue';
@@ -250,41 +284,44 @@ async function fetchRelease(scroll = true) {
this.$refs.content.scrollTop = 0;
}
this.stashed = this.release.isStashed;
this.stashedBy = this.release.stashes;
this.stashing = false;
}
async function stashScene() {
this.stashed = true;
async function stashScene(stash) {
this.stashing = true;
this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
sceneId: this.release.id,
movieId: this.release.id,
stashId: stash?.id || this.$store.getters.favorites.id,
});
try {
this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
sceneId: this.release.id,
movieId: this.release.id,
stashId: this.$store.getters.favorites.id,
});
} catch (error) {
this.stashed = false;
}
this.stashing = false;
}
async function unstashScene() {
this.stashed = false;
async function unstashScene(stash) {
this.stashing = true;
this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
sceneId: this.release.id,
movieId: this.release.id,
stashId: stash?.id || this.$store.getters.favorites.id,
});
try {
this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
sceneId: this.release.id,
movieId: this.release.id,
stashId: this.$store.getters.favorites.id,
});
} catch (error) {
this.stashed = true;
}
this.stashing = false;
}
function me() {
return this.$store.state.auth.user;
}
function favorited() {
return this.stashedBy.some(stash => stash.primary);
}
function stashed() {
return this.stashedBy.some(stash => !stash.primary);
}
function bannerBackground() {
return (this.release.poster && this.getBgPath(this.release.poster, 'thumbnail'))
|| (this.release.covers.length > 0 && this.getBgPath(this.release.covers[0], 'thumbnail'));
@@ -304,17 +341,19 @@ export default {
components: {
Actor,
Album,
Details,
Banner,
Scroll,
Releases,
Chapters,
Details,
Releases,
Scroll,
StashMenu,
Tags,
},
data() {
return {
release: null,
stashed: false,
stashedBy: [],
stashing: false,
};
},
computed: {
@@ -322,6 +361,8 @@ export default {
bannerBackground,
me,
showAlbum,
favorited,
stashed,
},
watch: {
$route: fetchRelease,
@@ -408,7 +449,7 @@ export default {
.stash.icon {
width: 1.5rem;
height: 1.5rem;
padding: 0 1rem;
padding: 0 .75rem;
fill: var(--shadow);
&.stashed {
@@ -421,6 +462,10 @@ export default {
}
}
.stash-trigger {
display: inline-block;
}
.album-toggle {
height: fit-content;
display: inline-flex;

74
assets/components/stashes/menu.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<ul class="menu nolist">
<li
v-for="stash in stashes"
:key="`stash-${stash.id}`"
class="menu-item"
>
<label class="menu-stash noselect">
<Checkbox
:checked="stashedByIds.has(stash.id)"
class="menu-check"
@change="(checked) => checked ? $emit('stash', stash) : $emit('unstash', stash)"
/>{{ stash.name }}
</label>
</li>
</ul>
</template>
<script>
import Checkbox from '../form/checkbox.vue';
function stashes() {
return this.$store.state.auth.user?.stashes || [];
}
export default {
components: {
Checkbox,
},
props: {
item: {
type: Object,
default: null,
},
stashedBy: {
type: Array,
default: () => [],
},
},
emits: ['stash', 'unstash'],
data() {
const stashedByIds = new Set(this.stashedBy.map(stash => stash.id));
return {
stashedByIds,
};
},
computed: {
stashes,
},
};
</script>
<style lang="scss" scoped>
.menu-item {
display: block;
}
.menu-stash {
display: flex;
align-items: center;
padding: .5rem 1rem .5rem .5rem;
&:hover {
color: var(--primary);
cursor: pointer;
}
}
.menu-check {
display: inline-block;
margin: 0 .75rem 0 0;
}
</style>

2
assets/components/stashes/stash.vue
View File

@@ -40,7 +40,7 @@
</label>
<Icon
v-if="isMine && stash.deletable"
v-if="isMine && !stash.primary"
icon="bin"
class="stash-remove"
@click.native="showRemoveStash = true"

2
assets/components/users/stash.vue
View File

@@ -33,7 +33,7 @@
</label>
<Icon
v-if="isMe && stash.deletable"
v-if="isMe && !stash.primary"
icon="bin"
class="stash-remove"
@click.native="showRemoveStash = true"

45
assets/components/users/user.vue
View File

@@ -11,9 +11,17 @@
v-if="user.stashes?.length > 0"
class="section"
>
<h3 class="heading">Stashes</h3>
<div class="section-header">
<h3 class="section-heading">Stashes</h3>
<ul class="stashes nolist">
<Icon
icon="plus3"
class="header-add"
@click="showAddStash = true"
/>
</div>
<ul class="section-body stashes nolist">
<li
v-for="stash in user.stashes"
:key="stash.id"
@@ -94,11 +102,13 @@ export default {
@import 'breakpoints';
.header {
padding: .5rem 1rem;
display: flex;
justify-content: space-between;
background: var(--profile);
}
.username {
padding: .5rem 1rem;
margin: 0;
font-size: 1.5rem;
color: var(--text-light);
@@ -108,7 +118,7 @@ export default {
}
.section {
padding: 1rem;
padding: 1rem 0;
margin: 0 0 1rem 0;
}
@@ -119,8 +129,33 @@ export default {
grid-gap: 1rem;
}
.heading {
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 1rem 0;
}
.section-body {
padding: 0 1rem;
}
.section-heading {
color: var(--primary);
padding: 0 1rem;
margin: 0;
font-size: 1.25rem;
}
.header-add {
height: auto;
padding: .5rem 1rem;
fill: var(--shadow);
&:hover {
fill: var(--primary);
cursor: pointer;
}
}
.stashes-stash {

2
assets/css/_theme.scss
View File

@@ -26,12 +26,14 @@ $breakpoint4: 1500px;
--darken-censor: rgba(0, 0, 0, .95);
--darken-weak: rgba(0, 0, 0, .2);
--darken-hint: rgba(0, 0, 0, .1);
--darken-touch: rgba(0, 0, 0, .05);
--lighten: rgba(255, 255, 255, .5);
--lighten-strong: rgba(255, 255, 255, .7);
--lighten-extreme: rgba(255, 255, 255, .9);
--lighten-weak: rgba(255, 255, 255, .2);
--lighten-hint: rgba(255, 255, 255, .05);
--lighten-touch: rgba(255, 255, 255, .03);
--logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
--logo-highlight: drop-shadow(0 0 1px $highlight);

6
assets/js/api.js
View File

@@ -66,6 +66,12 @@ async function del(endpoint) {
credentials: 'same-origin',
});
const contentTypes = res.headers.get('content-type');
if (res.ok && contentTypes?.includes('application/json')) {
return res.json();
}
if (res.ok) {
return true;
}

7
assets/js/curate.js
View File

@@ -56,6 +56,10 @@ function curateActor(actor, release) {
curatedActor.aliasFor = curateActor(curatedActor.aliasFor);
}
if (actor.stashes) {
curatedActor.stashes = actor.stashes.filter(Boolean).map(stash => curateStash(stash.stash || stash)); // eslint-disable-line no-use-before-define
}
curatedActor.stashes = actor.stashes?.map(stash => stash.stash || stash) || [];
return curatedActor;
@@ -80,6 +84,7 @@ function curateRelease(release) {
if (release.directors) curatedRelease.directors = release.directors.filter(Boolean).map(director => curateActor(director.director || director, curatedRelease));
if (release.movieTags && release.movieTags.length > 0) curatedRelease.tags = release.movieTags.filter(Boolean).map(({ tag }) => tag);
if (release.movieActors && release.movieActors.length > 0) curatedRelease.actors = release.movieActors.filter(Boolean).map(({ actor }) => curateActor(actor, curatedRelease));
if (release.stashes) curatedRelease.stashes = release.stashes.filter(Boolean).map(stash => curateStash(stash.stash || stash)); // eslint-disable-line no-use-before-define
if (release.productionLocation) {
curatedRelease.productionLocation = {
@@ -155,7 +160,7 @@ function curateUser(user) {
const curatedUser = user;
if (user.stashes) {
curatedUser.stashes = user.stashes.map(stash => curateStash(stash));
curatedUser.stashes = user.stashes.map(stash => curateStash(stash.stash || stash));
}
return curatedUser;

8
assets/js/fragments.js
View File

@@ -228,7 +228,8 @@ const releaseFields = `
url
}
isNew
isStashed
isFavorited
isStashed(includeFavorites: false)
stashes: stashesScenesBySceneId(
filter: {
stash: {
@@ -242,6 +243,7 @@ const releaseFields = `
id
name
slug
primary
}
}
`;
@@ -368,7 +370,8 @@ const releaseFragment = `
}
}
}
isStashed
isFavorited
isStashed(includeFavorites: false)
stashes: stashesScenesBySceneId(
filter: {
stash: {
@@ -382,6 +385,7 @@ const releaseFragment = `
id
name
slug
primary
}
}
}

22
assets/js/stashes/actions.js
View File

@@ -21,7 +21,7 @@ function initStashesActions(store, _router) {
name
slug
public
deletable
primary
user {
id
username
@@ -69,15 +69,11 @@ function initStashesActions(store, _router) {
}
async function createStash(context, stash) {
const newStash = await post('/stashes', stash);
return newStash;
return post('/stashes', stash);
}
async function updateStash(context, { stashId, stash }) {
const newStash = await patch(`/stashes/${stashId}`, stash);
return newStash;
return patch(`/stashes/${stashId}`, stash);
}
async function removeStash(context, stashId) {
@@ -85,27 +81,27 @@ function initStashesActions(store, _router) {
}
async function stashActor(context, { actorId, stashId }) {
await post(`/stashes/${stashId}/actors`, { actorId });
return post(`/stashes/${stashId}/actors`, { actorId });
}
async function unstashActor(context, { actorId, stashId }) {
await del(`/stashes/${stashId}/actors/${actorId}`);
return del(`/stashes/${stashId}/actors/${actorId}`);
}
async function stashScene(context, { sceneId, stashId }) {
await post(`/stashes/${stashId}/scenes`, { sceneId });
return post(`/stashes/${stashId}/scenes`, { sceneId });
}
async function unstashScene(context, { sceneId, stashId }) {
await del(`/stashes/${stashId}/scenes/${sceneId}`);
return del(`/stashes/${stashId}/scenes/${sceneId}`);
}
async function stashMovie(context, { movieId, stashId }) {
await post(`/stashes/${stashId}/movies`, { movieId });
return post(`/stashes/${stashId}/movies`, { movieId });
}
async function unstashMovie(context, { movieId, stashId }) {
await del(`/stashes/${stashId}/movies/${movieId}`);
return del(`/stashes/${stashId}/movies/${movieId}`);
}
return {

2
assets/js/users/actions.js
View File

@@ -19,7 +19,7 @@ function initUsersActions(store, _router) {
name
slug
public
deletable
primary
actors: stashesActors {
comment
actor {