sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-12 18:39:58 +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

10
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,6 +181,7 @@
<span class="media__current-time"> <span class="media__current-time">
{formatTime(currentTime)} {formatTime(currentTime)}
</span> </span>
<div class="media__seek-bar-container">
<input <input
type="range" type="range"
class="slider media__seek-bar" class="slider media__seek-bar"
@@ -212,10 +216,12 @@
style:--seek-hover-position="{seekHoverPosition}%" style:--seek-hover-position="{seekHoverPosition}%"
> >
{formatTime( {formatTime(
status.media.duration * (seekHoverPosition / 100) status.media.duration *
(seekHoverPosition / 100)
)} )}
</div> </div>
{/if} {/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 {