From de5b729c0b5a4760040231f6bc4a06defd57b3d3 Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Sat, 9 May 2020 01:10:07 +0200
Subject: [PATCH] Changed range filter to routes for every view.

---
 assets/components/actors/actor.vue      |  2 +-
 assets/components/header/filter-bar.vue | 18 +++++---
 assets/components/header/header.vue     |  2 +-
 assets/components/home/home.vue         |  7 ++-
 assets/components/networks/network.vue  |  5 ++-
 assets/components/releases/releases.vue |  6 +++
 assets/components/sites/site.vue        |  6 ++-
 assets/components/tags/tag.vue          |  5 ++-
 assets/components/tile/release.vue      |  4 +-
 assets/js/actors/actions.js             |  4 +-
 assets/js/fragments.js                  |  4 ++
 assets/js/networks/actions.js           | 18 ++++----
 assets/js/router.js                     | 60 ++++++++++++++++++++-----
 assets/js/sites/actions.js              | 18 ++++----
 assets/js/tags/actions.js               | 18 ++++----
 assets/js/ui/observers.js               | 21 ++-------
 16 files changed, 125 insertions(+), 73 deletions(-)

diff --git a/assets/components/actors/actor.vue b/assets/components/actors/actor.vue
index a5676ed0..aa282c3f 100644
--- a/assets/components/actors/actor.vue
+++ b/assets/components/actors/actor.vue
@@ -254,7 +254,7 @@ import Social from './social.vue';
 
 async function fetchActor() {
     this.actor = await this.$store.dispatch('fetchActorBySlug', {
-        slug: this.$route.params.actorSlug,
+        actorSlug: this.$route.params.actorSlug,
         range: this.$route.params.range,
     });
 }
diff --git a/assets/components/header/filter-bar.vue b/assets/components/header/filter-bar.vue
index 8981e914..ca10b7e1 100644
--- a/assets/components/header/filter-bar.vue
+++ b/assets/components/header/filter-bar.vue
@@ -2,26 +2,26 @@
     <div class="filter-bar noselect">
         <span class="sort">
             <router-link
-                :to="{ name: $route.name, params: { ...$route.params, range: 'latest' } }"
-                :class="{ active: range === 'latest' }"
+                :to="{ name: isHome ? 'latest' : $route.name, params: { ...$route.params, range: 'latest' } }"
+                :class="{ active: $route.name === 'latest' || range === 'latest' }"
                 class="range range-button"
             >Latest</router-link>
 
             <router-link
-                :to="{ name: $route.name, params: { ...$route.params, range: 'upcoming' } }"
-                :class="{ active: range === 'upcoming' }"
+                :to="{ name: isHome ? 'upcoming' : $route.name, params: { ...$route.params, range: 'upcoming' } }"
+                :class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
                 class="range-button"
             >Upcoming</router-link>
 
             <router-link
-                :to="{ name: $route.name, params: { ...$route.params, range: 'new' } }"
-                :class="{ active: range === 'new' }"
+                :to="{ name: isHome ? 'new' : $route.name, params: { ...$route.params, range: 'new' } }"
+                :class="{ active: $route.name === 'new' || range === 'new' }"
                 class="range-button"
             >New</router-link>
 
             <!--
             <router-link
-                :to="{ name: 'home', params: { range: 'all' } }"
+                :to="{ name: $route.name, params: { ...$route.params, range: 'all' } }"
                 :class="{ active: range === 'all' }"
                 class="range-button"
             >All</router-link>
@@ -97,6 +97,10 @@ export default {
             type: Function,
             default: null,
         },
+        isHome: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         ...mapState({
diff --git a/assets/components/header/header.vue b/assets/components/header/header.vue
index 24dce7f4..9ce25c38 100644
--- a/assets/components/header/header.vue
+++ b/assets/components/header/header.vue
@@ -8,7 +8,7 @@
             />
 
             <router-link
-                to="/home"
+                to="/"
                 class="logo-link"
             ><h1 class="header-logo">
                 <div
diff --git a/assets/components/home/home.vue b/assets/components/home/home.vue
index 80d7c24e..0f3296b8 100644
--- a/assets/components/home/home.vue
+++ b/assets/components/home/home.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="content">
-        <FilterBar :fetch-releases="fetchReleases" />
+        <FilterBar
+            :fetch-releases="fetchReleases"
+            :is-home="true"
+        />
 
         <div class="content-inner">
             <Releases :releases="releases" />
@@ -15,7 +18,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,
+        range: this.$route.name,
     });
 }
 
