Fix media loading to work for HA >= 2021.11
This commit is contained in:
@@ -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.`}
|
||||||
|
|||||||
@@ -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>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user