From 74fa4e4824c24b8cbf4443b06fe609ebef151b2f Mon Sep 17 00:00:00 2001
From: Thibault Nocchi <1619359+ThibaultNocchi@users.noreply.github.com>
Date: Wed, 4 Nov 2020 14:19:46 +0100
Subject: [PATCH] Hiding exit, left, right buttons with OSD

---
 src/components/slideshow/slideshow.js | 84 +++++++++++++++++++++------
 1 file changed, 66 insertions(+), 18 deletions(-)

diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js
index fe385299fe..8fe73bc88e 100644
--- a/src/components/slideshow/slideshow.js
+++ b/src/components/slideshow/slideshow.js
@@ -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;
         });