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

View File

@ -253,7 +253,10 @@ import Gender from './gender.vue';
import Social from './social.vue'; import Social from './social.vue';
async function fetchActor() { 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) { function scrollPhotos(event) {

View File

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

View File

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

View File

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

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;

View File

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

View File

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

View File

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

View File

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

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