Giant cleanup

src/routes/Navigation.vue

@@ -1,104 +0,0 @@
-<template>
-    <nav
-        class="uk-navbar-container uk-container-expand uk-position-relative"
-        :style="[{ background: backgroundColor, colour: foregroundColor }]"
-        uk-navbar
-    >
-        <div class="uk-navbar-left">
-            <router-link class="uk-navbar-item uk-logo uk-text-bold" :style="[{ colour: foregroundColor }]" to="/"
-                ><img alt="logo" src="/img/icons/logo.svg" height="32" width="32" style="margin-bottom: 6px; margin-right: -13px" />iped</router-link
-            >
-        </div>
-        <div class="uk-navbar-center uk-flex uk-visible@m">
-            <input
-                class="uk-input uk-width-medium"
-                type="text"
-                placeholder="Search"
-                v-model="searchText"
-                @keyup="onKeyUp"
-                @focus="onInputFocus"
-                @blur="onInputBlur"
-            />
-        </div>
-        <div class="uk-navbar-right">
-            <ul class="uk-navbar-nav">
-                <li>
-                    <router-link to="/preferences">Preferences</router-link>
-                </li>
-                <li v-if="shouldShowLogin">
-                    <router-link to="/login">Login</router-link>
-                </li>
-                <li v-if="shouldShowLogin">
-                    <router-link to="/register">Register</router-link>
-                </li>
-                <li v-if="authenticated">
-                    <router-link to="/feed">Feed</router-link>
-                </li>
-            </ul>
-        </div>
-    </nav>
-    <div class="uk-container-expand uk-hidden@m">
-        <input
-            class="uk-input"
-            type="text"
-            placeholder="Search"
-            v-model="searchText"
-            @keyup="onKeyUp"
-            @focus="onInputFocus"
-            @blur="onInputBlur"
-        />
-    </div>
-    <SearchSuggestions
-        v-show="searchText && suggestionsVisible"
-        :searchText="searchText"
-        @searchchange="onSearchTextChange"
-        ref="searchSuggestions"
-    />
-</template>
-
-<script>
-import SearchSuggestions from '@/components/SearchSuggestions'
-
-export default {
-  components: {
-    SearchSuggestions
-  },
-  data () {
-    return {
-      searchText: '',
-      suggestionsVisible: false
-    }
-  },
-  computed: {
-    shouldShowLogin (_this) {
-      return _this.getAuthToken() == null
-    }
-  },
-  methods: {
-    onKeyUp (e) {
-      if (e.key === 'Enter') {
-        e.target.blur()
-        this.$router.push({
-          name: 'SearchResults',
-          query: { search_query: this.searchText }
-        })
-        return
-      } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        e.preventDefault()
-      }
-      this.$refs.searchSuggestions.onKeyUp(e)
-    },
-    onInputFocus () {
-      this.suggestionsVisible = true
-    },
-    onInputBlur () {
-      this.suggestionsVisible = false
-    },
-    onSearchTextChange (searchText) {
-      this.searchText = searchText
-    }
-  }
-}
-</script>
-
-<style></style>

src/routes/TrendingPage.vue

@@ -2,6 +2,8 @@
   <v-container fluid>
     <h3 class="display-1 justify-center">Trending</h3>
 
+    <v-divider class="my-4" />
+
     <v-row v-for="(row, rowId) in chunkedByFour" :key="rowId">
       <v-col md="3" v-for="(video, videoId) in row" :key="videoId">
         <VideoItem :video="video" />

src/routes/WatchVideo.vue

@@ -41,7 +41,7 @@
                 </router-link>
                 <div class="uk-flex-1"></div>
                 <button
-                    v-if="authenticated"
+                    v-if="$store.state.isAuthenticated"
                     @click="subscribeHandler"
                     class="uk-button uk-button-small"
                     style="background: #222"
@@ -125,6 +125,8 @@
 </template>
 
 <script>
+import { LibPiped } from '@/tools/libpiped'
+
 import Player from '@/components/Player.vue'
 import VideoItem from '@/components/VideoItem.vue'
 import ErrorHandler from '@/components/ErrorHandler.vue'
