Add RYD and RYD Proxy support

src/renderer/components/ryd-settings/ryd-settings.js

@@ -0,0 +1,45 @@
+import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+
+import { getRYDInstances } from '../../helpers/returnyoutubedislike'
+
+export default defineComponent({
+  name: 'RydSettings',
+  components: {
+    'ft-settings-section': FtSettingsSection,
+    'ft-toggle-switch': FtToggleSwitch,
+    'ft-input': FtInput,
+    'ft-flex-box': FtFlexBox,
+  },
+  computed: {
+    useReturnYoutubeDislikes: function () {
+      return this.$store.getters.getUseReturnYouTubeDislikes
+    },
+    returnYoutubeDislikesUrl: function () {
+      return this.$store.getters.getReturnYouTubeDislikesUrl
+    },
+    returnYoutubeDislikesInstances: function() {
+      return getRYDInstances()
+    }
+  },
+  methods: {
+    handleUpdateUseReturnYoutubeDislike: function (value) {
+      this.updateUseReturnYouTubeDislikes(value)
+    },
+
+    handleUpdateReturnYouTubeDislikesUrl: function (value) {
+      const RYDUrlWithoutTrailingSlash = value.replace(/\/$/, '')
+      const RYDUrlWithoutVotesSuffix = RYDUrlWithoutTrailingSlash.replace(/\/votes$/i, '')
+      this.updateReturnYouTubeDislikesUrl(RYDUrlWithoutVotesSuffix)
+    },
+
+    ...mapActions([
+      'updateUseReturnYouTubeDislikes',
+      'updateReturnYouTubeDislikesUrl',
+    ])
+  }
+})

src/renderer/components/ryd-settings/ryd-settings.vue

@@ -0,0 +1,29 @@
+<template>
+  <ft-settings-section
+    :title="$t('Settings.Return YouTube Dislikes Settings.Return YouTube Dislikes Settings')"
+  >
+    <ft-flex-box class="settingsFlexStart500px">
+      <ft-toggle-switch
+        :label="$t('Settings.Return YouTube Dislikes Settings.Enable Return YouTube Dislikes')"
+        :default-value="useReturnYoutubeDislikes"
+        @change="handleUpdateUseReturnYoutubeDislike"
+      />
+    </ft-flex-box>
+    <div
+      v-if="useReturnYoutubeDislikes"
+    >
+      <ft-flex-box>
+        <ft-input
+          :placeholder="$t('Settings.Return YouTube Dislikes Settings.Return YouTube Dislikes Url')"
+          :show-action-button="false"
+          :show-label="true"
+          :data-list="returnYoutubeDislikesInstances"
+          :value="returnYoutubeDislikesUrl"
+          @input="handleUpdateReturnYouTubeDislikesUrl"
+        />
+      </ft-flex-box>
+    </div>
+  </ft-settings-section>
+</template>
+
+<script src="./ryd-settings.js" />

src/renderer/components/watch-video-info/watch-video-info.js

