flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Increase reliability of media auto actions (e.g. play) (#1934)

Browse Source 
Refactors media player handling entirely to make the code more
consistent and less boilerplate. Add testing for media player actions.

- Closes #1921
- Closes #1916
This commit is contained in:
Dermot Duffy
2025-03-03 20:59:01 -08:00
committed by GitHub
parent d4650eae8a
commit 3b77b11196
58 changed files with 1972 additions and 1165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/patches/ha-camera-stream.ts
+27 -65
View File
@@ -12,18 +12,12 @@
import { css, CSSResultGroup, html, nothing, PropertyValues, unsafeCSS } from 'lit';
import { customElement } from 'lit/decorators.js';
import { query } from 'lit/decorators/query.js';
import '../components/image-player.js';
import liveHAComponentsStyle from '../scss/live-ha-components.scss';
import {
AdvancedCameraCardMediaPlayer,
FullscreenElement,
MediaLoadedInfo,
} from '../types.js';
import {
createMediaLoadedInfo,
dispatchExistingMediaLoadedInfoAsEvent,
} from '../utils/media-info.js';
import './ha-hls-player';
import './ha-web-rtc-player';
import { MediaLoadedInfo, MediaPlayer, MediaPlayerController } from '../types.js';
import { dispatchExistingMediaLoadedInfoAsEvent } from '../utils/media-info.js';
import './ha-hls-player.js';
import './ha-web-rtc-player.js';
customElements.whenDefined('ha-camera-stream').then(() => {
// ========================================================================================
@@ -44,12 +38,12 @@ customElements.whenDefined('ha-camera-stream').then(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
class AdvancedCameraCardHaCameraStream
extends customElements.get('ha-camera-stream')
implements AdvancedCameraCardMediaPlayer
implements MediaPlayer
{
// Due to an obscure behavior when this card is casted, this element needs
// to use query rather than the ref directive to find the player.
@query('.player:not(.hidden)')
protected _player: AdvancedCameraCardMediaPlayer;
protected _player: MediaPlayer;
protected _mediaLoadedInfoPerStream: Record<StreamType, MediaLoadedInfo> = {};
protected _mediaLoadedInfoDispatched: MediaLoadedInfo | null = null;
@@ -59,46 +53,9 @@ customElements.whenDefined('ha-camera-stream').then(() => {
// - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-camera-stream.ts
// ========================================================================================
public async play(): Promise<void> {
return this._player?.play();
}
public async pause(): Promise<void> {
this._player?.pause();
}
public async mute(): Promise<void> {
this._player?.mute();
}
public async unmute(): Promise<void> {
this._player?.unmute();
}
public isMuted(): boolean {
return this._player?.isMuted() ?? true;
}
public async seek(seconds: number): Promise<void> {
this._player?.seek(seconds);
}
public async setControls(controls?: boolean): Promise<void> {
if (this._player) {
this._player.setControls(controls ?? this.controls);
}
}
public isPaused(): boolean {
return this._player?.isPaused() ?? true;
}
public async getScreenshotURL(): Promise<string | null> {
return this._player ? await this._player.getScreenshotURL() : null;
}
public getFullscreenElement(): FullscreenElement | null {
return this._player?.getFullscreenElement() ?? null;
public async getMediaPlayerController(): Promise<MediaPlayerController | null> {
await this.updateComplete;
return (await this._player?.getMediaPlayerController()) ?? null;
}
protected _storeMediaLoadedInfoHandler(
@@ -123,16 +80,17 @@ customElements.whenDefined('ha-camera-stream').then(() => {
}
if (stream.type === STREAM_TYPE_MJPEG) {
return html`
<img
@load=${(ev) =>
this._storeMediaLoadedInfo(
STREAM_TYPE_MJPEG,
createMediaLoadedInfo(ev, { player: this, technology: ['mjpeg'] }),
)}
.src=${typeof this._connected == 'undefined' || this._connected
<advanced-camera-card-image-player
@advanced-camera-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
this._storeMediaLoadedInfo(STREAM_TYPE_MJPEG, ev.detail);
ev.stopPropagation();
}}
src=${typeof this._connected == 'undefined' || this._connected
? computeMJPEGStreamUrl(this.stateObj)
: this._posterUrl || ''}
/>
filetype="mjpeg"
class="player"
></advanced-camera-card-image-player>
`;
}
@@ -146,8 +104,10 @@ customElements.whenDefined('ha-camera-stream').then(() => {
.hass=${this.hass}
.entityid=${this.stateObj.entity_id}
.posterUrl=${this._posterUrl}
@advanced-camera-card:media:loaded=${(ev) =>
this._storeMediaLoadedInfoHandler(STREAM_TYPE_HLS, ev)}
@advanced-camera-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
this._storeMediaLoadedInfoHandler(STREAM_TYPE_HLS, ev);
ev.stopPropagation();
}}
@streams=${this._handleHlsStreams}
class="player ${stream.visible ? '' : 'hidden'}"
></advanced-camera-card-ha-hls-player>`;
@@ -162,8 +122,10 @@ customElements.whenDefined('ha-camera-stream').then(() => {
.hass=${this.hass}
.entityid=${this.stateObj.entity_id}
.posterUrl=${this._posterUrl}
@advanced-camera-card:media:loaded=${(ev) =>
this._storeMediaLoadedInfoHandler(STREAM_TYPE_WEB_RTC, ev)}
@advanced-camera-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
this._storeMediaLoadedInfoHandler(STREAM_TYPE_WEB_RTC, ev);
ev.stopPropagation();
}}
@streams=${this._handleWebRtcStreams}
class="player ${stream.visible ? '' : 'hidden'}"
></advanced-camera-card-ha-web-rtc-player>`;
src/patches/ha-hls-player.ts
+18 -61
View File
@@ -13,86 +13,43 @@ import { css, CSSResultGroup, html, TemplateResult, unsafeCSS } from 'lit';
import { customElement } from 'lit/decorators.js';
import { query } from 'lit/decorators/query.js';
import { dispatchLiveErrorEvent } from '../components-lib/live/utils/dispatch-live-error.js';
import { VideoMediaPlayerController } from '../components-lib/media-player/video.js';
import { renderMessage } from '../components/message.js';
import liveHAComponentsStyle from '../scss/live-ha-components.scss';
import { AdvancedCameraCardMediaPlayer, FullscreenElement } from '../types.js';
import { MediaPlayer, MediaPlayerController } from '../types.js';
import { mayHaveAudio } from '../utils/audio.js';
import { errorToConsole } from '../utils/basic.js';
import {
hideMediaControlsTemporarily,
MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
} from '../utils/controls.js';
import {
dispatchMediaLoadedEvent,
dispatchMediaPauseEvent,
dispatchMediaPlayEvent,
dispatchMediaVolumeChangeEvent,
} from '../utils/media-info.js';
import {
hideMediaControlsTemporarily,
MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
setControlsOnVideo,
} from '../utils/media.js';
import { screenshotMedia } from '../utils/screenshot.js';
import { ConstructableLitElement } from './types.js';
customElements.whenDefined('ha-hls-player').then(() => {
const HaHlsPlayer = customElements.get('ha-hls-player') as ConstructableLitElement;
@customElement('advanced-camera-card-ha-hls-player')
// eslint-disable-next-line @typescript-eslint/no-unused-vars
class AdvancedCameraCardHaHlsPlayer
extends customElements.get('ha-hls-player')
implements AdvancedCameraCardMediaPlayer
{
class AdvancedCameraCardHaHlsPlayer extends HaHlsPlayer implements MediaPlayer {
// Due to an obscure behavior when this card is casted, this element needs
// to use query rather than the ref directive to find the player.
@query('#video')
protected _video: HTMLVideoElement;
public async play(): Promise<void> {
return this._video?.play();
}
protected _mediaPlayerController = new VideoMediaPlayerController(
this,
() => this._video,
() => this.controls,
);
public async pause(): Promise<void> {
this._video?.pause();
}
public async mute(): Promise<void> {
// The muted property is only for the initial muted state. Must explicitly
// set the muted on the video player to make the change dynamic.
if (this._video) {
this._video.muted = true;
}
}
public async unmute(): Promise<void> {
// See note in mute().
if (this._video) {
this._video.muted = false;
}
}
public isMuted(): boolean {
return this._video?.muted ?? true;
}
public async seek(seconds: number): Promise<void> {
if (this._video) {
hideMediaControlsTemporarily(this._video);
this._video.currentTime = seconds;
}
}
public async setControls(controls?: boolean): Promise<void> {
if (this._video) {
setControlsOnVideo(this._video, controls ?? this.controls);
}
}
public isPaused(): boolean {
return this._video?.paused ?? true;
}
public async getScreenshotURL(): Promise<string | null> {
return this._video ? screenshotMedia(this._video) : null;
}
public getFullscreenElement(): FullscreenElement | null {
return this._video;
public async getMediaPlayerController(): Promise<MediaPlayerController | null> {
return this._mediaPlayerController;
}
// =====================================================================================
@@ -141,7 +98,7 @@ customElements.whenDefined('ha-hls-player').then(() => {
private _loadedDataHandler(ev: Event) {
super._loadedData();
dispatchMediaLoadedEvent(this, ev, {
player: this,
mediaPlayerController: this._mediaPlayerController,
capabilities: {
supportsPause: true,
hasAudio: mayHaveAudio(this._video),
src/patches/ha-web-rtc-player.ts
+20 -60
View File
@@ -14,84 +14,44 @@ import { customElement } from 'lit/decorators.js';
import { query } from 'lit/decorators/query.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { dispatchLiveErrorEvent } from '../components-lib/live/utils/dispatch-live-error.js';
import { VideoMediaPlayerController } from '../components-lib/media-player/video.js';
import { renderMessage } from '../components/message.js';
import liveHAComponentsStyle from '../scss/live-ha-components.scss';
import { AdvancedCameraCardMediaPlayer, FullscreenElement } from '../types.js';
import { MediaPlayer, MediaPlayerController } from '../types.js';
import { mayHaveAudio } from '../utils/audio.js';
import {
hideMediaControlsTemporarily,
MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
} from '../utils/controls.js';
import {
dispatchMediaLoadedEvent,
dispatchMediaPauseEvent,
dispatchMediaPlayEvent,
dispatchMediaVolumeChangeEvent,
} from '../utils/media-info.js';
import {
hideMediaControlsTemporarily,
MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
setControlsOnVideo,
} from '../utils/media.js';
import { screenshotMedia } from '../utils/screenshot.js';
import { ConstructableLitElement } from './types.js';
customElements.whenDefined('ha-web-rtc-player').then(() => {
const HaWebRtcPlayer = customElements.get(
'ha-web-rtc-player',
) as ConstructableLitElement;
@customElement('advanced-camera-card-ha-web-rtc-player')
// eslint-disable-next-line @typescript-eslint/no-unused-vars
class AdvancedCameraCardHaWebRtcPlayer
extends customElements.get('ha-web-rtc-player')
implements AdvancedCameraCardMediaPlayer
{
class AdvancedCameraCardHaWebRtcPlayer extends HaWebRtcPlayer implements MediaPlayer {
// Due to an obscure behavior when this card is casted, this element needs
// to use query rather than the ref directive to find the player.
@query('#remote-stream')
protected _video: HTMLVideoElement;
public async play(): Promise<void> {
return this._video?.play();
}
protected _mediaPlayerController = new VideoMediaPlayerController(
this,
() => this._video,
() => this.controls,
);
public async pause(): Promise<void> {
this._video?.pause();
}
public async mute(): Promise<void> {
// The muted property is only for the initial muted state. Must explicitly
// set the muted on the video player to make the change dynamic.
if (this._video) {
this._video.muted = true;
}
}
public async unmute(): Promise<void> {
// See note in mute().
if (this._video) {
this._video.muted = false;
}
}
public isMuted(): boolean {
return this._video?.muted ?? true;
}
public async seek(seconds: number): Promise<void> {
if (this._video) {
this._video.currentTime = seconds;
}
}
public async setControls(controls?: boolean): Promise<void> {
if (this._video) {
setControlsOnVideo(this._video, controls ?? this.controls);
}
}
public isPaused(): boolean {
return this._video?.paused ?? true;
}
public async getScreenshotURL(): Promise<string | null> {
return this._video ? screenshotMedia(this._video) : null;
}
public getFullscreenElement(): FullscreenElement | null {
return this._video ?? null;
public async getMediaPlayerController(): Promise<MediaPlayerController | null> {
return this._mediaPlayerController;
}
// =====================================================================================
@@ -136,7 +96,7 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
private _loadedDataHandler(ev: Event) {
super._loadedData();
dispatchMediaLoadedEvent(this, ev, {
player: this,
mediaPlayerController: this._mediaPlayerController,
capabilities: {
supportsPause: true,
hasAudio: mayHaveAudio(this._video),
src/patches/types.ts
+3
View File
@@ -0,0 +1,3 @@
import { LitElement } from 'lit';
export type ConstructableLitElement = { new (...args: unknown[]): LitElement };