Merge pull request #52 from Uscreen-video/next

fix(Timeline): hide timeline if duration is 0

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

@@ -22,8 +22,15 @@ 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) =>
-  video.duration === Infinity ? video.seekable.end(0) : video.duration;
+const getVideoDuration = (video: HTMLVideoElement) => {
+  if (video.duration && video.duration !== Infinity) {
+    return video.duration
+  }
+  if (video.seekable.length > 0) {
+    return video.seekable.end(0)
+  }
+  return 0
+}
 
 /**
  * @slot - Video-container main content
@@ -344,7 +351,7 @@ export class VideoContainer extends LitElement {
       case "loadeddata":
         dispatch(this, Types.Action.updateDuration, {
           initialized: true,
-          duration: getVideoDuration(video),
+          duration: getVideoDuration(video)
         });
         break;
       case "ratechange":

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

@@ -1,4 +1,4 @@
-import { unsafeCSS, LitElement, html } from "lit";
+import { unsafeCSS, LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import styles from "./Video-timeline.styles.css?inline";
 import { connect, createCommand } from "../../state";
@@ -129,6 +129,9 @@ export class VideoTimeline extends DependentPropsMixin(LitElement) {
 
   render() {
     const disabled = this.disabled || !this.canPlay;
+
+    if (!this.duration || this.duration === Infinity) return nothing
+
     return html`
       <video-slider
         with-tooltip