@@ -279,6 +279,10 @@ export default defineComponent({
 
     defaultPlayback: function () {
       return this.$store.getters.getDefaultPlayback
+    },
+
+    useReturnYoutubeDislikes: function () {
+      return this.$store.getters.getUseReturnYouTubeDislikes
     }
   },
   mounted: function () {

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -49,20 +49,6 @@
       <div class="viewCount">
         {{ parsedViewCount }}
       </div>
-      <div
-        v-if="!hideVideoLikesAndDislikes"
-        class="likeBarContainer"
-      >
-        <div
-          class="likeSection"
-        >
-          <div>
-            <span class="likeCount"><font-awesome-icon :icon="['fas', 'thumbs-up']" /> {{ parsedLikeCount }}</span>
-          </div>
-        </div>
-      </div>
-      <!--
-      // Uncomment if suitable solution for bringing back dislikes is introduced
       <div
         v-if="!hideVideoLikesAndDislikes"
         class="likeBarContainer"
@@ -71,16 +57,23 @@
           class="likeSection"
         >
           <div
+            v-if="useReturnYoutubeDislikes"
             class="likeBar"
             :style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }"
           />
           <div>
             <span class="likeCount"><font-awesome-icon :icon="['fas', 'thumbs-up']" /> {{ parsedLikeCount }}</span>
-            <span class="dislikeCount"><font-awesome-icon :icon="['fas', 'thumbs-down']" /> {{ parsedDislikeCount }}</span>
+            <span
+              v-if="useReturnYoutubeDislikes"
+              class="dislikeCount"
+            >
+              &nbsp;
+              <font-awesome-icon :icon="['fas', 'thumbs-down']" />
+              {{ parsedDislikeCount }}
+            </span>
           </div>
         </div>
       </div>
-      -->
       <div class="videoOptions">
         <ft-icon-button
           v-if="!isUpcoming"

src/renderer/helpers/returnyoutubedislike.js

@@ -0,0 +1,25 @@
+import store from '../store/index'
+
+export async function getVideoDislikes(videoId) {
+  let requestUrl
+
+  const url = store.getters.getReturnYouTubeDislikesUrl
+  if (new URL(url).hostname.replace('www.', '') === 'returnyoutubedislikeapi.com') {
+    requestUrl = `https://returnyoutubedislikeapi.com/Votes?videoId=${videoId}`
+  } else {
+    requestUrl = `${url}/votes/${videoId}`
+  }
+
+  const response = await fetch(requestUrl).then(res => res.json())
+
+  return response.dislikes
+}
+
+export function getRYDInstances() {
+  // hopefully we get an official instance list at some point instead of hard coding...
+  return [
+    'https://returnyoutubedislikeapi.com',
+    'https://ryd-proxy.kavin.rocks',
+    'https://ryd-proxy.privacydev.net'
+  ]
+}

src/renderer/main.js

@@ -49,6 +49,7 @@ import {
   faStepBackward,
   faStepForward,
   faSync,
+  faThumbsDown,
   faThumbsUp,
   faThumbtack,
   faTimes,
@@ -112,6 +113,7 @@ library.add(
   faStepBackward,
   faStepForward,
   faSync,
+  faThumbsDown,
   faThumbsUp,
   faThumbtack,
   faTimes,

src/renderer/store/modules/settings.js

@@ -281,6 +281,8 @@ const state = {
   fetchSubscriptionsAutomatically: true,
   settingsPassword: '',
   allowDashAv1Formats: false,
+  returnYouTubeDislikesUrl: 'https://ryd-proxy.kavin.rocks',
+  useReturnYouTubeDislikes: false,
 }
 
 const stateWithSideEffects = {

src/renderer/views/Settings/Settings.js

@@ -14,6 +14,7 @@ import ParentControlSettings from '../../components/parental-control-settings/pa
 import ExperimentalSettings from '../../components/experimental-settings/experimental-settings.vue'
 import PasswordSettings from '../../components/password-settings/password-settings.vue'
 import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
+import RydSettings from '../../components/ryd-settings/ryd-settings.vue'
 
 export default defineComponent({
   name: 'Settings',
@@ -33,6 +34,7 @@ export default defineComponent({
     'experimental-settings': ExperimentalSettings,
     'password-settings': PasswordSettings,
     'password-dialog': PasswordDialog,
+    'ryd-settings': RydSettings,
   },
   data: function () {
     return {

src/renderer/views/Settings/Settings.vue

@@ -24,6 +24,8 @@
       <parental-control-settings />
       <hr>
       <sponsor-block-settings />
+      <hr>
+      <ryd-settings />
       <hr v-if="usingElectron">
       <experimental-settings v-if="usingElectron" />
       <hr>

src/renderer/views/Watch/Watch.js

@@ -30,6 +30,7 @@ import {
   parseLocalWatchNextVideo
 } from '../../helpers/api/local'
 import { invidiousGetVideoInformation, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
+import { getVideoDislikes } from '../../helpers/returnyoutubedislike'
 
 export default defineComponent({
   name: 'Watch',
@@ -182,6 +183,9 @@ export default defineComponent({
     },
     allowDashAv1Formats: function () {
       return this.$store.getters.getAllowDashAv1Formats
+    },
+    useReturnYouTubeDislikes: function () {
+      return this.$store.getters.getUseReturnYouTubeDislikes
     }
   },
   watch: {
@@ -329,6 +333,12 @@ export default defineComponent({
 
           // YouTube doesn't return dislikes anymore
           this.videoDislikeCount = 0
+
+          if (this.useReturnYouTubeDislikes) {
+            getVideoDislikes(this.videoId).then(dislikes => {
+              this.videoDislikeCount = isNaN(dislikes) ? 0 : dislikes
+            })
+          }
         }
 
         this.isLive = !!result.basic_info.is_live
@@ -669,6 +679,11 @@ export default defineComponent({
           } else {
             this.videoLikeCount = result.likeCount
             this.videoDislikeCount = result.dislikeCount
+            if (this.useReturnYouTubeDislikes) {
+              getVideoDislikes(this.videoId).then((dislikes) => {
+                this.videoDislikeCount = isNaN(dislikes) ? 0 : dislikes
+              })
+            }
           }
           if (this.hideChannelSubscriptions) {
             this.channelSubscriptionCountText = ''

static/locales/en-US.yaml

@@ -406,6 +406,10 @@ Settings:
       Prompt To Skip: Prompt To Skip
       Do Nothing: Do Nothing
     Category Color: Category Color
+  Return YouTube Dislikes Settings:
+    Return YouTube Dislikes Settings: Return YouTube Dislikes Settings
+    Enable Return YouTube Dislikes: Enable Return YouTube Dislikes
+    Return YouTube Dislikes Url: Return YouTube dislikes API Url (Default is https://ryd-proxy.kavin.rocks/)
   Parental Control Settings:
     Parental Control Settings: Parental Control Settings
     Hide Unsubscribe Button: Hide Unsubscribe Button