Hide seek bar on non-seekable live streams

This commit is contained in:
hensm
2022-08-24 22:23:38 +01:00
parent 33eb76b84d
commit 8db4df0ed8

View File

@@ -31,6 +31,9 @@
status.playerState === PlayerState.PLAYING || status.playerState === PlayerState.PLAYING ||
status.playerState === PlayerState.PAUSED; status.playerState === PlayerState.PAUSED;
$: hasDuration = status.media?.duration && status.media?.duration > 0;
$: isLive = status.supportedMediaCommands & _MediaCommand.SEEK;
let mediaTitle: Optional<string>; let mediaTitle: Optional<string>;
let mediaSubtitle: Optional<string>; let mediaSubtitle: Optional<string>;
let mediaImage: Optional<Image>; let mediaImage: Optional<Image>;
@@ -152,8 +155,8 @@
let ret = ""; let ret = "";
if (hours) ret += `${hours}:`; if (hours) ret += `${hours}:`;
ret += `${date.getUTCMinutes()}:`; ret += `${date.getUTCMinutes().toString().padStart(2, "0")}:`;
ret += `${date.getUTCSeconds()}`.padStart(2, "0"); ret += date.getUTCSeconds().toString().padStart(2, "0");
return ret; return ret;
} }
</script> </script>
@@ -174,7 +177,7 @@
<div class="media__controls"> <div class="media__controls">
<!-- Seek bar --> <!-- Seek bar -->
{#if status.media && status.media?.duration} {#if status.media && status.media?.duration && hasDuration && isLive}
<div class="media__seek"> <div class="media__seek">
{#if status.media?.streamType === StreamType.LIVE} {#if status.media?.streamType === StreamType.LIVE}
<span class="media__live"> <span class="media__live">
@@ -184,34 +187,22 @@
<span class="media__current-time"> <span class="media__current-time">
{formatTime(currentTime)} {formatTime(currentTime)}
</span> </span>
{#if status.supportedMediaCommands & _MediaCommand.SEEK} <input
<input type="range"
type="range" class="slider media__seek-bar"
class="slider media__seek-bar" class:slider--indeterminate={status.playerState ===
class:slider--indeterminate={status.playerState === PlayerState.BUFFERING}
PlayerState.BUFFERING} aria-label={_("popupMediaSeek")}
aria-label={_("popupMediaSeek")} max={status.media.duration ?? currentTime}
max={status.media.duration ?? currentTime} value={currentTime}
value={currentTime} on:change={ev =>
on:change={ev => dispatch("seek", {
dispatch("seek", { position: ev.currentTarget.valueAsNumber
position: ev.currentTarget.valueAsNumber })}
})} />
/> <span class="media__remaining-time">
{:else} -{formatTime(status.media?.duration - currentTime)}
<progress </span>
class="slider media__seek-bar"
class:slider--indeterminate={status.playerState ===
PlayerState.BUFFERING}
max={status.media.duration ?? currentTime}
value={currentTime}
/>
{/if}
{#if status.media.duration}
<span class="media__remaining-time">
-{formatTime(status.media?.duration - currentTime)}
</span>
{/if}
</div> </div>
{/if} {/if}
@@ -305,16 +296,9 @@
</select> </select>
{/if} {/if}
<!-- Current time for unseekable live streams since seek bar {#if !(status.supportedMediaCommands & _MediaCommand.SEEK) && isLive}
is unnecessary --> <span class="media__live">
{#if isPlayingOrPaused && !status.media?.duration} {_("popupMediaLive")}
{#if status.media?.streamType === StreamType.LIVE}
<span class="media__live">
{_("popupMediaLive")}
</span>
{/if}
<span class="media__current-time">
{formatTime(currentTime)}
</span> </span>
{/if} {/if}