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 }));
};