From 106b37df030e66dbce11806a5655ede7525d4558 Mon Sep 17 00:00:00 2001 From: Justin Wong <46082645+uvjustin@users.noreply.github.com> Date: Tue, 29 Sep 2020 19:03:41 +0800 Subject: [PATCH 1/8] Reenable exoplayer in more-info-camera --- src/components/ha-hls-player.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts index b613a5ad0572..9ba2374aa77e 100644 --- a/src/components/ha-hls-player.ts +++ b/src/components/ha-hls-player.ts @@ -12,6 +12,7 @@ import { } from "lit-element"; import { fireEvent } from "../common/dom/fire_event"; import { nextRender } from "../common/util/render-status"; +import { getExternalConfig } from "../external_app/external_config"; import type { HomeAssistant } from "../types"; type HLSModule = typeof import("hls.js"); @@ -34,8 +35,7 @@ class HaHLSPlayer extends LitElement { @property({ type: Boolean, attribute: "playsinline" }) public playsInline = false; - @property({ type: Boolean, attribute: "allow-exoplayer" }) - public allowExoPlayer = false; + @property({ attribute: false }) public allowExoPlayer = false; @query("video") private _videoEl!: HTMLVideoElement; @@ -93,7 +93,11 @@ class HaHLSPlayer extends LitElement { } private async _getUseExoPlayer(): Promise { - return false; + if (!this.hass!.auth.external || !this.allowExoPlayer) { + return false; + } + const externalConfig = await getExternalConfig(this.hass!.auth.external); + return externalConfig && externalConfig.hasExoPlayer; } private async _startHls(): Promise { From 51c7a217d2c82c0e5a4547b11205f5431497711f Mon Sep 17 00:00:00 2001 From: Justin Wong <46082645+uvjustin@users.noreply.github.com> Date: Wed, 30 Sep 2020 11:28:16 +0800 Subject: [PATCH 2/8] Keep allow-exoplayer attribute on ha-hls-player --- src/components/ha-hls-player.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts index 9ba2374aa77e..abe81c07fa60 100644 --- a/src/components/ha-hls-player.ts +++ b/src/components/ha-hls-player.ts @@ -35,7 +35,8 @@ class HaHLSPlayer extends LitElement { @property({ type: Boolean, attribute: "playsinline" }) public playsInline = false; - @property({ attribute: false }) public allowExoPlayer = false; + @property({ type: Boolean, attribute: "allow-exoplayer" }) + public allowExoPlayer = false; @query("video") private _videoEl!: HTMLVideoElement; From b4339878d37caf93b2d5e85ca48da25c2cde5563 Mon Sep 17 00:00:00 2001 From: Justin Wong <46082645+uvjustin@users.noreply.github.com> Date: Wed, 30 Sep 2020 11:28:56 +0800 Subject: [PATCH 3/8] Use exoplayer only on H.265 --- src/components/ha-hls-player.ts | 40 +++++++++++++++++---------------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts index abe81c07fa60..8d39111c68f5 100644 --- a/src/components/ha-hls-player.ts +++ b/src/components/ha-hls-player.ts @@ -102,30 +102,32 @@ class HaHLSPlayer extends LitElement { } private async _startHls(): Promise { - let hls: any; const videoEl = this._videoEl; - this._useExoPlayer = await this._getUseExoPlayer(); - if (!this._useExoPlayer) { - hls = ((await import(/* webpackChunkName: "hls.js" */ "hls.js")) as any) - .default as HLSModule; - let hlsSupported = hls.isSupported(); - - if (!hlsSupported) { - hlsSupported = - videoEl.canPlayType("application/vnd.apple.mpegurl") !== ""; - } + const url = this.url; + const useExoPlayerPromise = this._getUseExoPlayer(); + const masterPlaylistPromise = await fetch(url); - if (!hlsSupported) { - this._videoEl.innerHTML = this.hass.localize( - "ui.components.media-browser.video_not_supported" - ); - return; - } + const hls = ((await import( + /* webpackChunkName: "hls.js" */ "hls.js" + )) as any).default as HLSModule; + let hlsSupported = hls.isSupported(); + + if (!hlsSupported) { + hlsSupported = + videoEl.canPlayType("application/vnd.apple.mpegurl") !== ""; } - const url = this.url; + if (!hlsSupported) { + this._videoEl.innerHTML = this.hass.localize( + "ui.components.media-browser.video_not_supported" + ); + return; + } - if (this._useExoPlayer) { + this._useExoPlayer = await useExoPlayerPromise; + const hevcRegexp = /CODECS=".*?((hev1)|(hvc1))\..*?"/; + const masterPlaylist = await masterPlaylistPromise.text(); + if (hevcRegexp.test(masterPlaylist) && this._useExoPlayer) { this._renderHLSExoPlayer(url); } else if (hls.isSupported()) { this._renderHLSPolyfill(videoEl, hls, url); From b296cf0e9c8830dfe54916496260f606919abd0b Mon Sep 17 00:00:00 2001 From: Justin Wong <46082645+uvjustin@users.noreply.github.com> Date: Wed, 30 Sep 2020 18:08:46 +0800 Subject: [PATCH 4/8] Changes per @bramkragten --- src/components/ha-hls-player.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts index 8d39111c68f5..d03648e73194 100644 --- a/src/components/ha-hls-player.ts +++ b/src/components/ha-hls-player.ts @@ -105,7 +105,7 @@ class HaHLSPlayer extends LitElement { const videoEl = this._videoEl; const url = this.url; const useExoPlayerPromise = this._getUseExoPlayer(); - const masterPlaylistPromise = await fetch(url); + const masterPlaylistPromise = fetch(url); const hls = ((await import( /* webpackChunkName: "hls.js" */ "hls.js" @@ -125,10 +125,12 @@ class HaHLSPlayer extends LitElement { } this._useExoPlayer = await useExoPlayerPromise; - const hevcRegexp = /CODECS=".*?((hev1)|(hvc1))\..*?"/; - const masterPlaylist = await masterPlaylistPromise.text(); - if (hevcRegexp.test(masterPlaylist) && this._useExoPlayer) { - this._renderHLSExoPlayer(url); + if (this._useExoPlayer) { + const hevcRegexp = /CODECS=".*?((hev1)|(hvc1))\..*?"/; + const masterPlaylist = await (await masterPlaylistPromise).text(); + if (hevcRegexp.test(masterPlaylist)) { + this._renderHLSExoPlayer(url); + } } else if (hls.isSupported()) { this._renderHLSPolyfill(videoEl, hls, url); } else { From f7e27342b7b00f2f55cddd4c1d441365714a233e Mon Sep 17 00:00:00 2001 From: Justin Wong <46082645+uvjustin@users.noreply.github.com> Date: Wed, 30 Sep 2020 18:21:11 +0800 Subject: [PATCH 5/8] Fix if else --- src/components/ha-hls-player.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts index d03648e73194..873663c34478 100644 --- a/src/components/ha-hls-player.ts +++ b/src/components/ha-hls-player.ts @@ -125,12 +125,15 @@ class HaHLSPlayer extends LitElement { } this._useExoPlayer = await useExoPlayerPromise; + let hevcRegexp: RegExp; + let masterPlaylist: string; if (this._useExoPlayer) { - const hevcRegexp = /CODECS=".*?((hev1)|(hvc1))\..*?"/; - const masterPlaylist = await (await masterPlaylistPromise).text(); - if (hevcRegexp.test(masterPlaylist)) { - this._renderHLSExoPlayer(url); - } + hevcRegexp = /CODECS=".*?((hev1)|(hvc1))\..*?"/; + masterPlaylist = await (await masterPlaylistPromise).text(); + } + // @ts-ignore + if (this._useExoPlayer && hevcRegexp.test(masterPlaylist)) { + this._renderHLSExoPlayer(url); } else if (hls.isSupported()) { this._renderHLSPolyfill(videoEl, hls, url); } else { From 92ae51ab915ad51f8c6fb79b50c379c94fd1827c Mon Sep 17 00:00:00 2001 From: Justin Wong <46082645+uvjustin@users.noreply.github.com> Date: Wed, 30 Sep 2020 18:28:55 +0800 Subject: [PATCH 6/8] Send playlist instead of master_playlist --- src/components/ha-hls-player.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts index 873663c34478..5974b1d1e432 100644 --- a/src/components/ha-hls-player.ts +++ b/src/components/ha-hls-player.ts @@ -103,9 +103,9 @@ class HaHLSPlayer extends LitElement { private async _startHls(): Promise { const videoEl = this._videoEl; - const url = this.url; + const url = this.url.replace("master_playlist", "playlist"); const useExoPlayerPromise = this._getUseExoPlayer(); - const masterPlaylistPromise = fetch(url); + const masterPlaylistPromise = fetch(this.url); const hls = ((await import( /* webpackChunkName: "hls.js" */ "hls.js" From f5297fa4cdec688ed5dd0758662b6467b317c123 Mon Sep 17 00:00:00 2001 From: Justin Wong <46082645+uvjustin@users.noreply.github.com> Date: Wed, 30 Sep 2020 19:01:49 +0800 Subject: [PATCH 7/8] Rename url to playlist_url for clarity --- src/components/ha-hls-player.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts index 5974b1d1e432..8d43f1d02cc8 100644 --- a/src/components/ha-hls-player.ts +++ b/src/components/ha-hls-player.ts @@ -103,7 +103,7 @@ class HaHLSPlayer extends LitElement { private async _startHls(): Promise { const videoEl = this._videoEl; - const url = this.url.replace("master_playlist", "playlist"); + const playlist_url = this.url.replace("master_playlist", "playlist"); const useExoPlayerPromise = this._getUseExoPlayer(); const masterPlaylistPromise = fetch(this.url); @@ -133,11 +133,11 @@ class HaHLSPlayer extends LitElement { } // @ts-ignore if (this._useExoPlayer && hevcRegexp.test(masterPlaylist)) { - this._renderHLSExoPlayer(url); + this._renderHLSExoPlayer(playlist_url); } else if (hls.isSupported()) { - this._renderHLSPolyfill(videoEl, hls, url); + this._renderHLSPolyfill(videoEl, hls, playlist_url); } else { - this._renderHLSNative(videoEl, url); + this._renderHLSNative(videoEl, playlist_url); } } From ddfa5c5b7d6eaa96e32992ae6b8c14d91f2c4885 Mon Sep 17 00:00:00 2001 From: uvjustin <46082645+uvjustin@users.noreply.github.com> Date: Wed, 30 Sep 2020 19:24:32 +0800 Subject: [PATCH 8/8] Fix tslint error Co-authored-by: Bram Kragten --- src/components/ha-hls-player.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts index 8d43f1d02cc8..61f189713c6a 100644 --- a/src/components/ha-hls-player.ts +++ b/src/components/ha-hls-player.ts @@ -131,8 +131,7 @@ class HaHLSPlayer extends LitElement { hevcRegexp = /CODECS=".*?((hev1)|(hvc1))\..*?"/; masterPlaylist = await (await masterPlaylistPromise).text(); } - // @ts-ignore - if (this._useExoPlayer && hevcRegexp.test(masterPlaylist)) { + if (this._useExoPlayer && hevcRegexp!.test(masterPlaylist!)) { this._renderHLSExoPlayer(playlist_url); } else if (hls.isSupported()) { this._renderHLSPolyfill(videoEl, hls, playlist_url);