From f131069ce4995845939e5fc730644428df1a1b24 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Tue, 17 May 2022 23:19:22 -0400
Subject: [PATCH] bug fixes & improvements

---
 .../compactChannelRenderer.vue                |  23 +-
 .../ListRenderers/sectionListRenderer.vue     |   2 +-
 .../ListRenderers/verticalListRenderer.vue    |   4 +-
 .../SectionRenderers/itemSectionRenderer.vue  |   4 +-
 .../SectionRenderers/shelfRenderer.vue        |  33 ++-
 NUXT/components/ryd.vue                       | 221 ++++++++++++++++++
 NUXT/layouts/default.vue                      |  11 +-
 NUXT/pages/watch.vue                          |   4 +-
 NUXT/store/tweaks/index.js                    |   8 +-
 9 files changed, 280 insertions(+), 30 deletions(-)
 create mode 100644 NUXT/components/ryd.vue

diff --git a/NUXT/components/CompactRenderers/compactChannelRenderer.vue b/NUXT/components/CompactRenderers/compactChannelRenderer.vue
index 3678039..27c44e3 100644
--- a/NUXT/components/CompactRenderers/compactChannelRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactChannelRenderer.vue
@@ -3,6 +3,18 @@
     flat
     to="/channel"
     class="entry gridVideoRenderer background"
+    :class="
+      roundThumb && roundTweak > 0
+        ? $vuetify.theme.dark
+          ? 'background lighten-1'
+          : 'background darken-1'
+        : ''
+    "
+    :style="{
+      borderRadius: roundThumb ? `${roundTweak / 2}rem` : '0',
+      margin:
+        roundThumb && roundTweak > 0 ? '0 1rem 1rem 1rem' : '0 0 0.25rem 0',
+    }"
     @click="$store.dispatch('channel/fetchChannel', video.channelId)"
   >
     <div id="details">
@@ -20,7 +32,7 @@
           "
         />
       </a>
-      <v-card-text class="video-info pt-2" v-emoji>
+      <v-card-text class="video-info pt-2 pb-0" v-emoji>
         <div
           v-for="title in video.title.runs"
           :key="title.text"
