Changed range toggles to links for home and actor pages.

assets/components/actors/actor.vue

@@ -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) {

assets/components/header/filter-bar.vue

@@ -1,61 +1,31 @@
 <template>
     <div class="filter-bar noselect">
         <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'"
+                class="range-button"
-                    type="radio"
+            >Upcoming</router-link>
-                    class="range-input"
-                    @click="setRange('upcoming')"
-                >
-                <label
-                    :for="`${_uid}-range-upcoming`"
-                    class="range-button"
-                >Upcoming</label>
-            </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'"
+                class="range-button"
-                    type="radio"
+            >New</router-link>
-                    class="range-input"
-                    @click="setRange('new')"
-                >
-                <label
-                    :for="`${_uid}-range-new`"
-                    class="range-button"
-                >New</label>
-            </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-button"
-                    class="range-input"
+            >All</router-link>
-                    @click="setRange('all')"
+            -->
-                >
-                <label
-                    :for="`${_uid}-range-all`"
-                    class="range-button"
-                >All</label>
-            </label>
         </span>
 
         <span>
@@ -92,8 +62,8 @@ function filter(state) {
     return state.ui.filter;
 }
 
-function range(state) {
+function range() {
-    return state.ui.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 {
+    &:hover:not(.active) {
-        color: var(--text);
+        color: var(--shadow-strong);
         cursor: pointer;
     }
-}
 
-.range-input {
+    &.active {
-    display: none;
-
-    &:checked + .range-button {
         color: var(--primary);
     }
 }

assets/components/home/home.vue

@@ -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,
-    });
+        range: this.$route.params.range,
-
-    this.$store.commit('setCache', {
-        target: 'home',
-        releases: this.releases,
     });
 }
 
@@ -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,

assets/js/actors/actions.js

@@ -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,
+            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,
         });
 
@@ -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,
     };

assets/js/get-date-range.js

@@ -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;

assets/js/releases/actions.js

@@ -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,
+            after,
-            before: store.getters.before,
+            before,
-            orderBy: store.getters.orderBy,
+            orderBy,
             exclude: store.state.ui.filter,
         });
 

assets/js/router.js

@@ -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',

assets/js/ui/actions.js

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

assets/js/ui/state.js

@@ -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',

src/media.js

@@ -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) {