Fix share button and load thumbnail

Author: ChunkyProgrammer

src/renderer/components/ft-share-button/ft-share-button.js

@@ -38,6 +38,10 @@ export default defineComponent({
     dropdownPositionY: {
       type: String,
       default: 'bottom'
+    },
+    invidiousInstance: {
+      type: String,
+      default: null
     }
   },
   data: function () {
@@ -54,6 +58,10 @@ export default defineComponent({
       return this.shareTargetType === 'Playlist'
     },
 
+    isIVPlaylist: function () {
+      return this.shareTargetType === 'IVPlaylist'
+    },
+
     isVideo: function() {
       return this.shareTargetType === 'Video'
     },
@@ -69,6 +77,9 @@ export default defineComponent({
       if (this.isPlaylist) {
         return `${this.currentInvidiousInstance}/playlist?list=${this.id}`
       }
+      if (this.isIVPlaylist) {
+        return `${this.invidiousInstance}/playlist?list=${this.id}`
+      }
       let videoUrl = `${this.currentInvidiousInstance}/watch?v=${this.id}`
       // `playlistId` can be undefined
       if (this.playlistId && this.playlistId.length !== 0) {
@@ -82,6 +93,9 @@ export default defineComponent({
       if (this.isPlaylist) {
         return `${this.currentInvidiousInstance}/embed/videoseries?list=${this.id}`
       }
+      if (this.isIVPlaylist) {
+        return `${this.invidiousInstance}/embed/videoseries?list=${this.id}`
+      }
       return `${this.currentInvidiousInstance}/embed/${this.id}`
     },
 

src/renderer/components/ft-share-button/ft-share-button.vue

@@ -19,7 +19,10 @@
       />
     </ft-flex-box>
     <div class="shareLinks">
-      <div class="header">
+      <div
+        v-if="!isIVPlaylist"
+        class="header"
+      >
         <img
           id="youtubeShareImage"
           class="youtubeLogo"
@@ -30,7 +33,10 @@
         >
       </div>
 
-      <div class="buttons">
+      <div
+        v-if="!isIVPlaylist"
+        class="buttons"
+      >
         <ft-button
           class="action"
           aria-describedby="youtubeShareImage"
@@ -69,7 +75,10 @@
         </ft-button>
       </div>
 
-      <div class="divider" />
+      <div
+        v-if="!isIVPlaylist"
+        class="divider"
+      />
 
       <div
         id="invidiousShare"

src/renderer/components/playlist-info/playlist-info.js

@@ -23,10 +23,13 @@ export default defineComponent({
       channelName: '',
       channelId: null,
       videoCount: 0,
-      viewCount: 0,
+      viewCount: null,
       lastUpdated: '',
       description: '',
-      infoSource: ''
+      infoSource: '',
+      // if the playlist only exists on invidious
+      isInvidiousPlaylist: false,
+      origin: ''
     }
   },
   computed: {
@@ -62,10 +65,10 @@ export default defineComponent({
       if (this.thumbnailPreference === 'hidden') {
         return require('../../assets/img/thumbnail_placeholder.svg')
       }
-      let baseUrl
+      let baseUrl = 'https://i.ytimg.com'
       if (this.backendPreference === 'invidious') {
         baseUrl = this.currentInvidiousInstance
-      } else {
+      } else if (this.data.playlistThumbnail) {
         return this.data.playlistThumbnail
       }
 
@@ -91,9 +94,11 @@ export default defineComponent({
     this.uploadedTime = this.data.uploaded_at
     this.description = this.data.description
     this.infoSource = this.data.infoSource
+    this.origin = this.data.origin
+    this.isInvidiousPlaylist = this.data.isInvidiousPlaylist
 
     // Causes errors if not put inside of a check
-    if (typeof (this.data.viewCount) !== 'undefined' && !isNaN(this.data.viewCount)) {
+    if (this.data.viewCount !== null && typeof (this.data.viewCount) !== 'undefined' && !isNaN(this.data.viewCount)) {
       this.viewCount = this.hideViews ? null : formatNumber(this.data.viewCount)
     }
 
@@ -106,7 +111,12 @@ export default defineComponent({
   methods: {
     sharePlaylist: function (method) {
       const youtubeUrl = `https://youtube.com/playlist?list=${this.id}`
-      const invidiousUrl = `${this.currentInvidiousInstance}/playlist?list=${this.id}`
+      let invidiousUrl
+      if (this.isInvidiousPlaylist) {
+        invidiousUrl = `${this.origin}/playlist?list=${this.id}`
+      } else {
+        invidiousUrl = `${this.currentInvidiousInstance}/playlist?list=${this.id}`
+      }
 
       switch (method) {
         case 'copyYoutube':

src/renderer/components/playlist-info/playlist-info.vue

@@ -23,7 +23,7 @@
         {{ title }}
       </h2>
       <p>
-        {{ videoCount }} {{ $t("Playlist.Videos") }} - <span v-if="!hideViews">{{ viewCount }} {{ $t("Playlist.Views") }} -</span>
+        {{ videoCount }} {{ $t("Playlist.Videos") }} - <span v-if="!hideViews && viewCount != null">{{ viewCount }} {{ $t("Playlist.Views") }} -</span>
         <span v-if="infoSource !== 'local'">
           {{ $t("Playlist.Last Updated On") }}
         </span>
@@ -72,7 +72,8 @@
         v-if="!hideSharingActions"
         :id="id"
         :dropdown-position-y="description ? 'top' : 'bottom'"
-        share-target-type="Playlist"
+        :share-target-type="isInvidiousPlaylist ? 'IVPlaylist' : 'Playlist'"
+        :invidious-instance="origin"
       />
     </div>
   </div>

src/renderer/views/Playlist/Playlist.js

@@ -154,12 +154,14 @@ export default defineComponent({
           title: result.title,
           description: result.description,
           firstVideoId: result.videos[0].videoId,
-          viewCount: result.viewCount,
+          viewCount: (!this.query.playlistType === 'invidious') ? result.viewCount : null,
           videoCount: result.videoCount,
           channelName: result.author,
           channelThumbnail: youtubeImageUrlToInvidious(result.authorThumbnails.at(2)?.url, this.currentInvidiousInstance),
           channelId: result.authorId,
-          infoSource: 'invidious'
+          infoSource: 'invidious',
+          isInvidiousPlaylist: this.query.playlistType === 'invidious',
+          origin: origin
         }
 
         if (!this.query.playlistType === 'invidious') {