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

fix: Camera aspect-ratio should always apply (#2114)

Browse Source 
- Closes #2073
This commit is contained in:
Dermot Duffy
2025-07-13 14:56:03 -07:00
committed by GitHub
parent d0bfb97843
commit c3e7cef9cf
29 changed files with 812 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/card.ts
+10
View File
@@ -129,6 +129,15 @@ class AdvancedCameraCard extends LitElement {
}
}
set isPanel(isPanel: boolean) {
this._controller.getConditionStateManager().setState({
panel: isPanel,
});
}
get isPanel(): boolean {
return !!this._controller.getConditionStateManager().getState().panel;
}
public static async getConfigElement(): Promise<LovelaceCardEditor> {
return await CardController.getConfigElement();
}
@@ -380,6 +389,7 @@ class AdvancedCameraCard extends LitElement {
.configManager=${this._controller.getConfigManager()}
.hide=${!!this._controller.getMessageManager().hasMessage()}
.microphoneState=${this._controller.getMicrophoneManager().getState()}
.conditionStateManager=${this._controller.getConditionStateManager()}
.triggeredCameraIDs=${this._config?.view.triggers.show_trigger_status
? this._controller.getTriggersManager().getTriggeredCameraIDs()
: undefined}
src/components-lib/media-provider-dimensions-controller.ts
+158
View File
@@ -0,0 +1,158 @@
import { ReactiveController, ReactiveControllerHost } from 'lit';
import { throttle } from 'lodash-es';
import { CameraDimensionsConfig } from '../config/schema/cameras';
import { MediaLoadedInfo } from '../types';
import { aspectRatioToString, setOrRemoveAttribute } from '../utils/basic';
import { AdvancedCameraCardMediaLoadedEventTarget } from '../utils/media-info';
import { updateElementStyleFromMediaLayoutConfig } from '../utils/media-layout';
const SIZE_ATTRIBUTE = 'size';
type SizeMode = 'sized' | 'unsized' | 'unsized-portrait' | 'unsized-landscape';
export class MediaProviderDimensionsController implements ReactiveController {
public resize = throttle(this._resizeHandler.bind(this), 100, {
trailing: true,
});
private _host: HTMLElement &
ReactiveControllerHost &
AdvancedCameraCardMediaLoadedEventTarget;
private _container: HTMLElement | null = null;
private _cameraConfig: CameraDimensionsConfig | null = null;
private _resizeObserver = new ResizeObserver(this.resize);
private _intendedHostSize: DOMRect | null = null;
constructor(host: HTMLElement & ReactiveControllerHost) {
this._host = host;
this._host.addController(this);
}
public hostConnected(): void {
this._host.addEventListener(
'advanced-camera-card:media:loaded',
this._mediaLoadHandler,
);
this._resizeObserver.observe(this._host);
}
public hostDisconnected(): void {
this._host.removeEventListener(
'advanced-camera-card:media:loaded',
this._mediaLoadHandler,
);
this._resizeObserver.disconnect();
}
public setContainer(container?: HTMLElement): void {
if (container === this._container) {
return;
}
this._container = container ?? null;
this._setAttributesFromConfig();
}
private _setAttributesFromConfig(): void {
if (this._container) {
this._container.style.aspectRatio = aspectRatioToString({
ratio: this._cameraConfig?.aspect_ratio,
});
}
updateElementStyleFromMediaLayoutConfig(this._host, this._cameraConfig?.layout);
// When the provider is not precisely sized, we guess the best aspect
// ratio to "maximize" if known. This prevents media "hopping" from no
// forced aspect ratio to a forced one, once its true size is known.
setOrRemoveAttribute<SizeMode>(
this._host,
true,
SIZE_ATTRIBUTE,
this._cameraConfig?.aspect_ratio
? this._cameraConfig?.aspect_ratio[0] >= this._cameraConfig?.aspect_ratio[1]
? 'unsized-landscape'
: 'unsized-portrait'
: 'unsized',
);
}
public setCameraConfig(config?: CameraDimensionsConfig): void {
this._cameraConfig = config ?? null;
this._setAttributesFromConfig();
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
private _mediaLoadHandler = (_ev: CustomEvent<MediaLoadedInfo>): void => {
// Allow the browser to render the media fully before attempting to resize.
// Without this, viewer provider will not be sized correctly.
window.requestAnimationFrame(() => this.resize());
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
private _resizeHandler(_entries?: ResizeObserverEntry[]): void {
const rememberHostSize = (): void => {
this._intendedHostSize = this._host.getBoundingClientRect();
};
const setUnsizedAttribute = (): void => {
setOrRemoveAttribute<SizeMode>(this._host, true, SIZE_ATTRIBUTE, 'unsized');
};
const setContainerIntrinsicSize = (container: HTMLElement): void => {
container.style.width = '100%';
container.style.height = 'auto';
rememberHostSize();
};
const setContainerSize = (
container: HTMLElement,
width: number,
height: number,
): void => {
container.style.width = `${width}px`;
container.style.height = `${height}px`;
rememberHostSize();
};
const hostSize = this._host.getBoundingClientRect();
if (
hostSize.width === this._intendedHostSize?.width &&
hostSize.height === this._intendedHostSize?.height
) {
return;
}
if (!this._container) {
setUnsizedAttribute();
return;
}
// In the ideal case, the width can be maximum and the height can be
// whatever is necessary to support the aspect ratio.
setContainerIntrinsicSize(this._container);
const containerSize = this._container.getBoundingClientRect();
if (!containerSize.width || !containerSize.height) {
setUnsizedAttribute();
return;
}
const mediaAspectRatio = containerSize.width / containerSize.height;
const newHostSize = this._host.getBoundingClientRect();
// If the container is larger than the host, the host was not able to expand
// enough to cover the size (e.g. fullscreen, panel or height constrained in
// configuration). In this case, just limit the container to the host height
// at the same aspect ratio.
if (containerSize.height > newHostSize.height) {
setContainerSize(
this._container,
newHostSize.height * mediaAspectRatio,
newHostSize.height,
);
}
setOrRemoveAttribute<SizeMode>(this._host, true, SIZE_ATTRIBUTE, 'sized');
}
}
src/components/image-updating-player.ts
+1 -1
View File
@@ -64,7 +64,7 @@ export const resolveImageMode = (options?: {
};
/**
* A media player to wrap a image that updates continuously.
* A media player to wrap an image that updates continuously.
*/
@customElement('advanced-camera-card-image-updating-player')
export class AdvancedCameraCardImageUpdatingPlayer
src/components/image.ts
+41 -41
View File
@@ -11,6 +11,7 @@ import { guard } from 'lit/directives/guard.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js';
import { CameraManager } from '../camera-manager/manager';
import { ViewManagerEpoch } from '../card-controller/view/types';
import { MediaProviderDimensionsController } from '../components-lib/media-provider-dimensions-controller';
import { ZoomSettingsObserved } from '../components-lib/zoom/types';
import { handleZoomSettingsObservedEvent } from '../components-lib/zoom/zoom-view-context';
import { CameraConfig } from '../config/schema/cameras';
@@ -19,8 +20,6 @@ import { IMAGE_VIEW_ZOOM_TARGET_SENTINEL } from '../const';
import { HomeAssistant } from '../ha/types';
import imageStyle from '../scss/image.scss';
import { MediaPlayer, MediaPlayerController, MediaPlayerElement } from '../types.js';
import { aspectRatioToString } from '../utils/basic';
import { updateElementStyleFromMediaLayoutConfig } from '../utils/media-layout.js';
import './image-updating-player';
import { resolveImageMode } from './image-updating-player';
import './zoomer.js';
@@ -42,36 +41,29 @@ export class AdvancedCameraCardImage extends LitElement implements MediaPlayer {
@property({ attribute: false })
public imageConfig?: ImageViewConfig;
protected _dimensionsController = new MediaProviderDimensionsController(this);
protected _refImage: Ref<MediaPlayerElement> = createRef();
protected _refContainer: Ref<HTMLElement> = createRef();
public async getMediaPlayerController(): Promise<MediaPlayerController | null> {
await this.updateComplete;
return (await this._refImage.value?.getMediaPlayerController()) ?? null;
}
protected _refImage: Ref<MediaPlayerElement> = createRef();
protected willUpdate(changedProps: PropertyValues): void {
if (changedProps.has('cameraConfig') || changedProps.has('imageConfig')) {
if (
this._dimensionsController.setCameraConfig(
resolveImageMode({
imageConfig: this.imageConfig,
cameraConfig: this.cameraConfig,
}) === 'camera'
) {
updateElementStyleFromMediaLayoutConfig(
this,
this.cameraConfig?.dimensions?.layout,
);
this.style.aspectRatio = aspectRatioToString({
ratio: this.cameraConfig?.dimensions?.aspect_ratio,
});
} else {
updateElementStyleFromMediaLayoutConfig(this);
this.style.removeProperty('aspect-ratio');
}
? this.cameraConfig?.dimensions
: undefined,
);
}
}
protected _useZoomIfRequired(template: TemplateResult): TemplateResult {
protected _renderContainer(template: TemplateResult): TemplateResult {
const zoomTarget = IMAGE_VIEW_ZOOM_TARGET_SENTINEL;
const view = this.viewManagerEpoch?.manager.getView();
const mode = resolveImageMode({
@@ -79,29 +71,33 @@ export class AdvancedCameraCardImage extends LitElement implements MediaPlayer {
cameraConfig: this.cameraConfig,
});
return this.imageConfig?.zoomable
? html` <advanced-camera-card-zoomer
.defaultSettings=${guard(
[this.imageConfig, this.cameraConfig?.dimensions?.layout],
() =>
mode === 'camera' && this.cameraConfig?.dimensions?.layout
? {
pan: this.cameraConfig.dimensions.layout.pan,
zoom: this.cameraConfig.dimensions.layout.zoom,
}
: undefined,
)}
.settings=${view?.context?.zoom?.[zoomTarget]?.requested}
@advanced-camera-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
handleZoomSettingsObservedEvent(
ev,
this.viewManagerEpoch?.manager,
zoomTarget,
return html`<div class="container" ${ref(this._refContainer)}>
${this.imageConfig?.zoomable
? html`<advanced-camera-card-zoomer
.defaultSettings=${guard(
[this.imageConfig, this.cameraConfig?.dimensions?.layout],
() =>
mode === 'camera' && this.cameraConfig?.dimensions?.layout
? {
pan: this.cameraConfig.dimensions.layout.pan,
zoom: this.cameraConfig.dimensions.layout.zoom,
}
: undefined,
)}
>
${template}
</advanced-camera-card-zoomer>`
: template;
.settings=${view?.context?.zoom?.[zoomTarget]?.requested}
@advanced-camera-card:zoom:change=${(
ev: CustomEvent<ZoomSettingsObserved>,
) =>
handleZoomSettingsObservedEvent(
ev,
this.viewManagerEpoch?.manager,
zoomTarget,
)}
>
${template}
</advanced-camera-card-zoomer>`
: template}
</div>`;
}
protected render(): TemplateResult | void {
@@ -109,7 +105,7 @@ export class AdvancedCameraCardImage extends LitElement implements MediaPlayer {
return;
}
return this._useZoomIfRequired(html`
return this._renderContainer(html`
<advanced-camera-card-image-updating-player
${ref(this._refImage)}
.hass=${this.hass}
@@ -121,6 +117,10 @@ export class AdvancedCameraCardImage extends LitElement implements MediaPlayer {
`);
}
public updated(): void {
this._dimensionsController.setContainer(this._refContainer.value);
}
static get styles(): CSSResultGroup {
return unsafeCSS(imageStyle);
}
src/components/live/index.ts
-6
View File
@@ -40,12 +40,6 @@ export class AdvancedCameraCardLive extends LitElement {
return;
}
// Implementation notes:
// - See use of liveConfig and not config below -- the underlying carousel
// will independently override the liveConfig to reflect the camera in the
// carousel (not necessarily the selected camera).
// - Various events are captured to prevent them propagating upwards if the
// card is in the background.
return html`
<advanced-camera-card-live-grid
.hass=${this.hass}
src/components/live/provider.ts
+60 -44
View File
@@ -14,6 +14,7 @@ import { CameraEndpoints } from '../../camera-manager/types.js';
import { MicrophoneState } from '../../card-controller/types.js';
import { LazyLoadController } from '../../components-lib/lazy-load-controller.js';
import { dispatchLiveErrorEvent } from '../../components-lib/live/utils/dispatch-live-error.js';
import { MediaProviderDimensionsController } from '../../components-lib/media-provider-dimensions-controller.js';
import { PartialZoomSettings } from '../../components-lib/zoom/types.js';
import { CameraConfig, LiveProvider } from '../../config/schema/cameras.js';
import { LiveConfig } from '../../config/schema/live.js';
@@ -22,15 +23,15 @@ import { STREAM_TROUBLESHOOTING_URL } from '../../const.js';
import { HomeAssistant } from '../../ha/types.js';
import { localize } from '../../localize/localize.js';
import liveProviderStyle from '../../scss/live-provider.scss';
import { MediaPlayer, MediaPlayerController, MediaPlayerElement } from '../../types.js';
import { aspectRatioToString } from '../../utils/basic.js';
import {
MediaLoadedInfo,
MediaPlayer,
MediaPlayerController,
MediaPlayerElement,
} from '../../types.js';
import { dispatchMediaUnloadedEvent } from '../../utils/media-info.js';
import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
import '../icon.js';
import { renderMessage } from '../message.js';
import '../next-prev-control.js';
import '../ptz.js';
import '../surround.js';
@customElement('advanced-camera-card-live-provider')
export class AdvancedCameraCardLiveProvider extends LitElement implements MediaPlayer {
@@ -69,7 +70,9 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
protected _showStreamTroubleshooting = false;
protected _refProvider: Ref<MediaPlayerElement> = createRef();
protected _refContainer: Ref<HTMLElement> = createRef();
protected _lazyLoadController: LazyLoadController = new LazyLoadController(this);
protected _dimensionsController = new MediaProviderDimensionsController(this);
// A note on dynamic imports:
//
@@ -184,13 +187,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
this._importPromises.push(import('./providers/go2rtc/index.js'));
}
updateElementStyleFromMediaLayoutConfig(
this,
this.cameraConfig?.dimensions?.layout,
);
this.style.aspectRatio = aspectRatioToString({
ratio: this.cameraConfig?.dimensions?.aspect_ratio,
});
this._dimensionsController.setCameraConfig(this.cameraConfig?.dimensions);
}
}
@@ -203,26 +200,30 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
return result;
}
protected _useZoomIfRequired(template: TemplateResult): TemplateResult {
return this.liveConfig?.zoomable
? html` <advanced-camera-card-zoomer
.defaultSettings=${guard([this.cameraConfig?.dimensions?.layout], () =>
this.cameraConfig?.dimensions?.layout
? {
pan: this.cameraConfig.dimensions.layout.pan,
zoom: this.cameraConfig.dimensions.layout.zoom,
}
: undefined,
)}
.settings=${this.zoomSettings}
@advanced-camera-card:zoom:zoomed=${async () =>
(await this.getMediaPlayerController())?.setControls(false)}
@advanced-camera-card:zoom:unzoomed=${async () =>
(await this.getMediaPlayerController())?.setControls()}
>
${template}
</advanced-camera-card-zoomer>`
: template;
protected _renderContainer(template: TemplateResult): TemplateResult {
// Place the zoomer in a separate div, as the zoom library misinterprets the
// explicit width/height setting from the provider resizer as zooming.
return html`<div class="container" ${ref(this._refContainer)}>
${this.liveConfig?.zoomable
? html` <advanced-camera-card-zoomer
.defaultSettings=${guard([this.cameraConfig?.dimensions?.layout], () =>
this.cameraConfig?.dimensions?.layout
? {
pan: this.cameraConfig.dimensions.layout.pan,
zoom: this.cameraConfig.dimensions.layout.zoom,
}
: undefined,
)}
.settings=${this.zoomSettings}
@advanced-camera-card:zoom:zoomed=${async () =>
(await this.getMediaPlayerController())?.setControls(false)}
@advanced-camera-card:zoom:unzoomed=${async () =>
(await this.getMediaPlayerController())?.setControls()}
>
${template}
</advanced-camera-card-zoomer>`
: template}
</div>`;
}
protected render(): TemplateResult | void {
@@ -240,11 +241,6 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
this.ariaLabel = this.label;
const provider = this._getResolvedProvider();
const showImageDuringLoading = this._shouldShowImageDuringLoading();
const showLoadingIcon = !this._isVideoMediaLoaded;
const providerClasses = {
hidden: showImageDuringLoading,
};
if (
provider === 'ha' ||
@@ -287,20 +283,36 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
}
}
return html`${this._useZoomIfRequired(html`
const showImageDuringLoading = this._shouldShowImageDuringLoading();
const showLoadingIcon = !this._isVideoMediaLoaded;
const classes = {
hidden: showImageDuringLoading,
};
return html`${this._renderContainer(html`
${showImageDuringLoading || provider === 'image'
? html` <advanced-camera-card-live-image
${ref(this._refProvider)}
.hass=${this.hass}
.cameraConfig=${this.cameraConfig}
class=${classMap({
...classes,
// The image provider is providing the temporary loading image,
// so it should not be hidden.
hidden: false,
})}
@advanced-camera-card:live:error=${() => this._providerErrorHandler()}
@advanced-camera-card:media:loaded=${(ev: Event) => {
@advanced-camera-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
if (provider === 'image') {
// Only count the media has loaded if the required provider is
// the image (not just the temporary image shown during
// loading).
this._videoMediaShowHandler();
} else {
// Manually call resize(), since the dimensions controller won't
// receive the after that stopPropagation().
this._dimensionsController.resize();
ev.stopPropagation();
}
}}
@@ -310,7 +322,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
${provider === 'ha'
? html` <advanced-camera-card-live-ha
${ref(this._refProvider)}
class=${classMap(providerClasses)}
class=${classMap(classes)}
.hass=${this.hass}
.cameraConfig=${this.cameraConfig}
?controls=${this.liveConfig.controls.builtin}
@@ -321,7 +333,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
: provider === 'go2rtc'
? html`<advanced-camera-card-live-go2rtc
${ref(this._refProvider)}
class=${classMap(providerClasses)}
class=${classMap(classes)}
.hass=${this.hass}
.cameraConfig=${this.cameraConfig}
.cameraEndpoints=${this.cameraEndpoints}
@@ -337,7 +349,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
: provider === 'webrtc-card'
? html`<advanced-camera-card-live-webrtc-card
${ref(this._refProvider)}
class=${classMap(providerClasses)}
class=${classMap(classes)}
.hass=${this.hass}
.cameraConfig=${this.cameraConfig}
.cameraEndpoints=${this.cameraEndpoints}
@@ -352,7 +364,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
: provider === 'jsmpeg'
? html` <advanced-camera-card-live-jsmpeg
${ref(this._refProvider)}
class=${classMap(providerClasses)}
class=${classMap(classes)}
.hass=${this.hass}
.cameraConfig=${this.cameraConfig}
.cameraEndpoints=${this.cameraEndpoints}
@@ -390,6 +402,10 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
: ''}`;
}
public updated(): void {
this._dimensionsController.setContainer(this._refContainer.value);
}
static get styles(): CSSResultGroup {
return unsafeCSS(liveProviderStyle);
}
src/components/viewer/grid.ts
+1 -1
View File
@@ -13,8 +13,8 @@ import { ViewManagerEpoch } from '../../card-controller/view/types.js';
import { MediaGridSelected } from '../../components-lib/media-grid-controller.js';
import { CardWideConfig } from '../../config/schema/types.js';
import { ViewerConfig } from '../../config/schema/viewer.js';
import { HomeAssistant } from '../../ha/types.js';
import { ResolvedMediaCache } from '../../ha/resolved-media.js';
import { HomeAssistant } from '../../ha/types.js';
import '../../patches/ha-hls-player.js';
import basicBlockStyle from '../../scss/basic-block.scss';
import './carousel';
src/components/viewer/provider.ts
+52 -34
View File
@@ -12,8 +12,10 @@ import { createRef, Ref, ref } from 'lit/directives/ref.js';
import { CameraManager } from '../../camera-manager/manager.js';
import { ViewManagerEpoch } from '../../card-controller/view/types.js';
import { LazyLoadController } from '../../components-lib/lazy-load-controller.js';
import { MediaProviderDimensionsController } from '../../components-lib/media-provider-dimensions-controller.js';
import { ZoomSettingsObserved } from '../../components-lib/zoom/types.js';
import { handleZoomSettingsObservedEvent } from '../../components-lib/zoom/zoom-view-context.js';
import { CameraConfig } from '../../config/schema/cameras.js';
import { CardWideConfig } from '../../config/schema/types.js';
import { ViewerConfig } from '../../config/schema/viewer.js';
import { canonicalizeHAURL } from '../../ha/canonical-url.js';
@@ -29,8 +31,7 @@ import {
import '../../patches/ha-hls-player.js';
import viewerProviderStyle from '../../scss/viewer-provider.scss';
import { MediaPlayer, MediaPlayerController, MediaPlayerElement } from '../../types.js';
import { aspectRatioToString, errorToConsole } from '../../utils/basic.js';
import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
import { errorToConsole } from '../../utils/basic.js';
import { ViewItemClassifier } from '../../view/item-classifier.js';
import { VideoContentType, ViewMedia } from '../../view/item.js';
import { QueryClassifier } from '../../view/query-classifier.js';
@@ -62,7 +63,9 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
public cardWideConfig?: CardWideConfig;
protected _refProvider: Ref<MediaPlayerElement> = createRef();
protected _refContainer: Ref<HTMLElement> = createRef();
protected _lazyLoadController: LazyLoadController = new LazyLoadController(this);
protected _dimensionsController = new MediaProviderDimensionsController(this);
@state()
protected _url: string | null = null;
@@ -200,19 +203,20 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
}
if (changedProps.has('media') || changedProps.has('cameraManager')) {
const cameraID = this.media?.getCameraID();
const cameraConfig = cameraID
? this.cameraManager?.getStore().getCameraConfig(cameraID)
: null;
updateElementStyleFromMediaLayoutConfig(this, cameraConfig?.dimensions?.layout);
this.style.aspectRatio = aspectRatioToString({
ratio: cameraConfig?.dimensions?.aspect_ratio,
});
this._dimensionsController.setCameraConfig(
this._getRelevantCameraConfig()?.dimensions,
);
}
}
protected _useZoomIfRequired(template: TemplateResult): TemplateResult {
private _getRelevantCameraConfig(): CameraConfig | null {
const cameraID = this.media?.getCameraID();
return cameraID
? this.cameraManager?.getStore().getCameraConfig(cameraID) ?? null
: null;
}
protected _renderContainer(template: TemplateResult): TemplateResult {
if (!this.media) {
return template;
}
@@ -223,27 +227,37 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
: null;
const view = this.viewManagerEpoch?.manager.getView();
return this.viewerConfig?.zoomable
? html` <advanced-camera-card-zoomer
.defaultSettings=${guard([cameraConfig?.dimensions?.layout], () =>
cameraConfig?.dimensions?.layout
? {
pan: cameraConfig.dimensions.layout.pan,
zoom: cameraConfig.dimensions.layout.zoom,
}
: undefined,
)}
.settings=${mediaID ? view?.context?.zoom?.[mediaID]?.requested : undefined}
@advanced-camera-card:zoom:zoomed=${async () =>
(await this.getMediaPlayerController())?.setControls(false)}
@advanced-camera-card:zoom:unzoomed=${async () =>
(await this.getMediaPlayerController())?.setControls()}
@advanced-camera-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
handleZoomSettingsObservedEvent(ev, this.viewManagerEpoch?.manager, mediaID)}
>
${template}
</advanced-camera-card-zoomer>`
: template;
// Place the zoomer in a separate div, as the zoom library misinterprets the
// explicit width/height setting from the provider resizer as zooming.
return html`<div class="container" ${ref(this._refContainer)}>
${this.viewerConfig?.zoomable
? html`<advanced-camera-card-zoomer
.defaultSettings=${guard([cameraConfig?.dimensions?.layout], () =>
cameraConfig?.dimensions?.layout
? {
pan: cameraConfig.dimensions.layout.pan,
zoom: cameraConfig.dimensions.layout.zoom,
}
: undefined,
)}
.settings=${mediaID ? view?.context?.zoom?.[mediaID]?.requested : undefined}
@advanced-camera-card:zoom:zoomed=${async () =>
(await this.getMediaPlayerController())?.setControls(false)}
@advanced-camera-card:zoom:unzoomed=${async () =>
(await this.getMediaPlayerController())?.setControls()}
@advanced-camera-card:zoom:change=${(
ev: CustomEvent<ZoomSettingsObserved>,
) =>
handleZoomSettingsObservedEvent(
ev,
this.viewManagerEpoch?.manager,
mediaID,
)}
>
${template}
</advanced-camera-card-zoomer>`
: template}
</div>`;
}
protected render(): TemplateResult | void {
@@ -264,7 +278,7 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
// Note: crossorigin="anonymous" is required on <video> below in order to
// allow screenshot of motionEye videos which currently go cross-origin.
return this._useZoomIfRequired(html`
return this._renderContainer(html`
${ViewItemClassifier.isVideo(this.media)
? this.media.getVideoContentType() === VideoContentType.HLS
? html`<advanced-camera-card-ha-hls-player
@@ -305,6 +319,10 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
`);
}
public updated(): void {
this._dimensionsController.setContainer(this._refContainer.value);
}
static get styles(): CSSResultGroup {
return unsafeCSS(viewerProviderStyle);
}
src/components/views.ts
+4
View File
@@ -12,6 +12,7 @@ import { CameraManager } from '../camera-manager/manager.js';
import { MicrophoneState } from '../card-controller/types.js';
import { ViewItemManager } from '../card-controller/view/item-manager.js';
import { ViewManagerEpoch } from '../card-controller/view/types.js';
import { ConditionStateManagerReadonlyInterface } from '../conditions/types.js';
import { AdvancedCameraCardConfig, CardWideConfig } from '../config/schema/types.js';
import { RawAdvancedCameraCardConfig } from '../config/types.js';
import { DeviceRegistryManager } from '../ha/registry/device/index.js';
@@ -62,6 +63,9 @@ export class AdvancedCameraCardViews extends LitElement {
@property({ attribute: false })
public deviceRegistryManager?: DeviceRegistryManager;
@property({ attribute: false })
public conditionStateManager?: ConditionStateManagerReadonlyInterface;
protected willUpdate(changedProps: PropertyValues): void {
if (changedProps.has('viewManagerEpoch') || changedProps.has('config')) {
const view = this.viewManagerEpoch?.manager.getView();
src/conditions/types.ts
+1
View File
@@ -15,6 +15,7 @@ export interface ConditionState {
keys?: KeysState;
mediaLoadedInfo?: MediaLoadedInfo | null;
microphone?: MicrophoneState;
panel?: boolean;
hass?: HomeAssistant;
triggered?: Set<string>;
userAgent?: string;
src/config/schema/cameras.ts
+7 -6
View File
@@ -146,6 +146,12 @@ const proxyConfigSchema = z.object({
});
export type ProxyConfig = z.infer<typeof proxyConfigSchema>;
const cameraDimensionsSchema = z.object({
aspect_ratio: aspectRatioSchema.optional(),
layout: mediaLayoutConfigSchema.optional(),
});
export type CameraDimensionsConfig = z.infer<typeof cameraDimensionsSchema>;
export const cameraConfigSchema = z
.object({
camera_entity: z.string().optional(),
@@ -246,12 +252,7 @@ export const cameraConfigSchema = z
ptz: ptzCameraConfigSchema.default(cameraConfigDefault.ptz),
dimensions: z
.object({
aspect_ratio: aspectRatioSchema.optional(),
layout: mediaLayoutConfigSchema.optional(),
})
.optional(),
dimensions: cameraDimensionsSchema.optional(),
proxy: proxyConfigSchema.default(cameraConfigDefault.proxy),
src/scss/card.scss
+4 -1
View File
@@ -9,7 +9,7 @@
// Different browsers use different colors as their fullscreen background,
// this ensures the same experience across all browsers.
background-color: var(--card-background-color);
background-color: var(--advanced-camera-card-background);
border-radius: var(--ha-card-border-radius, 4px);
overflow: auto;
@@ -99,6 +99,9 @@ ha-card {
height: 100%;
position: static;
color: var(--secondary-text-color, white);
// The background color at the outer level has priority.
background-color: transparent;
}
/************
src/scss/image-updating-player.scss
-1
View File
@@ -1,5 +1,4 @@
@use 'basic-block.scss';
@use 'media-background.scss';
@use 'media-layout.scss';
img {
src/scss/image.scss
+1 -11
View File
@@ -1,11 +1 @@
@use 'basic-block.scss';
@use 'media-layout.scss';
@use 'media-background.scss';
img {
width: 100%;
height: 100%;
display: block;
@include media-layout.media-layout();
}
@use 'provider.scss';
src/scss/live-carousel.scss
-3
View File
@@ -24,10 +24,7 @@
}
.embla__slide {
// Center the content horizontally (for cases where the configured aspect
// ratio is a mismatch with the card).
display: flex;
justify-content: center;
height: 100%;
width: 100%;
src/scss/live-provider.scss
+1 -6
View File
@@ -1,9 +1,4 @@
@use 'basic-block.scss';
@use 'media-background.scss';
:host {
position: relative;
}
@use 'provider.scss';
.hidden {
display: none;
src/scss/media-background.scss
+1 -1
View File
@@ -2,7 +2,7 @@
$bg-img: url('../images/iris-background.svg');
:host {
background-color: var(--primary-background-color);
background-color: var(--advanced-camera-card-background);
background-position: center;
background-repeat: no-repeat;
background-image: $bg-img;
src/scss/provider.scss
+32
View File
@@ -0,0 +1,32 @@
@use 'media-background.scss';
:host {
display: flex;
position: relative;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.container {
display: block;
// The container will be sized by the provider resize controller.
width: fit-content;
height: auto;
max-width: 100%;
}
:host([size='unsized']) > .container {
width: 100%;
height: 100%;
}
:host([size='unsized-portrait']) > .container {
height: 100%;
}
:host([size='unsized-landscape']) > .container {
width: 100%;
}
src/scss/themes/base.scss
+1 -1
View File
@@ -8,7 +8,7 @@
*********/
--advanced-camera-card-exterior: var(--secondary-background-color, black);
--advanced-camera-card-background: var(--primary-background-color, white);
--advanced-camera-card-background: var(--card-background-color, white);
--advanced-camera-card-foreground-primary: var(--primary-color, black);
src/scss/themes/dark.scss
+1
View File
@@ -2,6 +2,7 @@
// This file should include only, and exactly match, values from
// https://github.com/home-assistant/frontend/blob/dev/src/resources/styles-data.ts .
--card-background-color: #1c1c1c;
--primary-background-color: #111111;
--secondary-background-color: #282828;
--primary-text-color: #e1e1e1;
src/scss/themes/light.scss
+1
View File
@@ -2,6 +2,7 @@
// This file should include only, and exactly match, values from
// https://github.com/home-assistant/frontend/blob/dev/src/resources/ha-style.ts
--card-background-color: #ffffff;
--primary-background-color: #fafafa;
--secondary-background-color: #e5e5e5;
--primary-text-color: #212121;
src/scss/viewer-carousel.scss
+2
View File
@@ -41,6 +41,8 @@
}
.embla__slide {
display: flex;
height: 100%;
width: 100%;
src/scss/viewer-provider.scss
+1 -10
View File
@@ -1,13 +1,4 @@
@use 'basic-block.scss';
@use 'media-background.scss';
advanced-camera-card-ha-hls-player,
advanced-camera-card-image-player,
advanced-camera-card-video-player {
display: block;
width: 100%;
height: 100%;
}
@use 'provider.scss';
advanced-camera-card-progress-indicator {
padding: 30px;
src/utils/basic.ts
+2 -2
View File
@@ -196,11 +196,11 @@ export const isValidDate = (date: Date): boolean => {
* @param name The attribute name.
* @param value An optional value to set the attribute to.
*/
export const setOrRemoveAttribute = (
export const setOrRemoveAttribute = <T extends string>(
element: HTMLElement,
set: boolean,
name: string,
value?: string,
value?: T,
): void => {
if (set) {
element.setAttribute(name, value ?? '');
tests/components-lib/gallery/gallery-core-controller.test.ts
+1 -1
View File
@@ -9,6 +9,7 @@ import { scrollIntoView } from '../../../src/utils/scroll';
import { sleep } from '../../../src/utils/sleep';
import {
callIntersectionHandler,
callResizeHandler,
createLitElement,
createSlot,
createSlotHost,
@@ -18,7 +19,6 @@ import {
IntersectionObserverMock,
ResizeObserverMock,
} from '../../test-utils';
import { callResizeHandler } from '../../utils/embla/test-utils';
vi.mock('lodash-es', async () => {
return {
tests/components-lib/media-height-controller.test.ts
+1 -1
View File
@@ -2,10 +2,10 @@ import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vites
import { MediaHeightController } from '../../src/components-lib/media-height-controller';
import {
callMutationHandler,
callResizeHandler,
MutationObserverMock,
ResizeObserverMock,
} from '../test-utils';
import { callResizeHandler } from '../utils/embla/test-utils';
vi.mock('lodash-es', async () => ({
...(await vi.importActual('lodash-es')),
tests/components-lib/media-provider-dimensions-controller.test.ts
+391
View File
@@ -0,0 +1,391 @@
import {
afterAll,
afterEach,
beforeAll,
beforeEach,
describe,
expect,
it,
vi,
} from 'vitest';
import { MediaProviderDimensionsController } from '../../src/components-lib/media-provider-dimensions-controller';
import { CameraDimensionsConfig } from '../../src/config/schema/cameras';
import { dispatchExistingMediaLoadedInfoAsEvent } from '../../src/utils/media-info';
import {
callResizeHandler,
createLitElement,
createMediaLoadedInfo,
getResizeObserver,
requestAnimationFrameMock,
ResizeObserverMock,
} from '../test-utils';
vi.mock('lodash-es', () => ({
throttle: vi.fn((fn) => fn),
}));
// @vitest-environment jsdom
describe('MediaProviderDimensionsController', () => {
beforeAll(() => {
vi.stubGlobal('ResizeObserver', ResizeObserverMock);
});
afterAll(() => {
vi.unstubAllGlobals();
});
beforeEach(() => {
vi.clearAllMocks();
});
it('should construct', () => {
const host = createLitElement();
const eventListener = vi.fn();
host.addEventListener = eventListener;
new MediaProviderDimensionsController(host);
const observer = getResizeObserver();
// No resize observer should be created.
expect(observer?.observe).not.toBeCalled();
expect(eventListener).not.toBeCalled();
});
describe('should connect and disconnect', () => {
it('should connect and disconnect without a container', () => {
const host = createLitElement();
const controller = new MediaProviderDimensionsController(host);
const observer = getResizeObserver();
expect(observer?.observe).toBeCalledTimes(0);
controller.hostConnected();
expect(observer?.observe).toBeCalledWith(host);
expect(observer?.observe).toBeCalledTimes(1);
controller.hostDisconnected();
expect(observer?.disconnect).toBeCalled();
});
it('should connect and disconnect with a container when host is connected', () => {
const host = createLitElement();
Object.defineProperty(host, 'isConnected', {
value: true,
});
const controller = new MediaProviderDimensionsController(host);
const observer = getResizeObserver(0);
const container = createLitElement();
controller.setContainer(container);
expect(observer?.observe).not.toBeCalled();
controller.hostDisconnected();
expect(observer?.disconnect).toBeCalled();
controller.hostConnected();
expect(observer?.observe).toBeCalledWith(host);
});
});
describe('should set container respecting config ', () => {
it('should set aspect ratio on container', () => {
const host = createLitElement();
const container = document.createElement('div');
const controller = new MediaProviderDimensionsController(host);
const config = { aspect_ratio: [16, 9] };
controller.setCameraConfig(config);
controller.setContainer(container);
expect(container.style.aspectRatio).toBe('16 / 9');
});
describe('should set host attribute', () => {
it.each([
['unsized', {}],
['unsized-landscape', { aspect_ratio: [16, 9] }],
['unsized-portrait', { aspect_ratio: [9, 16] }],
])('%s', async (value: string, config: CameraDimensionsConfig) => {
const host = createLitElement();
const container = document.createElement('div');
const controller = new MediaProviderDimensionsController(host);
controller.setCameraConfig(config);
controller.setContainer(container);
expect(host.getAttribute('size')).toBe(value);
});
});
it('should set layout attributes', () => {
const host = createLitElement();
const container = document.createElement('div');
const controller = new MediaProviderDimensionsController(host);
const config = {
layout: {
fit: 'contain' as const,
position: { x: 1, y: 2 },
view_box: { top: 3, bottom: 4, left: 5, right: 6 },
},
};
controller.setCameraConfig(config);
controller.setContainer(container);
expect(
host.style.getPropertyValue('--advanced-camera-card-media-layout-fit'),
).toBe('contain');
expect(
host.style.getPropertyValue('--advanced-camera-card-media-layout-position-x'),
).toBe('1%');
expect(
host.style.getPropertyValue('--advanced-camera-card-media-layout-position-y'),
).toBe('2%');
expect(
host.style.getPropertyValue('--advanced-camera-card-media-layout-view-box-top'),
).toBe('3%');
expect(
host.style.getPropertyValue(
'--advanced-camera-card-media-layout-view-box-bottom',
),
).toBe('4%');
expect(
host.style.getPropertyValue('--advanced-camera-card-media-layout-view-box-left'),
).toBe('5%');
expect(
host.style.getPropertyValue(
'--advanced-camera-card-media-layout-view-box-right',
),
).toBe('6%');
});
});
it('should ignore multiple calls to set same container', () => {
const host = createLitElement();
const container = document.createElement('div');
const controller = new MediaProviderDimensionsController(host);
controller.setContainer(container);
expect(host.getAttribute('size')).toBe('unsized');
host.setAttribute('size', 'sized');
controller.setContainer(container);
expect(host.getAttribute('size')).toBe('sized');
});
it('should reset container', () => {
const host = createLitElement();
const container = document.createElement('div');
const controller = new MediaProviderDimensionsController(host);
controller.setContainer(container);
controller.setContainer();
expect(host.getAttribute('size')).toBe('unsized');
});
describe('should set size attribute correctly', () => {
it('should set unsized-landscape', () => {
const host = createLitElement();
const container = document.createElement('div');
const controller = new MediaProviderDimensionsController(host);
const config = { aspect_ratio: [16, 9] };
controller.setCameraConfig(config);
controller.setContainer(container);
expect(container.style.aspectRatio).toBe('16 / 9');
expect(host.getAttribute('size')).toBe('unsized-landscape');
});
it('should set unsized-portrait', () => {
const host = createLitElement();
const container = document.createElement('div');
const controller = new MediaProviderDimensionsController(host);
const config = { aspect_ratio: [9, 16] };
controller.setCameraConfig(config);
controller.setContainer(container);
expect(container.style.aspectRatio).toBe('9 / 16');
expect(host.getAttribute('size')).toBe('unsized-portrait');
});
it('should set unsized', () => {
const host = createLitElement();
const container = document.createElement('div');
const controller = new MediaProviderDimensionsController(host);
controller.setContainer(container);
expect(host.getAttribute('size')).toBe('unsized');
});
it('should set unsized without a config', () => {
const host = createLitElement();
const container = document.createElement('div');
const controller = new MediaProviderDimensionsController(host);
controller.setCameraConfig();
controller.setContainer(container);
expect(host.getAttribute('size')).toBe('unsized');
});
});
describe('should respond to size changes', () => {
it('should set host to unsized if no container', () => {
const host = createLitElement();
host.setAttribute('size', 'sized');
host.getBoundingClientRect = vi.fn().mockReturnValue({
height: 600,
width: 300,
});
new MediaProviderDimensionsController(host);
callResizeHandler();
expect(host.getAttribute('size')).toBe('unsized');
});
it('should set host to unsized if container has no dimensions', () => {
const host = createLitElement();
host.setAttribute('size', 'sized');
host.getBoundingClientRect = vi.fn().mockReturnValue({
height: 100,
width: 200,
});
const container = document.createElement('div');
container.getBoundingClientRect = vi.fn().mockReturnValue({
height: 0,
width: 0,
});
const controller = new MediaProviderDimensionsController(host);
controller.setContainer(container);
callResizeHandler();
expect(host.getAttribute('size')).toBe('unsized');
});
it('should ignore resize calls where actual equals intended size', () => {
const host = createLitElement();
host.setAttribute('size', 'sized');
host.getBoundingClientRect = vi.fn().mockReturnValue({
height: 100,
width: 200,
});
const container = document.createElement('div');
container.getBoundingClientRect = vi.fn().mockReturnValue({
height: 100,
width: 200,
});
const controller = new MediaProviderDimensionsController(host);
controller.setContainer(container);
callResizeHandler();
host.setAttribute('size', '__RANDOM__');
// 2nd call should be ignored.
callResizeHandler();
expect(host.getAttribute('size')).toBe('__RANDOM__');
});
describe('should resize container to fit width-limited container', () => {
it('should resize container to fit width-limited container', () => {
const host = createLitElement();
host.getBoundingClientRect = vi.fn().mockReturnValue({
height: 200,
width: 200,
});
const container = document.createElement('div');
container.getBoundingClientRect = vi.fn().mockReturnValue({
height: 90,
width: 160,
});
const controller = new MediaProviderDimensionsController(host);
controller.setContainer(container);
callResizeHandler();
expect(container.style.width).toBe('100%');
expect(container.style.height).toBe('auto');
expect(host.getAttribute('size')).toBe('sized');
});
it('should resize container to fit height-limited container', () => {
const host = createLitElement();
host.getBoundingClientRect = vi.fn().mockReturnValue({
height: 100,
width: 400,
});
const container = document.createElement('div');
container.getBoundingClientRect = vi.fn().mockReturnValue({
height: 200,
width: 160,
});
const controller = new MediaProviderDimensionsController(host);
controller.setContainer(container);
callResizeHandler();
expect(container.style.width).toBe(`${100 * (160 / 200)}px`);
expect(container.style.height).toBe('100px');
expect(host.getAttribute('size')).toBe('sized');
});
});
});
describe('should respond to media loading', () => {
beforeEach(() => {
vi.spyOn(window, 'requestAnimationFrame').mockImplementation(
requestAnimationFrameMock,
);
});
afterEach(() => {
vi.mocked(window.requestAnimationFrame).mockRestore();
});
it('should resize container after a media load', () => {
const host = createLitElement();
host.getBoundingClientRect = vi.fn().mockReturnValue({
height: 100,
width: 400,
});
const container = document.createElement('div');
container.getBoundingClientRect = vi.fn().mockReturnValue({
height: 90,
width: 160,
});
const controller = new MediaProviderDimensionsController(host);
controller.setContainer(container);
controller.hostConnected();
dispatchExistingMediaLoadedInfoAsEvent(host, createMediaLoadedInfo());
expect(container.style.width).toBe(`100%`);
expect(container.style.height).toBe('auto');
expect(host.getAttribute('size')).toBe('sized');
});
});
});
tests/test-utils.ts
+37
View File
@@ -486,6 +486,43 @@ export const callVisibilityHandler = async (visible: boolean): Promise<void> =>
}
};
export const getResizeObserver = (n = 0): ResizeObserver | null => {
const mockResult = vi.mocked(ResizeObserver).mock.results[n];
if (mockResult.type !== 'return') {
return null;
}
return mockResult.value;
};
export const callResizeHandler = (
entries: {
target: HTMLElement;
width: number;
height: number;
}[] = [],
n = 0,
): void => {
const observer = getResizeObserver(n);
if (!observer) {
return;
}
vi.mocked(ResizeObserver).mock.calls[n][0](
// Note this is a very incomplete / invalid ResizeObserverEntry that
// just provides the bare basics current implementation uses.
entries.map(
(entry) =>
({
target: entry.target,
contentRect: {
height: entry.height,
width: entry.width,
},
}) as unknown as ResizeObserverEntry,
),
observer,
);
};
export const createSlotHost = (options?: {
slot?: HTMLSlotElement;
children?: HTMLElement[];
tests/utils/embla/test-utils.ts
-30
View File
@@ -35,36 +35,6 @@ export const callEmblaHandler = (
}
};
export const callResizeHandler = (
entries: {
target: HTMLElement;
width: number;
height: number;
}[],
n = 0,
): void => {
const mockResult = vi.mocked(ResizeObserver).mock.results[n];
if (mockResult.type !== 'return') {
return;
}
const observer = mockResult.value;
vi.mocked(ResizeObserver).mock.calls[n][0](
// Note this is a very incomplete / invalid ResizeObserverEntry that
// just provides the bare basics current implementation uses.
entries.map(
(entry) =>
({
target: entry.target,
contentRect: {
height: entry.height,
width: entry.width,
},
}) as unknown as ResizeObserverEntry,
),
observer,
);
};
export const createEmblaApiInstance = (options?: {
slideNodes?: HTMLElement[];
selectedScrollSnap?: number;