Changed range filter to routes for every view.

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

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({

assets/components/header/header.vue

@@ -8,7 +8,7 @@
             />
 
             <router-link
-                to="/home"
+                to="/"
                 class="logo-link"
             ><h1 class="header-logo">
                 <div

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

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 => ({

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>

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

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

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"
                         >