diff --git a/components/chapters/ChapterList.tsx b/components/chapters/ChapterList.tsx index 7c1d7a2f..270f1d6e 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 b2d6d69e..93082712 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"; @@ -102,11 +103,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 09bdf42d..dfad3bc0 100644 --- a/translations/en.json +++ b/translations/en.json @@ -612,7 +612,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 1cc6e715..82fa1e80 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 6e4b7f8d..40683f05 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 })); };