mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

add zoom and fade effect to video player

Browse source
This commit is contained in:
Luke Pulverenti 2015-11-30 01:43:21 -05:00
parent 0a96f8e0bf
commit 604fba2cbf
8 changed files with 69 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

81
dashboard-ui/scripts/mediaplayer-video.js
View file

@ -42,7 +42,7 @@
self.exitFullScreen();
}
fadeOut(document.querySelector('#mediaPlayer'));
fadeOut(document.querySelector('#videoPlayer'));
$('#videoPlayer').removeClass('fullscreenVideo').removeClass('idlePlayer');
$('.hiddenOnIdle').removeClass("inactive");
$("video").remove();
@ -52,18 +52,6 @@
document.querySelector('.videoControls').classList.add('hiddenOnIdle');
};
function fadeOut(elem) {
$(elem).hide();
return;
var keyframes = [
{ opacity: '1', offset: 0 },
{ opacity: '0', offset: 1 }];
var timing = { duration: 300, iterations: 1 };
elem.animate(keyframes, timing).onfinish = function () {
$(elem).hide();
};
}
self.exitFullScreen = function () {
if (document.exitFullscreen) {
@ -690,13 +678,9 @@
function ensureVideoPlayerElements() {
// TODO: remove dependency on nowplayingbar
require(['css!/css/nowplayingbar.css', 'css!/css/mediaplayer-video.css']);
var html = '';
var html = '<div id="mediaPlayer" style="display: none;">';
html += '<div class="videoBackdrop">';
html += '<div id="videoPlayer">';
html += '<div id="videoPlayer" class="hide">';
html += '<div id="videoElement">';
html += '<div id="play" class="status"></div>';
@ -758,8 +742,6 @@
html += '</div>'; // videoControls
html += '</div>'; // videoPlayer
html += '</div>'; // videoBackdrop
html += '</div>'; // mediaPlayer
var div = document.createElement('div');
div.innerHTML = html;
@ -777,7 +759,7 @@
initComplete = true;
ensureVideoPlayerElements();
var parent = $("#mediaPlayer");
var parent = $("#videoPlayer");
muteButton = $('.muteButton', parent);
unmuteButton = $('.unmuteButton', parent);
@ -957,9 +939,10 @@
self.playVideo = function (item, mediaSource, startPosition, callback) {
initVideoElements();
// TODO: remove dependency on nowplayingbar
requirejs(['videorenderer', 'css!/css/nowplayingbar.css', 'css!/css/mediaplayer-video.css'], function () {
requirejs(['videorenderer'], function () {
initVideoElements();
self.createStreamInfo('Video', item, mediaSource, startPosition).then(function (streamInfo) {
@ -988,6 +971,53 @@
});
};
function fadeOut(elem) {
if (elem.classList.contains('hide')) {
return;
}
var onfinish = function () {
elem.classList.add('hide');
};
if (!browserInfo.animate) {
onfinish();
return;
}
requestAnimationFrame(function () {
var keyframes = [
{ opacity: '1', offset: 0 },
{ opacity: '0', offset: 1 }];
var timing = { duration: 400, iterations: 1, easing: 'ease-out' };
elem.animate(keyframes, timing).onfinish = onfinish;
});
}
function fadeIn(elem) {
if (!elem.classList.contains('hide')) {
return;
}
elem.classList.remove('hide');
if (!browserInfo.animate) {
return;
}
requestAnimationFrame(function () {
var keyframes = [
{ transform: 'scale3d(.2, .2, .2) ', opacity: '.6', offset: 0 },
{ transform: 'none', opacity: '1', offset: 1 }
];
var timing = { duration: 240, iterations: 1, easing: 'ease-out' };
elem.animate(keyframes, timing);
});
}
self.playVideoInternal = function (item, mediaSource, startPosition, streamInfo, callback) {
self.startTimeTicksOffset = streamInfo.startTimeTicksOffset;
@ -998,7 +1028,8 @@
});
// Create video player
var mediaPlayerContainer = $("#mediaPlayer").show();
var mediaPlayerContainer = document.querySelector('#videoPlayer');
fadeIn(mediaPlayerContainer);
var videoControls = $('.videoControls', mediaPlayerContainer);
//show stop button