Support for parsing playlist urls in web app

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- Support for parsing playlist urls in web app (`https://www.youtube.com/playlist?list=ID`)
+
 ## [0.25.5] - 2024-09-06
 
 ### Fixed

playlet-web/src/lib/Api/InvidiousApi.ts

@@ -57,6 +57,15 @@ export class InvidiousApi {
         return await response.json();
     }
 
+    public async getPlaylistMetadata(plid: string) {
+        if (plid.startsWith("VLPL")) {
+            plid = plid.substring(2);
+        }
+
+        const response = await fetch(`${this.instance}/api/v1/playlists/${plid}`);
+        return await response.json();
+    }
+
     public async resolveUrl(url: string) {
         const response = await fetch(`${this.instance}/api/v1/resolveurl?url=${encodeURIComponent(url)}`);
         return await response.json();

playlet-web/src/lib/LinkDragDrop.svelte

@@ -4,9 +4,11 @@
   import { InvidiousApi } from "lib/Api/InvidiousApi";
   import VideoCastDialog from "./VideoFeed/VideoCastDialog.svelte";
   import ChannelCastDialog from "./VideoFeed/ChannelCastDialog.svelte";
+  import PlaylistCastDialog from "./VideoFeed/PlaylistCastDialog.svelte";
 
   let videoModal;
   let channelModal;
+  let playlistModal;
   let isDragging;
   let isLoading;
   let dragEndTimeout;
@@ -16,6 +18,7 @@
 
   let videoMetadata;
   let channelMetadata;
+  let playlistMetadata;
 
   let invidiousApi = new InvidiousApi();
 
@@ -71,6 +74,9 @@
         if (urlInfo && urlInfo.pageType === "WEB_PAGE_TYPE_CHANNEL") {
           searchForChannelById(urlInfo.ucid);
           return;
+        } else if (urlInfo && urlInfo.pageType === "WEB_PAGE_TYPE_PLAYLIST") {
+          searchForPlaylistById(urlInfo.ucid);
+          return;
         }
       }
     }
@@ -100,6 +106,16 @@
     }
   }
 
+  async function searchForPlaylistById(playlistId) {
+    try {
+      isLoading = true;
+      playlistMetadata = await invidiousApi.getPlaylistMetadata(playlistId);
+      playlistModal.show();
+    } finally {
+      isLoading = false;
+    }
+  }
+
   function onDragOver(event) {
     closeModal();
     clearTimeout(dragEndTimeout);
@@ -183,8 +199,10 @@
   function closeModal() {
     videoModal?.close();
     channelModal?.close();
+    playlistModal?.close();
     videoMetadata = undefined;
     channelMetadata = undefined;
+    playlistMetadata = undefined;
   }
 </script>
 
@@ -221,3 +239,12 @@
   authorId={channelMetadata?.authorId}
   authorThumbnails={channelMetadata?.authorThumbnails}
 />
+
+<PlaylistCastDialog
+  bind:this={playlistModal}
+  title={playlistMetadata?.title}
+  playlistId={playlistMetadata?.playlistId}
+  playlistThumbnail={playlistMetadata?.playlistThumbnail}
+  videoCount={playlistMetadata?.videoCount}
+  videos={playlistMetadata?.videos}
+/>