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

Change chapter mark classes to include name info.

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -173,15 +173,23 @@ import '../emby-input/emby-input';
}
function addChapterMarks(range) {
range.chapterNames = [];
range.chapterFractions = [];
if (range.getChapterFractions) {
range.chapterFractions = range.getChapterFractions();
if (range.getChapterNamesAndFractions) {
[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.chapterMarkContainerElement.insertAdjacentHTML('beforeend', htmlToInsert);
range.chapterNames.forEach(chapterName => {
range.chapterMarkContainerElement.insertAdjacentHTML('beforeend', htmlToInsert(chapterName || ''));
});
range.chapterMarkElements = range.chapterMarkContainerElement.querySelectorAll('.sliderChapterMark');