From 15dde57ba00df414e76f9045eb48882bac392956 Mon Sep 17 00:00:00 2001 From: PrestonN Date: Fri, 9 Nov 2018 10:11:25 -0500 Subject: [PATCH] [Fix] Usability Issues Subscriptions don't refresh automatically nearly as often Added a new button to force subscriptions to refresh. Remove individual videos from history --- src/index.html | 1 + src/js/history.js | 6 ++- src/js/settings.js | 2 + src/js/subscriptions.js | 80 ++++++++++++++++++++------------ src/js/templates.js | 25 +++++++++- src/js/videos.js | 55 +++++++++++++--------- src/style/main.css | 9 ++++ src/templates/settings.html | 2 +- src/templates/videoTemplate.html | 3 ++ 9 files changed, 127 insertions(+), 56 deletions(-) diff --git a/src/index.html b/src/index.html index 716859fdd..b422a96f8 100644 --- a/src/index.html +++ b/src/index.html @@ -34,6 +34,7 @@
+
diff --git a/src/js/history.js b/src/js/history.js index e8a59915d..750f141ff 100644 --- a/src/js/history.js +++ b/src/js/history.js @@ -42,7 +42,11 @@ function addToHistory(videoId){ */ function removeFromHistory(videoId){ const data = {videoId: videoId}; - historyDb.remove(data, {}, (err, numRemoved) => {}); + historyDb.remove(data, {}, (err, numRemoved) => { + if (!err) { + showToast('Video removed from history'); + } + }); } /** diff --git a/src/js/settings.js b/src/js/settings.js index d3b213543..71559d2d1 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -318,12 +318,14 @@ function setTheme(option) { document.getElementById('menuText').src = 'icons/textBlack.png'; document.getElementById('menuIcon').src = 'icons/iconBlack.png'; document.getElementById('menuButton').style.color = 'black'; + document.getElementById('reloadButton').style.color = 'black'; break; case 'dark': cssFile = './style/darkTheme.css'; document.getElementById('menuText').src = 'icons/textColor.png'; document.getElementById('menuIcon').src = 'icons/iconColor.png'; document.getElementById('menuButton').style.color = 'white'; + document.getElementById('reloadButton').style.color = 'white'; break; default: // Default to the light theme diff --git a/src/js/subscriptions.js b/src/js/subscriptions.js index a3d0c5feb..5b73903ab 100644 --- a/src/js/subscriptions.js +++ b/src/js/subscriptions.js @@ -22,7 +22,9 @@ */ let subscriptionTimer; +let forceTimer; let checkSubscriptions = true; +let forceSubs = true; /** * Add a channel to the user's subscription database. @@ -108,15 +110,15 @@ function loadSubscriptions() { progressView.progressWidth = (counter / results.length) * 100; if (counter === results.length) { - addSubsToView(videoList); + addSubsToView(videoList); + } + }, (errorData) => { + showToast('Unable to load channel: ' + results[i]['channelName']); + counter = counter + 1; + progressView.progressWidth = (counter / results.length) * 100; + if (counter === results.length) { + addSubsToView(videoList); } - },(errorData) => { - showToast('Unable to load channel: ' + results[i]['channelName']); - counter = counter + 1; - progressView.progressWidth = (counter / results.length) * 100; - if (counter === results.length) { - addSubsToView(videoList); - } }); } } else { @@ -128,33 +130,51 @@ function loadSubscriptions() { }); } -function addSubsToView (videoList) { - videoList.sort((a, b) => { - return b.published - a.published; - }); +function addSubsToView(videoList) { + videoList.sort((a, b) => { + return b.published - a.published; + }); - subscriptionView.videoList = []; - console.log(videoList); + subscriptionView.videoList = []; + console.log(videoList); - if (videoList.length > 100) { - for (let i = 0; i < 100; i++) { - displayVideo(videoList[i], 'subscriptions'); - } - } else { - videoList.forEach((video) => { - displayVideo(video, 'subscriptions'); - }); - } + if (videoList.length > 100) { + for (let i = 0; i < 100; i++) { + displayVideo(videoList[i], 'subscriptions'); + } + } else { + videoList.forEach((video) => { + displayVideo(video, 'subscriptions'); + }); + } - loadingView.seen = false; - progressView.seen = false; - progressView.progressWidth = 0; + loadingView.seen = false; + progressView.seen = false; + progressView.progressWidth = 0; - subscriptionTimer = window.setTimeout(() => { - checkSubscriptions = true; - }, 60000); + subscriptionTimer = window.setTimeout(() => { + checkSubscriptions = true; + }, 7200000); - console.log('Done'); + console.log('Done'); +} + +function forceSubscriptions() { + if (progressView.progressWidth > 0) { + showToast('Please wait for subscriptions to finish loading before trying again.'); + return; + } else if (forceSubs === false) { + showToast('Too many attempts. Please wait before loading subscriptions again.'); + return; + } else { + window.clearTimeout(subscriptionTimer); + checkSubscriptions = true; + loadSubscriptions(); + forceSubs = false; + } + forceTimer = window.setTimeout(() => { + forceSubs = true; + }, 300000); } /** diff --git a/src/js/templates.js b/src/js/templates.js index 420c88c5a..29fba6a2e 100644 --- a/src/js/templates.js +++ b/src/js/templates.js @@ -101,7 +101,7 @@ let sideNavBar = new Vue({ if (loadingView.seen !== false){ loadingView.seen = false; } - if(savedView.videoList.length === 0){ + else{ loadingView.seen = true; } headerView.seen = true; @@ -114,7 +114,7 @@ let sideNavBar = new Vue({ if (loadingView.seen !== false){ loadingView.seen = false; } - if(historyView.videoList.length === 0){ + else{ loadingView.seen = true; } headerView.seen = true; @@ -171,6 +171,9 @@ let subscriptionView = new Vue({ const url = 'https://' + site + '/watch?v=' + videoId; clipboard.writeText(url); showToast('URL has been copied to the clipboard'); + }, + history: (videoId) => { + removeFromHistory(videoId); } }, template: videoListTemplate @@ -198,6 +201,9 @@ let popularView = new Vue({ const url = 'https://' + site + '/watch?v=' + videoId; clipboard.writeText(url); showToast('URL has been copied to the clipboard'); + }, + history: (videoId) => { + removeFromHistory(videoId); } }, template: videoListTemplate @@ -225,6 +231,9 @@ let trendingView = new Vue({ const url = 'https://' + site + '/watch?v=' + videoId; clipboard.writeText(url); showToast('URL has been copied to the clipboard'); + }, + history: (videoId) => { + removeFromHistory(videoId); } }, template: videoListTemplate @@ -252,6 +261,9 @@ let savedView = new Vue({ const url = 'https://' + site + '/watch?v=' + videoId; clipboard.writeText(url); showToast('URL has been copied to the clipboard'); + }, + history: (videoId) => { + removeFromHistory(videoId); } }, template: videoListTemplate @@ -279,6 +291,9 @@ let historyView = new Vue({ const url = 'https://' + site + '/watch?v=' + videoId; clipboard.writeText(url); showToast('URL has been copied to the clipboard'); + }, + history: (videoId) => { + removeFromHistory(videoId); } }, template: videoListTemplate @@ -314,6 +329,9 @@ let playlistView = new Vue({ const url = 'https://' + site + '/watch?v=' + videoId; clipboard.writeText(url); showToast('URL has been copied to the clipboard'); + }, + history: (videoId) => { + removeFromHistory(videoId); } }, template: playlistViewTemplate @@ -426,6 +444,9 @@ let channelVideosView = new Vue({ clipboard.writeText(url); showToast('URL has been copied to the clipboard'); }, + history: (videoId) => { + removeFromHistory(videoId); + } }, template: videoListTemplate }); diff --git a/src/js/videos.js b/src/js/videos.js index 74516f8c6..93e1dcc39 100644 --- a/src/js/videos.js +++ b/src/js/videos.js @@ -20,6 +20,10 @@ let checkPopular = true; let trendingTimer; let checkTrending = true; +const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" +]; + /** * Perform a search using the YouTube API. The search query is grabbed from the #search element. * @@ -105,14 +109,16 @@ function displayVideo(videoData, listType = '') { } video.views = videoData.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + let time = videoData.lengthSeconds; - if (videoData.liveNow === true){ - video.liveText = (videoData.liveNow === true) ? 'LIVE NOW' : ''; + if (videoData.liveNow === true || time < 0){ + video.liveText = 'LIVE NOW'; video.duration = ''; video.publishedDate = ''; video.viewText = 'watching'; } else{ + let now = Date.now(); video.liveText = ''; if (video.views <= 1) { @@ -122,32 +128,37 @@ function displayVideo(videoData, listType = '') { video.viewText = 'views'; } - let time = videoData.lengthSeconds; + let published = new Date(videoData.published * 1000); let hours = 0; - if (time >= 3600) { - hours = Math.floor(time / 3600); - time = time - hours * 3600; + if (now < published.getTime()) { + video.publishedDate = 'Premieres on ' + published.toLocaleString(); } + else { + if (time >= 3600) { + hours = Math.floor(time / 3600); + time = time - hours * 3600; + } - let minutes = Math.floor(time / 60); - let seconds = time - minutes * 60; + let minutes = Math.floor(time / 60); + let seconds = time - minutes * 60; - if (seconds < 10) { - seconds = '0' + seconds; + if (seconds < 10) { + seconds = '0' + seconds; + } + + if (minutes < 10 && hours > 0) { + minutes = '0' + minutes; + } + + if (hours > 0) { + video.duration = hours + ":" + minutes + ":" + seconds; + } else { + video.duration = minutes + ":" + seconds; + } + + video.publishedDate = videoData.publishedText; } - - if (minutes < 10 && hours > 0) { - minutes = '0' + minutes; - } - - if (hours > 0) { - video.duration = hours + ":" + minutes + ":" + seconds; - } else { - video.duration = minutes + ":" + seconds; - } - - video.publishedDate = videoData.publishedText; } //const searchMenu = $('#videoListContainer').html(); diff --git a/src/style/main.css b/src/style/main.css index 25ec9bf9d..0e2034fb0 100644 --- a/src/style/main.css +++ b/src/style/main.css @@ -82,6 +82,15 @@ a { top: 3px; } +#reloadButton { + cursor: pointer; + font-weight: bold; + font-size: 20px; + margin-left: 20px; + position: relative; + top: 3px; +} + #menuIcon { width: 25px; position: relative; diff --git a/src/templates/settings.html b/src/templates/settings.html index 946a1512a..aa91807dc 100644 --- a/src/templates/settings.html +++ b/src/templates/settings.html @@ -58,7 +58,7 @@ CLEAR HISTORY
- CLEAR SAVED VIDEOS + CLEAR FAVORITED VIDEOS
CLEAR SUBSCRIPTIONS diff --git a/src/templates/videoTemplate.html b/src/templates/videoTemplate.html index cee2b2789..92238a641 100644 --- a/src/templates/videoTemplate.html +++ b/src/templates/videoTemplate.html @@ -6,6 +6,9 @@