add subtitleSync overlay in separated folder

src/components/playback/playbackmanager.js

@@ -1637,7 +1637,22 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
 
         self.supportSubtitleOffset = function(player) {
             player = player || self._currentPlayer;
-            return 'setSubtitleOffset' in player;
+            return player && 'setSubtitleOffset' in player;
+        }
+
+        self.enableShowingSubtitleOffset = function(player) {
+            player = player || self._currentPlayer;
+            player.enableShowingSubtitleOffset();
+        }
+
+        self.disableShowingSubtitleOffset = function(player) {
+            player = player || self._currentPlayer;
+            player.disableShowingSubtitleOffset();
+        }
+
+        self.isShowingSubtitleOffsetEnabled = function(player) {
+            player = player || self._currentPlayer;
+            return player.isShowingSubtitleOffsetEnabled();
         }
 
         self.isSubtitleStreamExternal = function(index, player) {
@@ -1645,17 +1660,20 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             return stream ? getDeliveryMethod(stream) === 'External' : false;
         }
 
-        self.setSubtitleOffset = function (sliderValue, player) {
+        self.setSubtitleOffset = function (value, player) {
             player = player || self._currentPlayer;
-            player.setSubtitleOffset(self.getOffsetFromSliderValue(sliderValue));
+            player.setSubtitleOffset(value);
         };
 
-        self.getOffsetFromSliderValue = function(value) {
-            var offset = (value - 50) / 50;
-            // multiply by offset min/max range value (-x to +x) :
-            offset *= 30;
-            return offset.toFixed(1);
-        };
+        self.getPlayerSubtitleOffset = function(player) {
+            player = player || self._currentPlayer;
+            return player.getSubtitleOffset();
+        }
+
+        self.canHandleOffsetOnCurrentSubtitle = function(player) {
+            var index = self.getSubtitleStreamIndex(player);
+            return index !== -1  && self.isSubtitleStreamExternal(index, player);
+        }
 
         self.seek = function (ticks, player) {
 

src/components/playback/playersettingsmenu.js

@@ -231,6 +231,15 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
             });
         }
 
+        if (options.suboffset) {
+
+            menuItems.push({
+                name: globalize.translate('SubtitleOffset'),
+                id: 'suboffset',
+                asideText: null
+            });
+        }
+
         menuItems.push({
             name: globalize.translate('SubtitleSettings'),
             id: 'subtitlesettings'
@@ -302,6 +311,11 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
                     options.onOption('stats');
                 }
                 return Promise.resolve();
+            case 'suboffset':
+                if (options.onOption) {
+                    options.onOption('suboffset');
+                }
+                return Promise.resolve();
             default:
                 break;
         }

src/components/subtitlesync/subtitlesync.css

@@ -0,0 +1,48 @@
+.subtitleSyncContainer {
+    width: 40%;
+    margin-left: 30%;
+    margin-right: 30%;
+    height: 4.2em;
+    background: rgba(28,28,28,0.8);
+    border-radius: .3em;
+    color: #fff;
+    position: absolute;
+}
+
+.subtitleSync-closeButton {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #ccc;
+    z-index: 2; 
+}
+
+.subtitleSyncTextField {
+    position: absolute;
+    left: 0;
+    width: 40%;
+    margin-left: 30%;
+    margin-right: 30%;
+    top: 0.1em;
+    text-align: center;
+    font-size: 20px;
+    color: white;
+    z-index: 2; 
+}
+
+#prompt {
+    flex-shrink: 0;
+}
+
+.subtitleSyncSliderContainer {
+    width: 98%;
+    margin-left: 1%;
+    margin-right: 1%;
+    top: 2.5em;
+    height: 1.4em;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+    border-radius: .3em;
+    z-index: 1; 
+}

src/components/subtitlesync/subtitlesync.js

