jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix ha-hls-player cleanup for lit 2 (#9388)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
uvjustin 2021-06-29 21:44:18 +08:00 committed by GitHub
parent ba0be927ed
commit a3d1a3566d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/ha-hls-player.ts
View File

@ -7,7 +7,7 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { nextRender } from "../common/util/render-status"; import { nextRender } from "../common/util/render-status";
import { getExternalConfig } from "../external_app/external_config"; import { getExternalConfig } from "../external_app/external_config";
@ -42,27 +42,23 @@ class HaHLSPlayer extends LitElement {
// don't cache this, as we remove it on disconnects // don't cache this, as we remove it on disconnects
@query("video") private _videoEl!: HTMLVideoElement; @query("video") private _videoEl!: HTMLVideoElement;
@state() private _attached = false;
private _hlsPolyfillInstance?: HlsLite; private _hlsPolyfillInstance?: HlsLite;
private _useExoPlayer = false; private _exoPlayer = false;
public connectedCallback() { public connectedCallback() {
super.connectedCallback(); super.connectedCallback();
this._attached = true; if (this.hasUpdated) {
this._startHls();
}
} }
public disconnectedCallback() { public disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
this._attached = false; this._cleanUp();
} }
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this._attached) {
return html``;
}
return html` return html`
<video <video
?autoplay=${this.autoPlay} ?autoplay=${this.autoPlay}
@ -77,21 +73,13 @@ class HaHLSPlayer extends LitElement {
protected updated(changedProps: PropertyValues) { protected updated(changedProps: PropertyValues) {
super.updated(changedProps); super.updated(changedProps);
const attachedChanged = changedProps.has("_attached");
const urlChanged = changedProps.has("url"); const urlChanged = changedProps.has("url");
if (!urlChanged && !attachedChanged) { if (!urlChanged) {
return; return;
} }
// If we are no longer attached, destroy polyfill this._cleanUp();
if (attachedChanged && !this._attached) {
// Tear down existing polyfill, if available
this._destroyPolyfill();
return;
}
this._destroyPolyfill();
this._startHls(); this._startHls();
} }
@ -118,13 +106,13 @@ class HaHLSPlayer extends LitElement {
} }
if (!hlsSupported) { if (!hlsSupported) {
this._videoEl.innerHTML = this.hass.localize( videoEl.innerHTML = this.hass.localize(
"ui.components.media-browser.video_not_supported" "ui.components.media-browser.video_not_supported"
); );
return; return;
} }
this._useExoPlayer = await useExoPlayerPromise; const useExoPlayer = await useExoPlayerPromise;
const masterPlaylist = await (await masterPlaylistPromise).text(); const masterPlaylist = await (await masterPlaylistPromise).text();
// Parse playlist assuming it is a master playlist. Match group 1 is whether hevc, match group 2 is regular playlist url // Parse playlist assuming it is a master playlist. Match group 1 is whether hevc, match group 2 is regular playlist url
@ -144,7 +132,7 @@ class HaHLSPlayer extends LitElement {
} }
// If codec is HEVC and ExoPlayer is supported, use ExoPlayer. // If codec is HEVC and ExoPlayer is supported, use ExoPlayer.
if (this._useExoPlayer && match !== null && match[1] !== undefined) { if (useExoPlayer && match !== null && match[1] !== undefined) {
this._renderHLSExoPlayer(playlist_url); this._renderHLSExoPlayer(playlist_url);
} else if (Hls.isSupported()) { } else if (Hls.isSupported()) {
this._renderHLSPolyfill(videoEl, Hls, playlist_url); this._renderHLSPolyfill(videoEl, Hls, playlist_url);
@ -154,6 +142,7 @@ class HaHLSPlayer extends LitElement {
} }
private async _renderHLSExoPlayer(url: string) { private async _renderHLSExoPlayer(url: string) {
this._exoPlayer = true;
window.addEventListener("resize", this._resizeExoPlayer); window.addEventListener("resize", this._resizeExoPlayer);
this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer); this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
this._videoEl.style.visibility = "hidden"; this._videoEl.style.visibility = "hidden";
@ -202,25 +191,28 @@ class HaHLSPlayer extends LitElement {
private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) { private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) {
videoEl.src = url; videoEl.src = url;
await new Promise((resolve) => videoEl.addEventListener("loadedmetadata", () => {
videoEl.addEventListener("loadedmetadata", resolve) videoEl.play();
); });
videoEl.play();
} }
private _elementResized() { private _elementResized() {
fireEvent(this, "iron-resize"); fireEvent(this, "iron-resize");
} }
private _destroyPolyfill() { private _cleanUp() {
if (this._hlsPolyfillInstance) { if (this._hlsPolyfillInstance) {
this._hlsPolyfillInstance.destroy(); this._hlsPolyfillInstance.destroy();
this._hlsPolyfillInstance = undefined; this._hlsPolyfillInstance = undefined;
} }
if (this._useExoPlayer) { if (this._exoPlayer) {
window.removeEventListener("resize", this._resizeExoPlayer); window.removeEventListener("resize", this._resizeExoPlayer);
this.hass!.auth.external!.fireMessage({ type: "exoplayer/stop" }); this.hass!.auth.external!.fireMessage({ type: "exoplayer/stop" });
this._exoPlayer = false;
} }
const videoEl = this._videoEl;
videoEl.removeAttribute("src");
videoEl.load();
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {