mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Migration of subtitlesync to ES6 module

Browse source
This commit is contained in:
Cameron 2020-08-06 09:03:30 +01:00
parent b7d29eae1b
commit cdb07e9443
2 changed files with 111 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -161,6 +161,7 @@
"src/components/settingshelper.js", "src/components/settingshelper.js",
"src/components/shortcuts.js", "src/components/shortcuts.js",
"src/components/subtitleeditor/subtitleeditor.js", "src/components/subtitleeditor/subtitleeditor.js",
"src/components/subtitlesync/subtitlesync.js",
"src/components/subtitlesettings/subtitleappearancehelper.js", "src/components/subtitlesettings/subtitleappearancehelper.js",
"src/components/subtitlesettings/subtitlesettings.js", "src/components/subtitlesettings/subtitlesettings.js",
"src/components/syncPlay/groupSelectionMenu.js", "src/components/syncPlay/groupSelectionMenu.js",

219
src/components/subtitlesync/subtitlesync.js
View file

@ -1,147 +1,148 @@
define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, layoutManager, template, css) { import playbackManager from 'playbackManager';
'use strict'; import layoutManager from 'layoutManager';
import template from 'text!./subtitlesync.template.html';
import 'css!./subtitlesync';
playbackManager = playbackManager.default || playbackManager; let player;
let subtitleSyncSlider;
let subtitleSyncTextField;
let subtitleSyncCloseButton;
let subtitleSyncContainer;
var player; function init(instance) {
var subtitleSyncSlider; const parent = document.createElement('div');
var subtitleSyncTextField; document.body.appendChild(parent);
var subtitleSyncCloseButton; parent.innerHTML = template;
var subtitleSyncContainer;
function init(instance) { subtitleSyncSlider = parent.querySelector('.subtitleSyncSlider');
var parent = document.createElement('div'); subtitleSyncTextField = parent.querySelector('.subtitleSyncTextField');
document.body.appendChild(parent); subtitleSyncCloseButton = parent.querySelector('.subtitleSync-closeButton');
parent.innerHTML = template; subtitleSyncContainer = parent.querySelector('.subtitleSyncContainer');
subtitleSyncSlider = parent.querySelector('.subtitleSyncSlider'); if (layoutManager.tv) {
subtitleSyncTextField = parent.querySelector('.subtitleSyncTextField'); subtitleSyncSlider.classList.add('focusable');
subtitleSyncCloseButton = parent.querySelector('.subtitleSync-closeButton'); // HACK: Delay to give time for registered element attach (Firefox)
subtitleSyncContainer = parent.querySelector('.subtitleSyncContainer'); setTimeout(function () {
subtitleSyncSlider.enableKeyboardDragging();
}, 0);
}
if (layoutManager.tv) { subtitleSyncContainer.classList.add('hide');
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.updateOffset = function(offset) { subtitleSyncTextField.addEventListener('click', function () {
this.textContent = offset + 's'; // keep focus to prevent fade with osd
}; this.hasFocus = true;
});
subtitleSyncTextField.addEventListener('click', function () { subtitleSyncTextField.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
// if input key is enter search for float pattern
let 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 osd // keep focus to prevent fade with osd
this.hasFocus = true; this.hasFocus = true;
}); if (event.key.match(/[+-\d.s]/) === null) {
subtitleSyncTextField.addEventListener('keydown', 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(); event.preventDefault();
} else {
// keep focus to prevent fade with osd
this.hasFocus = true;
if (event.key.match(/[+-\d.s]/) === null) {
event.preventDefault();
}
} }
}
// FIXME: TV layout will require special handling for navigation keys. But now field is not focusable // FIXME: TV layout will require special handling for navigation keys. But now field is not focusable
event.stopPropagation(); event.stopPropagation();
}); });
subtitleSyncTextField.blur = function() { subtitleSyncTextField.blur = function () {
// prevent textfield to blur while element has focus // prevent textfield to blur while element has focus
if (!this.hasFocus && this.prototype) { if (!this.hasFocus && this.prototype) {
this.prototype.blur(); this.prototype.blur();
} }
}; };
subtitleSyncSlider.updateOffset = function(percent) { subtitleSyncSlider.updateOffset = function (percent) {
// default value is 0s = 50% // default value is 0s = 50%
this.value = percent === undefined ? 50 : percent; this.value = percent === undefined ? 50 : percent;
}; };
subtitleSyncSlider.addEventListener('change', function () { subtitleSyncSlider.addEventListener('change', function () {
// set new offset // set new offset
playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player); playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
// synchronize with textField value // synchronize with textField value
subtitleSyncTextField.updateOffset( subtitleSyncTextField.updateOffset(
getOffsetFromPercentage(this.value)); getOffsetFromPercentage(this.value));
}); });
subtitleSyncSlider.getBubbleHtml = function (value) { subtitleSyncSlider.getBubbleHtml = function (value) {
var newOffset = getOffsetFromPercentage(value); const newOffset = getOffsetFromPercentage(value);
return '<h1 class="sliderBubbleText">' + return '<h1 class="sliderBubbleText">' +
(newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's' + (newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's' +
'</h1>'; '</h1>';
}; };
subtitleSyncCloseButton.addEventListener('click', function() { subtitleSyncCloseButton.addEventListener('click', function () {
playbackManager.disableShowingSubtitleOffset(player); playbackManager.disableShowingSubtitleOffset(player);
SubtitleSync.prototype.toggle('forceToHide'); SubtitleSync.prototype.toggle('forceToHide');
}); });
instance.element = parent; instance.element = parent;
} }
function getOffsetFromPercentage(value) { function getOffsetFromPercentage(value) {
// convert percent to fraction // convert percent to fraction
var offset = (value - 50) / 50; let offset = (value - 50) / 50;
// multiply by offset min/max range value (-x to +x) : // multiply by offset min/max range value (-x to +x) :
offset *= 30; offset *= 30;
return offset.toFixed(1); return offset.toFixed(1);
} }
function getPercentageFromOffset(value) { function getPercentageFromOffset(value) {
// divide by offset min/max range value (-x to +x) : // divide by offset min/max range value (-x to +x) :
var percentValue = value / 30; let percentValue = value / 30;
// convert fraction to percent // convert fraction to percent
percentValue *= 50; percentValue *= 50;
percentValue += 50; percentValue += 50;
return Math.min(100, Math.max(0, percentValue.toFixed())); return Math.min(100, Math.max(0, percentValue.toFixed()));
} }
function SubtitleSync(currentPlayer) { class SubtitleSync {
constructor(currentPlayer) {
player = currentPlayer; player = currentPlayer;
init(this); init(this);
} }
SubtitleSync.prototype.destroy = function() { destroy() {
SubtitleSync.prototype.toggle('forceToHide'); SubtitleSync.prototype.toggle('forceToHide');
if (player) { if (player) {
playbackManager.disableShowingSubtitleOffset(player); playbackManager.disableShowingSubtitleOffset(player);
playbackManager.setSubtitleOffset(0, player); playbackManager.setSubtitleOffset(0, player);
} }
var elem = this.element; const elem = this.element;
if (elem) { if (elem) {
elem.parentNode.removeChild(elem); elem.parentNode.removeChild(elem);
this.element = null; this.element = null;
} }
}; }
SubtitleSync.prototype.toggle = function(action) { toggle(action) {
if (player && playbackManager.supportSubtitleOffset(player)) { if (player && playbackManager.supportSubtitleOffset(player)) {
/* eslint-disable no-fallthrough */ /* eslint-disable no-fallthrough */
switch (action) { switch (action) {
@ -170,7 +171,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
} }
/* eslint-enable no-fallthrough */ /* eslint-enable no-fallthrough */
} }
}; }
}
return SubtitleSync; export default SubtitleSync;
});