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

Update function and class names as suggested.

Browse source 
More generic name without the inclusion of "chapters" allows potential
reuse in the future.
This commit is contained in:
Viperinius 2022-07-05 17:11:58 +02:00
parent ba2c365ac9
commit 04072523ca
4 changed files with 63 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/controllers/playback/video/index.html
View file

@ -21,7 +21,7 @@
<div class="flex flex-direction-row align-items-center">
<div class="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div>
<div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
<div class="sliderChapterMarkContainer hide"></div>
<div class="sliderMarkerContainer hide"></div>
<input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
</div>
<div class="osdTextContainer endTimeText osdDurationText" style="margin: 0 0 0 .25em;"></div>

4
src/controllers/playback/video/index.js
View file

@ -1574,13 +1574,14 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
return '<h1 class="sliderBubbleText">' + datetime.getDisplayRunningTime(ticks) + '</h1>';
};
nowPlayingPositionSlider.getChapterNamesAndFractions = function () {
nowPlayingPositionSlider.getMarkerInfo = function () {
showOsd();
const markers = [];
const item = currentItem;
// use markers based on chapters
if (item && item.Chapters && item.Chapters.length) {
const runtimeDuration = item.RunTimeTicks;
@ -1590,6 +1591,7 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
const fraction = currentChapter.StartPositionTicks / runtimeDuration;
markers.push({
className: 'chapterMarker',
name: currentChapter.Name,
progress: fraction
});

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

@ -103,11 +103,11 @@ import '../emby-input/emby-input';
backgroundLower.style.width = fraction + '%';
}
if (range.chapterMarkContainerElement) {
if (!range.triedChapterMarksAdd) {
addChapterMarks(range);
if (range.markerContainerElement) {
if (!range.triedAddingMarkers) {
addMarkers(range);
}
updateChapterMarks(range, value);
updateMarkers(range, value);
}
});
}
@ -137,62 +137,68 @@ import '../emby-input/emby-input';
});
}
function setChapterMark(range, valueChapterMark, chapterMark, valueProgress) {
function setMarker(range, valueMarker, marker, valueProgress) {
requestAnimationFrame(function () {
const bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
const chapterMarkRect = chapterMark.getBoundingClientRect();
const markerRect = marker.getBoundingClientRect();
if (!bubbleTrackRect.width || !chapterMarkRect.width) {
if (!bubbleTrackRect.width || !markerRect.width) {
// width is not set, most probably because the OSD is currently hidden
return;
}
let chapterMarkPos = (bubbleTrackRect.width * valueChapterMark / 100) - chapterMarkRect.width / 2;
chapterMarkPos = Math.min(Math.max(chapterMarkPos, - chapterMarkRect.width / 2), bubbleTrackRect.width - chapterMarkRect.width / 2);
let markerPos = (bubbleTrackRect.width * valueMarker / 100) - markerRect.width / 2;
markerPos = Math.min(Math.max(markerPos, - markerRect.width / 2), bubbleTrackRect.width - markerRect.width / 2);
chapterMark.style.left = chapterMarkPos + 'px';
marker.style.left = markerPos + 'px';
if (valueProgress >= valueChapterMark) {
chapterMark.classList.remove('unwatched');
chapterMark.classList.add('watched');
if (valueProgress >= valueMarker) {
marker.classList.remove('unwatched');
marker.classList.add('watched');
} else {
chapterMark.classList.add('unwatched');
chapterMark.classList.remove('watched');
marker.classList.add('unwatched');
marker.classList.remove('watched');
}
});
}
function updateChapterMarks(range, currentValue) {
if (range.chapterInfo && range.chapterInfo.length && range.chapterMarkElements && range.chapterMarkElements.length) {
for (let i = 0, length = range.chapterMarkElements.length; i < length; i++) {
if (range.chapterInfo.length > i) {
setChapterMark(range, mapFractionToValue(range, range.chapterInfo[i].progress), range.chapterMarkElements[i], currentValue);
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 addChapterMarks(range) {
range.chapterInfo = [];
if (range.getChapterNamesAndFractions) {
range.chapterInfo = range.getChapterNamesAndFractions();
function addMarkers(range) {
range.markerInfo = [];
if (range.getMarkerInfo) {
range.markerInfo = range.getMarkerInfo();
}
function htmlToInsert(chapterName) {
let classChapterName = '';
if (typeof chapterName === 'string' && chapterName.length) {
// limit the class length in case the name contains half a novel
classChapterName = `scm-${chapterName.substring(0, 100).toLowerCase().replace(' ', '-')}`;
function htmlToInsert(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 sliderChapterMark ${classChapterName}" aria-hidden="true"></span>`;
return `<span class="material-icons sliderMarker ${markerTypeSpecificClasses}" aria-hidden="true"></span>`;
}
range.chapterInfo.forEach(chapter => {
range.chapterMarkContainerElement.insertAdjacentHTML('beforeend', htmlToInsert(chapter.name || ''));
range.markerInfo.forEach(info => {
range.markerContainerElement.insertAdjacentHTML('beforeend', htmlToInsert(info));
});
range.chapterMarkElements = range.chapterMarkContainerElement.querySelectorAll('.sliderChapterMark');
range.triedChapterMarksAdd = true;
range.markerElements = range.markerContainerElement.querySelectorAll('.sliderMarker');
range.triedAddingMarkers = true;
}
EmbySliderPrototype.attachedCallback = function () {
@ -254,10 +260,10 @@ import '../emby-input/emby-input';
let hasHideClassBubble = sliderBubble.classList.contains('hide');
this.chapterMarkContainerElement = containerElement.querySelector('.sliderChapterMarkContainer');
let hasHideClassChapterMarkContainer = false;
if (this.chapterMarkContainerElement) {
hasHideClassChapterMarkContainer = this.chapterMarkContainerElement.classList.contains('hide');
this.markerContainerElement = containerElement.querySelector('.sliderMarkerContainer');
let hasHideClassMarkerContainer = false;
if (this.markerContainerElement) {
hasHideClassMarkerContainer = this.markerContainerElement.classList.contains('hide');
}
dom.addEventListener(this, 'input', function () {
@ -275,9 +281,9 @@ import '../emby-input/emby-input';
hasHideClassBubble = false;
}
if (hasHideClassChapterMarkContainer) {
this.chapterMarkContainerElement.classList.remove('hide');
hasHideClassChapterMarkContainer = false;
if (hasHideClassMarkerContainer) {
this.markerContainerElement.classList.remove('hide');
hasHideClassMarkerContainer = false;
}
}, {
passive: true
@ -293,8 +299,8 @@ import '../emby-input/emby-input';
sliderBubble.classList.add('hide');
hasHideClassBubble = true;
this.chapterMarkContainerElement.classList.add('hide');
hasHideClassChapterMarkContainer = true;
this.markerContainerElement.classList.add('hide');
hasHideClassMarkerContainer = true;
}, {
passive: true
});
@ -311,9 +317,9 @@ import '../emby-input/emby-input';
hasHideClassBubble = false;
}
if (hasHideClassChapterMarkContainer) {
this.chapterMarkContainerElement.classList.remove('hide');
hasHideClassChapterMarkContainer = false;
if (hasHideClassMarkerContainer) {
this.markerContainerElement.classList.remove('hide');
hasHideClassMarkerContainer = false;
}
}
}, {
@ -325,8 +331,8 @@ import '../emby-input/emby-input';
sliderBubble.classList.add('hide');
hasHideClassBubble = true;
this.chapterMarkContainerElement.classList.add('hide');
hasHideClassChapterMarkContainer = true;
this.markerContainerElement.classList.add('hide');
hasHideClassMarkerContainer = true;
}, {
passive: true
});

10
src/elements/emby-slider/emby-slider.scss
View file

@ -246,27 +246,27 @@
margin-bottom: 0.25em;
}
.sliderChapterMarkContainer {
.sliderMarkerContainer {
position: absolute;
left: 0;
right: 0;
margin: 0 0.54em; /* half of slider thumb size */
}
.sliderChapterMark {
.sliderMarker {
position: absolute;
transform: translate3d(0, -100%, 0) rotate(90deg);
}
.sliderChapterMark::before {
.sliderMarker.chapterMarker::before {
font-family: 'Material Icons', sans-serif;
content: "\e892";
}
.sliderChapterMark.unwatched {
.sliderMarker.unwatched {
color: rgba(255, 255, 255, 0.3);
}
.sliderChapterMark.watched {
.sliderMarker.watched {
color: #00a4dc;
}