From 996239e029928b5d70e787badfdd6c07a4889927 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Fri, 29 May 2026 10:02:32 +1000
Subject: [PATCH] fix(skin): prevent initial pause icon flash (#1622)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/skins/src/shared/css/audio/icon-state.css |  7 ++++---
 packages/skins/src/shared/css/video/icon-state.css |  7 ++++---
 packages/skins/src/shared/tailwind/icon-state.ts   | 10 ++++++++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/skins/src/shared/css/audio/icon-state.css b/packages/skins/src/shared/css/audio/icon-state.css
index fc82c090..b56a0000 100644
--- a/packages/skins/src/shared/css/audio/icon-state.css
+++ b/packages/skins/src/shared/css/audio/icon-state.css
@@ -22,10 +22,11 @@
 
 /* Play: ended → restart */
 .media-button--play[data-ended] .media-icon--restart,
-/* Play: paused (not ended) → play */
+/* Play: paused or not yet started (not ended) → play */
 .media-button--play:not([data-ended])[data-paused] .media-icon--play,
-/* Play: playing (not paused, not ended) → pause */
-.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,
+.media-button--play:not([data-ended]):not([data-started]) .media-icon--play,
+/* Play: started and not paused/ended → pause */
+.media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause,
 /* Mute: muted → volume off */
 .media-button--mute[data-muted] .media-icon--volume-off,
 /* Mute: volume low (not muted) → volume low */
diff --git a/packages/skins/src/shared/css/video/icon-state.css b/packages/skins/src/shared/css/video/icon-state.css
index 04584c62..a91e76c6 100644
--- a/packages/skins/src/shared/css/video/icon-state.css
+++ b/packages/skins/src/shared/css/video/icon-state.css
@@ -32,10 +32,11 @@
 
 /* Play: ended → restart */
 .media-button--play[data-ended] .media-icon--restart,
-/* Play: paused (not ended) → play */
+/* Play: paused or not yet started (not ended) → play */
 .media-button--play:not([data-ended])[data-paused] .media-icon--play,
-/* Play: playing (not paused, not ended) → pause */
-.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,
+.media-button--play:not([data-ended]):not([data-started]) .media-icon--play,
+/* Play: started and not paused/ended → pause */
+.media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause,
 /* Mute: muted → volume off */
 .media-button--mute[data-muted] .media-icon--volume-off,
 /* Mute: volume low (not muted) → volume low */
diff --git a/packages/skins/src/shared/tailwind/icon-state.ts b/packages/skins/src/shared/tailwind/icon-state.ts
index 37b7802d..48b5e903 100644
--- a/packages/skins/src/shared/tailwind/icon-state.ts
+++ b/packages/skins/src/shared/tailwind/icon-state.ts
@@ -6,9 +6,15 @@ export const iconState = {
   play: {
     button: 'group',
     restart: 'hidden opacity-0 group-data-ended:block group-data-ended:opacity-100',
-    play: 'hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100',
+    play: [
+      'hidden opacity-0',
+      'group-not-data-ended:group-data-paused:block',
+      'group-not-data-ended:group-data-paused:opacity-100',
+      'group-not-data-ended:group-not-data-started:block',
+      'group-not-data-ended:group-not-data-started:opacity-100',
+    ].join(' '),
     pause:
-      'hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100',
+      'hidden opacity-0 group-data-started:group-not-data-paused:group-not-data-ended:block group-data-started:group-not-data-paused:group-not-data-ended:opacity-100',
   },
   mute: {
     button: 'group',