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

Merge branch 'master' into hadicharara/added-support-for-rtl-layouts

Browse source
This commit is contained in:
Hadi Charara 2022-10-12 08:29:53 -04:00
commit 104ad71ea7
128 changed files with 1242 additions and 1454 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -105,6 +105,13 @@ import globalize from '../../scripts/globalize';
fraction *= 100;
backgroundLower.style.width = fraction + '%';
}
if (range.markerContainerElement) {
if (!range.triedAddingMarkers) {
addMarkers(range);
}
updateMarkers(range, value);
}
});
}
@ -136,6 +143,70 @@ import globalize from '../../scripts/globalize';
});
}
function setMarker(range, valueMarker, marker, valueProgress) {
requestAnimationFrame(function () {
const bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
const markerRect = marker.getBoundingClientRect();
if (!bubbleTrackRect.width || !markerRect.width) {
// width is not set, most probably because the OSD is currently hidden
return;
}
let markerPos = (bubbleTrackRect.width * valueMarker / 100) - markerRect.width / 2;
markerPos = Math.min(Math.max(markerPos, - markerRect.width / 2), bubbleTrackRect.width - markerRect.width / 2);
marker.style.left = markerPos + 'px';
if (valueProgress >= valueMarker) {
marker.classList.remove('unwatched');
marker.classList.add('watched');
} else {
marker.classList.add('unwatched');
marker.classList.remove('watched');
}
});
}
function updateMarkers(range, currentValue) {
if (range.markerInfo && range.markerInfo.length && range.markerElements && range.markerElements.length) {
for (let i = 0, length = range.markerElements.length; i < length; i++) {
if (range.markerInfo.length > i) {
setMarker(range, mapFractionToValue(range, range.markerInfo[i].progress), range.markerElements[i], currentValue);
}
}
}
}
function addMarkers(range) {
range.markerInfo = [];
if (range.getMarkerInfo) {
range.markerInfo = range.getMarkerInfo();
}
function getMarkerHtml(markerInfo) {
let markerTypeSpecificClasses = '';
if (markerInfo.className === 'chapterMarker') {
markerTypeSpecificClasses = markerInfo.className;
if (typeof markerInfo.name === 'string' && markerInfo.name.length) {
// limit the class length in case the name contains half a novel
markerTypeSpecificClasses = `${markerInfo.className} marker-${markerInfo.name.substring(0, 100).toLowerCase().replace(' ', '-')}`;
}
}
return `<span class="material-icons sliderMarker ${markerTypeSpecificClasses}" aria-hidden="true"></span>`;
}
range.markerInfo.forEach(info => {
range.markerContainerElement.insertAdjacentHTML('beforeend', getMarkerHtml(info));
});
range.markerElements = range.markerContainerElement.querySelectorAll('.sliderMarker');
range.triedAddingMarkers = true;
}
EmbySliderPrototype.attachedCallback = function () {
if (this.getAttribute('data-embyslider') === 'true') {
return;
@ -193,7 +264,9 @@ import globalize from '../../scripts/globalize';
this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
const sliderBubble = containerElement.querySelector('.sliderBubble');
let hasHideClass = sliderBubble.classList.contains('hide');
let hasHideBubbleClass = sliderBubble.classList.contains('hide');
this.markerContainerElement = containerElement.querySelector('.sliderMarkerContainer');
dom.addEventListener(this, 'input', function () {
this.dragging = true;
@ -205,9 +278,9 @@ import globalize from '../../scripts/globalize';
const bubbleValue = mapValueToFraction(this, this.value) * 100;
updateBubble(this, bubbleValue, sliderBubble);
if (hasHideClass) {
if (hasHideBubbleClass) {
sliderBubble.classList.remove('hide');
hasHideClass = false;
hasHideBubbleClass = false;
}
}, {
passive: true
@ -221,7 +294,7 @@ import globalize from '../../scripts/globalize';
}
sliderBubble.classList.add('hide');
hasHideClass = true;
hasHideBubbleClass = true;
}, {
passive: true
});
@ -233,9 +306,9 @@ import globalize from '../../scripts/globalize';
updateBubble(this, bubbleValue, sliderBubble);
if (hasHideClass) {
if (hasHideBubbleClass) {
sliderBubble.classList.remove('hide');
hasHideClass = false;
hasHideBubbleClass = false;
}
}
}, {
@ -245,7 +318,7 @@ import globalize from '../../scripts/globalize';
/* eslint-disable-next-line compat/compat */
dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
sliderBubble.classList.add('hide');
hasHideClass = true;
hasHideBubbleClass = true;
}, {
passive: true
});
@ -452,10 +525,8 @@ import globalize from '../../scripts/globalize';
}
for (const range of ranges) {
if (position != null) {
if (position >= range.end) {
continue;
}
if (position != null && position >= range.end) {
continue;
}
setRange(elem, range.start, range.end);