sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-12 02:29:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve media controls seek bar styling

Browse Source
This commit is contained in:
hensm
2022-09-09 23:58:44 +01:00
parent 3eba371c5f
commit 12ac28830d
2 changed files with 51 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
ext/src/ui/popup/ReceiverMedia.svelte
View File

@@ -120,7 +120,10 @@
let ret = ""; let ret = "";
if (hours) ret += `${hours}:`; if (hours) ret += `${hours}:`;
ret += `${date.getUTCMinutes().toString().padStart(2, "0")}:`; ret += `${date
.getUTCMinutes()
.toString()
.padStart(hours ? 2 : 1, "0")}:`;
ret += date.getUTCSeconds().toString().padStart(2, "0"); ret += date.getUTCSeconds().toString().padStart(2, "0");
return ret; return ret;
} }
@@ -178,44 +181,47 @@
<span class="media__current-time"> <span class="media__current-time">
{formatTime(currentTime)} {formatTime(currentTime)}
</span> </span>
<input <div class="media__seek-bar-container">
type="range" <input
class="slider media__seek-bar" type="range"
class:slider--indeterminate={status.playerState === class="slider media__seek-bar"
PlayerState.BUFFERING} class:slider--indeterminate={status.playerState ===
aria-label={_("popupMediaSeek")} PlayerState.BUFFERING}
max={status.media.duration ?? currentTime} aria-label={_("popupMediaSeek")}
value={currentTime} max={status.media.duration ?? currentTime}
on:change={ev => { value={currentTime}
if (seekHoverPosition) { on:change={ev => {
ev.preventDefault(); if (seekHoverPosition) {
return; ev.preventDefault();
} return;
dispatch("seek", { }
position: ev.currentTarget.valueAsNumber
});
}}
on:click={() => {
if (seekHoverPosition && status.media?.duration) {
dispatch("seek", { dispatch("seek", {
position: position: ev.currentTarget.valueAsNumber
status.media.duration *
(seekHoverPosition / 100)
}); });
} }}
}} on:click={() => {
use:onSeekMouseMove if (seekHoverPosition && status.media?.duration) {
/> dispatch("seek", {
{#if seekHoverPosition} position:
<div status.media.duration *
class="media__seek-tooltip" (seekHoverPosition / 100)
style:--seek-hover-position="{seekHoverPosition}%" });
> }
{formatTime( }}
status.media.duration * (seekHoverPosition / 100) use:onSeekMouseMove
)} />
</div> {#if seekHoverPosition}
{/if} <div
class="media__seek-tooltip"
style:--seek-hover-position="{seekHoverPosition}%"
>
{formatTime(
status.media.duration *
(seekHoverPosition / 100)
)}
</div>
{/if}
</div>
<span class="media__remaining-time"> <span class="media__remaining-time">
-{formatTime(status.media.duration - currentTime)} -{formatTime(status.media.duration - currentTime)}
</span> </span>

24
ext/src/ui/popup/styles/index.css
View File

@@ -193,18 +193,18 @@ body {
.media__seek { .media__seek {
align-items: center; align-items: center;
display: grid; display: flex;
grid-template-columns: min-content auto 1fr auto; gap: 10px;
grid-template-areas: "live current-time seek-bar remaining-time";
min-height: 24px; min-height: 24px;
width: 100%; width: 100%;
} }
.media__seek > :not(:last-child) { .media__seek-bar-container {
margin-inline-end: 10px; display: flex;
flex: 1;
position: relative;
} }
.media__seek-bar { .media__seek-bar {
flex: 1; flex: 1;
grid-area: seek-bar;
} }
.media__seek-tooltip { .media__seek-tooltip {
--tooltip-color: var(--button-background); --tooltip-color: var(--button-background);
@@ -213,13 +213,12 @@ body {
background-color: var(--tooltip-color); background-color: var(--tooltip-color);
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
grid-area: seek-bar;
justify-self: start;
left: var(--seek-hover-position); left: var(--seek-hover-position);
padding: 2px 5px; padding: 2px 5px;
padding-bottom: 3px; padding-bottom: 3px;
top: 0;
pointer-events: none; pointer-events: none;
position: relative; position: absolute;
transform: translate( transform: translate(
-50%, -50%,
calc( calc(
@@ -238,17 +237,10 @@ body {
transform: translate(-50%, 100%); transform: translate(-50%, 100%);
} }
.media__current-time {
grid-area: current-time;
}
.media__remaining-time {
grid-area: remaining-time;
}
.media__current-time, .media__current-time,
.media__remaining-time { .media__remaining-time {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-align: center; text-align: center;
width: 5ch;
} }
.media__live { .media__live {