fix(Timeline): hide timeline if duration is 0

Uscreen-video · Jul 1, 2024 · 8727af3 · 8727af3
1 parent c0b0254
commit 8727af3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/components/video-container/Video-container.component.ts b/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

diff --git a/src/components/video-timeline/Video-timeline.component.ts b/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) return nothing
+
     return html`
       <video-slider
         with-tooltip