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

Change chapter mark classes to include name info.

In order to use different icons depending on the chapter name, the name
is provided as a class with the prefix scm-.
This commit is contained in:
Viperinius 2022-07-04 22:07:34 +02:00
parent 20a1c34ea8
commit b78d6439b0
2 changed files with 18 additions and 8 deletions

View file

@ -1574,12 +1574,13 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
return '<h1 class="sliderBubbleText">' + datetime.getDisplayRunningTime(ticks) + '</h1>'; return '<h1 class="sliderBubbleText">' + datetime.getDisplayRunningTime(ticks) + '</h1>';
}; };
nowPlayingPositionSlider.getChapterFractions = function () { nowPlayingPositionSlider.getChapterNamesAndFractions = function () {
showOsd(); showOsd();
const item = currentItem; const item = currentItem;
if (item && item.Chapters && item.Chapters.length) { if (item && item.Chapters && item.Chapters.length) {
const chapterNames = [];
const chapterFractions = []; const chapterFractions = [];
const runtimeDuration = item.RunTimeTicks; const runtimeDuration = item.RunTimeTicks;
@ -1588,12 +1589,13 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
const fraction = currentChapter.StartPositionTicks / runtimeDuration; const fraction = currentChapter.StartPositionTicks / runtimeDuration;
chapterFractions.push(fraction); chapterFractions.push(fraction);
chapterNames.push(currentChapter.Name);
} }
return chapterFractions; return [chapterNames, chapterFractions];
} }
return []; return [[], []];
}; };
view.querySelector('.btnPreviousTrack').addEventListener('click', function () { view.querySelector('.btnPreviousTrack').addEventListener('click', function () {

View file

@ -173,15 +173,23 @@ import '../emby-input/emby-input';
} }
function addChapterMarks(range) { function addChapterMarks(range) {
range.chapterNames = [];
range.chapterFractions = []; range.chapterFractions = [];
if (range.getChapterFractions) { if (range.getChapterNamesAndFractions) {
range.chapterFractions = range.getChapterFractions(); [range.chapterNames, range.chapterFractions] = range.getChapterNamesAndFractions();
} }
const htmlToInsert = '<span class="material-icons sliderChapterMark" aria-hidden="true"></span>'; 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(' ', '-')}`;
}
return `<span class="material-icons sliderChapterMark ${classChapterName}" aria-hidden="true"></span>`;
}
range.chapterFractions.forEach(() => { range.chapterNames.forEach(chapterName => {
range.chapterMarkContainerElement.insertAdjacentHTML('beforeend', htmlToInsert); range.chapterMarkContainerElement.insertAdjacentHTML('beforeend', htmlToInsert(chapterName || ''));
}); });
range.chapterMarkElements = range.chapterMarkContainerElement.querySelectorAll('.sliderChapterMark'); range.chapterMarkElements = range.chapterMarkContainerElement.querySelectorAll('.sliderChapterMark');