diff --git a/src/components/video-container/Video-container.component.ts b/src/components/video-container/Video-container.component.ts index 2e95841..8a2ce08 100644 --- 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 @@ -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": diff --git a/src/components/video-timeline/Video-timeline.component.ts b/src/components/video-timeline/Video-timeline.component.ts index 8eaa695..d403e91 100644 --- 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 || this.duration === Infinity) return nothing + return html`