Update storage and render logic

nikitahl · Aug 15, 2024 · 95eca96 · 95eca96
1 parent 84937df
commit 95eca96
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 106 deletions.
diff --git a/js/content.js b/js/content.js
@@ -40,7 +40,7 @@ const playlistBtn = `<div class="option">
 </div>
 </div>
 <div class="option">
-<button class="save-btn" id="saveToWatchlist">Save to Watch later</button>
+<button class="save-btn" id="saveToWatchLater">Save to Watch later</button>
 </div>`;
 const closeBtn = '<button class="close-btn" id="closePopup" title="Close"><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="18" viewBox="0 0 24 24" width="18" focusable="false" style="pointer-events: none; display: inherit;" aria-hidden="true"><path d="m12.71 12 8.15 8.15-.71.71L12 12.71l-8.15 8.15-.71-.71L11.29 12 3.15 3.85l.71-.71L12 11.29l8.15-8.15.71.71L12.71 12z"></path></svg></button>';
 
@@ -84,8 +84,8 @@ function createPopup(link, type, linkText, linkMeta) {
       closePopup();
     });
   } else {
-    document.getElementById('saveToWatchlist').addEventListener('click', () => {
-      saveToLocalStorage('watchlist', link, linkText, linkMeta);
+    document.getElementById('saveToWatchLater').addEventListener('click', () => {
+      saveToLocalStorage('playlists', link, linkText, linkMeta, 'Watch later');
       closePopup();
     });
 

diff --git a/js/library.js b/js/library.js
@@ -1,23 +1,40 @@
 document.addEventListener('DOMContentLoaded', () => {
-  const videosList = document.getElementById('videosList');
-  const channelsList = document.getElementById('channelsList');
+  // eslint-disable-next-line
+  const url = new URL(window.location.href);
+  const currentPlaylistContainer = document.getElementById('currentPlaylist');
   const playlistsContainer = document.getElementById('playlists');
+  const channelsList = document.getElementById('channelsList');
 
-  // Fetch saved videos from localStorage
-  browser.storage.local.get({ watchlist: [] }, result => {
-    const savedVideos = result.watchlist.general;
-    if (!savedVideos) {
-      videosList.innerHTML = '<p style="margin:0">You have no videos saved in watch later.</p>';
-      return;
+  const playlistTitle = document.getElementById('playlistTitle');
+  let playlistName = url.searchParams.get('playlistName');
+  console.log('playlistName',playlistName);
+  if (!playlistName) {
+    playlistName = 'watchLater';
+  }
+  console.log('playlistName',playlistName);
+  browser.storage.local.get([ 'playlists' ], result => {
+    console.log('result.playlists',result.playlists);
+    const playlist = result.playlists && result.playlists[playlistName];
+    if (playlist) {
+      playlistTitle.innerText = playlist.playlistName;
+      if (playlist.videos.length) {
+      // eslint-disable-next-line
+      renderVideos(playlist.videos, currentPlaylistContainer, 'playlists', playlistName); // defined in utils.js
+      } else {
+        const content = 'You have no videos saved in this playlist.';
+        renderNoContent(content, currentPlaylistContainer);
+      }
+    } else {
+      const content = 'You have no videos saved in this playlist.';
+      renderNoContent(content, currentPlaylistContainer);
     }
-    // eslint-disable-next-line
-    renderVideos(savedVideos, videosList, 'watchlist'); // defined in utils.js
   });
 
   browser.storage.local.get({ playlists: [] }, result => {
     const playlists = result.playlists;
-    if (!Object.keys(playlists).length === 0) {
-      playlistsContainer.innerHTML = '<p style="margin:0">You have no playlists.</p>';
+    if (Object.keys(playlists).length === 0) {
+      const content = 'You have no playlists.';
+      renderNoContent(content, playlistsContainer);
       return;
     }
     for (const key in playlists) {
@@ -27,7 +44,7 @@ document.addEventListener('DOMContentLoaded', () => {
         playlistContainer.classList.add('playlist');
         playlistContainer.innerHTML = `<strong class="title">${playlist.playlistName}</strong>
         <span class="secondary-link">${playlist.videos.length} videos</span>
-        <a class="primary-link view-playlist" data-playlist-id="${key}" href="playlist.html?playlistName=${key}">View full playlist</a>
+        <a class="primary-link view-playlist" data-playlist-id="${key}" href="library.html?playlistName=${key}">View full playlist</a>
         `;
         playlistsContainer.appendChild(playlistContainer);
       }
@@ -37,8 +54,10 @@ document.addEventListener('DOMContentLoaded', () => {
   // Fetch saved channels from localStorage
   browser.storage.local.get({ channels: [] }, result => {
     const savedChannels = result.channels.general;
-    if (!savedChannels) {
-      channelsList.innerHTML = '<p style="margin:0">You have no saved channels.</p>';
+    console.log('savedChannels',savedChannels);
+    if (!savedChannels || !savedChannels.length) {
+      const content = 'You have no saved channels.';
+      renderNoContent(content, channelsList);
       return;
     }
     savedChannels && savedChannels.forEach(channel => {
@@ -60,11 +79,20 @@ document.addEventListener('DOMContentLoaded', () => {
       avatar.classList.add('avatar');
       if (channel?.linkMeta?.avatar) {
         avatar.src = channel.linkMeta.avatar;
+        avatar.loading = 'lazy';
       }
       li.appendChild(avatar);
       li.appendChild(channelLink);
       li.appendChild(removeBtn);
       channelsList.appendChild(li);
     });
   });
-});
+});
+
+function renderNoContent (content, container) {
+  const tag = 'p';
+  const attributes = {};
+  // eslint-disable-next-line
+  const noContent = createElement(tag, content, attributes);
+  container.append(noContent);
+}
diff --git a/js/playlist.js b/js/playlist.js
diff --git a/js/utils.js b/js/utils.js
@@ -1,6 +1,6 @@
 const { URL } = window;
 // eslint-disable-next-line
-function renderVideos(videos, container, category, playlistName = null) { // used in playlists.js and library.js
+function renderVideos(videos, container, category, playlistName = null) { // used in library.js
   videos && videos.forEach(video => {
     const li = document.createElement('li');
     const videoLink = document.createElement('a');
@@ -47,43 +47,53 @@ function renderVideos(videos, container, category, playlistName = null) { // use
     removeBtnWrapper.appendChild(removeBtn);
     container.appendChild(li);
   });
+}
 
-  document.body.addEventListener('click', e => {
-    const item = e.target.closest('li');
-    const type = item?.dataset?.type;
-    if (e.target.tagName === 'BUTTON' && e.target.classList.contains('remove-item') && window.confirm(`Do you really want to remove this ${type}?`)) {
-      const link = item.dataset.link;
-      const category = item.dataset.category;
-      const playlistName = item.dataset.playlistName;
-      removeFromLocalStorage(category, link, playlistName);
-      item.remove();
-    }
-  });
+document.body.addEventListener('click', e => {
+  const item = e.target.closest('li');
+  const type = item?.dataset?.type;
+  if (e.target.tagName === 'BUTTON' && e.target.classList.contains('remove-item') && window.confirm(`Do you really want to remove this ${type}?`)) {
+    const link = item.dataset.link;
+    const category = item.dataset.category;
+    const playlistName = item.dataset.playlistName;
+    removeFromLocalStorage(category, link, playlistName);
+    item.remove();
+  }
+});
 
-  function removeFromLocalStorage(category, link, playlistName = null) {
-    chrome.storage.local.get([ category ], result => {
-      let items = result[category] || {};
-      let save = false;
+function removeFromLocalStorage(category, link, playlistName = null) {
+  chrome.storage.local.get([ category ], result => {
+    let items = result[category] || {};
+    let save = false;
 
-      if (playlistName) {
-        if (items[playlistName] && items[playlistName].videos.find(item => item.link === link)) {
-          items[playlistName].videos = items[playlistName].videos.filter(item => item.link !== link);
-          save = true;
-        }
-      } else {
-        if (items.general && items.general.find(item => item.link === link)) {
-          items.general = items.general.filter(item => item.link !== link);
-          save = true;
-        }
+    console.log('removeFromLocalStorage', { result, category, link, playlistName, items });
+    if (playlistName) {
+      if (items[playlistName] && items[playlistName].videos.find(item => item.link === link)) {
+        items[playlistName].videos = items[playlistName].videos.filter(item => item.link !== link);
+        save = true;
       }
-
-      if (save) {
-        chrome.storage.local.set({ [category]: items }, () => {
-          console.log(`${category} removed:`, link);
-        });
-      } else {
-        console.log(`${link} does not exist in ${category}`);
+    } else {
+      if (items.general && items.general.find(item => item.link === link)) {
+        items.general = items.general.filter(item => item.link !== link);
+        save = true;
       }
-    });
+    }
+
+    if (save) {
+      chrome.storage.local.set({ [category]: items }, () => {
+        console.log(`${category} removed:`, link);
+      });
+    } else {
+      console.log(`${link} does not exist in ${category}`);
+    }
+  });
+}
+
+// eslint-disable-next-line
+function createElement (tag, content = null, attributes) { // used in library.js
+  const element = document.createElement(tag);
+  if (content) {
+    element.textContent = content;
   }
+  return Object.assign(element, attributes);
 }
diff --git a/library.html b/library.html
@@ -24,13 +24,13 @@ <h1>Youtube Local Library</h1>
     </div>
     <div class="content">
       <aside class="sidebar">
-        <h2>Channels:</h2>
+        <h2>Channels</h2>
         <ul class="list channels" id="channelsList"></ul>
       </aside>
       <main class="main">
-        <h2>Watch later:</h2>
-        <ul class="list" id="videosList"></ul>
-        <h2>Playlists:</h2>
+        <h2 id="playlistTitle">Watch later</h2>
+        <ul class="list" id="currentPlaylist"></ul>
+        <h2>Playlists</h2>
         <div class="playlist-container" id="playlists"></div>
       </main>
     </div>

diff --git a/playlist.html b/playlist.html