fix: blur via visibility (no opacity), raise to 84px, enlarge center icons 50%
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -164,167 +164,165 @@
|
|||||||
aria-label="Player controls"
|
aria-label="Player controls"
|
||||||
>
|
>
|
||||||
<div class="player-controls-panel">
|
<div class="player-controls-panel">
|
||||||
<!-- Controls row (top) -->
|
<div class="panel-content">
|
||||||
<div class="controls-row">
|
<!-- Controls row (top) -->
|
||||||
<!-- Left group: volume -->
|
<div class="controls-row">
|
||||||
<div class="controls-group left">
|
<!-- Left group: volume -->
|
||||||
<button
|
<div class="controls-group left">
|
||||||
class="ctrl-btn vol-btn"
|
<button
|
||||||
onclick={handleToggleMute}
|
class="ctrl-btn vol-btn"
|
||||||
title={isMuted ? 'Unmute' : 'Mute'}
|
onclick={handleToggleMute}
|
||||||
type="button"
|
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>
|
{#if isMuted || volume === 0}<VolumeX size={16} />{:else if volume < 0.5}<Volume1 size={16} />{:else}<Volume2 size={16} />{/if}
|
||||||
<input
|
</button>
|
||||||
type="range"
|
<input
|
||||||
class="vol-slider"
|
type="range"
|
||||||
min="0"
|
class="vol-slider"
|
||||||
max="1"
|
min="0"
|
||||||
step="0.05"
|
max="1"
|
||||||
value={isMuted ? 0 : volume}
|
step="0.05"
|
||||||
oninput={handleVolumeChange}
|
value={isMuted ? 0 : volume}
|
||||||
/>
|
oninput={handleVolumeChange}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Center group: playback -->
|
<!-- Center group: playback -->
|
||||||
<div class="controls-group center">
|
<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">
|
|
||||||
<button
|
<button
|
||||||
class="ctrl-btn"
|
class="ctrl-btn"
|
||||||
onclick={(e) => { e.stopPropagation(); showSpeedSelector = !showSpeedSelector; }}
|
onclick={() => seekBy(-10)}
|
||||||
title="Playback speed"
|
title="Skip back 10s"
|
||||||
type="button"
|
type="button"
|
||||||
>{currentRate}×</button>
|
><Rewind size={24} /></button>
|
||||||
{#if showSpeedSelector}
|
<button
|
||||||
<SpeedSelector
|
class="ctrl-btn play-btn"
|
||||||
{currentRate}
|
onclick={togglePlayPause}
|
||||||
onSelect={handleSpeedSelect}
|
title={session.isPlaying ? 'Pause' : 'Play'}
|
||||||
onClose={() => { showSpeedSelector = false; }}
|
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}
|
{/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
|
<button
|
||||||
class="ctrl-btn"
|
class="ctrl-btn"
|
||||||
class:active={captionsEnabled}
|
class:active={pipActive}
|
||||||
onclick={onToggleCaptions}
|
onclick={handlePiP}
|
||||||
oncontextmenu={handleCCContextMenu}
|
title="Picture-in-Picture"
|
||||||
title={captionsEnabled ? 'Hide captions' : 'Show captions'}
|
|
||||||
type="button"
|
type="button"
|
||||||
><Captions size={16} /></button>
|
><PictureInPicture2 size={16} /></button>
|
||||||
{/if}
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="ctrl-btn"
|
class="ctrl-btn"
|
||||||
class:active={pipActive}
|
class:active={fullscreenActive}
|
||||||
onclick={handlePiP}
|
onclick={handleFullscreen}
|
||||||
title="Picture-in-Picture"
|
title={fullscreenActive ? 'Exit fullscreen' : 'Fullscreen'}
|
||||||
type="button"
|
type="button"
|
||||||
><PictureInPicture2 size={16} /></button>
|
>{#if fullscreenActive}<Minimize size={16} />{:else}<Maximize size={16} />{/if}</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)}
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Timestamps (bottom) -->
|
<!-- Seek bar (middle) -->
|
||||||
<div class="timestamps-row">
|
<div
|
||||||
<span class="time-display">{formatTime(session.currentTime)}</span>
|
class="seek-bar"
|
||||||
<span class="time-display">{formatTime(session.duration)}</span>
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
/* --- Overlay: positioning + pointer-events only, NO opacity --- */
|
||||||
.player-controls-overlay {
|
.player-controls-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 64px;
|
bottom: 84px;
|
||||||
left: 15%;
|
left: 15%;
|
||||||
right: 15%;
|
right: 15%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s ease 0.1s;
|
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-controls-overlay.visible {
|
.player-controls-overlay.visible {
|
||||||
opacity: 1;
|
pointer-events: auto;
|
||||||
transition-delay: 0.1s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Panel: layout shell --- */
|
||||||
.player-controls-panel {
|
.player-controls-panel {
|
||||||
pointer-events: auto;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Blur background — visibility toggle, never opacity-transition */
|
||||||
.player-controls-panel::before {
|
.player-controls-panel::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -334,12 +332,27 @@
|
|||||||
-webkit-backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(20px);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
opacity: 0;
|
visibility: hidden;
|
||||||
transition: opacity 0.25s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-controls-overlay.visible .player-controls-panel::before {
|
.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;
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Seek bar --- */
|
/* --- Seek bar --- */
|
||||||
@@ -457,8 +470,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ctrl-btn.play-btn {
|
.ctrl-btn.play-btn {
|
||||||
font-size: 20px;
|
min-width: 48px;
|
||||||
min-width: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Volume --- */
|
/* --- Volume --- */
|
||||||
|
|||||||
Reference in New Issue
Block a user