Implement partial frontend for playlists

malisipi · Aug 4, 2024 · dd7030a · dd7030a
1 parent 2031511
commit dd7030a
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 10 deletions.
diff --git a/assets/inner/playlist_liked.png b/assets/inner/playlist_liked.png
diff --git a/assets/inner/playlist_watch_later.png b/assets/inner/playlist_watch_later.png
diff --git a/css/layout.css b/css/layout.css
@@ -209,7 +209,8 @@ div.tabs {
         .tabs:not([active="feed"]) &:is(#feed),
         .tabs:not([active="following"]) &:is(#following),
         .tabs:not([active="owner"]) &:is(#owner),
-        .tabs:not([active="bookmarks"]) &:is(#bookmarks),
+        .tabs:not([active="playlists"]) &:is(#playlists),
+        .tabs:not([active="playlist"]) &:is(#playlist),
         .tabs:not([active="history"]) &:is(#history),
         .tabs:not([active="downloads"]) &:is(#downloads),
         .tabs:not([active="settings"]) &:is(#settings),

diff --git a/css/styles.css b/css/styles.css
@@ -865,7 +865,7 @@ video::cue {
     background: color-mix(in srgb, var(--effect-color) 75%, transparent);
 }
 
-.-video-preview {
+.-video-preview, .-playlist-preview {
     display: grid;
     padding: 5px;
     border-radius: var(--border-radius-size);

diff --git a/index.html b/index.html
@@ -73,9 +73,9 @@
       <material-symbol>tv</material-symbol>
       <div class="description"><language-pack key="following"></language-pack></div>
     </div>
-    <div class="bottom-border" tab="bookmarks" tabindex="0">
+    <div class="bottom-border" tab="playlists" tabindex="0">
       <material-symbol>bookmarks</material-symbol>
-      <div class="description"><language-pack key="bookmarks"></language-pack></div>
+      <div class="description"><language-pack key="playlists"></language-pack></div>
     </div>
     <div class="open-only" tab="history" tabindex="0">
       <material-symbol>history</material-symbol>
@@ -222,7 +222,8 @@
     </div>
     <div id="feed" class="view"></div>
     <div id="following" class="view"></div>
-    <div id="bookmarks" class="view">Bookmarks is not implemented</div>
+    <div id="playlists" class="view"></div>
+    <div id="playlist" class="view">Playlist</div>
     <div id="history" class="view"></div>
     <div id="queue" class="view"></div>
     <div id="downloads" class="view"></div>

diff --git a/js/components.js b/js/components.js
@@ -56,6 +56,9 @@ var components = {
             downloads: () => {
                 components.tabs.downloads.$_sync();
                 render.downloads();
+            },
+            playlists: () => {
+                render.playlists();
             }
         }
     },
@@ -664,6 +667,9 @@ var components = {
             $_clear_sync: () => {
                 clearInterval(components.tabs.downloads.$sync);
             }
+        },
+        playlists: {
+            $: null
         }
     }
 };
@@ -864,6 +870,7 @@ components.tabs.feed.$ = components.tabs.$.querySelector("#feed");
 components.tabs.downloads.$ = components.tabs.$.querySelector("#downloads");
 components.tabs.offline.$ = components.tabs.$.querySelector("#offline");
 components.tabs.queue.$ = components.tabs.$.querySelector("#queue");
+components.tabs.playlists.$ = components.tabs.$.querySelector("#playlists");
 
 // Add event listeners
 

diff --git a/js/database.js b/js/database.js
@@ -5,12 +5,12 @@ var database = {
         defaultStructure: {
             $liked_videos: {
                 title: "Liked Videos",
-                thumbnail: "./assets/playlist_liked.png",
+                thumbnail: "./assets/inner/playlist_liked.png",
                 list: []
             },
             $watch_later: {
                 title: "Watch Later",
-                thumbnail: "./assets/playlist_watch_later.png",
+                thumbnail: "./assets/inner/playlist_watch_later.png",
                 list: []
             }
         },

diff --git a/js/render.js b/js/render.js
@@ -39,6 +39,28 @@ var render = {
             })
             return video;
         },
+        playlist_preview: (mode="normal", playlist_info) => { /* mode=normal|compact */
+            /* playlist_info
+             *  title
+             *  thumbnail
+             *  id
+             */
+            let playlist = document.createElement("div");
+            playlist.className = mode + " -playlist-preview";
+            let thumbnail = document.createElement("img");
+            thumbnail.draggable = false;
+            thumbnail.loading = "lazy";
+            thumbnail.src = playlist_info?.thumbnail ?? "";
+            playlist.append(thumbnail);
+            let title = document.createElement("span");
+            title.className = "title";
+            title.innerText = playlist_info?.title;
+            playlist.append(title);
+            playlist.addEventListener("click", (_, _id=playlist_info?.id) => {
+                alert(_id);
+            })
+            return playlist;
+        },
         owner_preview: (mode="normal", owner_info) => { /* mode=normal|compact */
             let owner = document.createElement("div");
             owner.className = mode + " -owner-preview";
@@ -562,5 +584,16 @@ var render = {
             renderer.setAttribute("state", media.state);
             components.tabs.downloads.$.append(renderer);
         });
+    },
+    playlists: async () => {
+        components.tabs.playlists.$.innerText = "";
+        Object.keys(database.playlists.content).forEach(playlist => {
+            let playlist_data = database.playlists.content[playlist];
+            components.tabs.playlists.$.append(render.$.playlist_preview("normal", {
+                id: playlist,
+                title: playlist_data.title,
+                thumbnail: playlist_data.thumbnail
+            }));
+        });
     }
 };
diff --git a/languages.json b/languages.json
@@ -11,9 +11,9 @@
         "en": "Following",
         "tr": "Takip Edilenler"
     },
-    "bookmarks": {
-        "en": "Bookmarks",
-        "tr": "Yer İşaretleri"
+    "playlists": {
+        "en": "Playlists",
+        "tr": "Oynatma Listeleri"
     },
     "history": {
         "en": "History",