DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added secondary stash button, centralized bookmark (heart) component.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-03-27 02:28:21 +01:00
parent c018f54a12
commit b1e336381c
15 changed files with 426 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
pages/actors/@actorId/+Page.vue
View File

@@ -25,18 +25,10 @@
</span>
</li>
<Icon
v-show="favorited"
icon="heart7"
class="heart favorited"
@click.native.stop="unstash"
/>
<Icon
v-show="!favorited && user"
icon="heart8"
class="heart"
@click.native.stop="stash"
<Heart
domain="actors"
:item="actor"
class="light"
/>
</div>
@@ -49,61 +41,16 @@
</template>
<script setup>
import { ref, inject } from 'vue';
import { post, del } from '#/src/api.js';
import events from '#/src/events.js';
import { inject } from 'vue';
import Bio from '#/components/actors/bio.vue';
import Gender from '#/components/actors/gender.vue';
import Scenes from '#/components/scenes/scenes.vue';
import Heart from '#/components/stashes/heart.vue';
const pageContext = inject('pageContext');
const { pageProps, user } = pageContext;
const { pageProps } = pageContext;
const { actor } = pageProps;
const favorited = ref(actor.stashes?.some((sceneStash) => sceneStash.primary) || false);
async function stash() {
try {
favorited.value = true;
await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: actor.id });
events.emit('feedback', {
type: 'success',
message: `${actor.name} stashed to ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = false;
events.emit('feedback', {
type: 'error',
message: `Failed to stash ${actor.name} to ${user.primaryStash.name}`,
});
}
}
async function unstash() {
try {
favorited.value = false;
await del(`/stashes/${user.primaryStash.id}/actors/${actor.id}`);
events.emit('feedback', {
type: 'remove',
message: `${actor.name} unstashed from ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = true;
console.error(error);
events.emit('feedback', {
type: 'error',
message: `Failed to unstash ${actor.name} from ${user.primaryStash.name}`,
});
}
}
</script>
<style scoped>
@@ -150,23 +97,7 @@ async function unstash() {
overflow-y: auto;
}
.icon.heart {
width: 2rem;
height: 1.5rem;
position: absolute;
top: 0;
right: 0;
padding: .5rem 1rem 1rem 1rem;
fill: var(--highlight-strong-10);
filter: drop-shadow(0 0 3px var(--shadow));
&:hover {
cursor: pointer;
fill: var(--primary);
}
&.favorited {
fill: var(--primary);
}
.bookmarks {
margin-right: .5rem;
}
</style>

96
pages/movies/@movieId/+Page.vue
View File

@@ -111,26 +111,10 @@
>No title</h2>
<div class="actions">
<div
v-if="user"
class="bookmarks"
>
<Icon icon="folder-heart" />
<Icon
v-show="favorited"
icon="heart7"
class="heart favorited"
@click.native.stop="unstash"
/>
<Icon
v-show="!favorited"
icon="heart8"
class="heart"
@click.native.stop="stash"
/>
</div>
<Heart
domain="movies"
:item="movie"
/>
<div class="view">
<button
@@ -243,69 +227,20 @@
</template>
<script setup>
import { ref, inject } from 'vue';
import { inject } from 'vue';
import { post, del } from '#/src/api.js';
import events from '#/src/events.js';
import { formatDate, formatDuration } from '#/utils/format.js';
import getPath from '#/src/get-path.js';
import ellipsis from '#/utils/ellipsis.js';
import ActorTile from '#/components/actors/tile.vue';
import SceneTile from '#/components/scenes/tile.vue';
import Player from '#/components/video/player.vue';
import Heart from '#/components/stashes/heart.vue';
const pageContext = inject('pageContext');
const movie = pageContext.pageProps.movie;
const scenes = pageContext.pageProps.scenes;
const user = pageContext.user;
const fbCutoff = 20;
const favorited = ref(movie.stashes.some((sceneStash) => sceneStash.primary));
async function stash() {
try {
favorited.value = true;
await post(`/stashes/${user.primaryStash.id}/movies`, { movieId: movie.id });
events.emit('feedback', {
type: 'success',
message: `"${ellipsis(movie.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = false;
events.emit('feedback', {
type: 'error',
message: `Failed to stash "${ellipsis(movie.title, fbCutoff)}" to ${user.primaryStash.name}`,
});
}
}
async function unstash() {
try {
favorited.value = false;
await del(`/stashes/${user.primaryStash.id}/movies/${movie.id}`);
events.emit('feedback', {
type: 'remove',
message: `"${ellipsis(movie.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = true;
console.error(error);
events.emit('feedback', {
type: 'error',
message: `Failed to unstash "${ellipsis(movie.title, fbCutoff)}" from ${user.primaryStash.name}`,
});
}
}
</script>
<style scoped>
@@ -507,6 +442,10 @@ async function unstash() {
}
}
.bookmarks {
margin-right: .75rem;
}
.view {
display: flex;
}
@@ -516,21 +455,6 @@ async function unstash() {
color: var(--text-light);
}
.bookmarks {
display: flex;
margin-right: .75rem;
.icon {
padding: .5rem .5rem;
}
.icon.heart:hover,
.icon.heart.favorited {
cursor: pointer;
fill: var(--primary);
}
}
.cover {
height: 20rem;
}

94
pages/scene/+Page.vue
View File

@@ -123,26 +123,10 @@
>No title</h2>
<div class="actions">
<div
v-if="user"
class="bookmarks"
>
<Icon icon="folder-heart" />
<Icon
v-show="favorited"
icon="heart7"
class="heart favorited"
@click.native.stop="unstash"
/>
<Icon
v-show="!favorited"
icon="heart8"
class="heart"
@click.native.stop="stash"
/>
</div>
<Heart
domain="scenes"
:item="scene"
/>
<div class="view">
<button
@@ -244,26 +228,19 @@
<script setup>
import { ref, computed, inject } from 'vue';
import { post, del } from '#/src/api.js';
import { formatDate, formatDuration } from '#/utils/format.js';
import events from '#/src/events.js';
import getPath from '#/src/get-path.js';
import ellipsis from '#/utils/ellipsis.js';
import Icon from '#/components/icon/icon.vue';
import ActorTile from '#/components/actors/tile.vue';
import Player from '#/components/video/player.vue';
import Heart from '#/components/stashes/heart.vue';
const { pageProps, user } = inject('pageContext');
const { pageProps } = inject('pageContext');
const { scene } = pageProps;
const favorited = ref(scene.stashes.some((sceneStash) => sceneStash.primary));
const playing = ref(false);
const paused = ref(false);
const fbCutoff = 20;
const poster = computed(() => {
if (scene.poster) {
return getPath(scene.poster, 'thumbnail');
@@ -279,48 +256,6 @@ const poster = computed(() => {
return null;
});
async function stash() {
try {
favorited.value = true;
await post(`/stashes/${user.primaryStash.id}/scenes`, { sceneId: scene.id });
events.emit('feedback', {
type: 'success',
message: `"${ellipsis(scene.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = false;
events.emit('feedback', {
type: 'error',
message: `Failed to stash "${ellipsis(scene.title, fbCutoff)}" to ${user.primaryStash.name}`,
});
}
}
async function unstash() {
try {
favorited.value = false;
await del(`/stashes/${user.primaryStash.id}/scenes/${scene.id}`);
events.emit('feedback', {
type: 'remove',
message: `"${ellipsis(scene.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = true;
console.error(error);
events.emit('feedback', {
type: 'error',
message: `Failed to unstash "${ellipsis(scene.title, fbCutoff)}" from ${user.primaryStash.name}`,
});
}
}
</script>
<style scoped>
@@ -506,12 +441,6 @@ async function unstash() {
justify-content: space-between;
flex-shrink: 0;
.icon {
width: 1.5rem;
height: 1.5rem;
fill: var(--shadow);
}
.button {
flex-shrink: 0;
padding: .75rem;
@@ -523,18 +452,7 @@ async function unstash() {
}
.bookmarks {
display: flex;
margin-right: .75rem;
.icon {
padding: .5rem .5rem;
}
.icon.heart:hover,
.icon.heart.favorited {
cursor: pointer;
fill: var(--primary);
}
}
.view {

2
pages/users/@username/+onBeforeRender.js
View File

@@ -5,6 +5,8 @@ import { fetchUser } from '#/src/users.js';
export async function onBeforeRender(pageContext) {
const profile = await fetchUser(pageContext.routeParams.username, {}, pageContext.user);
// console.log(profile);
if (!profile) {
throw render(404, `Cannot find user '${pageContext.routeParams.username}'.`);
}