fix: blur via visibility (no opacity), raise to 84px, enlarge center icons 50%

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/components/PlayerControls.svelte

@@ -164,167 +164,165 @@
   aria-label="Player controls"
 >
   <div class="player-controls-panel">
-    <!-- Controls row (top) -->
-    <div class="controls-row">
-      <!-- Left group: volume -->
-      <div class="controls-group left">
-        <button
-          class="ctrl-btn vol-btn"
-          onclick={handleToggleMute}
-          title={isMuted ? 'Unmute' : 'Mute'}
-          type="button"
-        >
-          {#if isMuted || volume === 0}<VolumeX size={16} />{:else if volume < 0.5}<Volume1 size={16} />{:else}<Volume2 size={16} />{/if}
-        </button>
-        <input
-          type="range"
-          class="vol-slider"
-          min="0"
-          max="1"
-          step="0.05"
-          value={isMuted ? 0 : volume}
-          oninput={handleVolumeChange}
-        />
-      </div>
+    <div class="panel-content">
+      <!-- Controls row (top) -->
+      <div class="controls-row">
+        <!-- Left group: volume -->
+        <div class="controls-group left">
+          <button
+            class="ctrl-btn vol-btn"
+            onclick={handleToggleMute}
+            title={isMuted ? 'Unmute' : 'Mute'}
+            type="button"
+          >
+            {#if isMuted || volume === 0}<VolumeX size={16} />{:else if volume < 0.5}<Volume1 size={16} />{:else}<Volume2 size={16} />{/if}
+          </button>
+          <input
+            type="range"
+            class="vol-slider"
+            min="0"
+            max="1"
+            step="0.05"
+            value={isMuted ? 0 : volume}
+            oninput={handleVolumeChange}
+          />
+        </div>
 
-      <!-- Center group: playback -->
-      <div class="controls-group center">
-        <button
-          class="ctrl-btn"
-          onclick={() => seekBy(-10)}
-          title="Skip back 10s"
-          type="button"
-        ><Rewind size={16} /></button>
-        <button
-          class="ctrl-btn play-btn"
-          onclick={togglePlayPause}
-          title={session.isPlaying ? 'Pause' : 'Play'}
-          type="button"
-        >{#if session.isPlaying}<Pause size={18} />{:else}<Play size={18} />{/if}</button>
-        <button
-          class="ctrl-btn"
-          onclick={() => seekBy(10)}
-          title="Skip forward 10s"
-          type="button"
-        ><FastForward size={16} /></button>
-      </div>
-
-      <!-- Right group: settings -->
-      <div class="controls-group right">
-        <div class="speed-wrapper">
+        <!-- Center group: playback -->
+        <div class="controls-group center">
           <button
             class="ctrl-btn"
-            onclick={(e) => { e.stopPropagation(); showSpeedSelector = !showSpeedSelector; }}
-            title="Playback speed"
+            onclick={() => seekBy(-10)}
+            title="Skip back 10s"
             type="button"
-          >{currentRate}×</button>
-          {#if showSpeedSelector}
-            <SpeedSelector
-              {currentRate}
-              onSelect={handleSpeedSelect}
-              onClose={() => { showSpeedSelector = false; }}
-            />
+          ><Rewind size={24} /></button>
+          <button
+            class="ctrl-btn play-btn"
+            onclick={togglePlayPause}
+            title={session.isPlaying ? 'Pause' : 'Play'}
+            type="button"
+          >{#if session.isPlaying}<Pause size={27} />{:else}<Play size={27} />{/if}</button>
+          <button
+            class="ctrl-btn"
+            onclick={() => seekBy(10)}
+            title="Skip forward 10s"
+            type="button"
+          ><FastForward size={24} /></button>
+        </div>
+
+        <!-- Right group: settings -->
+        <div class="controls-group right">
+          <div class="speed-wrapper">
+            <button
+              class="ctrl-btn"
+              onclick={(e) => { e.stopPropagation(); showSpeedSelector = !showSpeedSelector; }}
+              title="Playback speed"
+              type="button"
+            >{currentRate}×</button>
+            {#if showSpeedSelector}
+              <SpeedSelector
+                {currentRate}
+                onSelect={handleSpeedSelect}
+                onClose={() => { showSpeedSelector = false; }}
+              />
+            {/if}
+          </div>
+
+          <button
+            class="ctrl-btn"
+            onclick={() => onCutClip('at')}
+            oncontextmenu={(e) => { e.preventDefault(); onCutClip('before'); }}
+            title="Cut clip at playhead (X) · Right-click: 10s before (Z)"
+            type="button"
+          ><Scissors size={16} /></button>
+
+          {#if hasCaptions}
+            <button
+              class="ctrl-btn"
+              class:active={captionsEnabled}
+              onclick={onToggleCaptions}
+              oncontextmenu={handleCCContextMenu}
+              title={captionsEnabled ? 'Hide captions' : 'Show captions'}
+              type="button"
+            ><Captions size={16} /></button>
           {/if}
-        </div>
 
-        <button
-          class="ctrl-btn"
-          onclick={() => onCutClip('at')}
-          oncontextmenu={(e) => { e.preventDefault(); onCutClip('before'); }}
-          title="Cut clip at playhead (X) · Right-click: 10s before (Z)"
-          type="button"
-        ><Scissors size={16} /></button>
-
-        {#if hasCaptions}
           <button
             class="ctrl-btn"
-            class:active={captionsEnabled}
-            onclick={onToggleCaptions}
-            oncontextmenu={handleCCContextMenu}
-            title={captionsEnabled ? 'Hide captions' : 'Show captions'}
+            class:active={pipActive}
+            onclick={handlePiP}
+            title="Picture-in-Picture"
             type="button"
-          ><Captions size={16} /></button>
-        {/if}
+          ><PictureInPicture2 size={16} /></button>
 
-        <button
-          class="ctrl-btn"
-          class:active={pipActive}
-          onclick={handlePiP}
-          title="Picture-in-Picture"
-          type="button"
-        ><PictureInPicture2 size={16} /></button>
-
-        <button
-          class="ctrl-btn"
-          class:active={fullscreenActive}
-          onclick={handleFullscreen}
-          title={fullscreenActive ? 'Exit fullscreen' : 'Fullscreen'}
-          type="button"
-        >{#if fullscreenActive}<Minimize size={16} />{:else}<Maximize size={16} />{/if}</button>
-      </div>
-    </div>
-
-    <!-- Seek bar (middle) -->
-    <div
-      class="seek-bar"
-      bind:this={seekBarEl}
-      onmousedown={handleSeekBarMouseDown}
-      onmousemove={handleSeekBarMouseMove}
-      onmouseup={handleSeekBarMouseUp}
-      onmouseleave={handleSeekBarMouseLeave}
-      role="slider"
-      tabindex="0"
-      aria-label="Seek"
-      aria-valuenow={session.currentTime}
-      aria-valuemin={0}
-      aria-valuemax={session.duration}
-    >
-      <div class="seek-track">
-        <div class="seek-fill" style="width: {progress * 100}%"></div>
-        <div class="seek-thumb" style="left: {progress * 100}%"></div>
-      </div>
-      {#if hoverTime !== null}
-        <div class="seek-tooltip" style="left: {hoverX}px">
-          {formatTime(hoverTime)}
+          <button
+            class="ctrl-btn"
+            class:active={fullscreenActive}
+            onclick={handleFullscreen}
+            title={fullscreenActive ? 'Exit fullscreen' : 'Fullscreen'}
+            type="button"
+          >{#if fullscreenActive}<Minimize size={16} />{:else}<Maximize size={16} />{/if}</button>
         </div>
-      {/if}
-    </div>
+      </div>
 
-    <!-- Timestamps (bottom) -->
-    <div class="timestamps-row">
-      <span class="time-display">{formatTime(session.currentTime)}</span>
-      <span class="time-display">{formatTime(session.duration)}</span>
+      <!-- Seek bar (middle) -->
+      <div
+        class="seek-bar"
+        bind:this={seekBarEl}
+        onmousedown={handleSeekBarMouseDown}
+        onmousemove={handleSeekBarMouseMove}
+        onmouseup={handleSeekBarMouseUp}
+        onmouseleave={handleSeekBarMouseLeave}
+        role="slider"
+        tabindex="0"
+        aria-label="Seek"
+        aria-valuenow={session.currentTime}
+        aria-valuemin={0}
+        aria-valuemax={session.duration}
+      >
+        <div class="seek-track">
+          <div class="seek-fill" style="width: {progress * 100}%"></div>
+          <div class="seek-thumb" style="left: {progress * 100}%"></div>
+        </div>
+        {#if hoverTime !== null}
+          <div class="seek-tooltip" style="left: {hoverX}px">
+            {formatTime(hoverTime)}
+          </div>
+        {/if}
+      </div>
+
+      <!-- Timestamps (bottom) -->
+      <div class="timestamps-row">
+        <span class="time-display">{formatTime(session.currentTime)}</span>
+        <span class="time-display">{formatTime(session.duration)}</span>
+      </div>
     </div>
   </div>
 </div>
 
 <style>
+  /* --- Overlay: positioning + pointer-events only, NO opacity --- */
   .player-controls-overlay {
     position: absolute;
-    bottom: 64px;
+    bottom: 84px;
     left: 15%;
     right: 15%;
     pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.2s ease 0.1s;
     z-index: 20;
   }
 
   .player-controls-overlay.visible {
-    opacity: 1;
-    transition-delay: 0.1s;
+    pointer-events: auto;
   }
 
+  /* --- Panel: layout shell --- */
   .player-controls-panel {
-    pointer-events: auto;
     position: relative;
     border-radius: 12px;
     padding: 12px 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
   }
 
+  /* Blur background — visibility toggle, never opacity-transition */
   .player-controls-panel::before {
     content: '';
     position: absolute;
@@ -334,12 +332,27 @@
     -webkit-backdrop-filter: blur(20px);
     border-radius: 12px;
     z-index: -1;
-    opacity: 0;
-    transition: opacity 0.25s ease;
+    visibility: hidden;
   }
 
   .player-controls-overlay.visible .player-controls-panel::before {
+    visibility: visible;
+  }
+
+  /* Content wrapper — fade + slide animation */
+  .panel-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    opacity: 0;
+    transform: translateY(6px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  .player-controls-overlay.visible .panel-content {
     opacity: 1;
+    transform: translateY(0);
   }
 
   /* --- Seek bar --- */
@@ -457,8 +470,7 @@
   }
 
   .ctrl-btn.play-btn {
-    font-size: 20px;
-    min-width: 40px;
+    min-width: 48px;
   }
 
   /* --- Volume --- */