player settings: speed complete

NUXT/components/Player/index.vue

@@ -162,7 +162,10 @@
           v-if="$refs.player"
           class="mx-2"
           :loop="$refs.player.loop"
-          @loop="$refs.player.loop = !$refs.player.loop"
+          @loop="
+            ($refs.player.loop = !$refs.player.loop),
+              ($refs.audio.loop = !$refs.audio.loop)
+          "
         />
         <close />
       </div>
@@ -258,7 +261,8 @@
           :current-speed="$refs.player.playbackRate"
           @speed="
             ($refs.player.playbackRate = $event),
-              ($refs.audio.playbackRate = $event)
+              ($refs.audio.playbackRate = $event),
+              $store.commit('player/setSpeed', $event)
           "
         />
         <v-btn v-if="isFullscreen" fab text small disabled @click.stop="">
@@ -396,6 +400,8 @@ export default {
       if (vid.readyState >= 3) {
         this.$refs.audio.play();
         this.$refs.audio.currentTime = vid.currentTime;
+        this.$refs.player.playbackRate = this.$store.state.player.speed;
+        this.$refs.audio.playbackRate = this.$store.state.player.speed;
         vid.addEventListener("timeupdate", () => {
           if (!this.seeking) this.progress = vid.currentTime; // for seekbar
 

NUXT/pages/index.vue

@@ -24,6 +24,7 @@ export default {
     //---   Init Stuff   ---//
     this.progressMsg = this.$lang("index").connecting;
     this.$store.commit("tweaks/initTweaks");
+    this.$store.commit("player/initPlayer");
 
     //---   Load Theming   ---//
     await this.theming();

NUXT/pages/mods/player.vue

@@ -6,71 +6,16 @@
     <!-- // TODO: quality auto-adjustment settings -->
     <!-- // TODO: Data saver -->
     <!-- // TODO: Player UI -->
-    <h3 class="ml-8 mt-8">Interactions (preview)</h3>
+    <!-- <v-divider v-if="!$store.state.tweaks.roundTweak" />
-    <!-- v-model = thumbs ui -->
-    <v-radio-group>
-      <div
-        class="d-flex flex-row px-6 no-wrap"
-        style="max-width: 100%; overflow-x: auto"
-      >
-        <div class="text-center">
-          <v-radio
-            color="primary"
-            active-class="px-6 border-primary primary"
-            off-icon="mdi-thumb-up-outline"
-            on-icon="mdi-thumb-up"
-            style="transition-duration: 0.3s"
-            :style="{
-              background: $vuetify.theme.dark
-                ? 'var(--v-primary-darken4) !important'
-                : 'var(--v-primary-lighten4) !important',
-              border: $vuetify.theme.dark
-                ? '2px solid var(--v-primary-darken4)'
-                : '2px solid var(--v-primary-lighten4)',
-            }"
-            class="pa-4 ma-2 rounded-lg"
-          >
-            <template slot="label">
-              <v-icon
-                class="text--white"
-                :class="
-                  $vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
-                "
-              >
-                mdi-thumb-down
-              </v-icon>
-              <div class="ml-1" style="font-size: 0.6rem" v-text="'12,345'" />
-            </template>
-          </v-radio>
-          New
-        </div>
-        <div class="text-center">
-          <v-btn
-            text
-            fab
-            class="vertical-button px-4 rounded-lg ma-2"
-            elevation="0"
-            style="
-              width: 4.2rem !important;
-              height: 3.75rem !important;
-              text-transform: none !important;
-              border: 2px solid var(--v-primary-base) !important;
-            "
-          >
-            <v-icon v-text="'mdi-thumb-up-outline'" />
-            <div class="mt-1" style="font-size: 0.6rem" v-text="'12,345'" />
-          </v-btn>
-          <br />
-          Current
-        </div>
-      </div>
-    </v-radio-group>
 
-    <h3 class="ml-8 mt-8">Pre-Fetch</h3>
+    <h3 class="ml-8 mt-8">
+      <v-icon class="mb-1 mr-1">mdi-play-speed</v-icon>
+      Preload
+    </h3>
 
     <v-card
       flat
-      class="mx-4 my-2 pa-4 pb-2 d-flex flex-row justify-between background"
+      class="mx-4 my-2 pa-4 d-flex flex-row justify-between background"
       :class="
         $store.state.tweaks.roundTweak > 0
           ? $vuetify.theme.dark
@@ -81,30 +26,30 @@
       :style="{
         borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
       }"
+      @click="(preload = !preload), $vuetube.haptics.hapticsImpactLight(1)"
     >
-      <div class="my-auto">
+      <div>
-        Pre-fetch video data before playback
+        Pre-buffer video data before playback to avoid buffering pauses.
-        <!-- <b class="red--text">(can be data intensive it high quality presets)</b> -->
+        <b class="red--text">(can be data intensive it high quality presets)</b>
         <br />
-        _______________
         <br />
+        <hr class="primary mr-6" style="opacity: 0.25" />
         <span class="overline">Buffering threshold: 15%</span>
       </div>
       <v-spacer />
       <v-switch
-        disabled
+        v-model="preload"
-        class="mt-2"
         style="pointer-events: none"
-        persistent-hint
+        class="mt-0"
         inset
       />
-    </v-card>
+    </v-card> -->
 
     <v-divider v-if="!$store.state.tweaks.roundTweak" />
 
     <h3 class="ml-8 mt-8">
-      <v-icon>mdi-speedometer</v-icon>
+      <v-icon class="mb-1 mr-1">mdi-speedometer</v-icon>
-      Speed &middot; {{ speed }}x
+      Speed <b class="ml-1">&middot;</b> {{ speed }}x
     </h3>
 
     <v-card
@@ -133,7 +78,7 @@
             $vuetube.haptics.hapticsImpactLight(1)
         "
       >
-        <div class="my-auto">
+        <div>
           <div>Autosave</div>
           <div
             class="background--text pr-4"
@@ -148,31 +93,40 @@
         <v-switch
           v-model="speedAutosave"
           style="pointer-events: none"
-          class="mt-2"
+          class="mt-0"
-          persistent-hint
           inset
         />
       </v-card>
-      <!-- <speed
+      <v-card flat class="d-flex flex-row justify-between background">
-        class="mx-2"
+        <speed
-        style="z-index: 77777"
+          class="background mr-1 px-4 d-flex justify-center align-center"
-        :current-speed="$store.state.player.speed"
+          style="
-        @speed="speed = $event"
+            z-index: 77777;
-      /> -->
+            font-size: 1.5rem !important;
-      <span v-if="speed > 4">
+            font-weight: bold !important;
-        <v-icon>mdi-alert-decagram</v-icon> Might cause issues with buffering
+          "
-        <br />
+          :current-speed="speed"
-        enable <b>Pre-Fetch</b> to avoid
+          :class="
-      </span>
+            $store.state.tweaks.roundTweak > 0
-      <v-slider
+              ? $vuetify.theme.dark
-        v-model="speed"
+                ? 'lighten-1'
-        style="transition-duration: 0.3s; transition-property: all"
+                : 'darken-1'
-        class="pr-8 pl-8 pt-4 pb-0 background"
+              : ''
-        :max="16"
+          "
-        :label="speed.toFixed(2) + 'x'"
+          :style="{
-        :color="speed > 4 ? 'green' : ''"
+            borderRadius: `${$store.state.tweaks.roundTweak / 12}rem`,
-        thumb-size="64"
+          }"
-        step=".25"
+          @speed="speed = $event"
+        />
+        <v-slider
+          v-model="speed"
+          step=".25"
+          thumb-size="64"
+          class="pa-0 pt-5 pl-6 pb-2 ma-0 background"
+          style="transition-duration: 0.3s; transition-property: all"
+          :rules="[(s) => s <= 4 || 'Might cause issues with buffering.']"
+          :min="0.25"
+          :max="16"
           :class="
             $store.state.tweaks.roundTweak > 0
               ? $vuetify.theme.dark
@@ -182,36 +136,26 @@
           "
           :style="{
             borderRadius: `${$store.state.tweaks.roundTweak / 12}rem`,
-          filter: `invert(${speed > 4 ? '1' : '0'})`,
           }"
           @input="$vuetube.haptics.hapticsImpactLight(0)"
         >
           <template #thumb-label="{ value }">
-          <b class="background--text">{{ value.toFixed(2) }}</b>
+            <b class="background--text" style="font-size: 1.15rem">
+              {{ value.toFixed(2) }}x
+            </b>
           </template>
         </v-slider>
       </v-card>
-    <marquee bgcolor="#ffdddd">
+    </v-card>
-      <b style="text-shadow: 0 0 1rem white" class="red--text">
-        (NOTHING WORKS, WIP, incomplete)
-      </b>
-    </marquee>
   </div>
 </template>
 
-<style>
-.vertical-button span.v-btn__content {
-  flex-direction: column;
-  justify-content: space-around;
-}
-</style>
-
 <script>
-// import speed from "../../components/Player/speed.vue";
+import speed from "../../components/Player/speed.vue";
 
 export default {
   components: {
-    // speed,
+    speed,
   },
   computed: {
     speed: {
@@ -219,7 +163,6 @@ export default {
         return this.$store.state.player.speed;
       },
       set(value) {
-        console.warn(value);
         this.$store.commit("player/setSpeed", value);
       },
     },
@@ -231,30 +174,21 @@ export default {
         this.$store.commit("player/setSpeedAutosave", value);
       },
     },
-    // preload: {
+    preload: {
-    //   get() {
+      get() {
-    //     return this.$store.state.player.preload;
+        return this.$store.state.player.preload;
-    //   },
+      },
-    //   set(value) {
+      set(value) {
-    //     this.$store.commit("player/setPreload", value);
+        this.$store.commit("player/setPreload", value);
-    //   },
+      },
-    // },
+    },
-    // bufferThreshold: {
-    //   get() {
-    //     return this.$store.state.player.bufferThreshold;
-    //   },
-    //   set(value) {
-    //     this.$store.commit("player/setBufferThreshold", value);
-    //   },
-    // },
-    // quality: {
-    //   get() {
-    //     return this.$store.state.player.quality;
-    //   },
-    //   set(value) {
-    //     this.$store.commit("player/setQuality", value);
-    //   },
-    // },
   },
 };
 </script>
