Personalized Recommendations WatchTime Telemetry Opt-out toggle, super duper much privacy wooo

NUXT/pages/activities/install.vue

@@ -32,17 +32,29 @@
 
     <center ref="stage2" class="container hidden">
       <h2 class="mb-2">{{ lang.featuresetup }}</h2>
+      <v-checkbox
+        v-model="watchTelemetry"
+        :label="`Personalized Recommendations: ${
+          watchTelemetry ? 'Enabled' : 'Disabled'
+        }`"
+        style="width: 80%"
+        dense
+      />
+      <!-- TODO: translate -->
+      <!-- :label="`${lang.enabletelem} ${watchTelemetry ? ..." -->
       <v-checkbox
         v-model="ryd"
         :label="lang.enableryd"
         style="width: 80%"
         disabled
+        dense
       />
       <v-checkbox
         v-model="sponsorBlock"
         :label="lang.enablespb"
         style="width: 80%"
         disabled
+        dense
       />
     </center>
     <center ref="stage3" class="container hidden" style="width: 80%">
@@ -81,6 +93,16 @@ export default {
       apis: ["youtube.com", "twitch.tv", "odysee.com"],
     };
   },
+  computed: {
+    watchTelemetry: {
+      get() {
+        return this.$store.state.watchTelemetry;
+      },
+      set(value) {
+        this.$store.commit("setTelemetryPreference", value);
+      },
+    },
+  },
   mounted() {
     this.lang = this.$lang("events");
   },

NUXT/pages/index.vue

@@ -23,6 +23,7 @@ export default {
   async mounted() {
     //---   Init Stuff   ---//
     this.progressMsg = this.$lang("index").connecting;
+    this.$store.commit("initTelemetryPreference");
     this.$store.commit("tweaks/initTweaks");
     this.$store.commit("player/initPlayer");
 
@@ -30,7 +31,11 @@ export default {
     await this.theming();
 
     //---   Update Screen   ---//
-    if ( (localStorage.getItem("lastRunVersion") != null) && (localStorage.getItem("lastRunVersion") != process.env.version) ) return this.$router.replace("/activities/update");
+    if (
+      localStorage.getItem("lastRunVersion") != null &&
+      localStorage.getItem("lastRunVersion") != process.env.version
+    )
+      return this.$router.replace("/activities/update");
 
     //---   Start Innertube Connection   ---//
     await this.$youtube.getAPI();

NUXT/pages/mods/general.vue

@@ -4,7 +4,9 @@
     <v-card
       flat
       class="pb-5 background"
-      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      :class="
+        roundTweak > 0 ? ($vuetify.theme.dark ? 'lighten-1' : 'darken-1') : ''
+      "
       :style="{ borderRadius: `${roundTweak / 2}rem` }"
     >
       <v-card-title>{{ lang.language }}</v-card-title>
@@ -13,6 +15,82 @@
       </v-card-text>
     </v-card>
 
+    <!-- Personalized Recommendations / Watch Time Telemetry -->
+    <v-divider v-if="!$store.state.tweaks.roundTweak" />
+    <v-card
+      flat
+      class="d-flex flex-row mx-4 mb-4 pr-4 background"
+      style="overflow: hidden"
+      :class="
+        $store.state.tweaks.roundTweak > 0
+          ? $vuetify.theme.dark
+            ? 'lighten-1'
+            : 'darken-1'
+          : ''
+      "
+      :style="{
+        borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
+        padding: !$store.state.tweaks.roundTweak ? '2rem !important' : '',
+        margin: !$store.state.tweaks.roundTweak ? '0 !important' : '',
+      }"
+      @click="
+        (watchTelemetry = !watchTelemetry),
+          $vuetube.haptics.hapticsImpactLight(1)
+      "
+    >
+      <v-icon
+        class="pr-8 pl-4"
+        style="border-radius: 0rem !important"
+        :class="
+          $store.state.tweaks.roundTweak > 0
+            ? $vuetify.theme.dark
+              ? 'background lighten-2'
+              : 'background darken-2'
+            : ''
+        "
+        :style="{
+          color: watchTelemetry ? 'var(--v-primary-base)' : '',
+        }"
+      >
+        mdi-account-card-outline
+      </v-icon>
+      <div
+        class="my-auto pa-4 ml-n4 background"
+        :class="
+          $store.state.tweaks.roundTweak > 0
+            ? $vuetify.theme.dark
+              ? 'lighten-1'
+              : 'darken-1'
+            : ''
+        "
+        style="position: relative"
+        :style="{
+          boxShadow:
+            $store.state.tweaks.roundTweak > 0
+              ? 'inset 1rem 0 1rem -1rem var(--v-background-base)'
+              : '',
+          borderRadius: `${$store.state.tweaks.roundTweak / 4}rem`,
+        }"
+      >
+        <div class="mb-4">Personalized Recommendations</div>
+        <div
+          class="background--text"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          style="font-size: 0.75rem; margin-top: -0.25rem !important"
+        >
+          Receive personalized recommendations in exchange for sending watch
+          time telemetry.
+        </div>
+      </div>
+      <v-spacer />
+      <v-switch
+        v-model="watchTelemetry"
+        style="pointer-events: none"
+        class="mt-4"
+        inset
+      />
+    </v-card>
+
     <!--   Backup   -->
     <!--
     <v-card
