fix(Timeline): show loading state if not played but duration is infinity

src/components/video-container/Video-container.component.ts

@@ -22,14 +22,14 @@ import { sourcesController, SourcesController } from "./sources";
 const INIT_NATIVE_HLS_RE = /^((?!chrome|android).)*safari/i;
 
 // In Safari on live streams video.duration = Infinity
-const getVideoDuration = (video: HTMLVideoElement) => {
+const getVideoDuration = (video: HTMLVideoElement): number => {
   if (video.duration && video.duration !== Infinity) {
     return video.duration
   }
   if (video.seekable.length > 0) {
     return video.seekable.end(0)
   }
-  return 0
+  return Infinity
 }
 
 /**

src/components/video-timeline/Video-timeline.component.ts

@@ -71,6 +71,9 @@ export class VideoTimeline extends DependentPropsMixin(LitElement) {
   @state()
   currentTime = 0;
 
+  @connect('played')
+  played: boolean
+
   @state()
   currentValue = 0;
 
@@ -128,9 +131,9 @@ export class VideoTimeline extends DependentPropsMixin(LitElement) {
   };
 
   render() {
-    const disabled = this.disabled || !this.canPlay;
+    const disabled = this.disabled || !this.canPlay || this.duration === Infinity;
 
-    if (!this.duration || this.duration === Infinity) return nothing
+    if (this.duration === Infinity && this.played) return nothing
 
     return html`
       <video-slider
@@ -145,7 +148,7 @@ export class VideoTimeline extends DependentPropsMixin(LitElement) {
           : timeAsString(this.currentValue)}"
         ?disabled=${disabled}
         ?full=${this.live}
-        ?loading=${!this.canPlay}
+        ?loading=${!this.canPlay || this.duration === Infinity}
         @changed=${this.handleChanged}
         @hovering=${this.handleHover}
         @hoverend=${this.handleHoverEnd}

src/components/video-timer/Video-timer.component.ts

@@ -24,6 +24,7 @@ export class VideoTimer extends LitElement {
   currentTime: number;
 
   get time() {
+    if (this.duration === Infinity) return 0
     if (this.format === "left") return this.duration - this.currentTime;
     if (this.format === "past") return this.currentTime;
     return this.duration;