milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'upstream/master' into fix-subtitle-line-spacing

Browse source 
Conflicts:
	src/components/subtitlesettings/subtitleappearancehelper.js
	src/components/subtitlesettings/subtitlesettings.js
	src/elements/emby-slider/emby-slider.js
This commit is contained in:
Dmitry Lyzo 2020-07-26 13:35:17 +03:00
commit 450807ff14
244 changed files with 7938 additions and 6524 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/elements/emby-slider/emby-slider.js
View file

@ -1,15 +1,22 @@
define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'webcomponents', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) {
'use strict';
import browser from 'browser';
import dom from 'dom';
import layoutManager from 'layoutManager';
import keyboardnavigation from 'keyboardnavigation';
import 'css!./emby-slider';
import 'webcomponents';
import 'emby-input';
var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
/* eslint-disable indent */
var supportsValueSetOverride = false;
let EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
var enableWidthWithTransform;
let supportsValueSetOverride = false;
let enableWidthWithTransform;
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
// descriptor returning null in webos
if (descriptor && descriptor.configurable) {
supportsValueSetOverride = true;
@ -24,14 +31,14 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
* @return {number} slider fraction
*/
function mapClientToFraction(range, clientX) {
var rect = range.sliderBubbleTrack.getBoundingClientRect();
const rect = range.sliderBubbleTrack.getBoundingClientRect();
var fraction = (clientX - rect.left) / rect.width;
let fraction = (clientX - rect.left) / rect.width;
// Snap to step
var valueRange = range.max - range.min;
const valueRange = range.max - range.min;
if (range.step !== 'any' && valueRange !== 0) {
var step = (range.step || 1) / valueRange;
const step = (range.step || 1) / valueRange;
fraction = Math.round(fraction / step) * step;
}
@ -46,7 +53,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
* @return {number} slider value
*/
function mapFractionToValue(range, fraction) {
var value = (range.max - range.min) * fraction;
let value = (range.max - range.min) * fraction;
// Snap to step
if (range.step !== 'any') {
@ -67,8 +74,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
* @return {number} slider fraction
*/
function mapValueToFraction(range, value) {
var valueRange = range.max - range.min;
var fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
const valueRange = range.max - range.min;
const fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
return Math.min(Math.max(fraction, 0), 1);
}
@ -84,18 +91,18 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
return;
}
var range = this;
var value = range.value;
const range = this;
const value = range.value;
// put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond
// Keep only one per slider frame request
cancelAnimationFrame(range.updateValuesFrame);
range.updateValuesFrame = requestAnimationFrame(function () {
var backgroundLower = range.backgroundLower;
let backgroundLower = range.backgroundLower;
if (backgroundLower) {
var fraction = (value - range.min) / (range.max - range.min);
let fraction = (value - range.min) / (range.max - range.min);
if (enableWidthWithTransform) {
backgroundLower.style.transform = 'scaleX(' + (fraction) + ')';
@ -110,10 +117,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
function updateBubble(range, value, bubble, bubbleText) {
requestAnimationFrame(function () {
var bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
var bubbleRect = bubble.getBoundingClientRect();
const bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
const bubbleRect = bubble.getBoundingClientRect();
var bubblePos = bubbleTrackRect.width * value / 100;
let bubblePos = bubbleTrackRect.width * value / 100;
bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
bubble.style.left = bubblePos + 'px';
@ -168,10 +175,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
topContainer.insertBefore(label, topContainer.firstChild);
}
var containerElement = this.parentNode;
const containerElement = this.parentNode;
containerElement.classList.add('mdl-slider-container');
var htmlToInsert = '';
let htmlToInsert = '';
htmlToInsert += '<div class="mdl-slider-background-flex-container">';
htmlToInsert += '<div class="mdl-slider-background-flex">';
@ -197,9 +204,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack');
this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
var sliderBubble = containerElement.querySelector('.sliderBubble');
const sliderBubble = containerElement.querySelector('.sliderBubble');
var hasHideClass = sliderBubble.classList.contains('hide');
let hasHideClass = sliderBubble.classList.contains('hide');
dom.addEventListener(this, 'input', function (e) {
this.dragging = true;
@ -208,7 +215,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
updateValues.call(this);
}
var bubbleValue = mapValueToFraction(this, this.value) * 100;
const bubbleValue = mapValueToFraction(this, this.value) * 100;
updateBubble(this, bubbleValue, sliderBubble);
if (hasHideClass) {
@ -237,7 +244,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
if (!this.dragging) {
var bubbleValue = mapClientToFraction(this, e.clientX) * 100;
const bubbleValue = mapClientToFraction(this, e.clientX) * 100;
updateBubble(this, bubbleValue, sliderBubble);
@ -268,7 +275,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
this.touched = true;
var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
this.value = mapFractionToValue(this, fraction);
this.dispatchEvent(new Event('input', {
@ -288,7 +295,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
return;
}
var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
this.value = mapFractionToValue(this, fraction);
this.dispatchEvent(new Event('input', {
@ -300,7 +307,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
});
dom.addEventListener(this, 'touchend', function (e) {
var range = this;
const range = this;
setTimeout(function () {
range.touched = false;
@ -326,12 +333,12 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
* Keyboard dragging timeout.
* After this delay "change" event will be fired.
*/
var KeyboardDraggingTimeout = 1000;
const KeyboardDraggingTimeout = 1000;
/**
* Keyboard dragging timer.
*/
var keyboardDraggingTimer;
let keyboardDraggingTimer;
/**
* Start keyboard dragging.
@ -358,7 +365,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
elem.keyboardDragging = false;
var event = new Event('change', {
const event = new Event('change', {
bubbles: true,
cancelable: false
});
@ -376,7 +383,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta));
var event = new Event('input', {
const event = new Event('input', {
bubbles: true,
cancelable: false
});
@ -426,10 +433,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
function setRange(elem, startPercent, endPercent) {
var style = elem.style;
const style = elem.style;
style.left = Math.max(startPercent, 0) + '%';
var widthPercent = endPercent - startPercent;
const widthPercent = endPercent - startPercent;
style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';
}
@ -450,7 +457,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
EmbySliderPrototype.setBufferedRanges = function (ranges, runtime, position) {
var elem = this.backgroundUpper;
const elem = this.backgroundUpper;
if (!elem) {
return;
}
@ -461,9 +468,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
position = (position / runtime) * 100;
}
for (var i = 0, length = ranges.length; i < length; i++) {
var range = ranges[i];
for (const range in ranges) {
if (position != null) {
if (position >= range.end) {
@ -480,7 +485,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
EmbySliderPrototype.setIsClear = function (isClear) {
var backgroundLower = this.backgroundLower;
const backgroundLower = this.backgroundLower;
if (backgroundLower) {
if (isClear) {
backgroundLower.classList.add('mdl-slider-background-lower-clear');
@ -491,7 +496,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
};
function startInterval(range) {
var interval = range.interval;
const interval = range.interval;
if (interval) {
clearInterval(interval);
}
@ -500,7 +505,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
EmbySliderPrototype.detachedCallback = function () {
var interval = this.interval;
const interval = this.interval;
if (interval) {
clearInterval(interval);
}
@ -513,4 +518,5 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
prototype: EmbySliderPrototype,
extends: 'input'
});
});
/* eslint-enable indent */