+
+<style>
+.vertical-button span.v-btn__content {
+  flex-direction: column;
+  justify-content: space-around;
+}
+</style>

NUXT/store/player/index.js

@@ -3,7 +3,7 @@ export const state = () => ({
   speed: 1,
   speedAutosave: null,
   preload: null,
-  quality: null,
+  // quality: null,
   // qualityAutoSwitch: null,
   // shortFullscreen: null,
   // autoplay: null,
@@ -11,19 +11,31 @@ export const state = () => ({
   // music: null,
 });
 export const mutations = {
+  initPlayer(state) {
+    if (process.client) {
+      state.loop = JSON.parse(localStorage.getItem("loop")) === true; // defaults to false
+      state.speed = JSON.parse(localStorage.getItem("speed")) || 1; // defaults to 1
+      state.speedAutosave = !(
+        // false if false, defaults to true
+        (JSON.parse(localStorage.getItem("speedAutosave")) === false)
+      );
+      state.preload = JSON.parse(localStorage.getItem("preload")) === true; // defaults to false
+    }
+  },
   setLoop(state, payload) {
     state.loop = payload;
+    localStorage.setItem("loop", payload);
   },
   setSpeed(state, payload) {
     state.speed = payload;
+    localStorage.setItem("speed", payload);
   },
   setSpeedAutosave(state, payload) {
     state.speedAutosave = payload;
+    localStorage.setItem("speedAutosave", payload);
   },
   setPreload(state, payload) {
     state.preload = payload;
-  },
+    localStorage.setItem("preload", payload);
-  setQuality(state, payload) {
-    state.quality = payload;
   },
 };

NUXT/store/tweaks/index.js

@@ -5,8 +5,6 @@ export const state = () => ({
 });
 export const mutations = {
   initTweaks(state) {
-    // NOTE: localStorage is not reactive, so it will only be used on first load
-    // currently called on mounted() in pages/index.vue
     if (process.client) {
       state.roundTweak = JSON.parse(localStorage.getItem("roundTweak")) || 0;
       state.roundThumb =