@@ -168,14 +170,19 @@ export default {
     }
   },
   methods: {
-    fetchVideo () {
-      return this.fetchJson(this.apiUrl() + '/streams/' + this.getVideoId())
+    addCommas (...args) {
+      return LibPiped.addCommas(...args)
     },
+
+    fetchVideo () {
+      return LibPiped.fetchJson('/streams/' + this.getVideoId())
+    },
+
     async fetchSponsors () {
-      return await this.fetchJson(this.apiUrl() + '/sponsors/' + this.getVideoId(), {
+      return LibPiped.fetchJson('/sponsors/' + this.getVideoId(), {
         category:
                     '["' +
-                    this.getPreferenceString('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll(
+                    LibPiped.getPreferenceString('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll(
                       ',',
                       '","'
                     ) +
@@ -183,10 +190,10 @@ export default {
       })
     },
     fetchComments () {
-      return this.fetchJson(this.apiUrl() + '/comments/' + this.getVideoId())
+      return LibPiped.fetchJson('/comments/' + this.getVideoId())
     },
     onChange () {
-      this.setPreference('autoplay', this.selectedAutoPlay)
+      LibPiped.setPreference('autoplay', this.selectedAutoPlay)
     },
     async getVideoData () {
       await this.fetchVideo()
@@ -209,7 +216,7 @@ export default {
         })
     },
     async getSponsors () {
-      if (this.getPreferenceBoolean('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) }
+      if (LibPiped.getPreferenceBoolean('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) }
     },
     async getComments () {
       this.fetchComments().then(data => (this.comments = data))
@@ -217,28 +224,28 @@ export default {
     async fetchSubscribedStatus () {
       if (!this.channelId) return
 
-      this.fetchJson(
-        this.apiUrl() + '/subscribed',
+      LibPiped.fetchJson(
+        '/subscribed',
         {
           channelId: this.channelId
-        },
-        {
-          headers: {
-            Authorization: this.getAuthToken()
-          }
         }
+        /* {
+          headers: {
+            Authorization: LibPiped.getAuthToken()
+          }
+        } */
       ).then(json => {
         this.subscribed = json.subscribed
       })
     },
     subscribeHandler () {
-      this.fetchJson(this.apiUrl() + (this.subscribed ? '/unsubscribe' : '/subscribe'), null, {
+      LibPiped.fetchJson((this.subscribed ? '/unsubscribe' : '/subscribe'), null, {
         method: 'POST',
         body: JSON.stringify({
           channelId: this.channelId
         }),
         headers: {
-          Authorization: this.getAuthToken(),
+          /* Authorization: this.getAuthToken(), */
           'Content-Type': 'application/json'
         }
       })
@@ -248,7 +255,7 @@ export default {
       if (this.loading || !this.comments || !this.comments.nextpage) return
       if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) {
         this.loading = true
-        this.fetchJson(this.apiUrl() + '/nextpage/comments/' + this.getVideoId(), {
+        this.fetchJson('/nextpage/comments/' + this.getVideoId(), {
           url: this.comments.nextpage
         }).then(json => {
           this.comments.nextpage = json.nextpage

src/store/index.js

@@ -1,15 +1,125 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import { get as _get, keys as _keys, set as _set } from 'lodash-es'
+
 Vue.use(Vuex)
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
   state: {
+    isAuthenticated: false,
+    prefs: {}
   },
   mutations: {
+    setAuthenticated (state, authStatus) {
+      state.isAuthenticated = authStatus
+    },
+    setPrefs (state, {
+      id,
+      value
+    }) {
+      _set(state.prefs, id, value)
+    }
   },
   actions: {
+    loadState ({ commit }) {
+      try {
+        const p = JSON.parse(window.localStorage.getItem('PREFERENCES'))
+        commit('setPrefs', p)
+      } catch (e) {
+        console.log('Error:', e)
+      }
+    },
+
+    fetchJson ({ getters }, {
+      path,
+      params = {},
+      options = {}
+    }) {
+      const url = new URL(getters.apiUrl)
+
+      url.pathname = path
+      if (params) {
+        for (const param of _keys(params)) {
+          url.searchParams.set(param, params[param])
+        }
+      }
+      const at = getters.getAuthToken
+      if (at) {
+        url.searchParams.set('authToken', at)
+      }
+
+      return fetch(url.href, options).then(response => {
+        return response.json()
+      })
+    }
+  },
+
+  getters: {
+    getPreferenceString: state => (id, default_) => {
+      return _get(state.prefs, id, default_)
+    },
+
+    getPreferenceBoolean: (_, getters) => (...args) => {
+      const v = getters.getPreferenceString(...args)
+
+      switch (v) {
+        case 'true':
+        case true:
+        case '1':
+        case 'on':
+        case 'yes':
+          return true
+        default:
+          return false
+      }
+    },
+
+    getPreferenceNumber: (_, getters) => (...args) => {
+      const v = getters.getPreferenceString(...args)
+
+      return Number(v)
+    },
+
+    getEffectiveTheme (state, getters) {
+      let theme = getters.getPreferenceString('theme', 'light')
+      if (theme === 'auto') {
+        theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      }
+      return theme
+    },
+
+    backgroundColor (state, getters) {
+      return getters.getEffectiveTheme === 'light' ? '#fff' : '#0b0e0f'
+    },
+    secondaryBackgroundColor (state, getters) {
+      return getters.getEffectiveTheme === 'light' ? '#e5e5e5' : '#242727'
+    },
+    foregroundColor (state, getters) {
+      return getters.getEffectiveTheme === 'light' ? '#15191a' : '#0b0e0f'
+    },
+    secondaryForegroundColor (state, getters) {
+      return getters.getEffectiveTheme === 'light' ? '#666' : '#393d3d'
+    },
+
+    getAuthToken (state, getters) {
+      return getters.getPreferenceString(['authToken', getters])
+    },
+
+    apiUrl () {
+      return this.getPreferenceString('instance', 'https://pipedapi.kavin.rocks')
+    },
+
+    authenticated (state, getters) {
+      return getters.getAuthToken !== undefined
+    }
   },
   modules: {
   }
 })
+
+store.watch(state => state.prefs, (nextPrefs) => {
+  window.localStorage.setItem('PREFERENCES', JSON.stringify(nextPrefs))
+})
+
+export default store

src/tools/libpiped.js

@@ -1,5 +1,4 @@
 import DOMPurify from 'dompurify'
-import { keys as _keys } from 'lodash-es'
 
 import TimeAgo from 'javascript-time-ago'
 import en from 'javascript-time-ago/locale/en'
@@ -50,96 +49,10 @@ class LibPiped {
     return num.toLocaleString('en-US')
   }
 
-  fetchJson (path, params, options) {
-    const url = new URL(this.apiUrl())
-
-    url.pathname = path
-    if (params) {
-      for (const param of _keys(params)) {
-        url.searchParams.set(param, params[param])
-      }
-    }
-    const at = this.getAuthToken()
-    if (at) {
-      url.searchParams.set('authToken', at)
-    }
-
-    return fetch(url.href, options).then(response => {
-      return response.json()
-    })
-  }
-
   purifyHTML (original) {
     return DOMPurify.sanitize(original)
   }
 
-  setPreference (key, value) {
-    if (localStorage) localStorage.setItem(key, value)
-  }
-
-  getPreferenceBoolean ($route, key, defaultVal) {
-    let value
-    if (
-      (value = $route.query[key]) !== undefined ||
-      (localStorage && (value = localStorage.getItem(key)) !== null)
-    ) {
-      switch (String(value)) {
-        case 'true':
-        case '1':
-        case 'on':
-        case 'yes':
-          return true
-        default:
-          return false
-      }
-    } else return defaultVal
-  }
-
-  getPreferenceString (key, defaultVal) {
-    let value
-    if (
-      (localStorage && (value = localStorage.getItem(key)) !== null)
-    ) {
-      return value
-    } else return defaultVal
-  }
-
-  getPreferenceNumber (key, defaultVal) {
-    let value
-    if (
-      (localStorage && (value = localStorage.getItem(key)) !== null)
-    ) {
-      return Number(value)
-    } else return defaultVal
-  }
-
-  apiUrl () {
-    return this.getPreferenceString('instance', 'https://pipedapi.kavin.rocks')
-  }
-
-  getEffectiveTheme () {
-    let theme = this.getPreferenceString('theme', 'dark')
-    if (theme === 'auto') {
-      theme =
-        window.matchMedia &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches
-          ? 'dark'
-          : 'light'
-    }
-    return theme
-  }
-
-  getAuthToken () {
-    return this.getPreferenceString('authToken' + this.hashCode(this.apiUrl()))
-  }
-
-  hashCode (s) {
-    return s.split('').reduce(function (a, b) {
-      a = (a << 5) - a + b.charCodeAt(0)
-      return a & a
-    }, 0)
-  }
-
   timeAgo (time) {
     return timeAgo.format(time)
   }