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="flex flex-direction-row align-items-center">
<div class="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div> <div class="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div>
<div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;"> <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" /> <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
</div> </div>
<div class="osdTextContainer endTimeText osdDurationText" style="margin: 0 0 0 .25em;"></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>'; return '<h1 class="sliderBubbleText">' + datetime.getDisplayRunningTime(ticks) + '</h1>';
}; };
nowPlayingPositionSlider.getChapterNamesAndFractions = function () { nowPlayingPositionSlider.getMarkerInfo = function () {
showOsd(); showOsd();
const markers = []; const markers = [];
const item = currentItem; const item = currentItem;
// use markers based on chapters
if (item && item.Chapters && item.Chapters.length) { if (item && item.Chapters && item.Chapters.length) {
const runtimeDuration = item.RunTimeTicks; const runtimeDuration = item.RunTimeTicks;
@ -1590,6 +1591,7 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
const fraction = currentChapter.StartPositionTicks / runtimeDuration; const fraction = currentChapter.StartPositionTicks / runtimeDuration;
markers.push({ markers.push({
className: 'chapterMarker',
name: currentChapter.Name, name: currentChapter.Name,
progress: fraction progress: fraction
}); });

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

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

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

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