basic chapter list for audiobook items

src/apps/legacy/controllers/itemDetails/index.js

@@ -22,6 +22,7 @@ import mediaInfo from 'components/mediainfo/mediainfo';
 import layoutManager from 'components/layoutManager';
 import listView from 'components/listview/listview';
 import loading from 'components/loading/loading';
+import ItemDetailsChapterList from 'components/itemDetails/ItemDetailsChapterList';
 import ItemDetailsMetadataList from 'components/itemDetails/ItemDetailsMetadataList';
 import { playbackManager } from 'components/playback/playbackmanager';
 import { appRouter } from 'components/router/appRouter';
@@ -577,7 +578,7 @@ function reloadFromItem(instance, page, params, item, user) {
 
     renderSeriesTimerEditor(page, item, apiClient, user);
     renderTimerEditor(page, item, apiClient, user);
-    setInitialCollapsibleState(page, item, apiClient, params.context, user);
+    setInitialCollapsibleState(page, instance, item, apiClient, params.context, user);
     const canPlay = reloadPlayButtons(page, item);
 
     setTrailerButtonVisibility(page, item);
@@ -818,7 +819,7 @@ function renderNextUp(page, item, user) {
     });
 }
 
-function setInitialCollapsibleState(page, item, apiClient, context, user) {
+function setInitialCollapsibleState(page, instance, item, apiClient, context, user) {
     page.querySelector('.collectionItems').innerHTML = '';
 
     if (item.Type == 'Playlist') {
@@ -848,6 +849,7 @@ function setInitialCollapsibleState(page, item, apiClient, context, user) {
         page.querySelector('.nextUpSection').classList.add('hide');
     }
 
+    renderChapters(page, instance, item);
     renderScenes(page, item);
 
     if (item.SpecialFeatureCount > 0) {
@@ -1782,6 +1784,19 @@ function renderAdditionalParts(page, item, user) {
     });
 }
 
+function renderChapters(page, instance, item) {
+    if (item.Type !== BaseItemKind.AudioBook || !item.Chapters?.length) return;
+
+    const target = document.createElement('div');
+    const container = page.querySelector('#childrenCollapsible');
+    const element = container.querySelector('.itemsContainer');
+
+    instance._unmount.push(renderComponent(ItemDetailsChapterList, { item }, target));
+    container.classList.remove('hide');
+    element.classList.add('vertical-list');
+    element.appendChild(target);
+}
+
 function renderScenes(page, item) {
     let chapters = item.Chapters || [];
 

src/components/itemDetails/ItemDetailsChapterList.tsx

@@ -0,0 +1,53 @@
+import React, { type FC } from 'react';
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import type { ChapterInfo } from '@jellyfin/sdk/lib/generated-client/models/chapter-info';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+import { playbackManager } from 'components/playback/playbackmanager';
+import globalize from 'lib/globalize';
+import datetime from 'scripts/datetime';
+
+interface ItemDetailsChapterListProps {
+    item: BaseItemDto;
+}
+
+const ItemDetailsChapterList: FC<ItemDetailsChapterListProps> = ({ item }) => {
+    const onClickPlay = (chapter: ChapterInfo) => () => {
+        playbackManager.play({
+            items: [item],
+            startPositionTicks: chapter.StartPositionTicks
+        }).catch(error => {
+            console.error('playback failure', error);
+        });
+    };
+
+    return (
+        <Box>
+            {item.Chapters?.map((chapter, index) => (
+                <Box
+                    key={chapter.StartPositionTicks}
+                    className='listItem-border'
+                    onClick={onClickPlay(chapter)}
+                    sx={{ cursor: 'pointer', display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}
+                >
+                    <Box style={{ margin: '0 1em' }}>
+                        {index + 1}
+                    </Box>
+
+                    <Box className='listItemBody'>
+                        <Typography>
+                            {chapter.Name ?? `${globalize.translate('HeaderChapter')} ${index + 1}`}
+                        </Typography>
+                    </Box>
+
+                    <Typography className='secondary' style={{ margin: '0 1em' }}>
+                        {datetime.getDisplayRunningTime(chapter.StartPositionTicks)}
+                    </Typography>
+                </Box>
+            ))}
+        </Box>
+    );
+};
+
+export default ItemDetailsChapterList;