Merge pull request #1494 from dmitrylyzo/friendly-subtitlesync

Friendly SubtitleSync

src/components/subtitlesync/subtitlesync.css

@@ -1,12 +1,18 @@
+.subtitleSync {
+    position: absolute;
+    width: 100%;
+}
+
 .subtitleSyncContainer {
     width: 40%;
-    margin-left: 30%;
+    min-width: 18em;
-    margin-right: 30%;
+    margin-left: auto;
+    margin-right: auto;
     height: 4.2em;
     background: rgba(28, 28, 28, 0.8);
     border-radius: 0.3em;
     color: #fff;
-    position: absolute;
+    position: relative;
 }
 
 .subtitleSync-closeButton {

src/components/subtitlesync/subtitlesync.js

@@ -87,14 +87,6 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
                 getOffsetFromPercentage(this.value));
         });
 
-        subtitleSyncSlider.addEventListener('touchmove', function () {
-            // set new offset
-            playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
-            // synchronize with textField value
-            subtitleSyncTextField.updateOffset(
-                getOffsetFromPercentage(this.value));
-        });
-
         subtitleSyncSlider.getBubbleHtml = function (value) {
             var newOffset = getOffsetFromPercentage(value);
             return '<h1 class="sliderBubbleText">' +

src/components/subtitlesync/subtitlesync.template.html

@@ -1,7 +1,9 @@
-<div class="subtitleSyncContainer">
+<div class="subtitleSync">
-    <button type="button" is="paper-icon-button-light" class="subtitleSync-closeButton"><span class="material-icons close"></span></button>
+    <div class="subtitleSyncContainer">
-    <div class="subtitleSyncTextField" contenteditable="true" spellcheck="false">0s</div>
+        <button type="button" is="paper-icon-button-light" class="subtitleSync-closeButton"><span class="material-icons close"></span></button>
-    <div class="sliderContainer subtitleSyncSliderContainer">
+        <div class="subtitleSyncTextField" contenteditable="true" spellcheck="false">0s</div>
-        <input is="emby-slider" type="range" step="1" min="0" max="100" value="50" class="subtitleSyncSlider" />
+        <div class="sliderContainer subtitleSyncSliderContainer">
+            <input is="emby-slider" type="range" step="1" min="0" max="100" value="50" class="subtitleSyncSlider" data-slider-keep-progress="true" />
+        </div>
     </div>
 </div>

src/controllers/playback/videoosd.js

@@ -333,13 +333,21 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
             osdPoster.innerHTML = '';
         }
 
+        let osdLockCount = 0;
+
         function showOsd() {
             slideDownToShow(headerElement);
             showMainOsdControls();
-            startOsdHideTimer();
+            if (!osdLockCount) {
+                startOsdHideTimer();
+            }
         }
 
         function hideOsd() {
+            if (osdLockCount) {
+                return;
+            }
+
             slideUpToHide(headerElement);
             hideMainOsdControls();
         }
@@ -352,6 +360,19 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
             }
         }
 
+        function lockOsd() {
+            osdLockCount++;
+            stopOsdHideTimer();
+        }
+
+        function unlockOsd() {
+            osdLockCount--;
+            // Restart hide timer if OSD is currently visible
+            if (currentVisibleMenu && !osdLockCount) {
+                startOsdHideTimer();
+            }
+        }
+
         function startOsdHideTimer() {
             stopOsdHideTimer();
             osdHideTimeout = setTimeout(hideOsd, 3e3);
@@ -1196,10 +1217,20 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
 
         function onWindowMouseDown(e) {
             clickedElement = e.srcElement;
+            lockOsd();
+        }
+
+        function onWindowMouseUp() {
+            unlockOsd();
         }
 
         function onWindowTouchStart(e) {
             clickedElement = e.srcElement;
+            lockOsd();
+        }
+
+        function onWindowTouchEnd() {
+            unlockOsd();
         }
 
         function getImgUrl(item, chapter, index, maxWidth, apiClient) {
@@ -1336,9 +1367,17 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
                 dom.addEventListener(window, window.PointerEvent ? 'pointerdown' : 'mousedown', onWindowMouseDown, {
                     passive: true
                 });
+                dom.addEventListener(window, window.PointerEvent ? 'pointerup' : 'mouseup', onWindowMouseUp, {
+                    passive: true
+                });
                 dom.addEventListener(window, 'touchstart', onWindowTouchStart, {
                     passive: true
                 });
+                ['touchend', 'touchcancel'].forEach((event) => {
+                    dom.addEventListener(window, event, onWindowTouchEnd, {
+                        passive: true
+                    });
+                });
             } catch (e) {
                 require(['appRouter'], function(appRouter) {
                     appRouter.goHome();
@@ -1356,9 +1395,17 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
             dom.removeEventListener(window, window.PointerEvent ? 'pointerdown' : 'mousedown', onWindowMouseDown, {
                 passive: true
             });
+            dom.removeEventListener(window, window.PointerEvent ? 'pointerup' : 'mouseup', onWindowMouseUp, {
+                passive: true
+            });
             dom.removeEventListener(window, 'touchstart', onWindowTouchStart, {
                 passive: true
             });
+            ['touchend', 'touchcancel'].forEach((event) => {
+                dom.removeEventListener(window, event, onWindowTouchEnd, {
+                    passive: true
+                });
+            });
             stopOsdHideTimer();
             headerElement.classList.remove('osdHeader');
             headerElement.classList.remove('osdHeader-hidden');