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

Hiding exit, left, right buttons with OSD

Browse source
This commit is contained in:
Thibault Nocchi 2020-11-04 14:19:46 +01:00
parent 891827b242
commit 74fa4e4824
1 changed files with 66 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

84
src/components/slideshow/slideshow.js
View file

@ -269,6 +269,12 @@ export default function (options) {
if (btnSlideshowPause) { if (btnSlideshowPause) {
btnSlideshowPause.classList.replace('play_arrow', 'pause'); btnSlideshowPause.classList.replace('play_arrow', 'pause');
} }
const left = dialog.querySelector('.btnSlideshowPrevious');
if (left) slideToHide(left, 'left');
const right = dialog.querySelector('.btnSlideshowNext');
if (right) slideToHide(right, 'right');
} }
/** /**
@ -279,6 +285,12 @@ export default function (options) {
if (btnSlideshowPause) { if (btnSlideshowPause) {
btnSlideshowPause.classList.replace('pause', 'play_arrow'); btnSlideshowPause.classList.replace('pause', 'play_arrow');
} }
const left = dialog.querySelector('.btnSlideshowPrevious');
if (left) slideToShow(left, 'left');
const right = dialog.querySelector('.btnSlideshowNext');
if (right) slideToShow(right, 'right');
} }
/** /**
@ -560,9 +572,19 @@ export default function (options) {
function showOsd() { function showOsd() {
const bottom = dialog.querySelector('.slideshowBottomBar'); const bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) { if (bottom) {
slideUpToShow(bottom); slideToShow(bottom, 'down');
startHideTimer();
} }
const exit = dialog.querySelector('.btnSlideshowExit');
if (exit) slideToShow(exit, 'up');
const left = dialog.querySelector('.btnSlideshowPrevious');
if (left) slideToShow(left, 'left');
const right = dialog.querySelector('.btnSlideshowNext');
if (right) slideToShow(right, 'right');
startHideTimer();
} }
/** /**
@ -571,8 +593,17 @@ export default function (options) {
function hideOsd() { function hideOsd() {
const bottom = dialog.querySelector('.slideshowBottomBar'); const bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) { if (bottom) {
slideDownToHide(bottom); slideToHide(bottom, 'down');
} }
const exit = dialog.querySelector('.btnSlideshowExit');
if (exit) slideToHide(exit, 'up');
const left = dialog.querySelector('.btnSlideshowPrevious');
if (left) slideToHide(left, 'left');
const right = dialog.querySelector('.btnSlideshowNext');
if (right) slideToHide(right, 'right');
} }
/** /**
@ -594,10 +625,31 @@ export default function (options) {
} }
/** /**
* Shows the OSD by sliding it into view. *
* @param {HTMLElement} element - Element containing the OSD. * @param {string} hiddenPosition - Position of the hidden element compared to when it's visible ('down', 'up', 'left', 'right')
* @param {*} fadingOut - Whether it is fading out or in
* @param {HTMLElement} element - Element to fade.
* @returns {Array} Array of keyframes
*/ */
function slideUpToShow(element) { function keyframesSlide(hiddenPosition, fadingOut, element) {
const visible = { transform: 'translate(0,0)', opacity: '1' };
const invisible = { opacity: '.3' };
if (hiddenPosition === 'up' || hiddenPosition === 'down') {
invisible['transform'] = 'translate3d(0,' + element.offsetHeight * (hiddenPosition === 'down' ? 1 : -1) + 'px,0)';
} else if (hiddenPosition === 'left' || hiddenPosition === 'right') {
invisible['transform'] = 'translate3d(' + element.offsetWidth * (hiddenPosition === 'right' ? 1 : -1) + 'px,0,0)';
}
return fadingOut ? [visible, invisible] : [invisible, visible];
}
/**
* Shows the element by sliding it into view.
* @param {HTMLElement} element - Element to show.
* @param {string} slideFrom - Direction to slide from ('down', 'up', 'left', 'right')
*/
function slideToShow(element, slideFrom) {
if (!element.classList.contains('hide')) { if (!element.classList.contains('hide')) {
return; return;
} }
@ -605,7 +657,8 @@ export default function (options) {
element.classList.remove('hide'); element.classList.remove('hide');
const onFinish = function () { const onFinish = function () {
focusManager.focus(element.querySelector('.btnSlideshowPause')); const pause = element.querySelector('.btnSlideshowPause');
if (pause) focusManager.focus(pause);
}; };
if (!element.animate) { if (!element.animate) {
@ -614,20 +667,18 @@ export default function (options) {
} }
requestAnimationFrame(function () { requestAnimationFrame(function () {
const keyframes = [ const keyframes = keyframesSlide(slideFrom, false, element);
{ transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
];
const timing = { duration: 300, iterations: 1, easing: 'ease-out' }; const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
element.animate(keyframes, timing).onfinish = onFinish; element.animate(keyframes, timing).onfinish = onFinish;
}); });
} }
/** /**
* Hides the OSD by sliding it out of view. * Hides the element by sliding it out of view.
* @param {HTMLElement} element - Element containing the OSD. * @param {HTMLElement} element - Element to hide.
* @param {string} slideInto - Direction to slide into ('down', 'up', 'left', 'right')
*/ */
function slideDownToHide(element) { function slideToHide(element, slideInto) {
if (element.classList.contains('hide')) { if (element.classList.contains('hide')) {
return; return;
} }
@ -642,10 +693,7 @@ export default function (options) {
} }
requestAnimationFrame(function () { requestAnimationFrame(function () {
const keyframes = [ const keyframes = keyframesSlide(slideInto, true, element);
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
{ transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
];
const timing = { duration: 300, iterations: 1, easing: 'ease-out' }; const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
element.animate(keyframes, timing).onfinish = onFinish; element.animate(keyframes, timing).onfinish = onFinish;
}); });