From f722726d07477b5de48788a53979e7e68d2c5caa Mon Sep 17 00:00:00 2001 From: PrestonN Date: Mon, 23 Jul 2018 20:15:20 -0400 Subject: [PATCH] Batch 3 of Vue Implementation. Close to being done. --- package-lock.json | 2 +- src/index.html | 2 +- src/js/layout.js | 3 ++- src/js/player.js | 2 +- src/js/settings.js | 7 +++++-- src/js/subscriptions.js | 2 +- src/js/templates.js | 22 ++++++++++++++++++++-- src/js/updates.js | 2 +- src/js/videos.js | 6 ++++++ src/style/player.css | 15 ++++++++++++--- src/templates/player.html | 11 ++++++++--- src/templates/test.html | 2 ++ src/templates/videoTemplate.html | 16 +++++++++++----- 13 files changed, 71 insertions(+), 21 deletions(-) create mode 100644 src/templates/test.html diff --git a/package-lock.json b/package-lock.json index da071de35..2941e52c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "FreeTube", - "version": "0.3.0", + "version": "0.3.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/index.html b/src/index.html index 15155be4b..a438180cf 100644 --- a/src/index.html +++ b/src/index.html @@ -76,9 +76,9 @@ + - diff --git a/src/js/layout.js b/src/js/layout.js index 686839bdf..97b60dfc4 100644 --- a/src/js/layout.js +++ b/src/js/layout.js @@ -81,7 +81,8 @@ $(document).ready(() => { // Display subscriptions upon the app opening up. May allow user to specify. // Home page in the future. - //loadSubscriptions(); + loadingView.seen = true; + loadSubscriptions(); }); /** diff --git a/src/js/player.js b/src/js/player.js index a4141e632..77c09b108 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -329,7 +329,7 @@ function openMiniPlayer() { * * @return {Void} */ -function changeQuality(videoHtml, qualityType, isEmbed = false) { +function changeQuality(url, qualityText, isEmbed = false) { if (videoHtml == '') { showToast('Video quality type is not available. Unable to change quality.') return; diff --git a/src/js/settings.js b/src/js/settings.js index 7ee3b26bf..3aa95f156 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -57,7 +57,7 @@ function updateSettingsView() { // Grab the settings.html template to prepare for rendering /*const settingsTemplate = require('./templates/settings.html') - mustache.parse(settingsTemplate); + mustache.parse(settingsTemplate const rendered = mustache.render(settingsTemplate, { isChecked: isChecked, key: key, @@ -123,6 +123,9 @@ function checkDefaultSettings() { if (apiKeyBank.indexOf(docs[0]['value']) == -1) { settingsView.apiKey = docs[0]['value']; } + else{ + settingsView.apiKey = settingDefaults.apiKey; + } break; case 'useTor': useTor = docs[0]['value']; @@ -177,7 +180,7 @@ function updateSettings() { useTor = torSwitch; }); - if (key != '') { + if (key !== '') { settingsDb.update({ _id: 'apiKey' }, { diff --git a/src/js/subscriptions.js b/src/js/subscriptions.js index f2dca84ae..73706bba8 100644 --- a/src/js/subscriptions.js +++ b/src/js/subscriptions.js @@ -81,7 +81,7 @@ function removeSubscription(channelId) { * @return {Void} */ function loadSubscriptions() { - if (checkSubscriptions === false){ + if (checkSubscriptions === false && subscriptionView.videoList.length > 0){ console.log('Will not load subscriptions. Timer still on.'); return; } diff --git a/src/js/templates.js b/src/js/templates.js index b7d4f7a49..eb9077bb7 100644 --- a/src/js/templates.js +++ b/src/js/templates.js @@ -249,7 +249,7 @@ let channelView = new Vue({ methods: { subscription: (channelId) => { toggleSubscription(channelId); - } + }, }, template: channelTemplate }); @@ -261,7 +261,7 @@ let channelVideosView = new Vue({ isSearch: false, videoList: [] }, - method: { + methods: { play: (videoId) => { loadingView.seen = true; playVideo(videoId); @@ -299,6 +299,7 @@ let playerView = new Vue({ likePercentage: 0, videoLikes: 0, videoDislikes: 0, + playerSeen: true, recommendedVideoList: [] }, methods: { @@ -311,6 +312,23 @@ let playerView = new Vue({ quality: (url, qualityText) => { console.log(url); console.log(qualityText); + if(playerView.playerSeen === true){ + // Update time to new url + const currentPlayBackTime = $('.videoPlayer').get(0).currentTime; + console.log(currentPlayBackTime); + playerView.videoUrl = url; + playerView.currentQuality = qualityText; + setTimeout(() => {$('.videoPlayer').get(0).currentTime = currentPlayBackTime;}, 100); + } + else{ + playerView.playerSeen = true; + playerView.videoUrl = url; + playerView.currentQuality = qualityText; + } + }, + embededPlayer: () => { + playerView.playerSeen = false; + playerView.currentQuality = 'EMBED'; }, copy: (site, videoId) => { const url = 'https://' + site + '.com/watch?v=' + videoId; diff --git a/src/js/updates.js b/src/js/updates.js index 7e448c9c9..3a82d62a7 100644 --- a/src/js/updates.js +++ b/src/js/updates.js @@ -24,7 +24,7 @@ along with FreeTube. If not, see . const updateChecker = require('github-version-checker'); const options = { - token: 'USERACCESSTOKEN', // personal access token. Github will not allow commiting the access token, which is why this is blank. + token: '001eebf296fd55691260473057aabc159a51bdfc', // personal access token. Github will not allow commiting the access token, which is why this is blank. repo: 'freetube', // repository name owner: 'freetubeapp', // repository owner currentVersion: require('electron').remote.app.getVersion(), // your app's current version diff --git a/src/js/videos.js b/src/js/videos.js index 884af0cc4..1cf674496 100644 --- a/src/js/videos.js +++ b/src/js/videos.js @@ -184,21 +184,27 @@ function displayVideo(videoData, listType = '') { switch (listType) { case 'subscriptions': subscriptionView.videoList = subscriptionView.videoList.concat(video); + video.removeFromSave = true; break; case 'search': searchView.videoList = searchView.videoList.concat(video); + video.removeFromSave = false; break; case 'popular': popularView.videoList = popularView.videoList.concat(video); + video.removeFromSave = false; break; case 'saved': savedView.videoList = savedView.videoList.concat(video); + video.removeFromSave = false; break; case 'history': historyView.videoList = historyView.videoList.concat(video); + video.removeFromSave = false; break; case 'channel': channelVideosView.videoList = channelVideosView.videoList.concat(video); + video.removeFromSave = false; break; } diff --git a/src/style/player.css b/src/style/player.css index 6f4bd1817..1de1425ea 100644 --- a/src/style/player.css +++ b/src/style/player.css @@ -23,10 +23,21 @@ iframe { cursor: pointer; } -.videoThumbnail img{ +.videoThumbnail img { width: 100%; } +.videoThumbnail i { + float: right; + color: white; + background-color: black; + padding: 6px; + opacity: 0.7; + position: relative; + bottom: 159px; + left: 36px; +} + .channelThumbnail { width: 140px; height: 140px; @@ -48,8 +59,6 @@ iframe { } .videoOptions i { - text-align: right; - width: 50px; cursor: pointer; } diff --git a/src/templates/player.html b/src/templates/player.html index 3b93ac5a6..d4dfa0c5c 100644 --- a/src/templates/player.html +++ b/src/templates/player.html @@ -1,6 +1,11 @@
- +
+ +
+
+ +
MINI PLAYER @@ -11,7 +16,7 @@
  • 480p
  • 720p
    • -
  • EMBED
    • +
  • EMBED
diff --git a/src/templates/test.html b/src/templates/test.html new file mode 100644 index 000000000..17aacf0bf --- /dev/null +++ b/src/templates/test.html @@ -0,0 +1,2 @@ + diff --git a/src/templates/videoTemplate.html b/src/templates/videoTemplate.html index c6fd42886..5eb24859e 100644 --- a/src/templates/videoTemplate.html +++ b/src/templates/videoTemplate.html @@ -4,22 +4,28 @@
+ +   

{{video.duration}}

+

{{video.title}}

{{video.channelName}} - {{video.publishedDate}}