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

Batch 3 of Vue Implementation. Close to being done.

This commit is contained in:
PrestonN 2018-07-23 20:15:20 -04:00
parent 979d2b85f7
commit f722726d07
13 changed files with 71 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "FreeTube",
"version": "0.3.0",
"version": "0.3.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
src/index.html
View File

@ -76,9 +76,9 @@
<script src="js/youtubeApi.js"></script>
<script src="js/updates.js"></script>
<script src="js/db.js"></script>
<script src="js/settings.js"></script>
<script src="js/layout.js"></script>
<script src="js/templates.js"></script>
<script src="js/settings.js"></script>
<script src="js/videos.js"></script>
<script src="js/player.js"></script>
<script src="js/subscriptions.js"></script>

3
src/js/layout.js
View File

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

2
src/js/player.js
View File

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

7
src/js/settings.js
View File

@ -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'
}, {

2
src/js/subscriptions.js
View File

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

22
src/js/templates.js
View File

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

2
src/js/updates.js
View File

@ -24,7 +24,7 @@ along with FreeTube. If not, see <http://www.gnu.org/licenses/>.
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

6
src/js/videos.js
View File

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

15
src/style/player.css
View File

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

11
src/templates/player.html
View File

@ -1,6 +1,11 @@
<div v-if='seen'>
<video class="videoPlayer" type="application/x-mpegURL" onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" controls="" :src='videoUrl' :poster="videoThumbnail" v-html="subtitleHtml" autoplay>
</video>
<div v-if='playerSeen'>
<video class="videoPlayer" type="application/x-mpegURL" onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" controls="" :src='videoUrl' :poster="videoThumbnail" v-html="subtitleHtml" autoplay>
</video>
</div>
<div v-else>
<span v-html="embededHtml"></span>
</div>
<div class='statistics'>
<div onclick='openMiniPlayer()' class='smallButton' >
MINI PLAYER <i class="fas fa-external-link-alt"></i>
@ -11,7 +16,7 @@
<ul>
<li id='quality480p' v-on:click='quality(video480p, "480p")'>480p</li>
<li id='quality720p' v-on:click='quality(video720p, "720p")'>720p</li>
<li id='qualityEmbed' v-on:click='quality(embededPlayer, "EMBED")'>EMBED</li>
<li id='qualityEmbed' v-on:click='embededPlayer()'>EMBED</li>
</ul>
</div>
</div>

2
src/templates/test.html Normal file
View File

@ -0,0 +1,2 @@
<video class="videoPlayer" type="application/x-mpegURL" onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" controls="" src="https://r1---sn-gxuog0-axqe.googlevideo.com/videoplayback?ipbits=0&amp;mn=sn-gxuog0-axqe%2Csn-4g5edn7s&amp;mm=31%2C29&amp;expire=1528703087&amp;ratebypass=yes&amp;requiressl=yes&amp;signature=30E0199D4677BF2802BB526FBC01C281CBF1E66A.6F601896D1E5CC0D877D64022FF7A0BF42828A9E&amp;ms=au%2Crdu&amp;ei=D9QdW52lAuTfjQSpgKyABw&amp;mv=m&amp;mt=1528681419&amp;pl=22&amp;itag=22&amp;dur=100.263&amp;lmt=1528670669980653&amp;sparams=dur%2Cei%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cexpire&amp;key=yt6&amp;ip=179.43.188.162&amp;mime=video%2Fmp4&amp;id=f17da421f4ba7dbf&amp;c=WEB&amp;fvip=5&amp;initcwndbps=201250&amp;source=youtube" poster="https://i.ytimg.com/vi/8X2kIfS6fb8/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&amp;rs=AOn4CLC76FItbMGMrenTjypm5v8WTov7Bg" autoplay="" style="cursor: default;">
</video>

16
src/templates/videoTemplate.html
View File

@ -4,22 +4,28 @@
<div v-if='video.isVideo'>
<div class='video'>
<div class='videoOptions'>
<i class="fas fa-external-link-alt" onclick='showVideoOptions(this)'></i>
&nbsp;&nbsp;
<i class="fas fa-ellipsis-v" onclick='showVideoOptions(this)'></i>
<ul>
<li onclick='showVideoOptions(this.parentNode.previousSibling);'>Open (New Window)</li>
<li onclick='showVideoOptions(this.parentNode.previousSibling);'>Save Video</li>
<a :href='video.youtubeUrl' onclick='showVideoOptions(this.parentNode.previousSibling);'>
<li>Open in YouTube</li>
</a>
<a :href='video.hooktubeUrl' onclick='showVideoOptions(this.parentNode.previousSibling);'>
<li>Open in HookTube</li>
<a :href='video.youtubeUrl' onclick='showVideoOptions(this.parentNode.previousSibling);'>
<li>Copy YouTube Link</li>
</a>
<a :href='video.invidiousUrl' onclick='showVideoOptions(this.parentNode.previousSibling);'>
<li>Open in Invidious</li>
</a>
<a :href='video.invidiousUrl' onclick='showVideoOptions(this.parentNode.previousSibling);'>
<li>Copy Invidious Link</li>
</a>
{{video.deleteHtml}}
</ul>
</div>
<div class='videoThumbnail'>
<img v-on:click='play(video.id)' :src='video.thumbnail' />
<p v-on:click='play(video.id)' class='videoDuration'>{{video.duration}}</p>
<i class="fas fa-history" onclick='showVideoOptions(this)'></i>
</div>
<p v-on:click='play(video.id)' class='videoTitle'>{{video.title}}</p>
<p v-on:click='channel(video.channelId)' class='channelName'>{{video.channelName}} - {{video.publishedDate}}</p>