lasers
/
FreeTube
mirror of https://github.com/FreeTubeApp/FreeTube
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[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
This commit is contained in:
PrestonN 2018-11-09 10:11:25 -05:00
parent cb32ae7db3
commit 15dde57ba0
9 changed files with 127 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.html
View File

@ -34,6 +34,7 @@
</div>
<div class="topNav">
<i onclick='toggleSideNavigation()' class="fas fa-bars" id='menuButton'></i>
<i onclick='forceSubscriptions()' class="fas fa-sync" id='reloadButton' title='Force Subscription Reload'></i>
<div class="searchBar">
<input id='search' class="search" type="text" placeholder="Search / Go to URL">
<i onclick='parseSearchText()' class="fas fa-search searchButton" style='margin-right: -10px; cursor: pointer'></i>

6
src/js/history.js
View File

@ -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');
}
});
}
/**

2
src/js/settings.js
View File

@ -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

80
src/js/subscriptions.js
View File

@ -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);
}
/**

25
src/js/templates.js
View File

@ -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
});

55
src/js/videos.js
View File

@ -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();

9
src/style/main.css
View File

@ -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;

2
src/templates/settings.html
View File

@ -58,7 +58,7 @@
CLEAR HISTORY
</div>
<div onclick='confirmFunction("Are you sure you want to remove all saved videos?", clearFile, "saved")' class='settingsButton'>
CLEAR SAVED VIDEOS
CLEAR FAVORITED VIDEOS
</div>
<div onclick='confirmFunction("Are you sure you want to remove all subscriptions?", clearFile, "subscriptions")' class='settingsButton'>
CLEAR SUBSCRIPTIONS

3
src/templates/videoTemplate.html
View File

@ -6,6 +6,9 @@
<div class='videoOptions'>
<i class="fas fa-ellipsis-v" onclick='showVideoOptions(this)'></i>
<ul>
<div v-if='video.watched'>
<li v-on:click='history(video.id)' onclick='showVideoOptions(this.parentNode.parentNode.previousSibling);'>Remove From History</li>
</div>
<a :href='video.youtubeUrl' onclick='showVideoOptions(this.parentNode.previousSibling);'>
<li>Open in YouTube</li>
</a>