Compare commits

...

6 Commits

Author SHA1 Message Date
DebaucheryLibrarian d4919016b6 1.189.1 2021-03-20 03:33:34 +01:00
DebaucheryLibrarian 67af9f2ea2 Using thumbnail width and height for release banner photos. Preventing user page from reloading when closing the add stash dialog without adding stash. 2021-03-20 03:33:29 +01:00
DebaucheryLibrarian bb9d6ee8fc Added dialog to add stashes. 2021-03-20 03:22:08 +01:00
DebaucheryLibrarian e88cf4e3f4 Separated user page stash component. 2021-03-20 02:49:17 +01:00
DebaucheryLibrarian 5577e4fee5 Improved user stash actor previews. 2021-03-20 02:34:49 +01:00
DebaucheryLibrarian 489d253a48 Using full header height for stash header items. 2021-03-20 02:29:52 +01:00
21 changed files with 375 additions and 155 deletions

View File

@ -103,4 +103,13 @@ export default {
flex-grow: 1;
overflow: auto;
}
::v-deep(.dialog-actions) {
display: flex;
padding: .5rem 0;
&.right {
justify-content: flex-end;
}
}
</style>

View File

@ -33,8 +33,8 @@
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
:src="getPath(release.teaser, 'thumbnail', { original: true })"
:alt="release.title"
:width="release.teaser.width"
:height="release.teaser.height"
:width="release.teaser.thumbnailWidth"
:height="release.teaser.thumbnailHeight"
loading="lazy"
class="item trailer"
>
@ -68,8 +68,8 @@
<img
:src="getPath(cover, 'thumbnail')"
:style="{ 'background-image': getBgPath(cover, 'lazy') }"
:width="cover.width"
:height="cover.height"
:width="cover.thumbnailWidth"
:height="cover.thumbnailHeight"
class="item cover"
loading="lazy"
@load="$emit('load', $event)"
@ -93,8 +93,8 @@
:src="getPath(photo, 'thumbnail')"
:style="{ 'background-image': `url('${getPath(photo, 'lazy')}` }"
:alt="`Photo ${photo.index + 1}`"
:width="photo.width"
:height="photo.height"
:width="photo.thumbnailWidth"
:height="photo.thumbnailHeight"
loading="lazy"
class="item"
@load="$emit('load', $event)"

View File

@ -0,0 +1,50 @@
<template>
<Dialog
title="Add stash"
@close="$emit('close', false)"
>
<form @submit.prevent="addStash">
<input
ref="name"
v-model="name"
type="input"
placeholder="Name"
class="input"
>
<div class="dialog-actions right">
<button
type="submit"
class="button button-primary"
>Add</button>
</div>
</form>
</Dialog>
</template>
<script>
async function addStash() {
await this.$store.dispatch('createStash', {
name: this.name,
});
this.$emit('close', true);
}
function mounted() {
this.$refs.name.focus();
}
export default {
data() {
return {
name: null,
};
},
emits: ['close'],
mounted,
methods: {
addStash,
},
};
</script>

View File