diff --git a/assets/components/networks/network.vue b/assets/components/networks/network.vue
index 2f28aab6..e901e478 100644
--- a/assets/components/networks/network.vue
+++ b/assets/components/networks/network.vue
@@ -128,7 +128,10 @@ import Sites from '../sites/sites.vue';
 import Network from '../tile/network.vue';
 
 async function fetchNetwork() {
-    this.network = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
+    this.network = await this.$store.dispatch('fetchNetworkBySlug', {
+        networkSlug: this.$route.params.networkSlug,
+        range: this.$route.params.range,
+    });
 
     if (this.network.studios) {
         this.studios = this.network.studios.map(studio => ({
diff --git a/assets/components/releases/releases.vue b/assets/components/releases/releases.vue
index 82e5ca54..7ba0edd9 100644
--- a/assets/components/releases/releases.vue
+++ b/assets/components/releases/releases.vue
@@ -6,6 +6,7 @@
         ><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
 
         <ul
+            :key="sfw"
             v-lazy-container="{ selector: '.thumbnail' }"
             class="nolist tiles"
         >
@@ -40,6 +41,10 @@ function range() {
     return this.$store.state.ui.range;
 }
 
+function sfw() {
+    return this.$store.state.ui.sfw;
+}
+
 export default {
     components: {
         ReleaseTile,
@@ -60,6 +65,7 @@ export default {
     },
     computed: {
         range,
+        sfw,
     },
 };
 </script>
diff --git a/assets/components/sites/site.vue b/assets/components/sites/site.vue
index 04c8b601..9b2181a7 100644
--- a/assets/components/sites/site.vue
+++ b/assets/components/sites/site.vue
@@ -54,7 +54,11 @@ import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 
 async function fetchSite() {
-    this.site = await this.$store.dispatch('fetchSites', { siteSlug: this.$route.params.siteSlug });
+    this.site = await this.$store.dispatch('fetchSiteBySlug', {
+        siteSlug: this.$route.params.siteSlug,
+        range: this.$route.params.range,
+    });
+
     this.releases = this.site.releases;
 }
 
diff --git a/assets/components/tags/tag.vue b/assets/components/tags/tag.vue
index 710839e5..0fba8d21 100644
--- a/assets/components/tags/tag.vue
+++ b/assets/components/tags/tag.vue
@@ -62,7 +62,10 @@ import Releases from '../releases/releases.vue';
 const converter = new Converter();
 
 async function fetchReleases() {
-    this.tag = await this.$store.dispatch('fetchTags', { tagSlug: this.$route.params.tagSlug });
+    this.tag = await this.$store.dispatch('fetchTagBySlug', {
+        tagSlug: this.$route.params.tagSlug,
+        range: this.$route.params.range,
+    });
 
     this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
     this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
diff --git a/assets/components/tile/release.vue b/assets/components/tile/release.vue
index ae42c946..83644369 100644
--- a/assets/components/tile/release.vue
+++ b/assets/components/tile/release.vue
@@ -82,8 +82,8 @@
                         <img
                             v-for="cover in release.covers"
                             :key="cover.id"
-                            :data-src="`/media/${cover.thumbnail}`"
-                            :data-loading="`/media/${cover.lazy}`"
+                            :data-src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
+                            :data-loading="sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}`"
                             :alt="release.title"
                             class="thumbnail cover"
                         >
diff --git a/assets/js/actors/actions.js b/assets/js/actors/actions.js
index e431bfa7..3b9d445e 100644
--- a/assets/js/actors/actions.js
+++ b/assets/js/actors/actions.js
@@ -46,7 +46,7 @@ function curateActor(actor) {
 }
 
 function initActorActions(store, _router) {
-    async function fetchActorBySlug({ _commit }, { slug, limit = 100, range = 'latest' }) {
+    async function fetchActorBySlug({ _commit }, { actorSlug, limit = 100, range = 'latest' }) {
         const { before, after, orderBy } = getDateRange(range);
 
         const { actor } = await graphql(`
@@ -171,7 +171,7 @@ function initActorActions(store, _router) {
                 }
             }
         `, {
-            actorSlug: slug,
+            actorSlug,
             limit,
             after,
             before,
diff --git a/assets/js/fragments.js b/assets/js/fragments.js
index 6484946d..c247fecb 100644
--- a/assets/js/fragments.js
+++ b/assets/js/fragments.js
@@ -84,6 +84,7 @@ const releasePosterFragment = `
             sfw: sfwMedia {
                 id
                 thumbnail
+                lazy
                 path
                 comment
             }
@@ -102,6 +103,7 @@ const releaseCoversFragment = `
             sfw: sfwMedia {
                 id
                 thumbnail
+                lazy
                 path
                 comment
             }
@@ -115,10 +117,12 @@ const releasePhotosFragment = `
             index
             path
             thumbnail
+            lazy
             comment
             sfw: sfwMedia {
                 id
                 thumbnail
+                lazy
                 path
                 comment
             }
diff --git a/assets/js/networks/actions.js b/assets/js/networks/actions.js
index 575d29c3..b24a87f8 100644
--- a/assets/js/networks/actions.js
+++ b/assets/js/networks/actions.js
@@ -1,9 +1,12 @@
 import { graphql } from '../api';
 import { sitesFragment, releaseFields } from '../fragments';
 import { curateNetwork } from '../curate';
+import getDateRange from '../get-date-range';
 
 function initNetworksActions(store, _router) {
-    async function fetchNetworkBySlug(networkSlug, limit = 100) {
+    async function fetchNetworkBySlug({ _commit }, { networkSlug, limit = 100, range = 'latest' }) {
+        const { before, after, orderBy } = getDateRange(range);
+
         const { network, releases } = await graphql(`
             query Network(
                 $networkSlug: String!
@@ -106,22 +109,18 @@ function initNetworksActions(store, _router) {
         `, {
             networkSlug,
             limit,
-            after: store.getters.after,
-            before: store.getters.before,
+            after,
+            before,
+            orderBy,
             afterTime: store.getters.after,
             beforeTime: store.getters.before,
-            orderBy: store.getters.orderBy,
             exclude: store.state.ui.filter,
         });
 
         return curateNetwork(network, releases);
     }
 
-    async function fetchNetworks({ _commit }, networkSlug) {
-        if (networkSlug) {
-            return fetchNetworkBySlug(networkSlug);
-        }
-
+    async function fetchNetworks({ _commit }) {
         const { networks } = await graphql(`
             query Networks {
                 networks(orderBy: NAME_ASC) {
@@ -138,6 +137,7 @@ function initNetworksActions(store, _router) {
     }
 
     return {
+        fetchNetworkBySlug,
         fetchNetworks,
     };
 }
diff --git a/assets/js/router.js b/assets/js/router.js
index fe4b69be..d2f85a3f 100644
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -19,25 +19,29 @@ const routes = [
     {
         path: '/',
         redirect: {
-            name: 'home',
-            params: {
-                range: 'latest',
-            },
+            name: 'latest',
         },
     },
     {
         path: '/home',
         redirect: {
-            name: 'home',
-            params: {
-                range: 'latest',
-            },
+            name: 'latest',
         },
     },
     {
-        path: '/:range',
+        path: '/latest',
         component: Home,
-        name: 'home',
+        name: 'latest',
+    },
+    {
+        path: '/upcoming',
+        component: Home,
+        name: 'upcoming',
+    },
+    {
+        path: '/new',
+        component: Home,
+        name: 'new',
     },
     {
         path: '/scene/:releaseId/:releaseSlug?',
@@ -69,16 +73,52 @@ const routes = [
         path: '/site/:siteSlug',
         component: Site,
         name: 'site',
+        redirect: from => ({
+            name: 'siteRange',
+            params: {
+                ...from.params,
+                range: 'latest',
+            },
+        }),
+    },
+    {
+        path: '/site/:siteSlug/:range',
+        component: Site,
+        name: 'siteRange',
     },
     {
         path: '/network/:networkSlug',
         component: Network,
         name: 'network',
+        redirect: from => ({
+            name: 'networkRange',
+            params: {
+                ...from.params,
+                range: 'latest',
+            },
+        }),
+    },
+    {
+        path: '/network/:networkSlug/:range',
+        component: Network,
+        name: 'networkRange',
     },
     {
         path: '/tag/:tagSlug',
         component: Tag,
         name: 'tag',
+        redirect: from => ({
+            name: 'tagRange',
+            params: {
+                ...from.params,
+                range: 'latest',
+            },
+        }),
+    },
+    {
+        path: '/tag/:tagSlug/:range',
+        component: Tag,
+        name: 'tagRange',
     },
     {
         path: '/actors/:gender?/:letter?',
diff --git a/assets/js/sites/actions.js b/assets/js/sites/actions.js
index 86b686e0..619680d9 100644
--- a/assets/js/sites/actions.js
+++ b/assets/js/sites/actions.js
@@ -1,9 +1,12 @@
 import { graphql } from '../api';
 import { releasesFragment } from '../fragments';
 import { curateSite } from '../curate';
+import getDateRange from '../get-date-range';
 
 function initSitesActions(store, _router) {
-    async function fetchSiteBySlug(siteSlug, limit = 100) {
+    async function fetchSiteBySlug({ _commit }, { siteSlug, limit = 100, range = 'latest' }) {
+        const { before, after, orderBy } = getDateRange(range);
+
         const { site } = await graphql(`
             query Site(
                 $siteSlug: String!,
@@ -36,21 +39,17 @@ function initSitesActions(store, _router) {
         `, {
             siteSlug,
             limit,
-            after: store.getters.after,
-            before: store.getters.before,
+            after,
+            before,
+            orderBy,
             isNew: store.getters.isNew,
-            orderBy: store.getters.orderBy,
             exclude: store.state.ui.filter,
         });
 
         return curateSite(site);
     }
 
-    async function fetchSites({ _commit }, { siteSlug, limit = 100 }) {
-        if (siteSlug) {
-            return fetchSiteBySlug(siteSlug, limit);
-        }
-
+    async function fetchSites({ _commit }, { limit = 100 }) {
         const { sites } = await graphql(`
             query Sites(
                 $actorSlug: String!
@@ -102,6 +101,7 @@ function initSitesActions(store, _router) {
     }
 
     return {
+        fetchSiteBySlug,
         fetchSites,
         searchSites,
     };
diff --git a/assets/js/tags/actions.js b/assets/js/tags/actions.js
index b7c849e7..f86bf235 100644
--- a/assets/js/tags/actions.js
+++ b/assets/js/tags/actions.js
@@ -3,9 +3,12 @@ import {
     releaseFields,
 } from '../fragments';
 import { curateTag } from '../curate';
+import getDateRange from '../get-date-range';
 
 function initTagsActions(store, _router) {
-    async function fetchTagBySlug(tagSlug, limit = 100) {
+    async function fetchTagBySlug({ _commit }, { tagSlug, limit = 100, range = 'latest' }) {
+        const { before, after, orderBy } = getDateRange(range);
+
         const { tagBySlug } = await graphql(`
             query Tag(
                 $tagSlug:String!
@@ -84,9 +87,9 @@ function initTagsActions(store, _router) {
         `, {
             tagSlug,
             limit,
-            after: store.getters.after,
-            before: store.getters.before,
-            orderBy: store.getters.isNew,
+            after,
+            before,
+            orderBy: orderBy === 'DATE_DESC' ? 'RELEASE_BY_RELEASE_ID__DATE_DESC' : 'RELEASE_BY_RELEASE_ID__DATE_ASC',
             exclude: store.state.ui.filter,
         });
 
@@ -94,16 +97,11 @@ function initTagsActions(store, _router) {
     }
 
     async function fetchTags({ _commit }, {
-        tagSlug,
         limit = 100,
         slugs = [],
         _group,
         _priority,
     }) {
-        if (tagSlug) {
-            return fetchTagBySlug(tagSlug);
-        }
-
         const { tags } = await graphql(`
             query Tags(
                 $slugs: [String!] = [],
@@ -153,9 +151,9 @@ function initTagsActions(store, _router) {
     }
 
     return {
+        fetchTagBySlug,
         fetchTags,
         fetchTagReleases,
-        fetchTagBySlug,
     };
 }
 
diff --git a/assets/js/ui/observers.js b/assets/js/ui/observers.js
index 06f046df..7e38d4d7 100644
--- a/assets/js/ui/observers.js
+++ b/assets/js/ui/observers.js
@@ -1,29 +1,16 @@
 function initUiObservers(store, _router) {
-    let keyHistory = [];
-
     document.addEventListener('keypress', (event) => {
         if (event.target.tagName === 'INPUT') {
             return;
         }
 
-        keyHistory = keyHistory
-            .concat({
-                key: event.key,
-                time: new Date().getTime(),
-            })
-            .slice(-3);
-
-        if (keyHistory.length === 3
-            && keyHistory.every(input => input.key === 's')
-            && new Date().getTime() - keyHistory[0].time < 1000
-        ) {
-            store.dispatch('setSfw', false);
-            return;
-        }
-
         if (event.key === 's') {
             store.dispatch('setSfw', true);
         }
+
+        if (event.key === 'n') {
+            store.dispatch('setSfw', false);
+        }
     });
 }