From faa3ae1db898668faa5a8f94960fe4fd62d93a53 Mon Sep 17 00:00:00 2001
From: THaenlein <tim_24398@gmx.de>
Date: Sat, 9 May 2026 12:47:14 +0200
Subject: [PATCH] Skip button styling and focus behavior

---
 src/routes/Player/Player.js   | 19 +++++++++++++++++--
 src/routes/Player/styles.less | 10 +++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 9ca5505a7..d850f9ef4 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -133,6 +133,8 @@ const Player = ({ urlParams, queryParams }) => {
     const pressTimer = React.useRef(null);
     const longPress = React.useRef(false);
     const controlBarRef = React.useRef(null);
+    const skipSegmentButtonRef = React.useRef(null);
+    const skipSegmentVisibleRef = React.useRef(false);
 
     const HOLD_DELAY = 400;
 
@@ -261,6 +263,7 @@ const Player = ({ urlParams, queryParams }) => {
             onSeekRequested(activeSkippableSegment.to);
         }
     }, [activeSkippableSegment, onSeekRequested]);
+    const skipSegmentVisible = activeSkippableSegment !== null && !menusOpen && skipSegmentButtonLabel !== null;
 
     const onPlaybackSpeedChanged = React.useCallback((rate, skipUpdate) => {
         video.setPlaybackSpeed(rate);
@@ -588,6 +591,14 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [settings.pauseOnMinimize, shell.windowClosed, shell.windowHidden]);
 
+    React.useEffect(() => {
+        if (skipSegmentVisible && !skipSegmentVisibleRef.current) {
+            skipSegmentButtonRef.current?.focus();
+        }
+
+        skipSegmentVisibleRef.current = skipSegmentVisible;
+    }, [skipSegmentVisible]);
+
     useMediaSession(video.state, player, onPlayRequested, onPauseRequested, onNextVideoRequested);
 
     React.useEffect(() => {
@@ -948,9 +959,13 @@ const Player = ({ urlParams, queryParams }) => {
                 onTouchEnd={onContainerMouseLeave}
             />
             {
-                activeSkippableSegment !== null && !menusOpen && skipSegmentButtonLabel !== null ?
+                skipSegmentVisible ?
                     <div className={classnames(styles['layer'], styles['skip-segment-layer'])}>
-                        <Button className={styles['skip-segment-button']} onClick={onSkipSegmentRequested}>
+                        <Button
+                            ref={skipSegmentButtonRef}
+                            className={styles['skip-segment-button']}
+                            onClick={onSkipSegmentRequested}
+                        >
                             {skipSegmentButtonLabel}
                         </Button>
                     </div>
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index b578bd665..16623d8a5 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -135,9 +135,13 @@ html:not(.active-slider-within) {
                 padding: 1rem 1.6rem;
                 font-weight: 700;
                 color: var(--primary-foreground-color);
-                background-color: var(--modal-background-color);
-                box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
-                    0 1.1rem 0.85rem @color-background-dark5-20;
+                background-color: var(--primary-accent-color);
+                transition: background-color 120ms ease-in;
+
+                &:hover, &:focus {
+                    outline: var(--focus-outline-size) solid var(--primary-accent-color);
+                    background-color: transparent;
+                }
             }
         }