@ -118,6 +118,7 @@ export default {
.header-section,
.header-item {
height: 100%;
display: flex;
align-items: center;
}
@ -126,9 +127,13 @@ export default {
margin: 0 1rem 0 0;
}
.stash-public .icon {
margin: 0 .75rem 0 0;
.stash-public {
cursor: pointer;
.icon {
margin: 0 .75rem 0 0;
cursor: pointer;
}
}
.stash-name,

View File

@ -24,8 +24,6 @@
<script>
async function unstashActor(actorId, stashId) {
await this.$store.dispatch('unstashActor', { actorId, stashId });
this.$emit('unstash');
}
export default {
@ -63,7 +61,7 @@ export default {
justify-content: center;
width: 2rem;
height: 100%;
background: var(--profile);
border-right: solid 1px var(--shadow-hint);
}
.avatar-image {
@ -74,7 +72,7 @@ export default {
}
.avatar-fallback {
fill: var(--lighten-weak);
fill: var(--shadow-weak);
}
.name {

View File

@ -0,0 +1,177 @@
<template>
<div class="stash">
<div class="stash-section stash-header">
<router-link
:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
class="stash-link nolink"
>
<h4 class="stash-name">{{ stash.name }}</h4>
</router-link>
<label
v-if="isMe"
v-tooltip="'Public'"
:class="{ public: stash.public }"
class="stash-public"
>
<Icon
v-show="stash.public"
icon="eye"
/>
<Icon
v-show="!stash.public"
icon="eye-blocked"
/>
<Toggle
:checked="stash.public"
@change="checked => publishStash(stash, checked)"
/>
</label>
</div>
<ul
v-if="stash.scenes?.length > 0"
class="stash-section stash-scenes nolist"
>
<li
v-for="{ scene } in stash.scenes"
:key="scene.id"
class="stash-scene"
>
<ScenePreview
:scene="scene"
:stash="stash"
/>
</li>
</ul>
<ul
v-if="stash.actors?.length > 0"
class="stash-section stash-actors nolist"
>
<li
v-for="{ actor } in stash.actors"
:key="actor.id"
class="stash-actor"
>
<ActorPreview
:actor="actor"
:stash="stash"
/>
</li>
</ul>
</div>
</template>
<script>
import ActorPreview from './actor-preview.vue';
import ScenePreview from './scene-preview.vue';
import Toggle from '../form/toggle.vue';
async function publishStash(stash, isPublic) {
await this.$store.dispatch('updateStash', {
stashId: stash.id,
stash: { public: isPublic },
});
this.$emit('publish', isPublic);
}
export default {
components: {
ActorPreview,
ScenePreview,
Toggle,
},
props: {
stash: {
type: Object,
default: null,
},
isMe: {
type: Boolean,
default: false,
},
},
emits: ['publish'],
methods: {
publishStash,
},
};
</script>
<style lang="scss" scoped>
.stash {
min-width: 0;
height: 100%;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak);
}
.stash-section {
display: flex;
align-items: center;
padding: .5rem;
&:not(:last-child),
&.stash-header {
border-bottom: solid 1px var(--shadow-hint);
}
}
.stash-header {
justify-content: space-between;
padding: 0;
}
.stash-link {
flex-grow: 1;
display: inline-block;
text-decoration: none;
}
.stash-public {
display: flex;
align-items: center;
padding: .5rem;
cursor: pointer;
.icon {
fill: var(--shadow-strong);
margin: 0 .5rem 0 0;
}
}
.stash-name {
padding: .5rem;
margin: 0;
color: var(--shadow-strong);
}
.stash-actors,
.stash-scenes {
display: flex;
overflow-x: auto;
grid-gap: .5rem;
scroll-behavior: smooth;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.stash-scenes {
height: 8rem;
}
.stash-actor,
.stash-scene {
height: 100%;
flex-shrink: 0;
font-size: 0;
}
</style>

View File

@ -17,82 +17,34 @@
<li
v-for="stash in user.stashes"
:key="stash.id"
class="stash"
>
<div class="stash-section stash-header">
<router-link
:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
class="stash-link nolink"
>
<h4 class="stash-name">{{ stash.name }}</h4>
</router-link>
<Stash
:stash="stash"
:is-me="isMe"
@publish="() => fetchUser()"
/>
</li>
<label
v-if="isMe"
v-tooltip="'Public'"
:class="{ public: stash.public }"
class="stash-public"
>
<Icon
v-show="stash.public"
icon="eye"
/>
<Icon
v-show="!stash.public"
icon="eye-blocked"
/>
<Toggle
:checked="stash.public"
@change="checked => publishStash(stash, checked)"
/>
</label>
</div>
<ul
v-if="stash.scenes?.length > 0"
class="stash-section stash-scenes nolist"
>
<li
v-for="{ scene } in stash.scenes"
:key="scene.id"
class="stash-scene"
>
<ScenePreview
:scene="scene"
:stash="stash"
@unstash="fetchUser"
/>
</li>
</ul>
<ul
v-if="stash.actors?.length > 0"
class="stash-section stash-actors nolist"
>
<li
v-for="{ actor } in stash.actors"
:key="actor.id"
class="stash-actor"
>
<ActorPreview
:actor="actor"
:stash="stash"
@unstash="fetchUser"
/>
</li>
</ul>
<li
v-if="isMe"
class="stashes-add"
@click="showAddStash = true"
>
<Icon icon="plus2" />
</li>
</ul>
</section>
<AddStash
v-if="showAddStash"
@close="closeAddStash"
/>
</div>
</template>
<script>
import ActorPreview from './actor-preview.vue';
import ScenePreview from './scene-preview.vue';
import Toggle from '../form/toggle.vue';
import Stash from './stash.vue';
import AddStash from '../stashes/add-stash.vue';
async function fetchUser() {
this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
@ -101,13 +53,12 @@ async function fetchUser() {
this.pageTitle = this.user?.username;
}
async function publishStash(stash, isPublic) {
await this.$store.dispatch('updateStash', {
stashId: stash.id,
stash: { public: isPublic },
});
async function closeAddStash(addedStash) {
this.showAddStash = false;
this.fetchUser();
if (addedStash) {
await this.fetchUser();
}
}
async function mounted() {
@ -116,9 +67,8 @@ async function mounted() {
export default {
components: {
ActorPreview,
ScenePreview,
Toggle,
AddStash,
Stash,
},
data() {
return {
@ -127,12 +77,13 @@ export default {
: null,
isMe: false,
pageTitle: null,
showAddStash: false,
};
},
mounted,
methods: {
closeAddStash,
fetchUser,
publishStash,
},
};
</script>
@ -159,85 +110,37 @@ export default {
.stashes {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 15fr;
grid-gap: 1rem;
}
.heading {
color: var(--primary);
}
.stash {
min-width: 0;
background: var(--background);
margin: 0 0 1rem 0;
box-shadow: 0 0 3px var(--shadow-weak);
}
.stash-section {
.stashes-add {
height: 100%;
display: flex;
align-items: center;
padding: .5rem;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-hint);
}
}
.stash-header {
justify-content: space-between;
padding: 0;
}
.stash-link {
flex-grow: 1;
display: inline-block;
text-decoration: none;
}
.stash-public {
display: flex;
align-items: center;
padding: .5rem;
cursor: pointer;
justify-content: center;
background: var(--shadow-hint);
.icon {
fill: var(--shadow-strong);
margin: 0 .5rem 0 0;
width: 1.5rem;
height: 1.5rem;
fill: var(--shadow-weak);
}
}
.stash-name {
padding: .5rem;
margin: 0;
color: var(--shadow-strong);
}
&:hover {
background: var(--shadow-weak);
cursor: pointer;
.stash-actors,
.stash-scenes {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
.icon {
fill: var(--shadow);
}
}
}
.stash-scenes {
height: 8rem;
grid-gap: .5rem;
}
.stash-actors {
grid-gap: 1rem;
}
.stash-actor,
.stash-scene {
height: 100%;
flex-shrink: 0;
}
@media(max-width: $breakpoint-kilo) {
.stashes {
grid-template-columns: 1fr;

View File

@ -29,6 +29,7 @@
border: none;
background: none;
padding: .5rem;
font-size: .9rem;
font-weight: bold;
&:hover {

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>checkmark2</title>
<path d="M6.21 14.339l-6.217-6.119 3.084-3.035 3.133 3.083 6.713-6.607 3.084 3.035-9.797 9.643zM1.686 8.22l4.524 4.453 8.104-7.976-1.391-1.369-6.713 6.607-3.133-3.083-1.391 1.369z"></path>
</svg>

After

Width:  |  Height:  |  Size: 353 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>minus</title>
<path d="M0 5h16v6h-16z"></path>
</svg>

After

Width:  |  Height:  |  Size: 192 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>minus2</title>
<path d="M0 6.5v3c0 0.276 0.224 0.5 0.5 0.5h15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5h-15c-0.276 0-0.5 0.224-0.5 0.5z"></path>
</svg>

After

Width:  |  Height:  |  Size: 303 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>minus3</title>
<path d="M1 7h14v2h-14v-2z"></path>
</svg>

After

Width:  |  Height:  |  Size: 196 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>plus</title>
<path d="M16 5h-5v-5h-6v5h-5v6h5v5h6v-5h5z"></path>
</svg>

After

Width:  |  Height:  |  Size: 210 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>plus2</title>
<path d="M15.5 6h-5.5v-5.5c0-0.276-0.224-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5v5.5h-5.5c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h5.5v5.5c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-5.5h5.5c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5z"></path>
</svg>

After

Width:  |  Height:  |  Size: 442 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>plus3</title>
<path d="M15 7h-6v-6h-2v6h-6v2h6v6h2v-6h6z"></path>
</svg>

After

Width:  |  Height:  |  Size: 211 B

View File

@ -67,6 +67,12 @@ function initStashesActions(store, _router) {
return curateStash(stash);
}
async function createStash(context, stash) {
const newStash = await post('/stashes', stash);
return newStash;
}
async function updateStash(context, { stashId, stash }) {
const newStash = await patch(`/stashes/${stashId}`, stash);
@ -98,6 +104,7 @@ function initStashesActions(store, _router) {
}
return {
createStash,
fetchStash,
stashActor,
stashScene,

4
package-lock.json generated
View File

@ -1,11 +1,11 @@
{
"name": "traxxx",
"version": "1.189.0",
"version": "1.189.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"version": "1.189.0",
"version": "1.189.1",
"license": "ISC",
"dependencies": {
"@casl/ability": "^5.2.2",

View File

@ -1,6 +1,6 @@
{
"name": "traxxx",
"version": "1.189.0",
"version": "1.189.1",
"description": "All the latest porn releases in one place",
"main": "src/app.js",
"scripts": {

View File

@ -2,6 +2,7 @@
const knex = require('./knex');
const { HttpError } = require('./errors');
const slugify = require('./utils/slugify');
function curateStash(stash) {
if (!stash) {
@ -17,6 +18,17 @@ function curateStash(stash) {
return curatedStash;
}
function curateStashEntry(stash, user) {
const curatedStashEntry = {
user_id: user.id,
name: stash.name,
slug: slugify(stash.name),
public: false,
};
return curatedStashEntry;
}
async function fetchStash(stashId, sessionUser) {
if (!sessionUser) {
throw new HttpError('You are not authenthicated', 401);
@ -36,6 +48,18 @@ async function fetchStash(stashId, sessionUser) {
return curateStash(stash);
}
async function createStash(newStash, sessionUser) {
if (!sessionUser) {
throw new HttpError('You are not authenthicated', 401);
}
const stash = await knex('stashes')
.insert(curateStashEntry(newStash, sessionUser))
.returning('*');
return curateStash(stash);
}
async function updateStash(stashId, newStash, sessionUser) {
if (!sessionUser) {
throw new HttpError('You are not authenthicated', 401);
@ -123,6 +147,7 @@ async function unstashMovie(movieId, stashId, sessionUser) {
}
module.exports = {
createStash,
curateStash,
stashActor,
stashScene,

View File

@ -44,6 +44,7 @@ const {
} = require('./tags');
const {
createStash,
stashActor,
stashScene,
stashMovie,
@ -84,6 +85,7 @@ async function initServer() {
router.post('/api/users', signup);
router.post('/api/stashes', createStash);
router.patch('/api/stashes/:stashId', updateStash);
router.post('/api/stashes/:stashId/actors', stashActor);

View File

@ -1,6 +1,7 @@
'use strict';
const {
createStash,
stashActor,
stashScene,
stashMovie,
@ -10,6 +11,12 @@ const {
updateStash,
} = require('../stashes');
async function createStashApi(req, res) {
const stash = await createStash(req.body, req.session.user);
res.send(stash);
}
async function updateStashApi(req, res) {
const stash = await updateStash(req.params.stashId, req.body, req.session.user);
@ -53,6 +60,7 @@ async function unstashMovieApi(req, res) {
}
module.exports = {
createStash: createStashApi,
stashActor: stashActorApi,
stashScene: stashSceneApi,
stashMovie: stashMovieApi,