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

Move player functions to own file and added Keyboard shortcuts

This commit is contained in:
Preston 2018-03-10 16:13:01 -05:00
parent 84ae24ea26
commit 11335632fd
2 changed files with 21 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/js/player.js
View File

@ -313,6 +313,13 @@ function changeVideoSpeed(speed){
$('.videoPlayer').get(0).playbackRate = speed;
}
/**
* Change the volume of the video player
*
* @param {double} amount - The volume to increase or descrease the volume by. Will be any double between 0 and 1.
*
* @return {Void}
*/
function changeVolume(amount){
const videoPlayer = $('.videoPlayer').get(0);
let volume = videoPlayer.volume;
@ -328,11 +335,25 @@ function changeVolume(amount){
}
}
/**
* Change the duration of the current time of a video by a few seconds.
*
* @param {integer} seconds - The amount of seconds to change the video by. Integer may be positive or negative.
*
* @return {Void}
*/
function changeDurationBySeconds(seconds){
const videoPlayer = $('.videoPlayer').get(0);
videoPlayer.currentTime = videoPlayer.currentTime + seconds;
}
/**
* Change the duration of a video by a percentage of the duration.
*
* @param {double} percentage - The percentage to hop to of the video. Will be any double between 0 and 1.
*
* @return {Void}
*/
function changeDurationByPercentage(percentage){
const videoPlayer = $('.videoPlayer').get(0);
videoPlayer.currentTime = videoPlayer.duration * percentage;

175
src/js/videos.js
View File

@ -148,181 +148,6 @@ function addNextPage(nextPageToken) {
});
}
/**
* 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();
startLoadingAnimation();
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.');
stopLoadingAnimation();
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
youtubeAPI('channels', {
'id': channelId,
'part': 'snippet'
}, function (data){
const channelThumbnail = data['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);
stopLoadingAnimation();
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);
});
}
/**
* Grab the video recommendations for a video. This does not get recommendations based on what you watch,
* as that would defeat the main purpose of using FreeTube. At any time you can check the video on HookTube