Fix media loading to work for HA >= 2021.11

This commit is contained in:
Dermot Duffy
2021-10-30 01:00:25 -07:00
parent 38abccd5c5
commit 6ec4ad067e
2 changed files with 17 additions and 16 deletions
+2 -5
View File
@@ -43,21 +43,18 @@ customElements.whenDefined('ha-camera-stream').then(() => {
return html``; return html``;
} }
// Below .src/@load bindings tweaked to work pre/post:
// - https://github.com/home-assistant/frontend/commit/e963735dbabdc2fea8a95aea325952560c727625
return html` return html`
${this._shouldRenderMJPEG ${this._shouldRenderMJPEG
? html` ? html`
<img <img
@load=${(e) => { @load=${(e) => {
// TODO: This block can be removed a safe distance from HA 2021.11.
if (typeof this._elementResized != 'undefined') { if (typeof this._elementResized != 'undefined') {
this._elementResized(); this._elementResized();
} }
dispatchMediaShowEvent(this, e); dispatchMediaShowEvent(this, e);
}} }}
.src=${ .src=${typeof this._connected == 'undefined' || this._connected
(typeof this._connected == 'undefined' ||
this._connected)
? computeMJPEGStreamUrl(this.stateObj) ? computeMJPEGStreamUrl(this.stateObj)
: ''} : ''}
.alt=${`Preview of the ${computeStateName(this.stateObj)} camera.`} .alt=${`Preview of the ${computeStateName(this.stateObj)} camera.`}
+15 -11
View File
@@ -9,17 +9,18 @@
// available as compilation time. // available as compilation time.
// ==================================================================== // ====================================================================
import { import { TemplateResult, html } from 'lit';
TemplateResult,
html,
} from 'lit';
import { customElement } from 'lit/decorators.js'; import { customElement } from 'lit/decorators.js';
import { dispatchMediaShowEvent, dispatchPauseEvent, dispatchPlayEvent } from '../common.js'; import {
dispatchMediaShowEvent,
dispatchPauseEvent,
dispatchPlayEvent,
} from '../common.js';
customElements.whenDefined("ha-hls-player").then(() => { customElements.whenDefined('ha-hls-player').then(() => {
@customElement("frigate-card-ha-hls-player") @customElement('frigate-card-ha-hls-player')
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
class FrigateCardHaHlsPlayer extends customElements.get("ha-hls-player") { class FrigateCardHaHlsPlayer extends customElements.get('ha-hls-player') {
// ===================================================================================== // =====================================================================================
// Minor modifications from: // Minor modifications from:
// - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-hls-player.ts // - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-hls-player.ts
@@ -32,13 +33,16 @@ customElements.whenDefined("ha-hls-player").then(() => {
?playsinline=${this.playsInline} ?playsinline=${this.playsInline}
?controls=${this.controls} ?controls=${this.controls}
@loadeddata=${(e) => { @loadeddata=${(e) => {
this._elementResized(); // TODO: This block can be removed a safe distance from HA 2021.11.
if (typeof this._elementResized != 'undefined') {
this._elementResized();
}
dispatchMediaShowEvent(this, e); dispatchMediaShowEvent(this, e);
}} }}
@pause=${() => dispatchPauseEvent(this)} @pause=${() => dispatchPauseEvent(this)}
@play=${() => dispatchPlayEvent(this)} @play=${() => dispatchPlayEvent(this)}
></video> ></video>
`; `;
} }
} }
}) });