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

First steps on updating Mini Player to work with the new video player

This commit is contained in:
PrestonN 2019-05-23 15:56:18 -04:00
parent 8395fe7688
commit 0634ce3f35
7 changed files with 282 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/events.js
View File

@ -85,7 +85,7 @@ let videoShortcutHandler = function (event) {
forceSubscriptions();
}
if (playerView.legacySeen) {
if ((typeof(playerView) !== 'undefined' && playerView.legacySeen) || (typeof(miniPlayerView) !== 'undefined' && miniPlayerView.legacySeen)) {
videoPlayer = $('.videoPlayer').get(0);
}
else {

2
src/js/general.js
View File

@ -27,7 +27,7 @@ let ft = {};
* @returns {Void}
*/
ft.log = function (...data) {
if (!settingsView.debugMode) {
if (typeof(settingsView) !== 'undefined' && !settingsView.debugMode) {
return;
}
let currentTime = new Date();

257
src/js/miniPlayer.js
View File

@ -24,11 +24,12 @@ import Vue from '../js/vue.js';
const electron = require('electron');
let mouseTimeout; // Timeout for hiding the mouse cursor on video playback
let checkedSettings = true;
let checkedSettings = false;
let miniPlayerView = new Vue({
el: '#player',
el: '#miniPlayer',
data: {
videoId: '',
video360p: '',
valid360p: true,
video720p: '',
@ -45,6 +46,10 @@ let miniPlayerView = new Vue({
quality: '',
volume: '',
currentTime: '',
playerSeen: true,
legacySeen: false,
autoplay: true,
enableSubtitles: false,
}
});
@ -72,42 +77,234 @@ function removeMouseTimeout() {
clearTimeout(mouseTimeout);
}
function checkVideoSettings() {
if (checkedSettings === false) {
return;
}
function checkDashSettings() {
// Mediaelement.js for some reason calls onLoadStart() multiple times
// This check is here to force checkVideoSettings to only run once.
if (checkedSettings) {
return;
}
let player = new MediaElementPlayer('player', {
features: ['playpause', 'current', 'loop', 'tracks', 'progress', 'duration', 'volume', 'stop', 'speed', 'quality', 'fullscreen'],
speeds: ['2', '1.75', '1.5', '1.25', '1', '0.75', '0.5', '0.25'],
defaultSpeed: miniPlayerView.defaultPlaybackRate,
qualityText: 'Quality',
defaultQuality: miniPlayerView.quality,
stretching: 'responsive',
startVolume: miniPlayerView.volume,
checkedSettings = true;
let checked720p = false;
let checked360p = false;
let checkedAudio = false;
let checkedDash = false;
let parseDash = true;
let quality = 'Auto';
let thumbnailInterval = 5;
success: function(mediaElement, originalNode, instance) {
console.log(mediaElement,originalNode,instance);
if (miniPlayerView.lengthSeconds < 120) {
thumbnailInterval = 1;
}
else if (miniPlayerView.lengthSeconds < 300) {
thumbnailInterval = 2;
}
else if (miniPlayerView.lengthSeconds < 900) {
thumbnailInterval = 5;
}
else {
thumbnailInterval = 10;
}
instance.currentTime = miniPlayerView.currentTime;
instance.play();
checkedSettings = false;
/*if (autoplay) {
instance.play();
let declarePlayer = function() {
if (!checkedDash) {
return;
}
if (enableSubtitles) {
instance.options.startLanguage = 'en';
}*/
if (miniPlayerView.validLive) {
quality = 'Live';
}
let player = new MediaElementPlayer('player', {
features: ['playpause', 'current', 'progress', 'duration', 'volume', 'stop', 'speed', 'quality', 'loop', 'tracks', 'fullscreen', 'timerailthumbnails'],
speeds: ['2', '1.75', '1.5', '1.25', '1', '0.75', '0.5', '0.25'],
renderers: ['native_dash', 'native_hls', 'html5'],
defaultSpeed: miniPlayerView.defaultPlaybackRate,
autoGenerate: true,
autoDash: true,
autoHLS: false,
qualityText: 'Quality',
defaultQuality: 'Auto',
stretching: 'responsive',
startVolume: miniPlayerView.volume,
timeRailThumbnailsSeconds: thumbnailInterval,
success: function(mediaElement, originalNode, instance) {
ft.log(mediaElement,originalNode,instance);
if (miniPlayerView.autoplay) {
instance.play();
};
window.setTimeout(() => {
if (miniPlayerView.enableSubtitles) {
instance.options.startLanguage = 'en';
};
}, 2000);
let initializeSettings = function() {
let qualityOptions = $('.mejs__qualities-selector-input').get();
if (qualityOptions.length < 2) {
// Other plugin hasn't finished making the qualities. Let's try again in a moment.
window.setTimeout(initializeSettings, 500);
return;
}
if (typeof(miniPlayerView.currentTime) !== 'undefined') {
instance.currentTime = miniPlayerView.currentTime;
miniPlayerView.currentTime = undefined;
}
let selectedOption = false;
qualityOptions.reverse().forEach((option, index) => {
if (option.value === miniPlayerView.quality || option.value === miniPlayerView.quality + 'p') {
option.click();
selectedOption = true;
}
});
if (selectedOption === false) {
// Assume user selected a higher quality as their default. Select the highest option available.
ft.log('Quality not available.');
ft.log(qualityOptions.reverse()[0]);
qualityOptions.reverse()[0].click();
}
};
initializeSettings();
},
error: function(error, originalNode, instance) {
ft.log(error);
ft.log(originalNode);
ft.log(instance);
showToast('There was an error with playing DASH formats. Reverting to the legacy formats.');
checkedSettings = false;
miniPlayerView.currentTime = instance.currentTime;
miniPlayerView.legacyFormats();
}
});
};
if (miniPlayerView.validDash !== false) {
validateUrl(miniPlayerView.videoDash, (valid) => {
miniPlayerView.validDash = valid;
checkedDash = true;
declarePlayer();
});
}
});
else if (miniPlayerView.validLive !== false) {
checkedDash = true;
declarePlayer();
}
else {
miniPlayerView.legacyFormats();
}
return;
}
function checkLegacySettings() {
let legacyPlayer = document.getElementById('legacyPlayer');
let checked720p = false;
let checked360p = false;
let checkedAudio = false;
let declarePlayer = function() {
if (!checked720p || !checked360p || !checkedAudio) {
return;
}
if (typeof(miniPlayerView.currentTime) !== 'undefined') {
legacyPlayer.currentTime = miniPlayerView.currentTime;
miniPlayerView.currentTime = undefined;
}
if (autoplay) {
legacyPlayer.play();
}
changeVideoSpeed(defaultPlaybackRate);
};
if (miniPlayerView.valid360p !== false) {
validateUrl(miniPlayerView.video360p, (valid) => {
miniPlayerView.valid360p = valid;
checked360p = true;
declarePlayer();
});
}
else {
checked360p = true;
declarePlayer();
}
if (miniPlayerView.valid720p !== false) {
validateUrl(miniPlayerView.video720p, (valid) => {
miniPlayerView.valid720p = valid;
checked720p = true;
declarePlayer();
});
}
else {
checked720p = true;
declarePlayer();
}
if (miniPlayerView.validAudio !== false) {
validateUrl(miniPlayerView.videoAudio, (valid) => {
miniPlayerView.validAudio = valid;
checkedAudio = true;
declarePlayer();
});
}
else {
checkedAudio = true;
declarePlayer();
}
return;
}
function validateUrl(videoUrl, callback) {
if (typeof (videoUrl) !== 'undefined') {
let getUrl = fetch(videoUrl);
getUrl.then((status) => {
switch (status.status) {
case 404:
callback(false);
return;
break;
case 403:
showToast('This video is unavailable in your country.');
callback(false)
return;
break;
default:
ft.log('videoUrl is valid');
callback(true);
return;
break;
}
});
} else {
callback(false);
return;
}
}
function hideConfirmFunction() {
return;
}
electron.ipcRenderer.on('ping', function(event, message) {
console.log(message);
miniPlayerView.videoId = message.videoId;
miniPlayerView.video360p = message.video360p;
miniPlayerView.valid360p = message.valid360p;
miniPlayerView.video720p = message.video720p;
@ -124,6 +321,10 @@ electron.ipcRenderer.on('ping', function(event, message) {
miniPlayerView.quality = message.quality;
miniPlayerView.volume = message.volume;
miniPlayerView.currentTime = message.currentTime;
miniPlayerView.playerSeen = message.playerSeen;
miniPlayerView.legacySeen = message.legacySeen;
miniPlayerView.autoplay = message.autoplay;
miniPlayerView.enableSubtitles = message.enableSubtitles;
window.setTimeout(checkVideoSettings, 100);
window.setTimeout(checkDashSettings, 100);
});

31
src/js/player.js
View File

@ -439,17 +439,18 @@ function playVideo(videoId, playlistId = '') {
function openMiniPlayer() {
let lastTime;
let videoHtml;
let videoPlayer;
// 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 (typeof(player) !== 'undefined') {
player.pause();
lastTime = player.currentTime;
//videoHtml = $('.videoPlayer').get(0).outerHTML;
videoPlayer = player;
} else {
//videoHtml = $('iframe').get(0).outerHTML;
videoPlayer = $('.videoPlayer').get(0);
}
videoPlayer.pause();
lastTime = videoPlayer.currentTime;
// Create a new browser window.
const BrowserWindow = electron.remote.BrowserWindow;
@ -471,6 +472,7 @@ function openMiniPlayer() {
miniPlayer.show();
let playerData = {
videoId: playerView.videoId,
video360p: playerView.video360p,
valid360p: playerView.valid360p,
video720p: playerView.video720p,
@ -484,12 +486,16 @@ function openMiniPlayer() {
subtitleHtml: playerView.subtitleHtml,
videoThumbnail: playerView.videoThumbnail,
defaultPlaybackRate: player.options.defaultSpeed,
quality: player.options.defaultQuality,
quality: defaultQuality,
volume: player.volume,
currentTime: player.currentTime,
playerSeen: playerView.playerSeen,
legacySeen: playerView.legacySeen,
autoplay: autoplay,
enableSubtitles: settingsView.enableSubtitles,
};
miniPlayer.webContents.send('ping', playerData);
})
});
return;
@ -810,9 +816,16 @@ function checkLegacySettings() {
}
function playNextVideo() {
let player = document.getElementById('videoPlayer');
let videoPlayer
if (player.loop !== false || playerView.playlistSeen === false) {
if (playerView.legacySeen) {
videoPlayer = $('.videoPlayer').get(0);
}
else {
videoPlayer = $('#player').get(0);
}
if (videoPlayer.loop !== false || playerView.playlistSeen === false) {
return;
}

9
src/js/templates.js
View File

@ -402,13 +402,13 @@ let settingsView = new Vue({
$.ajax({
url: "https://ifconfig.co/json",
dataType: 'json',
timeout: 3000 // 3 second timeout
}).done(response => {
console.log(response);
this.checkProxyResult = response;
})
.fail((xhr, textStatus, error) => {
ft.log(xhr);
ft.log(textStatus);
console.log(xhr);
console.log(textStatus);
showToast('Proxy test failed');
}).always(() =>{
this.proxyTestLoading = false;
@ -617,8 +617,9 @@ let playerView = new Vue({
playerView.currentTime = player.currentTime;
}
playerView.playerSeen = false;
checkedSettings = false;
playerView.playerSeen = false;
playerView.legacySeen = true;
},
dashFormats: () => {

32
src/templates/miniPlayer.html
View File

@ -30,17 +30,26 @@ body {
<link rel="stylesheet" href="../js/plugins/loop/loop.css" />
<link rel="stylesheet" href="../js/plugins/speed/speed.css" />
<link rel="stylesheet" href="../js/plugins/context-menu/context-menu.css" />
<video id='player' class='videoPlayer' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onvolumechange='updateVolume()'>
<source v-if='valid360p' data-quality='360p' type="video/mp4" :src="video360p" />
<source v-if='valid720p' data-quality='720p' type="video/mp4" :src="video720p" />
<source v-if='validAudio' data-quality='Audio' type="audio/mp4" :src="videoAudio" />
<source v-if='validDash' data-quality='Auto' type="application/dash+xml" :src="videoDash" />
<source v-if='validLive' data-quality='Live' type="application/x-mpegURL" :src="videoLive" />
<span v-html="subtitleHtml"></span>
</video>
<div id='miniPlayer'>
<div v-if='playerSeen && !legacySeen' class='videoPlayer'>
<video id='player' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onended='playNextVideo()' onvolumechange='updateVolume()'>
<source v-if='validDash' data-quality='Auto' type="application/dash+xml" :src="videoDash" />
<source v-if='validLive' data-quality='Live' type="application/x-mpegURL" :src="videoLive" />
<span v-html="subtitleHtml"></span>
<track kind="metadata" srclang='' class="time-rail-thumbnails" :src="'https://invidio.us/api/v1/storyboards/' + videoId + '?height=90'"></track>
</video>
</div>
<div v-else-if='!playerSeen && legacySeen'>
<video id='legacyPlayer' class='videoPlayer' onloadstart='checkLegacySettings()' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onended='playNextVideo()' onvolumechange='updateVolume()' :src='videoUrl' controls="controls" v-html="subtitleHtml">
</video>
</div>
<div v-else>
<span v-html="embededHtml"></span>
</div>
</div>
<script>window.$ = window.jQuery = require('jquery');</script>
<script src="../js/mediaelement-and-player.min.js"></script>
<script src="../js/plugins/quality/quality.min.js"></script>
<script src="../js/mediaelement-and-player.js"></script>
<script src="../js/plugins/quality/quality.js"></script>
<script src="../js/plugins/quality/quality-i18n.js"></script>
<script src="../js/plugins/speed/speed.js"></script>
<script src="../js/plugins/speed/speed-i18n.js"></script>
@ -48,5 +57,8 @@ body {
<script src="../js/plugins/loop/loop-i18n.js"></script>
<script src="../js/plugins/context-menu/context-menu.js"></script>
<script src="../js/plugins/context-menu/context-menu-i18n.js"></script>
<script src="../js/plugins/timerailthumbnails/vtt.min.js"></script>
<script src="../js/plugins/timerailthumbnails/mep-feature-time-rail-thumbnails.js"></script>
<script src="../js/general.js"></script>
<script src="../js/miniPlayer.js"></script>
<script src="../js/events.js"></script>

4
src/templates/player.html
View File

@ -1,6 +1,6 @@
<div v-if='seen'>
<div v-if='playerSeen && !legacySeen' class='videoPlayer'>
<video id='player' onloadstart='checkDashSettings()' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onvolumechange='updateVolume()'>
<video id='player' onloadstart='checkDashSettings()' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onended='playNextVideo()' onvolumechange='updateVolume()'>
<source v-if='validDash' data-quality='Auto' type="application/dash+xml" :src="videoDash" />
<source v-if='validLive' data-quality='Live' type="application/x-mpegURL" :src="videoLive" />
<span v-html="subtitleHtml"></span>
@ -10,7 +10,7 @@
</video>-->
</div>
<div v-else-if='!playerSeen && legacySeen'>
<video id='legacyPlayer' class='videoPlayer' onloadstart='checkLegacySettings()' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onvolumechange='updateVolume()' :src='videoUrl' controls="controls" v-html="subtitleHtml">
<video id='legacyPlayer' class='videoPlayer' onloadstart='checkLegacySettings()' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onended='playNextVideo()' onvolumechange='updateVolume()' :src='videoUrl' controls="controls" v-html="subtitleHtml">
</video>
</div>
<div v-else>