diff --git a/components/chapters/ChapterList.tsx b/components/chapters/ChapterList.tsx index 7c1d7a2fc..270f1d6e5 100644 --- a/components/chapters/ChapterList.tsx +++ b/components/chapters/ChapterList.tsx @@ -72,13 +72,18 @@ export function ChapterList({ {t("chapters.title")} - + String(i)} + keyExtractor={(item, index) => `${item.positionMs}-${index}`} renderItem={({ item, index }) => { const positionMs = item.positionMs; const isActive = index === activeIndex; diff --git a/components/video-player/controls/BottomControls.tsx b/components/video-player/controls/BottomControls.tsx index 496857eec..7a7ff83eb 100644 --- a/components/video-player/controls/BottomControls.tsx +++ b/components/video-player/controls/BottomControls.tsx @@ -3,7 +3,8 @@ import type { BaseItemDto, ChapterInfo, } from "@jellyfin/sdk/lib/generated-client"; -import { type FC, useState } from "react"; +import { type FC, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; import { Pressable, View } from "react-native"; import { Slider } from "react-native-awesome-slider"; import { type SharedValue } from "react-native-reanimated"; @@ -106,11 +107,16 @@ export const BottomControls: FC = ({ time, }) => { const { settings } = useSettings(); + const { t } = useTranslation(); const insets = useSafeAreaInsets(); const [chapterListVisible, setChapterListVisible] = useState(false); // Only expose chapter UI when there are at least two real markers. - const hasChapters = chapterMarkers(chapters, durationMs).length > 1; + const chapterMarkerList = useMemo( + () => chapterMarkers(chapters, durationMs), + [chapters, durationMs], + ); + const hasChapters = chapterMarkerList.length > 1; return ( = ({ onPress={() => setChapterListVisible(true)} hitSlop={10} className='justify-center' + accessibilityRole='button' + accessibilityLabel={t("chapters.open")} + style={{ marginBottom: 6 }} > diff --git a/translations/en.json b/translations/en.json index c3f18a56c..3b57e5d00 100644 --- a/translations/en.json +++ b/translations/en.json @@ -685,7 +685,9 @@ }, "chapters": { "title": "Chapters", - "chapter_number": "Chapter {{number}}" + "chapter_number": "Chapter {{number}}", + "open": "Open chapters", + "close": "Close chapters" }, "item_card": { "next_up": "Next Up", diff --git a/utils/chapters.test.ts b/utils/chapters.test.ts index 1cc6e7155..82fa1e80a 100644 --- a/utils/chapters.test.ts +++ b/utils/chapters.test.ts @@ -32,6 +32,18 @@ describe("chapterMarkers", () => { expect(chapterMarkers(null, 120_000)).toEqual([]); expect(chapterMarkers(undefined, 120_000)).toEqual([]); }); + + test("excludes a chapter exactly at the duration", () => { + expect(chapterMarkers([ch(0), ch(120_000)], 120_000)).toEqual([ + { positionMs: 0, percent: 0 }, + ]); + }); + + test("skips chapters with no StartPositionTicks", () => { + expect( + chapterMarkers([{ StartPositionTicks: undefined }, ch(30_000)], 120_000), + ).toEqual([{ positionMs: 30_000, percent: 25 }]); + }); }); describe("currentChapterIndex", () => { diff --git a/utils/chapters.ts b/utils/chapters.ts index 6e4b7f8da..40683f057 100644 --- a/utils/chapters.ts +++ b/utils/chapters.ts @@ -4,8 +4,7 @@ */ import type { ChapterInfo } from "@jellyfin/sdk/lib/generated-client/models"; - -const TICKS_PER_MS = 10000; +import { ticksToMs } from "@/utils/time"; export interface ChapterMarker { /** Chapter start, in milliseconds. */ @@ -25,9 +24,10 @@ export const sortedChapters = ( chapters: ChapterInfo[] | null | undefined, ): ChapterEntry[] => (chapters ?? []) + .filter((c) => c.StartPositionTicks != null) .map((chapter) => ({ chapter, - positionMs: (chapter.StartPositionTicks ?? 0) / TICKS_PER_MS, + positionMs: ticksToMs(chapter.StartPositionTicks), })) .sort((a, b) => a.positionMs - b.positionMs); @@ -36,7 +36,8 @@ export const chapterStartsMs = ( chapters: ChapterInfo[] | null | undefined, ): number[] => (chapters ?? []) - .map((c) => (c.StartPositionTicks ?? 0) / TICKS_PER_MS) + .filter((c) => c.StartPositionTicks != null) + .map((c) => ticksToMs(c.StartPositionTicks)) .sort((a, b) => a - b); /** Chapter markers within [0, durationMs]; empty when duration is unknown. */ @@ -46,7 +47,7 @@ export const chapterMarkers = ( ): ChapterMarker[] => { if (durationMs <= 0) return []; return chapterStartsMs(chapters) - .filter((ms) => ms >= 0 && ms <= durationMs) + .filter((ms) => ms >= 0 && ms < durationMs) .map((ms) => ({ positionMs: ms, percent: (ms / durationMs) * 100 })); };