sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-08 08:39: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 = "";
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");
return ret;
}
@@ -178,44 +181,47 @@
<span class="media__current-time">
{formatTime(currentTime)}
</span>
<input
type="range"
class="slider media__seek-bar"
class:slider--indeterminate={status.playerState ===
PlayerState.BUFFERING}
aria-label={_("popupMediaSeek")}
max={status.media.duration ?? currentTime}
value={currentTime}
on:change={ev => {
if (seekHoverPosition) {
ev.preventDefault();
return;
}
dispatch("seek", {
position: ev.currentTarget.valueAsNumber
});
}}
on:click={() => {
if (seekHoverPosition && status.media?.duration) {
<div class="media__seek-bar-container">
<input
type="range"
class="slider media__seek-bar"
class:slider--indeterminate={status.playerState ===
PlayerState.BUFFERING}
aria-label={_("popupMediaSeek")}
max={status.media.duration ?? currentTime}
value={currentTime}
on:change={ev => {
if (seekHoverPosition) {
ev.preventDefault();
return;
}
dispatch("seek", {
position:
status.media.duration *
(seekHoverPosition / 100)
position: ev.currentTarget.valueAsNumber
});
}
}}
use:onSeekMouseMove
/>
{#if seekHoverPosition}
<div
class="media__seek-tooltip"
style:--seek-hover-position="{seekHoverPosition}%"
>
{formatTime(
status.media.duration * (seekHoverPosition / 100)
)}
</div>
{/if}
}}
on:click={() => {
if (seekHoverPosition && status.media?.duration) {
dispatch("seek", {
position:
status.media.duration *
(seekHoverPosition / 100)
});
}
}}
use:onSeekMouseMove
/>
{#if seekHoverPosition}
<div
class="media__seek-tooltip"
style:--seek-hover-position="{seekHoverPosition}%"
>
{formatTime(
status.media.duration *
(seekHoverPosition / 100)
)}
</div>
{/if}
</div>
<span class="media__remaining-time">
-{formatTime(status.media.duration - currentTime)}
</span>

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

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