From af03650ea81a5c7af58a90e84353d5b13048d4d5 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Tue, 8 Oct 2024 14:50:20 -0500
Subject: [PATCH] fix: sticky chapter on mouseout fix #999

---
 src/js/media-chrome-range.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/js/media-chrome-range.ts b/src/js/media-chrome-range.ts
index eff651db9..768f7f343 100644
--- a/src/js/media-chrome-range.ts
+++ b/src/js/media-chrome-range.ts
@@ -1,7 +1,6 @@
 import { MediaStateReceiverAttributes } from './constants.js';
 import { globalThis, document } from './utils/server-safe-globals.js';
 import {
-  insertCSSRule,
   getOrInsertCSSRule,
   getPointProgressOnLine,
 } from './utils/element-utils.js';
@@ -388,6 +387,10 @@ class MediaChromeRange extends globalThis.HTMLElement {
     this.#cssRules.pointer = getOrInsertCSSRule(this.shadowRoot, '#pointer');
     this.#cssRules.progress = getOrInsertCSSRule(this.shadowRoot, '#progress');
     this.#cssRules.thumb = getOrInsertCSSRule(this.shadowRoot, '#thumb');
+    this.#cssRules.activeSegment = getOrInsertCSSRule(
+      this.shadowRoot,
+      '#segments-clipping rect:nth-child(0)'
+    );
 
     const mediaControllerId = this.getAttribute(
       MediaStateReceiverAttributes.MEDIA_CONTROLLER
@@ -448,11 +451,6 @@ class MediaChromeRange extends globalThis.HTMLElement {
 
     if (!segments?.length) return;
 
-    this.#cssRules.activeSegment = insertCSSRule(
-      this.shadowRoot,
-      '#segments-clipping rect:nth-child(0)'
-    );
-
     const normalized = [
       ...new Set([
         +this.range.min,