✨ Add dislikes from return youtube dislike (#1373)

* ✨ Add dislikes from return youtube dislike

* 🐛 remove unused variables

* 🎨 run formatting

.gitignore

@@ -47,3 +47,4 @@ dump.rdb
 Dockerfile.nodejs-mongodb
 .vscode/.ropeproject/
 drone.exe
+server/config.json

README.md

@@ -127,7 +127,7 @@ $ docker create \
 Docker-compose
 
 ```yml
-version: '3'
+version: "3"
 
 services:
   viewtube:
@@ -171,7 +171,7 @@ Instructions
 
 3. Start the dev server
 
-   `yarn serve`  
+   `yarn serve`
 
    If you want to start the api and frontend separately, you can use the following commands.  
    `yarn serve:api`  

client/assets/styles/popup.scss

@@ -38,7 +38,8 @@
     overscroll-behavior: contain;
     box-sizing: border-box;
 
-    >div:last-of-type, >table:last-of-type {
+    > div:last-of-type,
+    > table:last-of-type {
       padding-bottom: 100px;
     }
 

client/components/About.vue

@@ -22,23 +22,64 @@
           <p>Invidious</p>
         </BadgeButton>
       </div>
-      <div class="sponsorblock-container">
-        <div class="sponsorblock links">
+      <div class="external-service-container">
+        <div class="external-service links">
           <img
-            class="sponsorblock-image"
+            class="external-service-image"
             src="@/assets/icons/sponsorblock.png"
             alt="Sponsorblock icon"
           />
           <p>
-            This project uses the SponsorBlock database and API licensed under
+            This project uses the <span class="highlight">SponsorBlock</span> database and API
+            licensed under
             <a
               href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
               target="_blank"
               rel="noreferrer noopener"
               >CC BY-NC-SA 4.0</a
-            >. More details can be found at
-            <a href="https://sponsor.ajay.app/" target="_blank" rel="noreferrer noopener">
-              https://sponsor.ajay.app/</a
+            >.<br />More details can be found at
+            <a href="https://sponsor.ajay.app" target="_blank" rel="noreferrer noopener">
+              https://sponsor.ajay.app</a
+            >.
+          </p>
+        </div>
+      </div>
+      <div class="external-service-container">
+        <div class="external-service links">
+          <svg
+            class="external-service-image"
+            width="150"
+            height="150"
+            viewBox="0 0 24 24"
+            overflow="visible"
+          >
+            <path
+              data-v-4a65fc18=""
+              d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
+            />
+            <path
+              data-v-4a65fc18=""
+              id="plarrow"
+              d="m8 12.5 5.1-2.9L8 6.7v5.8z"
+              fill="#fff"
+              stroke="none"
+            />
+          </svg>
+          <p>
+            This project uses the <span class="highlight">Return YouTube Dislike</span> API
+            according to the usage rights found at
+            <a
+              href="https://www.returnyoutubedislike.com/docs/usage-rights"
+              target="_blank"
+              rel="noreferrer noopener"
+              >Return YouTube Dislike Usage Rights</a
+            >.<br />More details can be found at
+            <a
+              href="https://www.returnyoutubedislike.com"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              https://www.returnyoutubedislike.com</a
             >.
           </p>
         </div>
@@ -84,20 +125,28 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.sponsorblock {
-  margin: 10px 0 0 0 !important;
+.external-service {
+  margin: 15px 0 0 0 !important;
   display: flex;
 
-  .sponsorblock-image {
+  .external-service-image {
     width: 36px;
     height: 36px;
+    fill: transparent;
+    stroke: #f44;
+    fill: #f44;
   }
+
+  .highlight {
+    color: var(--theme-color);
+  }
+
   p {
     margin: 0 0 0 10px;
   }
 }
 
-.sponsorblock-container {
+.external-service-container {
   margin: 0 !important;
 }
 
@@ -106,6 +155,7 @@ export default defineComponent({
 
   a {
     line-height: 24px;
+
     span {
       margin: -1px 10px 0 0;
     }
@@ -126,13 +176,16 @@ export default defineComponent({
     width: 100%;
     transform-origin: top left;
     animation: float-around 10s $dynamic-easing infinite;
+
     @keyframes float-around {
       0% {
         transform: translate(0, 0);
       }
+
       50% {
         transform: translate(-10%, -10%) scale(1.2);
       }
+
       100% {
         transform: translate(0, 0);
       }

client/components/popup/SubscriptionImport.vue

@@ -29,9 +29,9 @@
             </li>
             <li>Upload the file "subscriptions.csv" here.</li>
           </ol>
-          <FileButton :label="'Upload CSV'" @change="onYTTakeoutFileChange"  />
+          <FileButton :label="'Upload CSV'" @change="onYTTakeoutFileChange" />
           <h2><XmlIcon />Import from Invidious / OPML</h2>
-          <FileButton :label="'Upload OPML'" @change="onOPMLFileChange"  />
+          <FileButton :label="'Upload OPML'" @change="onOPMLFileChange" />
         </div>
         <div
           v-if="subscriptionsToImport && subscriptionsToImport.length > 0"

client/components/videoplayer/helpers/index.ts

@@ -135,7 +135,6 @@ export const videoPlayerSetup = (props: any, emit: Function) => {
 
   highestLegacyQuality.value = '#';
   if (props.video.legacyFormats) {
-    console.log(props.video.legacyFormats);
     const videoFormat = props.video.legacyFormats.find((e: any) => {
       if (e.qualityLabel) {
         if (e.qualityLabel === '1080p') {

client/pages/index.vue

@@ -17,12 +17,7 @@
       "
       class="home-videos-container small"
     >
-      <VideoEntry
-        v-for="video in subscriptions"
-        :key="video.videoId"
-        :video="video"
-        :lazy="true"
-      />
+      <VideoEntry v-for="video in subscriptions" :key="video.videoId" :video="video" :lazy="true" />
     </div>
     <SectionTitle :title="'Popular videos'" :gradient="!userAuthenticated" z />
     <div class="home-videos-container small">

client/pages/watch.vue

@@ -46,21 +46,29 @@
                   {{ parseFloat(video.likeCount).toLocaleString('en-US') }}
                 </p>
               </div>
-              <!-- <div class="infobox-dislikes">
+              <div class="infobox-dislikes">
                 <ThumbsDown class="thumbs-icon" />
                 <p class="dislike-count">
-                  {{ parseFloat(video.dislikeCount).toLocaleString('en-US') }}
+                  {{ dislikeCount.toLocaleString('en-US') }}
                 </p>
-              </div> -->
+                <a
+                  class="dislike-info"
+                  href="https://returnyoutubedislike.com"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  <InfoIcon v-tippy="'Dislike information provided by returnyoutubedislike.com'" />
+                </a>
+              </div>
             </div>
-            <!-- <div class="like-ratio">
+            <div class="like-ratio">
               <div
                 class="like-ratio-bar"
                 :style="{
-                  width: (video.likeCount / (video.dislikeCount + video.likeCount)) * 100 + '%'
+                  width: (video.likeCount / (dislikeCount + video.likeCount)) * 100 + '%'
                 }"
               />
-            </div> -->
+            </div>
           </div>
         </div>
         <div class="video-infobox-channel">
@@ -169,6 +177,8 @@
 
 <script lang="ts">
 import ThumbsUp from 'vue-material-design-icons/ThumbUp.vue';
+import ThumbsDown from 'vue-material-design-icons/ThumbDown.vue';
+import InfoIcon from 'vue-material-design-icons/Information.vue';
 import Share from 'vue-material-design-icons/Share.vue';
 import LoadMoreIcon from 'vue-material-design-icons/Reload.vue';
 import {
@@ -205,6 +215,8 @@ export default defineComponent({
   components: {
     Spinner,
     ThumbsUp,
+    ThumbsDown,
+    InfoIcon,
     Share,
     LoadMoreIcon,
     NextUpVideo,
@@ -243,6 +255,8 @@ export default defineComponent({
     const initialVideoTime = ref(0);
     const videoLoaded = ref(false);
 
+    const dislikeCount = ref(0);
+
     const playlist: Ref<Result> = ref(null);
 
     const templateVideoData = route.value.params.videoData;
@@ -271,12 +285,29 @@ export default defineComponent({
       if (video.value) return video.value.recommendedVideos[0];
       return null;
     });
+
+    const loadDislikes = () => {
+      axios
+        .get(`${accessor.environment.apiUrl}videos/dislikes/${route.value.query.v}`)
+        .then(response => {
+          if (response.data && !isNaN(response.data.dislikes)) {
+            dislikeCount.value = response.data.dislikes;
+          } else {
+            accessor.messages.createMessage({
+              type: 'error',
+              title: 'Error loading dislikes',
+              message: 'Loading dislikes failed.'
+            });
+          }
+        });
+    };
+
     const saveToHistory = () => {
       if (accessor.user.isLoggedIn) {
         const apiUrl = accessor.environment.apiUrl;
         axios
           .post(
-            `${apiUrl}user/history/${video.value.videoId}`,
+            `${apiUrl}user/history/${route.value.query.v}`,
             {
               progressSeconds: null,
               lengthSeconds: video.value.lengthSeconds
@@ -392,12 +423,7 @@ export default defineComponent({
             video.value = response.data;
             if (accessor.user.isLoggedIn && accessor.settings.saveVideoHistory) {
               const videoVisit = await axios
-                .get<{
-                  videoId: string;
-                  progressSeconds: number;
-                  lengthSeconds: number;
-                  lastVisit: Date;
-                }>(`${apiUrl}user/history/${response.data.videoId}`, { withCredentials: true })
+                .get(`${apiUrl}user/history/${response.data.videoId}`, { withCredentials: true })
                 .catch((_: any) => {});
 
               if (videoVisit && videoVisit.data && videoVisit.data.progressSeconds > 0) {
@@ -460,6 +486,7 @@ export default defineComponent({
         recommendedOpen.value = true;
       }
       loadComments();
+      loadDislikes();
       accessor.miniplayer.setCurrentVideo(video);
       loadPlaylist();
     });
@@ -524,6 +551,7 @@ export default defineComponent({
       jsEnabled,
       video,
       comment,
+      dislikeCount,
       videoplayerRef,
       playlistSectionRef,
       commentsLoading,
@@ -702,6 +730,18 @@ export default defineComponent({
               display: flex;
               flex-direction: row;
 
+              .dislike-info {
+                height: 16px;
+                width: 16px;
+                padding: 2px 0 6px 8px;
+
+                .material-design-icon,
+                .material-design-icon__svg {
+                  height: 16px;
+                  width: 16px;
+                }
+              }
+
               .thumbs-icon {
                 width: 2rem;
                 height: 0.8rem;

client/plugins/actionTree.shim.ts

@@ -1,4 +1,10 @@
-import { actionTree, NuxtStoreInput, NuxtStore, ActionContext, NormalisedActionHandler } from 'typed-vuex';
+import {
+  actionTree,
+  NuxtStoreInput,
+  NuxtStore,
+  ActionContext,
+  NormalisedActionHandler
+} from 'typed-vuex';
 
 declare type Not<T, M> = T extends M ? never : T;
 declare type StateObject = Not<Record<string, any>, Function>;

client/plugins/services/sponsorBlock.ts

@@ -38,7 +38,7 @@ export class SponsorBlock {
           `${this._apiUrl}api/skipSegments/${shortHash}?categories=["sponsor", "intro", "outro", "interaction", "selfpromo", "music_offtopic", "preview"]`
         );
         if (response.data) {
-          const skipSections = response.data.find(el=> el.videoID === this._videoId);
+          const skipSections = response.data.find(el => el.videoID === this._videoId);
           if (skipSections) {
             this._skipSegments = skipSections;
             return skipSections;

client/tsconfig.eslint.json

@@ -1,5 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["./**/*", "types/**/*", ".eslintrc.js", "nuxt.config.ts", ".eslintrc.js"],
-  "exclude": ["node_modules", "dist/**/*", ".yarn", ".nuxt"]
+  "include": ["./**/*", "types/**/*", ".eslintrc.js", "nuxt.config.ts", ".eslintrc.js"]
 }

client/tsconfig.json

@@ -23,7 +23,7 @@
       "~/*": ["./*"],
       "viewtube/*": ["../*"]
     },
-    "types": ["@types/node", "@nuxt/types", "@nuxtjs/axios"]
+    "types": ["node", "@nuxt/types", "@nuxtjs/axios"]
   },
-  "exclude": ["node_modules", ".nuxt"]
+  "exclude": [".nuxt", "dist/**/*", ".yarn"]
 }

docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   viewtube: