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

Changed range toggles to links for home and actor pages.

This commit is contained in:
ThePendulum 2020-05-07 03:20:51 +02:00
parent 2b2fb9e3e7
commit 525995615a
10 changed files with 116 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/components/actors/actor.vue
View File

@ -253,7 +253,10 @@ import Gender from './gender.vue';
import Social from './social.vue';
async function fetchActor() {
this.actor = await this.$store.dispatch('fetchActors', { actorSlug: this.$route.params.actorSlug });
this.actor = await this.$store.dispatch('fetchActorBySlug', {
slug: this.$route.params.actorSlug,
range: this.$route.params.range,
});
}
function scrollPhotos(event) {

83
assets/components/header/filter-bar.vue
View File

@ -1,61 +1,31 @@
<template>
<div class="filter-bar noselect">
<span class="sort">
<label class="range">
<input
:id="`${_uid}-range-latest`"
:checked="range === 'latest'"
type="radio"
class="range-input"
@click="setRange('latest')"
>
<label
:for="`${_uid}-range-latest`"
class="range-button"
>Latest</label>
</label>
<router-link
:to="{ name: $route.name, params: { ...$route.params, range: 'latest' } }"
:class="{ active: range === 'latest' }"
class="range range-button"
>Latest</router-link>
<label class="range">
<input
:id="`${_uid}-range-upcoming`"
:checked="range === 'upcoming'"
type="radio"
class="range-input"
@click="setRange('upcoming')"
>
<label
:for="`${_uid}-range-upcoming`"
<router-link
:to="{ name: $route.name, params: { ...$route.params, range: 'upcoming' } }"
:class="{ active: range === 'upcoming' }"
class="range-button"
>Upcoming</label>
</label>
>Upcoming</router-link>
<label class="range">
<input
:id="`${_uid}-range-new`"
:checked="range === 'new'"
type="radio"
class="range-input"
@click="setRange('new')"
>
<label
:for="`${_uid}-range-new`"
<router-link
:to="{ name: $route.name, params: { ...$route.params, range: 'new' } }"
:class="{ active: range === 'new' }"
class="range-button"
>New</label>
</label>
>New</router-link>
<label class="range">
<input
:id="`${_uid}-range-all`"
:checked="range === 'all'"
type="radio"
class="range-input"
@click="setRange('all')"
>
<label
:for="`${_uid}-range-all`"
<!--
<router-link
:to="{ name: 'home', params: { range: 'all' } }"
:class="{ active: range === 'all' }"
class="range-button"
>All</label>
</label>
>All</router-link>
-->
</span>
<span>
@ -92,8 +62,8 @@ function filter(state) {
return state.ui.filter;
}
function range(state) {
return state.ui.range;
function range() {
return this.$route.params.range;
}
function batch(state) {
@ -192,17 +162,14 @@ export default {
box-shadow: 0 0 2px var(--shadow-weak);
font-size: .8rem;
font-weight: bold;
text-decoration: none;
&:hover {
color: var(--text);
&:hover:not(.active) {
color: var(--shadow-strong);
cursor: pointer;
}
}
.range-input {
display: none;
&:checked + .range-button {
&.active {
color: var(--primary);
}
}

15
assets/components/home/home.vue
View File

@ -15,11 +15,7 @@ import Releases from '../releases/releases.vue';
async function fetchReleases() {
this.releases = await this.$store.dispatch('fetchReleases', {
limit: (this.$route.query && this.$route.query.limit && Number(this.$route.query.limit)) || 30,
});
this.$store.commit('setCache', {
target: 'home',
releases: this.releases,
range: this.$route.params.range,
});
}
@ -29,13 +25,6 @@ async function mounted() {
await this.fetchReleases();
}
function updated() {
if (this.from.name === 'scene' && this.from.hash === '#home') {
const releaseTile = document.querySelector(`#scene-${this.from.params.releaseId}`);
if (releaseTile) releaseTile.scrollIntoView();
}
}
export default {
components: {
FilterBar,
@ -43,7 +32,6 @@ export default {
},
data() {
return {
// releases: this.$store.state.releases.cache.home || [], // slows down apparent page load
releases: [],
networks: [],
pageTitle: null,
@ -53,7 +41,6 @@ export default {
beforeRouteEnter(to, from, next) {
next(vm => vm.$set(vm, 'from', from));
},
updated,
mounted,
methods: {
fetchReleases,

19
assets/js/actors/actions.js
View File

@ -5,6 +5,7 @@ import {
releaseTagsFragment,
} from '../fragments';
import { curateRelease } from '../curate';
import getDateRange from '../get-date-range';
function curateActor(actor) {
const curatedActor = {
@ -45,7 +46,9 @@ function curateActor(actor) {
}
function initActorActions(store, _router) {
async function fetchActorBySlug(actorSlug, limit = 100) {
async function fetchActorBySlug({ _commit }, { slug, limit = 100, range = 'latest' }) {
const { before, after, orderBy } = getDateRange(range);
const { actor } = await graphql(`
query Actor(
$actorSlug: String!
@ -168,11 +171,11 @@ function initActorActions(store, _router) {
}
}
`, {
actorSlug,
actorSlug: slug,
limit,
after: store.getters.after,
before: store.getters.before,
orderBy: store.getters.orderBy === 'DATE_DESC' ? 'RELEASE_BY_RELEASE_ID__DATE_DESC' : 'RELEASE_BY_RELEASE_ID__DATE_ASC',
after,
before,
orderBy: orderBy === 'DATE_DESC' ? 'RELEASE_BY_RELEASE_ID__DATE_DESC' : 'RELEASE_BY_RELEASE_ID__DATE_ASC',
exclude: store.state.ui.filter,
});
@ -180,15 +183,10 @@ function initActorActions(store, _router) {
}
async function fetchActors({ _commit }, {
actorSlug,
limit = 100,
letter,
genders,
}) {
if (actorSlug) {
return fetchActorBySlug(actorSlug);
}
const { actors } = await graphql(`
query Actors(
$limit: Int,
@ -260,6 +258,7 @@ function initActorActions(store, _router) {
}
return {
fetchActorBySlug,
fetchActors,
fetchActorReleases,
};

30
assets/js/get-date-range.js Normal file
View File

@ -0,0 +1,30 @@
import dayjs from 'dayjs';
const dateRanges = {
latest: () => ({
after: '1900-01-01',
before: dayjs(new Date()).add(1, 'day').format('YYYY-MM-DD'),
orderBy: 'DATE_DESC',
}),
upcoming: () => ({
after: dayjs(new Date()).format('YYYY-MM-DD'),
before: '2100-01-01',
orderBy: 'DATE_ASC',
}),
new: () => ({
after: '1900-01-01',
before: '2100-01-01',
orderBy: 'CREATED_AT_DESC',
}),
all: () => ({
after: '1900-01-01',
before: '2100-01-01',
orderBy: 'DATE_DESC',
}),
};
function getDateRange(range) {
return dateRanges[range]();
}
export default getDateRange;

11
assets/js/releases/actions.js
View File

@ -1,9 +1,12 @@
import { graphql } from '../api';
import { releasesFragment, releaseFragment } from '../fragments';
import { curateRelease } from '../curate';
import getDateRange from '../get-date-range';
function initReleasesActions(store, _router) {
async function fetchReleases({ _commit }, { limit = 100 }) {
async function fetchReleases({ _commit }, { limit = 100, range = 'latest' }) {
const { before, after, orderBy } = getDateRange(range);
const { releases } = await graphql(`
query Releases(
$limit:Int = 1000,
@ -16,9 +19,9 @@ function initReleasesActions(store, _router) {
}
`, {
limit,
after: store.getters.after,
before: store.getters.before,
orderBy: store.getters.orderBy,
after,
before,
orderBy,
exclude: store.state.ui.filter,
});

29
assets/js/router.js
View File

@ -18,10 +18,24 @@ Vue.use(VueRouter);
const routes = [
{
path: '/',
redirect: { name: 'home' },
redirect: {
name: 'home',
params: {
range: 'latest',
},
},
},
{
path: '/home',
redirect: {
name: 'home',
params: {
range: 'latest',
},
},
},
{
path: '/:range',
component: Home,
name: 'home',
},
@ -37,8 +51,19 @@ const routes = [
},
{
path: '/actor/:actorSlug',
component: Actor,
name: 'actor',
redirect: from => ({
name: 'actorRange',
params: {
...from.params,
range: 'latest',
},
}),
},
{
path: '/actor/:actorSlug/:range',
component: Actor,
name: 'actorRange',
},
{
path: '/site/:siteSlug',

1
assets/js/ui/actions.js
View File

@ -6,7 +6,6 @@ function initUiActions(_store, _router) {
function setRange({ commit }, range) {
commit('setRange', range);
localStorage.setItem('range', range);
}
function setBatch({ commit }, batch) {

3
assets/js/ui/state.js
View File

@ -1,12 +1,11 @@
const storedFilter = localStorage.getItem('filter');
const storedRange = localStorage.getItem('range');
const storedBatch = localStorage.getItem('batch');
const storedSfw = localStorage.getItem('sfw');
const storedTheme = localStorage.getItem('theme');
export default {
filter: storedFilter ? storedFilter.split(',') : ['gay', 'transsexual'],
range: storedRange || 'latest',
range: 'latest',
batch: storedBatch || 'all',
sfw: storedSfw === 'true' || false,
theme: storedTheme || 'light',

18
src/media.js
View File

@ -264,19 +264,15 @@ async function storeImageFile(media, hashDir, hashSubDir, filename, filedir, fil
const lazydir = path.join(media.role, 'lazy', hashDir, hashSubDir);
const lazypath = path.join(lazydir, filename);
const image = sharp(media.file.path);
const [info, stat] = await Promise.all([
image.metadata(),
fsPromises.stat(media.file.path),
]);
await Promise.all([
fsPromises.mkdir(path.join(config.media.path, filedir), { recursive: true }),
fsPromises.mkdir(path.join(config.media.path, thumbdir), { recursive: true }),
fsPromises.mkdir(path.join(config.media.path, lazydir), { recursive: true }),
]);
const image = sharp(media.file.path);
const info = await image.metadata();
// generate thumbnail and lazy
await Promise.all([
image
@ -321,7 +317,6 @@ async function storeImageFile(media, hashDir, hashSubDir, filename, filedir, fil
...media.meta,
width: info.width,
height: info.height,
size: stat.size,
},
};
}
@ -382,8 +377,12 @@ async function fetchSource(source, baseMedia) {
const tempFileTarget = fs.createWriteStream(tempFilePath);
const hashStream = new PassThrough();
let size = 0;
hashStream.on('data', chunk => hasher.write(chunk));
hashStream.on('data', (chunk) => {
size += chunk.length;
hasher.write(chunk);
});
const res = await http.get(source.src, {
...(source.referer && { referer: source.referer }),
@ -417,6 +416,7 @@ async function fetchSource(source, baseMedia) {
extension,
type,
subtype,
size,
},
};
} catch (error) {