@@ -0,0 +1,163 @@
+define(['playbackManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, template, css) {
+    "use strict";
+
+    var player;
+    var subtitleSyncSlider;
+    var subtitleSyncTextField;
+    var subtitleSyncCloseButton;
+    var subtitleSyncContainer;
+
+    function init(instance) {
+
+        var parent = document.createElement('div');
+        parent.innerHTML = template;
+
+        subtitleSyncSlider = parent.querySelector(".subtitleSyncSlider");
+        subtitleSyncTextField = parent.querySelector(".subtitleSyncTextField");
+        subtitleSyncCloseButton = parent.querySelector(".subtitleSync-closeButton");
+        subtitleSyncContainer = parent.querySelector(".subtitleSyncContainer");
+
+        subtitleSyncContainer.classList.add("hide");
+
+        subtitleSyncTextField.updateOffset = function(offset) {
+            this.textContent = offset + "s";
+        }
+
+        subtitleSyncTextField.addEventListener("keypress", function(event) {
+
+            if(event.key === "Enter"){
+                // if input key is enter search for float pattern
+                var inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
+                if(inputOffset) {
+                    inputOffset = inputOffset[0];
+
+                    // replace current text by considered offset
+                    this.textContent = inputOffset + "s";
+
+                    inputOffset = parseFloat(inputOffset);
+                    // set new offset
+                    playbackManager.setSubtitleOffset(inputOffset, player);
+                    // synchronize with slider value
+                    subtitleSyncSlider.updateOffset(
+                        getPercentageFromOffset(inputOffset));
+                } else {
+                    this.textContent = (playbackManager.getPlayerSubtitleOffset(player) || 0) + "s";
+                }
+                this.hasFocus = false;
+                event.preventDefault();
+            } else {
+                // keep focus to prevent fade with bottom layout
+                this.hasFocus = true;
+                if(event.key.match(/[+-\d.s]/) === null) {
+                    event.preventDefault();
+                }
+            }
+        });
+
+        subtitleSyncSlider.updateOffset = function(percent) {
+            // default value is 0s = 50%
+            this.value = percent === undefined ? 50 : percent;
+        }
+
+        subtitleSyncSlider.addEventListener("change", function () {
+            // set new offset
+            playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
+            // synchronize with textField value
+            subtitleSyncTextField.updateOffset(
+                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">' +
+            (newOffset > 0 ? "+" : "") + parseFloat(newOffset) + "s" +
+            "</h1>";
+        };
+
+        subtitleSyncCloseButton.addEventListener("click", function() {
+            playbackManager.disableShowingSubtitleOffset(player);
+            SubtitleSync.prototype.toggle("forceToHide");
+        });
+
+        document.body.appendChild(parent);
+
+        instance.element = parent;
+    }
+
+
+    function getOffsetFromPercentage(value) {
+        // convert percent to fraction
+        var offset = (value - 50) / 50;
+        // multiply by offset min/max range value (-x to +x) :
+        offset *= 30;
+        return offset.toFixed(1);
+    };
+
+    function getPercentageFromOffset(value) {
+        // divide by offset min/max range value (-x to +x) :
+        var percentValue = value / 30;
+        // convert fraction to percent
+        percentValue *= 50;
+        percentValue += 50;
+        return Math.min(100, Math.max(0, percentValue.toFixed()));
+    };
+
+    function SubtitleSync(currentPlayer) {
+        player = currentPlayer;
+        init(this);
+    }
+
+    SubtitleSync.prototype.destroy = function(){
+        SubtitleSync.prototype.toggle("forceToHide");
+        if(player){
+            playbackManager.disableShowingSubtitleOffset(player);
+            playbackManager.setSubtitleOffset(0, player);
+        }
+        var elem = this.element;
+        if (elem) {
+            elem.parentNode.removeChild(elem);
+            this.element = null;
+        }
+    }
+
+    SubtitleSync.prototype.toggle = function(action) {
+
+        if(player && playbackManager.supportSubtitleOffset(player)){
+
+            switch(action) {
+                case undefined:
+                    // if showing subtitle sync is enabled
+                    if(playbackManager.isShowingSubtitleOffsetEnabled(player) && 
+                        // if there is an external subtitle stream enabled
+                        playbackManager.canHandleOffsetOnCurrentSubtitle(player)){
+                            // if no subtitle offset is defined
+                            if(!playbackManager.getPlayerSubtitleOffset(player)) {
+                                // set default offset to '0' = 50%
+                                subtitleSyncSlider.value = "50";
+                                subtitleSyncTextField.textContent = "0s";
+                                playbackManager.setSubtitleOffset(0, player);
+                            }
+                            // show subtitle sync
+                            subtitleSyncContainer.classList.remove("hide");
+                            break; // stop here
+                    } // else continue and hide
+                case "hide":
+                    if(subtitleSyncTextField.hasFocus){break;} // else continue and hide
+                case "forceToHide":
+                    subtitleSyncContainer.classList.add("hide");
+                    break;
+            }
+
+        }
+    }
+
+    return SubtitleSync;
+});

src/components/subtitlesync/subtitlesync.template.html

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