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

feat: Add 'call' support to improve 2-way audio experience (#2486)

Browse Source 
Draws significant inspiration (and direct styling) from
https://github.com/dermotduffy/advanced-camera-card/pull/2447 . Thank
you @Maudfer !

BREAKING CHANGE:

The microphone condition previously bundled two unrelated signals —
whether a two-way-audio session was connected and whether the microphone
was muted. Connection state is now its own dedicated call condition, and
microphone is reserved purely for mute state. Configs are upgraded
automatically (the card rewrites affected conditions under overrides,
elements, and automations). If you maintain config by hand, convert as
follows:

If you only used connected:

# Before
```yaml
condition: microphone
connected: true
```

# After
```yaml
condition: call
call: true
```
If you used both connected and muted — they must be split into two
conditions, since they no longer live together:

# Before
```yaml
condition: microphone
connected: true
muted: false
```

# After
```yaml
condition: and
conditions:
  - condition: call
    call: true
  - condition: microphone
    muted: false
```
This commit is contained in:
Dermot Duffy
2026-06-30 17:45:13 -07:00
committed by dermotduffy
parent bb061a1a55
commit abcba884e5
116 changed files with 3871 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/call-controls.ts
+160
View File
@@ -0,0 +1,160 @@
import {
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
unsafeCSS,
} from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { dispatchActionExecutionRequest } from '../card-controller/actions/utils/execution-request.js';
import { MicrophoneState } from '../card-controller/types.js';
import { ActionConfig } from '../config/schema/actions/types.js';
import { localize } from '../localize/localize.js';
import callControlsStyle from '../scss/call-controls.scss';
import {
createCallEndAction,
createGeneralAction,
stopEventFromActivatingCardWideActions,
} from '../utils/action.js';
import { hasPopOutAnimationEnded } from '../utils/animation.js';
import { fireAdvancedCameraCardEvent } from '../utils/fire-advanced-camera-card-event.js';
/**
* The on-screen overlay shown during an active two-way audio call: a centered
* pill with end-call, microphone-toggle, and mute-toggle buttons.
*
* This is a purely presentational control showing state and emitting intents.
* The end-call and microphone buttons dispatch actions; the audio-out button
* fires an `advanced-camera-card:call:mute-toggle` event for the host to act on.
*/
@customElement('advanced-camera-card-call-controls')
export class AdvancedCameraCardCallControls extends LitElement {
// Whether a call is in progress.
@property({ attribute: false })
public active = false;
@property({ attribute: false })
public microphoneState?: MicrophoneState;
@property({ attribute: false })
public muted?: boolean;
// The size, in pixels, of the control buttons.
@property({ attribute: false })
public buttonSize?: number;
// True while the exit animation plays after `active` turns false.
@state()
private _exiting = false;
protected willUpdate(changedProps: PropertyValues): void {
if (changedProps.has('buttonSize') && this.buttonSize) {
this.style.setProperty(
'--advanced-camera-card-call-controls-button-size',
`${this.buttonSize}px`,
);
}
if (changedProps.has('active')) {
// Keep the pill visible through its exit animation when a call ends; a
// call (re)starting cancels any in-progress exit.
this._exiting = !this.active && !!changedProps.get('active');
}
}
protected render(): TemplateResult | void {
if (!this.active && !this._exiting) {
return;
}
const microphoneMuted = this.microphoneState?.muted ?? true;
const audioAvailable = this.muted !== undefined;
const audioMuted = this.muted ?? true;
return html`<div class="overlay">
<div
class=${classMap({ panel: true, exiting: this._exiting })}
@click=${(ev: Event) => stopEventFromActivatingCardWideActions(ev)}
@animationend=${this._handleAnimationEnd}
>
${this._renderButton(
'mdi:phone-hangup',
localize('config.live.controls.call.end'),
{
emphasis: 'critical',
action: createCallEndAction(),
},
)}
${this._renderButton(
microphoneMuted ? 'mdi:microphone-off' : 'mdi:microphone',
microphoneMuted
? localize('config.live.controls.call.unmute_microphone')
: localize('config.live.controls.call.mute_microphone'),
{
emphasis: microphoneMuted ? undefined : 'critical',
action: createGeneralAction(
microphoneMuted ? 'microphone_unmute' : 'microphone_mute',
),
},
)}
${this._renderButton(
audioMuted ? 'mdi:volume-off' : 'mdi:volume-high',
audioMuted
? localize('config.live.controls.call.unmute_audio')
: localize('config.live.controls.call.mute_audio'),
{
disabled: !audioAvailable,
handler: () => fireAdvancedCameraCardEvent(this, 'call:mute-toggle'),
},
)}
</div>
</div>`;
}
private _handleAnimationEnd = (ev: AnimationEvent): void => {
if (hasPopOutAnimationEnded(ev)) {
this._exiting = false;
}
};
private _renderButton(
icon: string,
label: string,
options?: {
disabled?: boolean;
emphasis?: 'critical';
action?: ActionConfig;
handler?: () => void;
},
): TemplateResult {
return html`
<ha-icon-button
.label=${label}
title=${label}
?disabled=${!!options?.disabled}
class=${options?.emphasis === 'critical' ? 'critical' : ''}
@click=${() => {
if (options?.handler) {
options.handler();
} else if (options?.action) {
dispatchActionExecutionRequest(this, { actions: options.action });
}
}}
>
<ha-icon icon=${icon}></ha-icon>
</ha-icon-button>
`;
}
static get styles(): CSSResultGroup {
return unsafeCSS(callControlsStyle);
}
}
declare global {
interface HTMLElementTagNameMap {
'advanced-camera-card-call-controls': AdvancedCameraCardCallControls;
}
}
src/components/live/carousel.ts
+79 -12
View File
@@ -11,8 +11,10 @@ import { keyed } from 'lit/directives/keyed.js';
import { createRef, Ref, ref } from 'lit/directives/ref.js';
import { CameraManager } from '../../camera-manager/manager.js';
import { CameraManagerCameraMetadata } from '../../camera-manager/types.js';
import { CallSession } from '../../card-controller/call/types.js';
import { MicrophoneState } from '../../card-controller/types.js';
import { ViewManagerEpoch } from '../../card-controller/view/types.js';
import { resolveAutoHideState } from '../../components-lib/auto-hide.js';
import { MediaActionsController } from '../../components-lib/media-actions-controller.js';
import { MediaHeightController } from '../../components-lib/media-height-controller.js';
import { MediaLoadedInfoSinkController } from '../../components-lib/media-loaded-info-sink-controller.js';
@@ -30,9 +32,10 @@ import { HomeAssistant } from '../../ha/types.js';
import liveCarouselStyle from '../../scss/live-carousel.scss';
import { stopEventFromActivatingCardWideActions } from '../../utils/action.js';
import { CarouselSelected } from '../../utils/embla/carousel-controller.js';
import { getStreamCameraID } from '../../utils/substream.js';
import { getTextDirection } from '../../utils/text-direction.js';
import { getStreamCameraID } from '../../view/substream.js';
import { View } from '../../view/view.js';
import '../call-controls.js';
import '../carousel';
import '../next-prev-control.js';
import '../ptz.js';
@@ -70,6 +73,9 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
@property({ attribute: false })
public microphoneState?: MicrophoneState;
@property({ attribute: false })
public call?: CallSession;
@property({ attribute: false })
public locked?: boolean;
@@ -84,10 +90,7 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
private _ptzDragController = new PTZDragController(this);
private _mediaLoadedInfoSinkController = new MediaLoadedInfoSinkController(this, {
getTargetID: () =>
this.viewFilterCameraID ??
this.viewManagerEpoch?.manager.getView()?.camera ??
null,
getTargetID: () => this._getCarouselCameraID(),
callback: () => this._mediaHeightController.recalculate(),
});
@@ -138,6 +141,14 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
private _getTransitionEffect = (): TransitionEffect =>
this.liveConfig?.transition_effect ?? configDefaults.live.transition_effect;
// The cameraID this carousel currently represents: the filtered camera when
// the carousel is scoped to one, otherwise the camera of the active view.
private _getCarouselCameraID(): string | null {
return (
this.viewFilterCameraID ?? this.viewManagerEpoch?.manager.getView()?.camera ?? null
);
}
private _getSelectedCameraIndex(): number {
if (this.viewFilterCameraID) {
// If the carousel is limited to a single cameraID, the first (only)
@@ -154,7 +165,7 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
}
protected willUpdate(changedProps: PropertyValues): void {
if (changedProps.has('microphoneState') || changedProps.has('liveConfig')) {
if (changedProps.has('liveConfig')) {
this._mediaActionsController.setOptions({
playerSelector: ADVANCED_CAMERA_CARD_LIVE_PROVIDER,
...(this.liveConfig?.auto_play && {
@@ -169,13 +180,27 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
...(this.liveConfig?.auto_unmute && {
autoUnmuteConditions: this.liveConfig.auto_unmute,
}),
...((this.liveConfig?.auto_unmute || this.liveConfig?.auto_mute) && {
microphoneState: this.microphoneState,
...(this.liveConfig && {
microphoneMuteSeconds:
this.liveConfig.microphone.mute_after_microphone_mute_seconds,
}),
});
}
if (changedProps.has('microphoneState') && this.microphoneState) {
this._mediaActionsController.setMicrophoneState(this.microphoneState);
}
if (
changedProps.has('call') ||
changedProps.has('viewManagerEpoch') ||
changedProps.has('viewFilterCameraID')
) {
// Scope the call-active signal to the carousel that owns the call: in
// grid mode every carousel receives `.call`, but only the call camera's
// audio should be acted on.
this._mediaActionsController.setCallActive(
this.call?.cameraID === this._getCarouselCameraID(),
);
}
}
private _getSlides(): TemplateResult[] {
@@ -232,15 +257,14 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
const mediaEpoch = view?.context?.mediaEpoch?.[cameraID] ?? 0;
const isSelectedSlide = !!view?.camera && cameraID === view.camera;
const microphoneStream = this._getRelevantMicrophoneStream(cameraID, view);
return html`
<div class="embla__slide">
${keyed(
mediaEpoch,
html`<advanced-camera-card-live-provider
.microphoneState=${view?.camera === cameraID
? this.microphoneState
: undefined}
.microphoneStream=${microphoneStream}
.camera=${resolvedCamera}
.targetID=${cameraID}
.label=${cameraMetadata?.title ?? ''}
@@ -270,6 +294,32 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
return view?.context?.live?.overrides?.get(cameraID) ?? cameraID;
}
// Return a microphone stream only for the camera the call runs on, and
// only while that camera's engaged stream is still the call's audio source.
// Keying off the call session (not the selected slide) keeps the microphone
// routed to the call's camera, and stops transmission if the substream has
// since changed.
private _getRelevantMicrophoneStream(
cameraID: string,
view?: View | null,
): MediaStream | null {
const isRelevant =
this.call?.cameraID === cameraID &&
this._getSubstreamCameraID(cameraID, view) ===
(this.call.callCameraID ?? cameraID);
return isRelevant ? this.microphoneState?.stream ?? null : null;
}
private _toggleMute(): void {
const controller = this._mediaLoadedInfoSinkController.get()?.mediaPlayerController;
// Fire-and-forget; the `volumechange` event drives the re-render.
if (controller?.isMuted()) {
controller.unmute();
} else {
controller?.mute();
}
}
private _getCameraNeighbors(): CameraNeighbors | null {
const cameraIDs = this.cameraManager
? [...this.cameraManager?.getStore().getCameraIDsWithCapability('live')]
@@ -330,6 +380,7 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
.controlConfig=${this.liveConfig?.controls.next_previous}
.label=${neighbor?.metadata?.title ?? ''}
.icon=${neighbor?.metadata?.icon}
.autoHideState=${resolveAutoHideState(!!this.call)}
?disabled=${!neighbor}
?locked=${!!this.locked}
@click=${(ev) => {
@@ -354,12 +405,13 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
const hasMultipleCameras = slides.length > 1;
const neighbors = this._getCameraNeighbors();
const carouselCameraID = this._getCarouselCameraID();
const streamAwareCameraID = getStreamCameraID(view, this.viewFilterCameraID);
const gesturesPTZActive = this._isGesturesPTZActive(view, streamAwareCameraID);
const forcePTZVisibility =
!this._mediaLoadedInfoSinkController.has() ||
(!!this.viewFilterCameraID && this.viewFilterCameraID !== view.camera) ||
carouselCameraID !== view.camera ||
view.context?.ptzControls?.enabled === false
? false
: view.context?.ptzControls?.enabled;
@@ -370,6 +422,10 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
!gesturesPTZActive &&
!this.locked;
const isCallActive = this.call?.cameraID === carouselCameraID;
const callMediaPlayerController =
this._mediaLoadedInfoSinkController.get()?.mediaPlayerController ?? null;
return html`
<advanced-camera-card-carousel
${ref(this._refCarousel)}
@@ -379,6 +435,9 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
.wheelScrolling=${this.liveConfig?.controls.wheel}
transitionEffect=${this._getTransitionEffect()}
@advanced-camera-card:carousel:select=${this._setViewHandler.bind(this)}
@advanced-camera-card:media:volumechange=${() =>
// Re-render so the call-controls are updated.
this.requestUpdate()}
>
${this._renderNextPrevious('left', neighbors)}
<!-- -->
@@ -395,6 +454,14 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
.type=${this._getDisplayPTZType(streamAwareCameraID)}
>
</advanced-camera-card-ptz>
<advanced-camera-card-call-controls
.active=${isCallActive}
.microphoneState=${this.microphoneState}
.muted=${callMediaPlayerController?.isMuted()}
.buttonSize=${this.liveConfig.controls.call.button_size}
@advanced-camera-card:call:mute-toggle=${() => this._toggleMute()}
>
</advanced-camera-card-call-controls>
`;
}
src/components/live/grid.ts
+11 -3
View File
@@ -11,6 +11,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { CameraManager } from '../../camera-manager/manager.js';
import { MicrophoneState } from '../../card-controller/types.js';
import { ViewManagerEpoch } from '../../card-controller/view/types.js';
import { CallSession } from '../../card-controller/call/types.js';
import { MediaGridSelected } from '../../components-lib/media-grid-controller.js';
import { LiveConfig } from '../../config/schema/live.js';
import { CardWideConfig } from '../../config/schema/types.js';
@@ -39,6 +40,9 @@ export class AdvancedCameraCardLiveGrid extends LitElement {
@property({ attribute: false })
public microphoneState?: MicrophoneState;
@property({ attribute: false })
public call?: CallSession;
@property({ attribute: false })
public locked?: boolean;
@@ -47,7 +51,7 @@ export class AdvancedCameraCardLiveGrid extends LitElement {
private _renderCarousel(cameraID?: string): TemplateResult {
const view = this.viewManagerEpoch?.manager.getView();
const triggeredCameraID = cameraID ?? view?.camera;
const carouselCameraID = cameraID ?? view?.camera;
// Get the camera's grid width factor from its dimensions config.
const gridWidthFactor = cameraID
@@ -66,9 +70,13 @@ export class AdvancedCameraCardLiveGrid extends LitElement {
.cardWideConfig=${this.cardWideConfig}
.cameraManager=${this.cameraManager}
.microphoneState=${this.microphoneState}
.call=${this.call}
.locked=${this.locked}
?triggered=${triggeredCameraID &&
!!this.triggeredCameraIDs?.has(triggeredCameraID)}
?triggered=${carouselCameraID &&
!!this.triggeredCameraIDs?.has(carouselCameraID)}
?transmitting=${this.microphoneState?.muted === false &&
!!this.call &&
this.call.cameraID === carouselCameraID}
>
</advanced-camera-card-live-carousel>
`;
src/components/live/index.ts
+8
View File
@@ -11,6 +11,7 @@ import { CameraManager } from '../../camera-manager/manager.js';
import { MicrophoneManager } from '../../card-controller/microphone-manager.js';
import { MicrophoneState } from '../../card-controller/types.js';
import { ViewManagerEpoch } from '../../card-controller/view/types.js';
import { CallSession } from '../../card-controller/call/types.js';
import { MicrophoneActionsController } from '../../components-lib/live/microphone-actions-controller.js';
import '../../components-lib/live/types.js';
import { LiveConfig } from '../../config/schema/live.js';
@@ -43,6 +44,9 @@ export class AdvancedCameraCardLive extends LitElement {
@property({ attribute: false })
public microphoneState?: MicrophoneState;
@property({ attribute: false })
public call?: CallSession;
@property({ attribute: false })
public locked?: boolean;
@@ -81,6 +85,9 @@ export class AdvancedCameraCardLive extends LitElement {
view?.is('live') ? view.camera ?? null : null,
);
}
if (changedProps.has('call')) {
this._microphoneActionsController.setCallActive(!!this.call);
}
}
protected render(): TemplateResult | void {
@@ -96,6 +103,7 @@ export class AdvancedCameraCardLive extends LitElement {
.cardWideConfig=${this.cardWideConfig}
.cameraManager=${this.cameraManager}
.microphoneState=${this.microphoneState}
.call=${this.call}
.locked=${this.locked}
.triggeredCameraIDs=${this.triggeredCameraIDs}
>
src/components/live/provider.ts
+2 -3
View File
@@ -11,7 +11,6 @@ import { classMap } from 'lit/directives/class-map.js';
import { guard } from 'lit/directives/guard.js';
import { createRef, Ref, ref } from 'lit/directives/ref.js';
import { Camera } from '../../camera-manager/camera.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 { MediaLoadedInfoSinkController } from '../../components-lib/media-loaded-info-sink-controller.js';
@@ -51,7 +50,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
public cardWideConfig?: CardWideConfig;
@property({ attribute: false })
public microphoneState?: MicrophoneState;
public microphoneStream?: MediaStream | null;
@property({ attribute: false })
public zoomSettings?: PartialZoomSettings | null;
@@ -340,7 +339,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
.hass=${this.hass}
.camera=${this.camera}
.targetID=${this.targetID}
.microphoneState=${this.microphoneState}
.microphoneStream=${this.microphoneStream}
.microphoneConfig=${this.liveConfig.microphone}
?controls=${this._getEffectiveBuiltinControls()}
@advanced-camera-card:live:error=${(ev: Event) =>
src/components/live/providers/go2rtc/index.ts
+4 -5
View File
@@ -8,7 +8,6 @@ import {
} from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { Camera } from '../../../../camera-manager/camera.js';
import { MicrophoneState } from '../../../../card-controller/types.js';
import { dispatchLiveErrorEvent } from '../../../../components-lib/live/utils/dispatch-live-error.js';
import { VideoMediaPlayerController } from '../../../../components-lib/media-player/video.js';
import { SignedURLController } from '../../../../components-lib/signed-url-controller.js';
@@ -35,7 +34,7 @@ export class AdvancedCameraCardGo2RTC extends LitElement implements MediaPlayer
public targetID?: string;
@property({ attribute: false })
public microphoneState?: MicrophoneState;
public microphoneStream?: MediaStream | null;
@property({ attribute: false })
public microphoneConfig?: MicrophoneConfig;
@@ -103,7 +102,7 @@ export class AdvancedCameraCardGo2RTC extends LitElement implements MediaPlayer
this._player = new VideoRTC();
this._player.targetID = this.targetID ?? null;
this._player.mediaPlayerController = this._mediaPlayerController;
this._player.microphoneStream = this.microphoneState?.stream ?? null;
this._player.microphoneStream = this.microphoneStream ?? null;
this._player.src = src;
this._player.visibilityCheck = false;
this._player.setControls(this.controls);
@@ -137,11 +136,11 @@ export class AdvancedCameraCardGo2RTC extends LitElement implements MediaPlayer
this._player.setControls(this.controls);
}
if (this._player && changedProps.has('microphoneState')) {
if (this._player && changedProps.has('microphoneStream')) {
// VideoRTC owns the transition: it updates microphoneStream, swaps the
// track on the pre-armed transceiver, and validates against stale async
// completions before any reconnect fallback. Fire-and-forget is fine.
/* async */ this._player.setMicrophoneStream(this.microphoneState?.stream ?? null);
/* async */ this._player.setMicrophoneStream(this.microphoneStream ?? null);
}
}
src/components/menu.ts
+9 -3
View File
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { actionHandler } from '../action-handler-directive.js';
import type { LockManagerEpoch } from '../card-controller/lock/types';
import type { AutoHideState } from '../components-lib/auto-hide.js';
import { MenuController } from '../components-lib/menu-controller.js';
import type { MenuItem } from '../config/schema/elements/custom/menu/types.js';
import type { MenuConfig } from '../config/schema/menu.js';
@@ -11,6 +12,7 @@ import type { EntityRegistryManager } from '../ha/registry/entity/types.js';
import type { HomeAssistant } from '../ha/types.js';
import menuStyle from '../scss/menu.scss';
import { hasAction } from '../utils/action.js';
import { contentsChanged } from '../utils/basic.js';
import './icon.js';
import './submenu/select-button.js';
import './submenu/submenu-button';
@@ -28,6 +30,9 @@ export class AdvancedCameraCardMenu extends LitElement {
@property({ attribute: false })
public lockManagerEpoch?: LockManagerEpoch;
@property({ attribute: false, hasChanged: contentsChanged })
public autoHideState?: AutoHideState;
set menuConfig(menuConfig: MenuConfig) {
this._controller.setMenuConfig(menuConfig);
}
@@ -44,6 +49,9 @@ export class AdvancedCameraCardMenu extends LitElement {
if (changedProps.has('lockManagerEpoch')) {
this._controller.setLockManagerEpoch(this.lockManagerEpoch);
}
if (changedProps.has('autoHideState') && this.autoHideState) {
this._controller.setAutoHideState(this.autoHideState);
}
}
public toggleMenu(): void {
@@ -156,9 +164,7 @@ export class AdvancedCameraCardMenu extends LitElement {
}
protected render(): TemplateResult | void {
const config = this._controller.getMenuConfig();
const style = config?.style;
if (!config || style === 'none') {
if (!this._controller.shouldRender()) {
return;
}
const matchingButtons = this._controller.getButtons('matching');
src/components/next-prev-control.ts
+12 -1
View File
@@ -1,10 +1,12 @@
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { AutoHideState, isAutoHidden } from '../components-lib/auto-hide.js';
import { NextPreviousControlConfig } from '../config/schema/common/controls/next-previous.js';
import { Icon } from '../config/schema/common/icon.js';
import { HomeAssistant } from '../ha/types.js';
import controlStyle from '../scss/next-previous-control.scss';
import { contentsChanged } from '../utils/basic.js';
import { renderTask } from '../utils/task.js';
import { createFetchThumbnailTask } from '../utils/thumbnail.js';
@@ -38,6 +40,9 @@ export class AdvancedCameraCardNextPreviousControl extends LitElement {
@property({ attribute: true, type: Boolean })
public disabled = false;
@property({ attribute: false, hasChanged: contentsChanged })
public autoHideState?: AutoHideState;
// Label that is used for ARIA support and as tooltip.
@property() label = '';
@@ -48,7 +53,13 @@ export class AdvancedCameraCardNextPreviousControl extends LitElement {
);
protected render(): TemplateResult {
if (this.disabled || !this._controlConfig || this._controlConfig.style == 'none') {
if (
this.disabled ||
!this._controlConfig ||
this._controlConfig.style == 'none' ||
(this.autoHideState &&
isAutoHidden(this._controlConfig.auto_hide, this.autoHideState))
) {
return html``;
}
src/components/notification/popup.ts
+2 -1
View File
@@ -5,6 +5,7 @@ import { handleControlAction } from '../../components-lib/notification/action.js
import { Notification } from '../../config/schema/actions/types.js';
import { localize } from '../../localize/localize.js';
import notificationPopupStyle from '../../scss/notification-popup.scss';
import { hasPopOutAnimationEnded } from '../../utils/animation.js';
import { dispatchDismissNotificationEvent } from '../../utils/notification.js';
import {
renderControl,
@@ -80,7 +81,7 @@ export class AdvancedCameraCardNotification extends LitElement {
};
private _handleAnimationEnd = (ev: AnimationEvent): void => {
if (ev.animationName === 'slideDown') {
if (hasPopOutAnimationEnded(ev)) {
dispatchDismissNotificationEvent(this);
}
};
src/components/status-bar.ts
+8
View File
@@ -10,6 +10,7 @@ import {
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { actionHandler } from '../action-handler-directive.js';
import type { AutoHideState } from '../components-lib/auto-hide.js';
import { StatusBarController } from '../components-lib/status-bar-controller';
import { StatusBarItem } from '../config/schema/actions/types.js';
import { StatusBarConfig } from '../config/schema/status-bar.js';
@@ -28,6 +29,9 @@ export class AdvancedCameraCardStatusBar extends LitElement {
@property({ attribute: false })
public config?: StatusBarConfig;
@property({ attribute: false, hasChanged: contentsChanged })
public autoHideState?: AutoHideState;
protected willUpdate(changedProperties: PropertyValues): void {
// Always set config before items.
if (changedProperties.has('config') && this.config) {
@@ -37,6 +41,10 @@ export class AdvancedCameraCardStatusBar extends LitElement {
if (changedProperties.has('items')) {
this._controller.setItems(this.items ?? []);
}
if (changedProperties.has('autoHideState') && this.autoHideState) {
this._controller.setAutoHideState(this.autoHideState);
}
}
/** Theme-related styling is dynamically injected into the status bar depending on
src/components/viewer/carousel.ts
+2
View File
@@ -13,6 +13,7 @@ import { createRef, Ref, ref } from 'lit/directives/ref.js';
import { CameraManager } from '../../camera-manager/manager.js';
import { RemoveContextPropertyViewModifier } from '../../card-controller/view/modifiers/remove-context-property.js';
import { ViewManagerEpoch } from '../../card-controller/view/types.js';
import { resolveAutoHideState } from '../../components-lib/auto-hide.js';
import { MediaActionsController } from '../../components-lib/media-actions-controller.js';
import { MediaHeightController } from '../../components-lib/media-height-controller.js';
import { MediaLoadedInfoSinkController } from '../../components-lib/media-loaded-info-sink-controller.js';
@@ -302,6 +303,7 @@ export class AdvancedCameraCardViewerCarousel extends LitElement {
.controlConfig=${this.viewerConfig?.controls.next_previous}
.thumbnail=${neighbors?.[scrollDirection]?.media.getThumbnail() ?? undefined}
.label=${neighbors?.[scrollDirection]?.media.getTitle() ?? ''}
.autoHideState=${resolveAutoHideState()}
?disabled=${!neighbors?.[scrollDirection]}
@click=${(ev: Event) => {
scroll(scrollDirection);
src/components/views.ts
+5
View File
@@ -15,6 +15,7 @@ import { MicrophoneManager } from '../card-controller/microphone-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 { CallSession } from '../card-controller/call/types.js';
import { ConditionStateManagerReadonlyInterface } from '../conditions/types.js';
import { AdvancedCameraCardConfig, CardWideConfig } from '../config/schema/types.js';
import { RawAdvancedCameraCardConfig } from '../config/types.js';
@@ -67,6 +68,9 @@ export class AdvancedCameraCardViews extends LitElement {
@property({ attribute: false })
public microphoneState?: MicrophoneState;
@property({ attribute: false })
public call?: CallSession;
@property({ attribute: false })
public locked?: boolean;
@@ -240,6 +244,7 @@ export class AdvancedCameraCardViews extends LitElement {
.cardWideConfig=${this.cardWideConfig}
.microphoneManager=${this.microphoneManager}
.microphoneState=${this.microphoneState}
.call=${this.call}
.locked=${this.locked}
.triggeredCameraIDs=${this.triggeredCameraIDs}
class="${classMap(liveClasses)}"