2020-02-15 23:10:03 +01:00
|
|
|
<div class="playerProgress">
|
|
|
|
<div class="playerProgress__progress">
|
|
|
|
<div class="playerProgress__progressBg"></div>
|
|
|
|
<div class="playerProgress__progressBgProgress" style="width:{currentPercent}%;"></div>
|
|
|
|
<input
|
|
|
|
class="playerProgress__progressInput"
|
|
|
|
type="range"
|
|
|
|
min="0"
|
2020-02-15 23:54:32 +01:00
|
|
|
max={max}
|
|
|
|
value={value}
|
2020-02-15 23:10:03 +01:00
|
|
|
on:input
|
|
|
|
on:change
|
2020-02-24 23:18:51 +01:00
|
|
|
disabled={disabled}
|
2020-02-15 23:10:03 +01:00
|
|
|
>
|
|
|
|
</div>
|
|
|
|
<div class="playerProgress__timecode">
|
2020-02-16 20:51:13 +01:00
|
|
|
<div class="playerProgress__timecodeItem" class:placeholder={!ready}>{currentTimeText}</div>
|
|
|
|
<div class="playerProgress__timecodeItem" class:placeholder={!ready}>{durationText}</div>
|
2020-02-15 23:10:03 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
2020-02-15 23:54:32 +01:00
|
|
|
import { secondsToElapsedTime } from '/services/misc.js'
|
|
|
|
|
2020-02-16 20:51:13 +01:00
|
|
|
export let ready
|
2020-02-24 23:18:51 +01:00
|
|
|
export let currentTime
|
|
|
|
export let duration
|
2020-02-15 23:10:03 +01:00
|
|
|
|
2020-02-15 23:54:32 +01:00
|
|
|
$: value = currentTime != null ? currentTime : 0
|
2020-02-24 23:18:51 +01:00
|
|
|
$: max = duration != null ? duration : 0
|
|
|
|
$: disabled = currentTime == null || duration == null
|
|
|
|
|
2020-02-15 23:54:32 +01:00
|
|
|
$: currentTimeText = currentTime != null ? secondsToElapsedTime(currentTime) : '--:--'
|
|
|
|
$: durationText = duration != null ? secondsToElapsedTime(duration) : '--:--'
|
2020-02-24 23:18:51 +01:00
|
|
|
|
|
|
|
$: currentPercent = currentTime != null ? (currentTime / duration) * 100 : 0
|
2020-02-15 23:10:03 +01:00
|
|
|
</script>
|