cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki 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
Show Stats 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) {
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) {
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() {
const bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) {
slideUpToShow(bottom);
startHideTimer();
slideToShow(bottom, 'down');
}
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() {
const bottom = dialog.querySelector('.slideshowBottomBar');
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')) {
return;
}
@ -605,7 +657,8 @@ export default function (options) {
element.classList.remove('hide');
const onFinish = function () {
focusManager.focus(element.querySelector('.btnSlideshowPause'));
const pause = element.querySelector('.btnSlideshowPause');
if (pause) focusManager.focus(pause);
};
if (!element.animate) {
@ -614,20 +667,18 @@ export default function (options) {
}
requestAnimationFrame(function () {
const keyframes = [
{ transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
];
const keyframes = keyframesSlide(slideFrom, false, element);
const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
element.animate(keyframes, timing).onfinish = onFinish;
});
}
/**
* Hides the OSD by sliding it out of view.
* @param {HTMLElement} element - Element containing the OSD.
* Hides the element by sliding it out of view.
* @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')) {
return;
}
@ -642,10 +693,7 @@ export default function (options) {
}
requestAnimationFrame(function () {
const keyframes = [
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
{ transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
];
const keyframes = keyframesSlide(slideInto, true, element);
const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
element.animate(keyframes, timing).onfinish = onFinish;
});