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

2
dashboard-ui/bower_components/doc-ready/.bower.json vendored
View file

@ -39,6 +39,6 @@
"commit": "cec8e49744a1e18b14a711eea77e201bb70de544"
},
"_source": "git://github.com/desandro/doc-ready.git",
"_target": "1.0.x",
"_target": "~1.0.4",
"_originalSource": "doc-ready"
}

6
dashboard-ui/bower_components/iron-overlay-behavior/.bower.json vendored
View file

@ -33,14 +33,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
"homepage": "https://github.com/PolymerElements/iron-overlay-behavior",
"_release": "1.1.1",
"_resolution": {
"type": "version",
"tag": "v1.1.1",
"commit": "1ed1603ce820456feab3f62ae86f8f3ec801d131"
},
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
"_source": "git://github.com/PolymerElements/iron-overlay-behavior.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-overlay-behavior"
"_originalSource": "PolymerElements/iron-overlay-behavior"
}

6
dashboard-ui/bower_components/paper-input/.bower.json vendored
View file

@ -50,7 +50,7 @@
"tag": "v1.1.1",
"commit": "1bbce220b027dc030b294163f7da6f3e9052ab13"
},
"_source": "git://github.com/polymerelements/paper-input.git",
"_target": "^1.0.9",
"_originalSource": "polymerelements/paper-input"
"_source": "git://github.com/PolymerElements/paper-input.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-input"
}

6
dashboard-ui/bower_components/paper-ripple/.bower.json vendored
View file

@ -32,14 +32,14 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/paper-ripple",
"homepage": "https://github.com/polymerelements/paper-ripple",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
},
"_source": "git://github.com/PolymerElements/paper-ripple.git",
"_source": "git://github.com/polymerelements/paper-ripple.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-ripple"
"_originalSource": "polymerelements/paper-ripple"
}

3
dashboard-ui/css/mediaplayer-video.css
View file

@ -1,5 +1,4 @@
.videoBackdrop {
/* Allows popups to be closed, because their z-index is 1099 */
#mediaPlayer {
z-index: 1098;
position: fixed;
background-color: transparent;

2
dashboard-ui/scripts/actionsheet.js
View file

@ -118,7 +118,7 @@
setTimeout(function () {
dlg.open();
}, 10);
}, 50);
// Has to be assigned a z-index after the call to .open()
dlg.addEventListener('iron-overlay-closed', function () {

2
dashboard-ui/scripts/htmlmediarenderer.js
View file

@ -219,7 +219,7 @@
html += '</video>';
var elem = $('#videoElement', '#mediaPlayer').prepend(html);
var elem = $('#videoElement', '#videoPlayer').prepend(html);
return $('.itemVideo', elem)
.one('.loadedmetadata', onLoadedMetadata)

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