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

Merge remote-tracking branch 'origin/master'

This commit is contained in:
Preston 2018-03-10 16:06:42 -05:00
parent a73b824295 8733cec79c
commit e97818344f
4 changed files with 505 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.html
View File

@ -15,6 +15,7 @@
<script src="js/settings.js"></script>
<script src="js/layout.js"></script>
<script src="js/videos.js"></script>
<script src="js/player.js"></script>
<script src="js/subscriptions.js"></script>
<script src="js/channels.js"></script>
<script src="js/savedVideos.js"></script>

208
src/js/events.js
View File

@ -18,21 +18,21 @@ along with FreeTube. If not, see <http://www.gnu.org/licenses/>.
/*
* File for events within application. Work needs to be done throughout the application
* to use this style more. Please use this style going forward if possible.
*/
* File for events within application. Work needs to be done throughout the application
* to use this style more. Please use this style going forward if possible.
*/
/**
* Event when user clicks comment box,
* and wants to show/display comments for the user.
*/
let showComments = function(event) {
let comments = $('#comments');
/**
* Event when user clicks comment box,
* and wants to show/display comments for the user.
*/
let showComments = function(event) {
let comments = $('#comments');
if (comments.css('display') === 'none') {
comments.attr('loaded', 'true');
if (comments.css('display') === 'none') {
comments.attr('loaded', 'true');
let commentsTemplate = $.get('templates/comments.html');
let commentsTemplate = $.get('templates/comments.html');
commentsTemplate.done((template) => {
youtubeAPI('commentThreads', {
@ -43,43 +43,165 @@ along with FreeTube. If not, see <http://www.gnu.org/licenses/>.
let comments = [];
let items = data.items;
items.forEach((object) => {
let snippet = object['snippet']['topLevelComment']['snippet'];
let dateString = new Date(snippet.publishedAt);
let publishedDate = dateFormat(dateString, "mmm dS, yyyy");
items.forEach((object) => {
let snippet = object['snippet']['topLevelComment']['snippet'];
let dateString = new Date(snippet.publishedAt);
let publishedDate = dateFormat(dateString, "mmm dS, yyyy");
snippet.publishedAt = publishedDate;
snippet.publishedAt = publishedDate;
comments.push(snippet);
})
const html = mustache.render(template, {
comments: comments,
});
$('#comments').html(html);
comments.push(snippet);
})
const html = mustache.render(template, {
comments: comments,
});
$('#comments').html(html);
});
});
comments.show();
} else {
comments.hide();
}
};
/**
* Play / Pause the video player upon click.
*/
let playPauseVideo = function(event) {
let el = event.currentTarget;
el.paused ? el.play() : el.pause();
comments.show();
} else {
comments.hide();
}
};
/**
* ---------------------------
* Bind click events
* --------------------------
*/
$(document).on('click', '#showComments', showComments);
/**
* Play / Pause the video player upon click.
*/
let playPauseVideo = function(event) {
let el = event.currentTarget;
el.paused ? el.play() : el.pause();
};
$(document).on('click', '.videoPlayer', playPauseVideo);
$('.videoPlayer').keypress((event) => {
console.log(event.which);
});
$(document).on('click', '#confirmNo', hideConfirmFunction);
let videoShortcutHandler = function(event) {
console.log(event.which);
let videoPlayer = $('.videoPlayer').get(0);
if (typeof(videoPlayer) !== 'undefined'){
switch (event.which) {
case 32:
// Space Bar
event.preventDefault();
videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
break;
case 74:
// J Key
event.preventDefault();
changeDurationBySeconds(-10);
break;
case 75:
// K Key
event.preventDefault();
videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
break;
case 76:
// L Key
event.preventDefault();
changeDurationBySeconds(10);
break;
case 70:
// F Key
event.preventDefault();
videoPlayer.webkitRequestFullscreen();
break;
case 77:
// M Key
event.preventDefault();
let volume = videoPlayer.volume;
console.log(volume);
if (volume > 0){
changeVolume(-1);
}
else{
changeVolume(1);
}
break;
case 38:
// Up Arrow Key
event.preventDefault();
changeVolume(0.05);
break;
case 40:
// Down Arrow Key
event.preventDefault();
changeVolume(-0.05);
break;
case 37:
// Left Arrow Key
event.preventDefault();
changeDurationBySeconds(-5);
break;
case 39:
// Right Arrow Key
event.preventDefault();
changeDurationBySeconds(5);
break;
case 49:
// 1 Key
event.preventDefault();
changeDurationByPercentage(0.1);
break;
case 50:
// 2 Key
event.preventDefault();
changeDurationByPercentage(0.2);
break;
case 51:
// 3 Key
event.preventDefault();
changeDurationByPercentage(0.3);
break;
case 52:
// 4 Key
event.preventDefault();
changeDurationByPercentage(0.4);
break;
case 53:
// 5 Key
event.preventDefault();
changeDurationByPercentage(0.5);
break;
case 54:
// 6 Key
event.preventDefault();
changeDurationByPercentage(0.6);
break;
case 55:
// 7 Key
event.preventDefault();
changeDurationByPercentage(0.7);
break;
case 56:
// 8 Key
event.preventDefault();
changeDurationByPercentage(0.8);
break;
case 57:
// 9 Key
event.preventDefault();
changeDurationByPercentage(0.9);
break;
case 48:
// 0 Key
event.preventDefault();
changeDurationByPercentage(0);
break;
}
}
};
/**
* ---------------------------
* Bind click events
* --------------------------
*/
$(document).on('click', '#showComments', showComments);
$(document).on('click', '.videoPlayer', playPauseVideo);
$(document).on('keydown', videoShortcutHandler);
$(document).on('click', '#confirmNo', hideConfirmFunction);

339
src/js/player.js Normal file
View File

@ -0,0 +1,339 @@
/*
This file is part of FreeTube.
FreeTube is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
FreeTube is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with FreeTube. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* File for functions related to videos.
*/
/**
* Display the video player and play a video
*
* @param {string} videoId - The video ID of the video to be played.
*
* @return {Void}
*/
function playVideo(videoId) {
clearMainContainer();
toggleLoading();
let subscribeText = '';
let savedText = '';
let savedIconClass = '';
let savedIconColor = '';
let video480p;
let video720p;
let defaultUrl;
let defaultQuality;
let channelId;
let videoHtml;
let videoThumbnail;
let videoType = 'video';
let embedPlayer;
let validUrl;
// Grab the embeded player. Used as fallback if the video URL cannot be found.
// Also grab the channel ID.
try {
let getInfoFunction = getChannelAndPlayer(videoId);
getInfoFunction.then((data) => {
console.log(data);
embedPlayer = data[0];
channelId = data[1];
});
} catch (ex) {
showToast('Video not found. ID may be invalid.');
toggleLoading();
return;
}
/*
* FreeTube calls an instance of a youtube-dl server to grab the direct video URL. Please do not use this API in third party projects.
*/
const url = 'https://stormy-inlet-41826.herokuapp.com/api/info?url=https://www.youtube.com/watch?v=' + videoId + 'flatten=True';
$.getJSON(url, (response) => {
console.log(response);
const info = response['info'];
videoThumbnail = info['thumbnail'];
let videoUrls = info['formats'];
// Add commas to the video view count.
const videoViews = info['view_count'].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
// Format the date to a more readable format.
let dateString = info['upload_date'];
dateString = [dateString.slice(0, 4), '-', dateString.slice(4)].join('');
dateString = [dateString.slice(0, 7), '-', dateString.slice(7)].join('');
console.log(dateString);
const publishedDate = dateFormat(dateString, "mmm dS, yyyy");
// Figure out the width for the like/dislike bar.
const videoLikes = info['like_count'];
const videoDislikes = info['dislike_count'];
const totalLikes = videoLikes + videoDislikes;
const likePercentage = parseInt((videoLikes / totalLikes) * 100);
let description = info['description'];
// Adds clickable links to the description.
description = autolinker.link(description);
const checkSubscription = isSubscribed(channelId);
// Change the subscribe button text depending on if the user has subscribed to the channel or not.
checkSubscription.then((results) => {
if (results === false) {
subscribeText = 'SUBSCRIBE';
} else {
subscribeText = 'UNSUBSCRIBE';
}
});
const checkSavedVideo = videoIsSaved(videoId);
// Change the save button icon and text depending on if the user has saved the video or not.
checkSavedVideo.then((results) => {
if (results === false) {
savedText = 'SAVE';
savedIconClass = 'far unsaved';
} else {
savedText = 'SAVED';
savedIconClass = 'fas saved';
}
});
// Search through the returned object to get the 480p and 720p video URLs (If available)
Object.keys(videoUrls).forEach((key) => {
console.log(key);
switch (videoUrls[key]['format_note']) {
case 'medium':
video480p = videoUrls[key]['url'];
break;
case 'hd720':
video720p = videoUrls[key]['url'];
break;
}
});
// Default to the embeded player if the URLs cannot be found.
if (typeof(video720p) === 'undefined' && typeof(video480p) === 'undefined') {
defaultQuality = 'EMBED';
videoHtml = embedPlayer.replace(/\&quot\;/g, '"');
showToast('Unable to get video file. Reverting to embeded player.');
} else if (typeof(video720p) === 'undefined' && typeof(video480p) !== 'undefined') {
// Default to the 480p video if the 720p URL cannot be found.
videoHtml = '<video class="videoPlayer" onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" controls="" src="' + video480p + '" poster="' + videoThumbnail + '" autoplay></video>';
defaultQuality = '480p';
} else {
// Default to the 720p video.
videoHtml = '<video class="videoPlayer" onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" controls="" src="' + video720p + '" poster="' + videoThumbnail + '" autoplay></video>';
defaultQuality = '720p';
// Force the embeded player if needed.
//videoHtml = embedPlayer;
}
// API Request
let request = gapi.client.youtube.channels.list({
'id': channelId,
'part': 'snippet'
});
// Execute request
request.execute((response) => {
console.log(response);
const channelThumbnail = response['items'][0]['snippet']['thumbnails']['high']['url'];
$.get('templates/player.html', (template) => {
mustache.parse(template);
const rendered = mustache.render(template, {
videoHtml: videoHtml,
videoQuality: defaultQuality,
videoTitle: info['title'],
videoViews: videoViews,
videoThumbnail: videoThumbnail,
channelName: info['uploader'],
videoLikes: videoLikes,
videoDislikes: videoDislikes,
likePercentage: likePercentage,
videoId: videoId,
channelId: channelId,
channelIcon: channelThumbnail,
publishedDate: publishedDate,
description: description,
isSubscribed: subscribeText,
savedText: savedText,
savedIconClass: savedIconClass,
savedIconColor: savedIconColor,
video480p: video480p,
video720p: video720p,
embedPlayer: embedPlayer,
});
$('#main').html(rendered);
toggleLoading();
showVideoRecommendations(videoId);
console.log('done');
});
});
// Sometimes a video URL is found, but the video will not play. I believe the issue is
// that the video has yet to render for that quality, as the video will be available at a later time.
// This will check the URLs and switch video sources if there is an error.
checkVideoUrls(video480p, video720p);
// Add the video to the user's history
addToHistory(videoId);
});
}
/**
* Open up the mini player to watch the video outside of the main application.
*
* @param {string} videoThumbnail - The URL of the video thumbnail. Used to prevent another API call.
*
* @return {Void}
*/
function openMiniPlayer(videoThumbnail) {
let lastTime;
let videoHtml;
// Grabs whatever the HTML is for the current video player. Done this way to grab
// the HTML5 player (with varying qualities) as well as the YouTube embeded player.
if ($('.videoPlayer').length > 0) {
$('.videoPlayer').get(0).pause();
lastTime = $('.videoPlayer').get(0).currentTime;
videoHtml = $('.videoPlayer').get(0).outerHTML;
} else {
videoHtml = $('iframe').get(0).outerHTML;
}
// Create a new browser window.
const BrowserWindow = electron.remote.BrowserWindow;
let miniPlayer = new BrowserWindow({
width: 1200,
height: 700
});
// Use the miniPlayer.html template.
$.get('templates/miniPlayer.html', (template) => {
mustache.parse(template);
const rendered = mustache.render(template, {
videoHtml: videoHtml,
videoThumbnail: videoThumbnail,
startTime: lastTime,
});
// Render the template to the new browser window.
miniPlayer.loadURL("data:text/html;charset=utf-8," + encodeURI(rendered));
});
}
/**
* Change the quality of the current video.
*
* @param {string} videoHtml - The HTML of the video player to be set.
* @param {string} qualityType - The Quality Type of the video. Ex: 720p, 480p
* @param {boolean} isEmbed - Optional: Value on if the videoHtml is the embeded player.
*
* @return {Void}
*/
function changeQuality(videoHtml, qualityType, isEmbed = false) {
if (videoHtml == '') {
showToast('Video quality type is not available. Unable to change quality.')
return;
}
videoHtml = videoHtml.replace(/\&quot\;/g, '"');
console.log(videoHtml);
console.log(isEmbed);
// The YouTube API creates 2 more iFrames. This is why a boolean value is sent
// with the function.
const embedPlayer = document.getElementsByTagName('IFRAME')[0];
const html5Player = document.getElementsByClassName('videoPlayer');
console.log(embedPlayer);
console.log(html5Player);
if (isEmbed && html5Player.length == 0) {
// The embeded player is already playing. Return.
showToast('You are already using the embeded player.')
return;
} else if (isEmbed) {
// Switch from HTML 5 player to embeded Player
html5Player[0].remove();
const mainHtml = $('#main').html();
$('#main').html(videoHtml + mainHtml);
$('#currentQuality').html(qualityType);
} else if (html5Player.length == 0) {
// Switch from embeded player to HTML 5 player
embedPlayer.remove();
let videoPlayer = document.createElement('video');
videoPlayer.className = 'videoPlayer';
videoPlayer.src = videoHtml;
videoPlayer.controls = true;
videoPlayer.autoplay = true;
$('#main').prepend(videoPlayer);
$('#currentQuality').html(qualityType);
} else {
// Switch src on HTML 5 player
const currentPlayBackTime = $('.videoPlayer').get(0).currentTime;
html5Player[0].src = videoHtml;
html5Player[0].load();
$('.videoPlayer').get(0).currentTime = currentPlayBackTime;
$('#currentQuality').html(qualityType);
}
}
/**
* Change the playpack speed of the video.
*
* @param {double} speed - The playback speed of the video.
*
* @return {Void}
*/
function changeVideoSpeed(speed){
$('#currentSpeed').html(speed);
$('.videoPlayer').get(0).playbackRate = speed;
}
function changeVolume(amount){
const videoPlayer = $('.videoPlayer').get(0);
let volume = videoPlayer.volume;
volume = volume + amount;
if (volume > 1){
videoPlayer.volume = 1;
}
else if (volume < 0){
videoPlayer.volume = 0;
}
else{
videoPlayer.volume = volume;
}
}
function changeDurationBySeconds(seconds){
const videoPlayer = $('.videoPlayer').get(0);
videoPlayer.currentTime = videoPlayer.currentTime + seconds;
}
function changeDurationByPercentage(percentage){
const videoPlayer = $('.videoPlayer').get(0);
videoPlayer.currentTime = videoPlayer.duration * percentage;
}

114
src/js/videos.js
View File

@ -19,7 +19,6 @@ along with FreeTube. If not, see <http://www.gnu.org/licenses/>.
/*
* File for functions related to videos.
* TODO: Split some of these functions into their own file.
*/
/**
@ -364,48 +363,6 @@ function showVideoRecommendations(videoId) {
});
}
/**
* Open up the mini player to watch the video outside of the main application.
*
* @param {string} videoThumbnail - The URL of the video thumbnail. Used to prevent another API call.
*
* @return {Void}
*/
function openMiniPlayer(videoThumbnail) {
let lastTime;
let videoHtml;
// Grabs whatever the HTML is for the current video player. Done this way to grab
// the HTML5 player (with varying qualities) as well as the YouTube embeded player.
if ($('.videoPlayer').length > 0) {
$('.videoPlayer').get(0).pause();
lastTime = $('.videoPlayer').get(0).currentTime;
videoHtml = $('.videoPlayer').get(0).outerHTML;
} else {
videoHtml = $('iframe').get(0).outerHTML;
}
// Create a new browser window.
const BrowserWindow = electron.remote.BrowserWindow;
let miniPlayer = new BrowserWindow({
width: 1200,
height: 700
});
// Use the miniPlayer.html template.
$.get('templates/miniPlayer.html', (template) => {
mustache.parse(template);
const rendered = mustache.render(template, {
videoHtml: videoHtml,
videoThumbnail: videoThumbnail,
startTime: lastTime,
});
// Render the template to the new browser window.
miniPlayer.loadURL("data:text/html;charset=utf-8," + encodeURI(rendered));
});
}
/**
* Check if a link is a valid YouTube/HookTube link and play that video. Gets input
* from the #jumpToInput element.
@ -505,77 +462,6 @@ function getChannelAndPlayer(videoId) {
}
/**
* Change the quality of the current video.
*
* @param {string} videoHtml - The HTML of the video player to be set.
* @param {string} qualityType - The Quality Type of the video. Ex: 720p, 480p
* @param {boolean} isEmbed - Optional: Value on if the videoHtml is the embeded player.
*
* @return {Void}
*/
function changeQuality(videoHtml, qualityType, isEmbed = false) {
if (videoHtml == '') {
showToast('Video quality type is not available. Unable to change quality.')
return;
}
videoHtml = videoHtml.replace(/\&quot\;/g, '"');
console.log(videoHtml);
console.log(isEmbed);
// The YouTube API creates 2 more iFrames. This is why a boolean value is sent
// with the function.
const embedPlayer = document.getElementsByTagName('IFRAME')[0];
const html5Player = document.getElementsByClassName('videoPlayer');
console.log(embedPlayer);
console.log(html5Player);
if (isEmbed && html5Player.length == 0) {
// The embeded player is already playing. Return.
showToast('You are already using the embeded player.')
return;
} else if (isEmbed) {
// Switch from HTML 5 player to embeded Player
html5Player[0].remove();
const mainHtml = $('#main').html();
$('#main').html(videoHtml + mainHtml);
$('#currentQuality').html(qualityType);
} else if (html5Player.length == 0) {
// Switch from embeded player to HTML 5 player
embedPlayer.remove();
let videoPlayer = document.createElement('video');
videoPlayer.className = 'videoPlayer';
videoPlayer.src = videoHtml;
videoPlayer.controls = true;
videoPlayer.autoplay = true;
$('#main').prepend(videoPlayer);
$('#currentQuality').html(qualityType);
} else {
// Switch src on HTML 5 player
const currentPlayBackTime = $('.videoPlayer').get(0).currentTime;
html5Player[0].src = videoHtml;
html5Player[0].load();
$('.videoPlayer').get(0).currentTime = currentPlayBackTime;
$('#currentQuality').html(qualityType);
}
}
/**
* Change the playpack speed of the video.
*
* @param {double} speed - The playback speed of the video.
*
* @return {Void}
*/
function changeVideoSpeed(speed){
$('#currentSpeed').html(speed);
$('.videoPlayer').get(0).playbackRate = speed;
}
/**
* Check to see if the video URLs are valid. Change the video quality if one is not.
* The API will grab video URLs, but they will sometimes return a 404. This