define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, layoutManager, template, css) { 'use strict'; var player; var subtitleSyncSlider; var subtitleSyncTextField; var subtitleSyncCloseButton; var subtitleSyncContainer; function init(instance) { var parent = document.createElement('div'); document.body.appendChild(parent); parent.innerHTML = template; subtitleSyncSlider = parent.querySelector('.subtitleSyncSlider'); subtitleSyncTextField = parent.querySelector('.subtitleSyncTextField'); subtitleSyncCloseButton = parent.querySelector('.subtitleSync-closeButton'); subtitleSyncContainer = parent.querySelector('.subtitleSyncContainer'); if (layoutManager.tv) { subtitleSyncSlider.classList.add('focusable'); // HACK: Delay to give time for registered element attach (Firefox) setTimeout(function () { subtitleSyncSlider.enableKeyboardDragging(); }, 0); } 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 '