@@ -43,6 +55,14 @@
 <script>
 export default {
   props: ["video"],
+  computed: {
+    roundTweak() {
+      return this.$store.state.tweaks.roundTweak;
+    },
+    roundThumb() {
+      return this.$store.state.tweaks.roundThumb;
+    },
+  },
   methods: {
     parseBottom(video) {
       const bottomText = [
@@ -69,7 +89,6 @@ export default {
 }
 
 .avatar-thumbnail {
-  margin-top: 0.5rem;
   margin-left: 0.5rem;
   border-radius: 50%;
   width: 50px;
diff --git a/NUXT/components/ListRenderers/sectionListRenderer.vue b/NUXT/components/ListRenderers/sectionListRenderer.vue
index de8847c..f1c087e 100644
--- a/NUXT/components/ListRenderers/sectionListRenderer.vue
+++ b/NUXT/components/ListRenderers/sectionListRenderer.vue
@@ -6,8 +6,8 @@
       class="pa-0 min-height-0"
     >
       <component
-        v-if="getComponents()[Object.keys(renderer)[0]]"
         :is="Object.keys(renderer)[0]"
+        v-if="getComponents()[Object.keys(renderer)[0]]"
         :key="index"
         :render="renderer[Object.keys(renderer)[0]]"
       ></component>
diff --git a/NUXT/components/ListRenderers/verticalListRenderer.vue b/NUXT/components/ListRenderers/verticalListRenderer.vue
index 7708afd..6abfc24 100644
--- a/NUXT/components/ListRenderers/verticalListRenderer.vue
+++ b/NUXT/components/ListRenderers/verticalListRenderer.vue
@@ -1,13 +1,13 @@
 <template>
-  <div>
+  <div class="fill-width">
     <v-list-item
       v-for="(video, index) in render.items"
       :key="index"
       class="pa-0 min-height-0"
     >
       <component
-        v-if="getComponents()[Object.keys(video)[0]]"
         :is="Object.keys(video)[0]"
+        v-if="getComponents()[Object.keys(video)[0]]"
         :key="video[Object.keys(video)[0]].videoId"
         :video="video[Object.keys(video)[0]]"
       ></component>
diff --git a/NUXT/components/SectionRenderers/itemSectionRenderer.vue b/NUXT/components/SectionRenderers/itemSectionRenderer.vue
index 9edf1c6..9789926 100644
--- a/NUXT/components/SectionRenderers/itemSectionRenderer.vue
+++ b/NUXT/components/SectionRenderers/itemSectionRenderer.vue
@@ -14,7 +14,9 @@
     </v-list-item>
     <div
       v-if="
-        render.separatorDetails && render.separatorDetails.hasBottomSeparator
+        render.separatorDetails &&
+        render.separatorDetails.hasBottomSeparator &&
+        !($store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0)
       "
       class="separator-bottom background"
       :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
diff --git a/NUXT/components/SectionRenderers/shelfRenderer.vue b/NUXT/components/SectionRenderers/shelfRenderer.vue
index 3336cb2..925c49d 100644
--- a/NUXT/components/SectionRenderers/shelfRenderer.vue
+++ b/NUXT/components/SectionRenderers/shelfRenderer.vue
@@ -1,18 +1,27 @@
 <template>
   <div class="fill-width">
-    <h4 v-if="render.headerRenderer" class="font-weight-bold shelf-header">
+    <h4
+      v-if="render.headerRenderer"
+      class="font-weight-bold shelf-header"
+      :style="{
+        marginLeft:
+          $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
+            ? '1rem'
+            : '0',
+      }"
+    >
       {{
         render.headerRenderer.elementRenderer.newElement.type.componentType
           .model.shelfHeaderModel.shelfHeaderData.title
       }}
     </h4>
-    <v-list-item class="pa-0 min-height-0">
+    <div class="pa-0 min-height-0">
       <component
-        v-if="render.content && getComponents()[Object.keys(render.content)[0]]"
         :is="Object.keys(render.content)[0]"
+        v-if="render.content && getComponents()[Object.keys(render.content)[0]]"
         :render="render.content[Object.keys(render.content)[0]]"
-      ></component
-    ></v-list-item>
+      ></component>
+    </div>
     <!-- <div
       v-if="render.separator && render.separator.hasBottomSeparator"
       class="separator-bottom background"
@@ -22,13 +31,6 @@
   </div>
 </template>
 
-<style scoped>
-.shelf-header {
-  width: 100%; /* Prevent Loading Weirdness */
-  padding: 10px;
-}
-</style>
-
 <script>
 import verticalListRenderer from "~/components/ListRenderers/verticalListRenderer.vue";
 import horizontalListRenderer from "~/components/ListRenderers/horizontalListRenderer.vue";
@@ -47,3 +49,10 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.shelf-header {
+  width: 100%; /* Prevent Loading Weirdness */
+  padding: 10px;
+}
+</style>
diff --git a/NUXT/components/ryd.vue b/NUXT/components/ryd.vue
new file mode 100644
index 0000000..9dc13cd
--- /dev/null
+++ b/NUXT/components/ryd.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="ryd">
+    <div class="ryd__container">
+      <div class="ryd__content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    apiUrl: "https://returnyoutubedislikeapi.com",
+    storedData: {
+      likes: 0,
+      dislikes: 0,
+      previousState: "NEUTRAL_STATE",
+    },
+  }),
+  methods: {
+    async solvePuzzle(puzzle) {
+      let challenge = Uint8Array.from(atob(puzzle.challenge), (c) =>
+        c.charCodeAt(0)
+      );
+      let buffer = new ArrayBuffer(20);
+      let uInt8View = new Uint8Array(buffer);
+      let uInt32View = new Uint32Array(buffer);
+      let maxCount = Math.pow(2, puzzle.difficulty) * 3;
+      for (let i = 4; i < 20; i++) {
+        uInt8View[i] = challenge[i - 4];
+      }
+
+      for (let i = 0; i < maxCount; i++) {
+        uInt32View[0] = i;
+        let hash = await crypto.subtle.digest("SHA-512", buffer);
+        let hashUint8 = new Uint8Array(hash);
+        if (countLeadingZeroes(hashUint8) >= puzzle.difficulty) {
+          return {
+            solution: btoa(
+              String.fromCharCode.apply(null, uInt8View.slice(0, 4))
+            ),
+          };
+        }
+      }
+      return {};
+    },
+    generateUserID(length = 36) {
+      const charset =
+        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+      let result = "";
+      if (crypto && crypto.getRandomValues) {
+        const values = new Uint32Array(length);
+        crypto.getRandomValues(values);
+        for (let i = 0; i < length; i++) {
+          result += charset[values[i] % charset.length];
+        }
+        return result;
+      } else {
+        for (let i = 0; i < length; i++) {
+          result += charset[Math.floor(Math.random() * charset.length)];
+        }
+        return result;
+      }
+    },
+
+    storageChangeHandler(changes, area) {
+      if (changes.disableVoteSubmission !== undefined) {
+        handleDisableVoteSubmissionChangeEvent(
+          changes.disableVoteSubmission.newValue
+        );
+      }
+      if (changes.coloredThumbs !== undefined) {
+        handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue);
+      }
+      if (changes.coloredBar !== undefined) {
+        handleColoredBarChangeEvent(changes.coloredBar.newValue);
+      }
+      if (changes.colorTheme !== undefined) {
+        handleColorThemeChangeEvent(changes.colorTheme.newValue);
+      }
+      if (changes.numberDisplayRoundDown !== undefined) {
+        handleNumberDisplayRoundDownChangeEvent(
+          changes.numberDisplayRoundDown.newValue
+        );
+      }
+      if (changes.numberDisplayFormat !== undefined) {
+        handleNumberDisplayFormatChangeEvent(
+          changes.numberDisplayFormat.newValue
+        );
+      }
+      if (changes.numberDisplayReformatLikes !== undefined) {
+        handleNumberDisplayReformatLikesChangeEvent(
+          changes.numberDisplayReformatLikes.newValue
+        );
+      }
+    },
+
+    async sendVote(videoId, vote) {
+      api.storage.sync.get(null, async (storageResult) => {
+        if (!storageResult.userId || !storageResult.registrationConfirmed) {
+          await this.register();
+        }
+        let voteResponse = await fetch(`${apiUrl}/interact/vote`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            userId: storageResult.userId,
+            videoId,
+            value: vote,
+          }),
+        });
+
+        if (voteResponse.status == 401) {
+          await this.register();
+          await this.sendVote(videoId, vote);
+          return;
+        }
+        const voteResponseJson = await voteResponse.json();
+        const solvedPuzzle = await this.solvePuzzle(voteResponseJson);
+        if (!solvedPuzzle.solution) {
+          await this.sendVote(videoId, vote);
+          return;
+        }
+
+        await fetch(`${apiUrl}/interact/confirmVote`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            ...solvedPuzzle,
+            userId: storageResult.userId,
+            videoId,
+          }),
+        });
+      });
+    },
+
+    async register() {
+      const userId = this.generateUserID();
+      api.storage.sync.set({ userId });
+      const registrationResponse = await fetch(
+        `${apiUrl}/puzzle/registration?userId=${userId}`,
+        {
+          method: "GET",
+          headers: {
+            Accept: "application/json",
+          },
+        }
+      ).then((response) => response.json());
+      const solvedPuzzle = await this.solvePuzzle(registrationResponse);
+      if (!solvedPuzzle.solution) {
+        await this.register();
+        return;
+      }
+      const result = await fetch(
+        `${apiUrl}/puzzle/registration?userId=${userId}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(solvedPuzzle),
+        }
+      ).then((response) => response.json());
+      if (result === true) {
+        return api.storage.sync.set({ registrationConfirmed: true });
+      }
+    },
+    like() {
+      if (checkForSignInButton() === false) {
+        if (this.storedData.previousState === "DISLIKED_STATE") {
+          sendVote(1);
+          if (this.storedData.dislikes > 0) this.storedData.dislikes--;
+          this.storedData.likes++;
+          createRateBar(this.storedData.likes, this.storedData.dislikes);
+          setDislikes(numberFormat(this.storedData.dislikes));
+          this.storedData.previousState = "LIKED_STATE";
+        } else if (this.storedData.previousState === "NEUTRAL_STATE") {
+          sendVote(1);
+          this.storedData.likes++;
+          createRateBar(this.storedData.likes, this.storedData.dislikes);
+          this.storedData.previousState = "LIKED_STATE";
+        } else if ((this.storedData.previousState = "LIKED_STATE")) {
+          sendVote(0);
+          if (this.storedData.likes > 0) this.storedData.likes--;
+          createRateBar(this.storedData.likes, this.storedData.dislikes);
+          this.storedData.previousState = "NEUTRAL_STATE";
+        }
+      }
+    },
+    dislike() {
+      if (checkForSignInButton() == false) {
+        if (this.storedData.previousState === "NEUTRAL_STATE") {
+          sendVote(-1);
+          this.storedData.dislikes++;
+          setDislikes(numberFormat(this.storedData.dislikes));
+          createRateBar(this.storedData.likes, this.storedData.dislikes);
+          this.storedData.previousState = "DISLIKED_STATE";
+        } else if (this.storedData.previousState === "DISLIKED_STATE") {
+          sendVote(0);
+          if (this.storedData.dislikes > 0) this.storedData.dislikes--;
+          setDislikes(numberFormat(this.storedData.dislikes));
+          createRateBar(this.storedData.likes, this.storedData.dislikes);
+          this.storedData.previousState = "NEUTRAL_STATE";
+        } else if (this.storedData.previousState === "LIKED_STATE") {
+          sendVote(-1);
+          if (this.storedData.likes > 0) this.storedData.likes--;
+          this.storedData.dislikes++;
+          setDislikes(numberFormat(this.storedData.dislikes));
+          createRateBar(this.storedData.likes, this.storedData.dislikes);
+          this.storedData.previousState = "DISLIKED_STATE";
+        }
+      }
+    },
+  },
+};
+</script>
diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index bd94d6f..5e7f6bb 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -69,7 +69,7 @@
                 tile
                 dense
                 class="searchButton text-left text-none"
-                @click="youtubeSearch(item[1])"
+                @click="youtubeSearch(item)"
               >
                 <v-icon class="mr-5">mdi-magnify</v-icon>
                 {{ item[0] }}
@@ -170,10 +170,7 @@ export default {
       if (isLink) {
         this.response = [
           `Watch Video from ID: ${isLink.searchParams.get("v")}`,
-          {
-            text: `Watch Video from ID: ${isLink.searchParams.get("v")}`,
-            id: isLink.searchParams.get("v"),
-          },
+          { id: isLink.searchParams.get("v") },
         ];
         return;
       }
@@ -181,7 +178,9 @@ export default {
     },
 
     youtubeSearch(item) {
-      const link = item.id ? `/watch?v=${item.id}` : `/search?q=${item[0]}`;
+      const link = item[1].id
+        ? `/watch?v=${item[1].id}` // link pasted
+        : `/search?q=${item[0]}`; // regular suggestion
       this.$router.push(link);
       this.search = false;
     },
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index a0b84f5..ef248d4 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -379,7 +379,6 @@ export default {
       // using item.action in the v-for loop
       this[name]();
     },
-    dislike() {},
     async share() {
       // this.share = !this.share;
       await Share.share({
@@ -431,7 +430,8 @@ export default {
           {
             name: "Likes",
             icon: "mdi-thumb-up-outline",
-            // action: null,
+            // action: this.like(),
+            actionName: "like",
             value: this.likes,
             disabled: true,
           },
diff --git a/NUXT/store/tweaks/index.js b/NUXT/store/tweaks/index.js
index 6da6454..3244659 100644
--- a/NUXT/store/tweaks/index.js
+++ b/NUXT/store/tweaks/index.js
@@ -9,10 +9,10 @@ export const mutations = {
     // currently called on mounted() in pages/index.vue
     if (process.client) {
       state.roundTweak = localStorage.getItem("roundTweak") || 0;
-      state.roundThumb = localStorage.getItem("roundThumb");
-      state.roundWatch = localStorage.getItem("roundWatch");
-      console.log(state.roundThumb);
-      console.log(state.roundWatch);
+      state.roundThumb =
+        JSON.parse(localStorage.getItem("roundThumb")) === true;
+      state.roundWatch =
+        JSON.parse(localStorage.getItem("roundWatch")) === true;
     }
   },
   setRoundTweak(state, payload) {