@@ -31,8 +109,6 @@
       </v-card-actions>
     </v-card>
     -->
-
-
   </div>
 </template>
 
@@ -48,6 +124,15 @@ export default {
     };
   },
   computed: {
+    watchTelemetry: {
+      get() {
+        return this.$store.state.watchTelemetry;
+      },
+      set(value) {
+        console.warn("Setting watchTelemetry to " + value);
+        this.$store.commit("setTelemetryPreference", value);
+      },
+    },
     roundTweak() {
       return this.$store.state.tweaks.roundTweak;
     },
@@ -58,15 +143,18 @@ export default {
   },
   methods: {
     download(filename, text) {
-      var element = document.createElement('a');
-      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
-      element.setAttribute('download', filename);
-    
-      element.style.display = 'none';
+      var element = document.createElement("a");
+      element.setAttribute(
+        "href",
+        "data:text/plain;charset=utf-8," + encodeURIComponent(text)
+      );
+      element.setAttribute("download", filename);
+
+      element.style.display = "none";
       document.body.appendChild(element);
-    
+
       element.click();
-    
+
       document.body.removeChild(element);
     },
 
@@ -87,14 +175,12 @@ export default {
         version: process.env.version,
         channel: process.env.channel,
         date: Date.now(),
-        registry: this.getRegistry()
+        registry: this.getRegistry(),
       });
-      this.download("vuetube-backup.json",file);
+      this.download("vuetube-backup.json", file);
     },
-    registryRestore() {
-
-    }
-  }
+    registryRestore() {},
+  },
 };
 </script>
 

NUXT/pages/watch.vue

@@ -358,13 +358,16 @@ export default {
         console.log("recommendations:", this.recommends);
 
         //---   API WatchTime call   ---//
-        this.playbackTracking = result.playbackTracking;
-        this.st = 0;
-        this.cpn = getCpn();
-        this.initWatchTime().then(() => {
-          this.sendWatchTime();
-          this.interval = setInterval(this.sendWatchTime, 60000);
-        });
+        console.warn("WatchTime:", this.$store.state.watchTelemetry);
+        if (this.$store.state.watchTelemetry) {
+          this.playbackTracking = result.playbackTracking;
+          this.st = 0;
+          this.cpn = getCpn();
+          this.initWatchTime().then(() => {
+            this.sendWatchTime();
+            this.interval = setInterval(this.sendWatchTime, 60000);
+          });
+        }
       });
 
       this.$youtube.getReturnYoutubeDislike(this.$route.query.v, (data) => {

NUXT/store/index.js

@@ -2,9 +2,25 @@ import Vue from "vue";
 
 export const state = () => ({
   recommendedVideos: [],
+  watchTelemetry: null,
 });
 
 export const mutations = {
+  initTelemetryPreference(state) {
+    if (process.client) {
+      state.watchTelemetry = !(
+        // false if false, defaults to true
+        (JSON.parse(localStorage.getItem("watchTelemetry")) === false)
+      );
+      // JSON.parse(localStorage.getItem("watchTelemetry")) === true; // defaults to false
+      console.warn("initTelemetryPreference", state.watchTelemetry);
+    }
+  },
+  setTelemetryPreference(state, payload) {
+    console.warn("setTelemetryPreference", payload);
+    state.watchTelemetry = payload;
+    localStorage.setItem("watchTelemetry", payload);
+  },
   updateRecommendedVideos(state, payload) {
     Vue.set(state, "recommendedVideos", payload);
   },