fix(chapters): address review comments - null starts, ticksToMs, a11y, memoize

components/chapters/ChapterList.tsx

@@ -72,13 +72,18 @@ export function ChapterList({
             <Text style={{ color: "#fff", fontSize: 17, fontWeight: "700" }}>
               {t("chapters.title")}
             </Text>
-            <Pressable onPress={onClose} hitSlop={10}>
+            <Pressable
+              onPress={onClose}
+              hitSlop={10}
+              accessibilityRole='button'
+              accessibilityLabel={t("chapters.close")}
+            >
               <Ionicons name='close' size={24} color='#fff' />
             </Pressable>
           </View>
           <FlatList
             data={entries}
-            keyExtractor={(_, i) => String(i)}
+            keyExtractor={(item, index) => `${item.positionMs}-${index}`}
             renderItem={({ item, index }) => {
               const positionMs = item.positionMs;
               const isActive = index === activeIndex;

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<BottomControlsProps> = ({
   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 (
     <View
@@ -155,6 +161,9 @@ export const BottomControls: FC<BottomControlsProps> = ({
               onPress={() => setChapterListVisible(true)}
               hitSlop={10}
               className='justify-center'
+              accessibilityRole='button'
+              accessibilityLabel={t("chapters.open")}
+              style={{ marginBottom: 6 }}
             >
               <Ionicons name='list' size={24} color='white' />
             </Pressable>

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",

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", () => {

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