Add the ability to view Invidious playlists

src/renderer/components/ft-element-list/ft-element-list.js

@@ -71,6 +71,14 @@ export default defineComponent({
       type: String,
       default: null
     },
+    isInvidiousPlaylist: {
+      type: Boolean,
+      default: false,
+    },
+    origin: {
+      type: String,
+      default: null
+    }
   },
   emits: ['move-video-down', 'move-video-up', 'remove-from-playlist'],
   computed: {

src/renderer/components/ft-element-list/ft-element-list.vue

@@ -22,6 +22,8 @@
       :playlist-id="playlistId"
       :playlist-type="playlistType"
       :playlist-item-id="result.playlistItemId"
+      :is-invidious-playlist="isInvidiousPlaylist"
+      :origin="origin"
       @move-video-up="moveVideoUp(result.videoId, result.playlistItemId)"
       @move-video-down="moveVideoDown(result.videoId, result.playlistItemId)"
       @remove-from-playlist="removeFromPlaylist(result.videoId, result.playlistItemId)"

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js

@@ -84,6 +84,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    isInvidiousPlaylist: {
+      type: Boolean,
+      default: false,
+    },
+    origin: {
+      type: String,
+      default: null
+    }
   },
   emits: ['move-video-down', 'move-video-up', 'remove-from-playlist'],
   data: function () {

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue

@@ -26,6 +26,8 @@
         :can-move-video-up="canMoveVideoUp"
         :can-move-video-down="canMoveVideoDown"
         :can-remove-from-playlist="canRemoveFromPlaylist"
+        :is-invidious-playlist="isInvidiousPlaylist"
+        :origin="origin"
         @move-video-up="moveVideoUp"
         @move-video-down="moveVideoDown"
         @remove-from-playlist="removeFromPlaylist"

src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.js

@@ -74,7 +74,19 @@ export default defineComponent({
     isCurrentVideo: {
       type: Boolean,
       default: false
-    }
+    },
+    useChannelsHiddenPreference: {
+      type: Boolean,
+      default: false,
+    },
+    isInvidiousPlaylist: {
+      type: Boolean,
+      default: false
+    },
+    origin: {
+      type: String,
+      default: null
+    },
   },
   emits: ['move-video-down', 'move-video-up', 'pause-player', 'remove-from-playlist'],
   data: function () {

src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.vue

@@ -39,6 +39,8 @@
         :can-move-video-up="canMoveVideoUp"
         :can-move-video-down="canMoveVideoDown"
         :can-remove-from-playlist="canRemoveFromPlaylist"
+        :origin="origin"
+        :is-invidious-playlist="isInvidiousPlaylist"
         @pause-player="pausePlayer"
         @move-video-up="moveVideoUp"
         @move-video-down="moveVideoDown"

src/renderer/components/ft-list-video/ft-list-video.js

@@ -84,6 +84,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    isInvidiousPlaylist: {
+      type: Boolean,
+      default: false,
+    },
+    origin: {
+      type: String,
+      default: null
+    }
   },
   emits: ['move-video-down', 'move-video-up', 'pause-player', 'remove-from-playlist'],
   data: function () {
@@ -485,6 +493,9 @@ export default defineComponent({
       if (this.playlistIdFinal) { query.playlistId = this.playlistIdFinal }
       if (this.playlistTypeFinal) { query.playlistType = this.playlistTypeFinal }
       if (this.playlistItemIdFinal) { query.playlistItemId = this.playlistItemIdFinal }
+      if (this.isInvidiousPlaylist) { query.isInvidiousPlaylist = true }
+      if (this.origin) { query.origin = this.origin }
+
       return query
     },
 

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

@@ -38,7 +38,11 @@ export default defineComponent({
     dropdownPositionY: {
       type: String,
       default: 'bottom'
-    }
+    },
+    invidiousInstance: {
+      type: String,
+      default: null
+    },
   },
   data: function () {
     return {
@@ -54,6 +58,10 @@ export default defineComponent({
       return this.shareTargetType === 'Playlist'
     },
 
+    isIVPlaylist: function () {
+      return this.shareTargetType === 'IVPlaylist'
+    },
+
     isVideo: function() {
       return this.shareTargetType === 'Video'
     },
@@ -62,7 +70,7 @@ export default defineComponent({
       if (this.isChannel) {
         return this.$t('Share.Share Channel')
       }
-      if (this.isPlaylist) {
+      if (this.isPlaylist || this.isIVPlaylist) {
         return this.$t('Share.Share Playlist')
       }
       return this.$t('Share.Share Video')
@@ -91,6 +99,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.playlistSharable) {
@@ -104,6 +115,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}`
     },
 
@@ -150,7 +164,7 @@ export default defineComponent({
         return `https://www.youtube-nocookie.com/embed/videoseries?list=${this.id}`
       }
       return `https://www.youtube-nocookie.com/embed/${this.id}`
-    },
+    }
   },
   mounted() {
     // Prevents to instantiate a ft-share-button for a video without a get-timestamp function

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

@@ -50,7 +50,7 @@ export default defineComponent({
     },
     channelThumbnail: {
       type: String,
-      required: true,
+      default: null
     },
     channelName: {
       type: String,
@@ -70,7 +70,7 @@ export default defineComponent({
     },
     viewCount: {
       type: Number,
-      required: true,
+      default: null,
     },
     lastUpdated: {
       type: String,
@@ -84,6 +84,14 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    isInvidiousPlaylist: {
+      type: Boolean,
+      default: false
+    },
+    origin: {
+      type: String,
+      default: null
+    },
     moreVideoDataAvailable: {
       type: Boolean,
       required: true,
@@ -190,7 +198,7 @@ export default defineComponent({
     },
 
     parsedViewCount() {
-      return formatNumber(this.viewCount)
+      return this.viewCount ? formatNumber(this.viewCount) : null
     },
 
     parsedVideoCount() {
@@ -205,7 +213,7 @@ export default defineComponent({
       let baseUrl = 'https://i.ytimg.com'
       if (this.backendPreference === 'invidious') {
         baseUrl = this.currentInvidiousInstance
-      } else if (typeof this.playlistThumbnail === 'string' && this.playlistThumbnail.length > 0) {
+      } else if (typeof this.playlistThumbnail === 'string' && this.playlistThumbnail.length > 0 && !this.isInvidiousPlaylist) {
         // Use playlist thumbnail provided by YT when available
         return this.playlistThumbnail
       }
@@ -316,6 +324,7 @@ export default defineComponent({
       return this.inputPlaylistNameEmpty || this.inputPlaylistNameBlank || this.inputPlaylistWithNameExists
     },
   },
+
   watch: {
     showDeletePlaylistPrompt(shown) {
       this.$emit(shown ? 'prompt-open' : 'prompt-close')

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

@@ -69,7 +69,7 @@
         </h2>
         <p>
           {{ $tc('Global.Counts.Video Count', videoCount, {count: parsedVideoCount}) }}
-          <span v-if="!hideViews && !isUserPlaylist">
+          <span v-if="!hideViews && viewCount != null && !isUserPlaylist">
             - {{ $tc('Global.Counts.View Count', viewCount, {count: parsedViewCount}) }}
           </span>
           <span>- </span>
@@ -128,7 +128,6 @@
           {{ channelName }}
         </h3>
       </div>
-
       <div class="playlistOptionsAndSearch">
         <div class="playlistOptions">
           <ft-icon-button
@@ -197,7 +196,8 @@
             :id="id"
             class="sharePlaylistIcon"
             :dropdown-position-y="description ? 'top' : 'bottom'"
-            share-target-type="Playlist"
+            :share-target-type="isInvidiousPlaylist ? 'IVPlaylist' : 'Playlist'"
+            :invidious-instance="origin"
           />
         </div>
         <div

src/renderer/components/top-nav/top-nav.js

@@ -151,14 +151,16 @@ export default defineComponent({
       this.getYoutubeUrlInfo(query).then((result) => {
         switch (result.urlType) {
           case 'video': {
-            const { videoId, timestamp, playlistId } = result
+            const { videoId, timestamp, playlistId, origin, playlistType } = result
 
             const query = {}
             if (timestamp) {
               query.timestamp = timestamp
             }
             if (playlistId && playlistId.length > 0) {
               query.playlistId = playlistId
+              query.origin = origin
+              query.playlistType = playlistType
             }
 
             openInternalPath({

src/renderer/components/watch-video-playlist/watch-video-playlist.css

@@ -109,3 +109,33 @@
   position: relative;
   inset-block-end: 7px;
 }
+
+.messageContainer {
+  inline-size: 100%;
+  block-size: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  row-gap: 16px;
+}
+
+.messageContainer.message {
+  font-size: 18px;
+  padding: 0;
+  margin: 0;
+}
+
+.errorIcon {
+  inline-size: 100%;
+  color: var(--tertiary-text-color);
+  font-size: 70px;
+}
+
+.viewPlaylist {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}