You have no videos saved in watch later.
'; - 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 = 'You have no playlists.
'; + 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 = `${playlist.playlistName} ${playlist.videos.length} videos - View full playlist + View full playlist `; 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 = 'You have no saved channels.
'; + console.log('savedChannels',savedChannels); + if (!savedChannels || !savedChannels.length) { + const content = 'You have no saved channels.'; + renderNoContent(content, channelsList); return; } savedChannels && savedChannels.forEach(channel => { @@ -60,6 +79,7 @@ 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); @@ -67,4 +87,12 @@ document.addEventListener('DOMContentLoaded', () => { channelsList.appendChild(li); }); }); -}); \ No newline at end of file +}); + +function renderNoContent (content, container) { + const tag = 'p'; + const attributes = {}; + // eslint-disable-next-line + const noContent = createElement(tag, content, attributes); + container.append(noContent); +} \ No newline at end of file diff --git a/js/playlist.js b/js/playlist.js deleted file mode 100644 index 7ec95e7..0000000 --- a/js/playlist.js +++ /dev/null @@ -1,18 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - // eslint-disable-next-line - const url = new URL(window.location.href); - const playlistName = url.searchParams.get('playlistName'); - const playlistTitle = document.getElementById('playlistTitle'); - const playlistContainer = document.getElementById('playlist'); - - chrome.storage.local.get([ 'playlists' ], result => { - const playlist = result.playlists[playlistName]; - if (playlist) { - playlistTitle.innerText = playlist.playlistName; - // eslint-disable-next-line - renderVideos(playlist.videos, playlistContainer, 'playlists', playlist.playlistName); // defined in utils.js - } else { - console.error('No playlist data found'); - } - }); -}); \ No newline at end of file diff --git a/js/utils.js b/js/utils.js index b6a837a..c1a274c 100644 --- 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); } \ No newline at end of file diff --git a/library.html b/library.html index f308954..65b74ea 100644 --- a/library.html +++ b/library.html @@ -24,13 +24,13 @@