From 4d44e4d7b069afcb34d8bdcf79cf1df717f05f98 Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Fri, 22 May 2026 11:48:58 +0200
Subject: [PATCH] feat(chapters): add ChapterTicks slider overlay

---
 components/chapters/ChapterTicks.tsx | 48 ++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 components/chapters/ChapterTicks.tsx

diff --git a/components/chapters/ChapterTicks.tsx b/components/chapters/ChapterTicks.tsx
new file mode 100644
index 00000000..8e6571ea
--- /dev/null
+++ b/components/chapters/ChapterTicks.tsx
@@ -0,0 +1,48 @@
+/**
+ * Chapter tick marks drawn as an absolute overlay over a progress slider.
+ * Renders nothing for media with one or zero chapters. `pointerEvents: "none"`
+ * so the slider underneath still receives touches.
+ */
+
+import type { ChapterInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { View } from "react-native";
+import { chapterMarkers } from "@/utils/chapters";
+
+interface ChapterTicksProps {
+  chapters: ChapterInfo[] | null | undefined;
+  /** Total media duration in milliseconds. */
+  durationMs: number;
+  /** Tick colour. */
+  color?: string;
+}
+
+export function ChapterTicks({
+  chapters,
+  durationMs,
+  color = "#fff",
+}: ChapterTicksProps) {
+  const markers = chapterMarkers(chapters, durationMs);
+  // One chapter (typically a single marker at 0) is not worth marking.
+  if (markers.length <= 1) return null;
+
+  return (
+    <View
+      pointerEvents='none'
+      style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}
+    >
+      {markers.map((marker) => (
+        <View
+          key={marker.positionMs}
+          style={{
+            position: "absolute",
+            left: `${marker.percent}%`,
+            top: "25%",
+            height: "50%",
+            width: 2,
+            backgroundColor: color,
+          }}
+        />
+      ))}
+    </View>
+  );
+}