refactor: Convert protected methods to private (#2358)

src/components-lib/cached-value-controller.ts

@@ -2,13 +2,13 @@ import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { Timer } from '../utils/timer';
 
 export class CachedValueController<T> implements ReactiveController {
-  protected _value?: T;
-  protected _host: ReactiveControllerHost;
-  protected _timerSeconds: number;
-  protected _callback: () => T;
-  protected _timerStartCallback?: () => void;
-  protected _timerStopCallback?: () => void;
-  protected _timer = new Timer();
+  private _value?: T;
+  private _host: ReactiveControllerHost;
+  private _timerSeconds: number;
+  private _callback: () => T;
+  private _timerStartCallback?: () => void;
+  private _timerStopCallback?: () => void;
+  private _timer = new Timer();
 
   constructor(
     host: ReactiveControllerHost,

src/components-lib/key-assigner-controller.ts

@@ -4,9 +4,9 @@ import { KeyboardShortcut } from '../config/schema/view';
 import { setOrRemoveAttribute } from '../utils/basic';
 
 export class KeyAssignerController implements ReactiveController {
-  protected _host: LitElement;
-  protected _assigning = false;
-  protected _value: KeyboardShortcut | null = null;
+  private _host: LitElement;
+  private _assigning = false;
+  private _value: KeyboardShortcut | null = null;
 
   constructor(host: LitElement) {
     this._host = host;
@@ -40,7 +40,7 @@ export class KeyAssignerController implements ReactiveController {
   public toggleAssigning(): void {
     this._setAssigning(!this._assigning);
   }
-  protected _setAssigning(assigning: boolean): void {
+  private _setAssigning(assigning: boolean): void {
     this._assigning = assigning;
     setOrRemoveAttribute(this._host, this._assigning, 'assigning');
 
@@ -53,11 +53,11 @@ export class KeyAssignerController implements ReactiveController {
     this._host.requestUpdate();
   }
 
-  protected _blurEventHandler = (): void => {
+  private _blurEventHandler = (): void => {
     this._setAssigning(false);
   };
 
-  protected _keydownEventHandler = (ev: KeyboardEvent): void => {
+  private _keydownEventHandler = (ev: KeyboardEvent): void => {
     // Don't allow _only_ a modifier.
     if (!ev.key || ['Control', 'Alt', 'Shift', 'Meta'].includes(ev.key)) {
       return;

src/components-lib/live/live-controller.ts

@@ -28,20 +28,20 @@ type LiveControllerHost = LitElement &
   AdvancedCameraCardMessageEventTarget;
 
 export class LiveController implements ReactiveController {
-  protected _host: LiveControllerHost;
+  private _host: LiveControllerHost;
 
   // Whether or not the live view is currently in the background (i.e. preloaded
   // but not visible).
-  protected _inBackground = false;
+  private _inBackground = false;
 
   // Intersection handler is used to detect when the live view flips between
   // foreground and background (in preload mode).
-  protected _intersectionObserver: IntersectionObserver;
+  private _intersectionObserver: IntersectionObserver;
 
   // MediaLoadedInfo object and target from the underlying live media. In the
   // case of pre-loading these may be propagated later (from the original
   // source).
-  protected _lastMediaLoadedInfo: LastMediaLoadedInfo | null = null;
+  private _lastMediaLoadedInfo: LastMediaLoadedInfo | null = null;
 
   constructor(host: LiveControllerHost) {
     this._host = host;
@@ -75,7 +75,7 @@ export class LiveController implements ReactiveController {
     return this._inBackground;
   }
 
-  protected _handleMediaLoaded = (ev: CustomEvent<MediaLoadedInfo>): void => {
+  private _handleMediaLoaded = (ev: CustomEvent<MediaLoadedInfo>): void => {
     this._lastMediaLoadedInfo = {
       source: ev.composedPath()[0],
       mediaLoadedInfo: ev.detail,
@@ -86,7 +86,7 @@ export class LiveController implements ReactiveController {
     }
   };
 
-  protected _intersectionHandler(entries: IntersectionObserverEntry[]): void {
+  private _intersectionHandler(entries: IntersectionObserverEntry[]): void {
     const wasInBackground = this._inBackground;
     this._inBackground = !entries.some((entry) => entry.isIntersecting);
 

src/components-lib/media-actions-controller.ts

@@ -36,16 +36,16 @@ type MediaActionsTarget = {
 };
 
 export class MediaActionsController {
-  protected _options: MediaActionsControllerOptions | null = null;
-  protected _viewportIntersecting: boolean | null = null;
-  protected _microphoneMuteTimer = new Timer();
-  protected _root: RenderRoot | null = null;
+  private _options: MediaActionsControllerOptions | null = null;
+  private _viewportIntersecting: boolean | null = null;
+  private _microphoneMuteTimer = new Timer();
+  private _root: RenderRoot | null = null;
 
-  protected _eventListeners = new Map<HTMLElement, () => void>();
-  protected _children: MediaPlayerElement[] = [];
-  protected _target: MediaActionsTarget | null = null;
-  protected _mutationObserver = new MutationObserver(this._mutationHandler.bind(this));
-  protected _intersectionObserver = new IntersectionObserver(
+  private _eventListeners = new Map<HTMLElement, () => void>();
+  private _children: MediaPlayerElement[] = [];
+  private _target: MediaActionsTarget | null = null;
+  private _mutationObserver = new MutationObserver(this._mutationHandler.bind(this));
+  private _intersectionObserver = new IntersectionObserver(
     this._intersectionHandler.bind(this),
   );
 
@@ -110,7 +110,7 @@ export class MediaActionsController {
     this._target = null;
   }
 
-  protected async _playTargetIfConfigured(condition: AutoPlayCondition): Promise<void> {
+  private async _playTargetIfConfigured(condition: AutoPlayCondition): Promise<void> {
     if (
       this._target !== null &&
       this._options?.autoPlayConditions?.includes(condition)
@@ -118,10 +118,10 @@ export class MediaActionsController {
       await this._play(this._target.index);
     }
   }
-  protected async _play(index: number): Promise<void> {
+  private async _play(index: number): Promise<void> {
     await (await this._children[index]?.getMediaPlayerController())?.play();
   }
-  protected async _unmuteTargetIfConfigured(
+  private async _unmuteTargetIfConfigured(
     condition: AutoUnmuteCondition,
   ): Promise<void> {
     if (
@@ -131,20 +131,18 @@ export class MediaActionsController {
       await this._unmute(this._target.index);
     }
   }
-  protected async _unmute(index: number): Promise<void> {
+  private async _unmute(index: number): Promise<void> {
     await (await this._children[index]?.getMediaPlayerController())?.unmute();
   }
 
-  protected async _pauseAllIfConfigured(condition: AutoPauseCondition): Promise<void> {
+  private async _pauseAllIfConfigured(condition: AutoPauseCondition): Promise<void> {
     if (this._options?.autoPauseConditions?.includes(condition)) {
       for (const index of this._children.keys()) {
         await this._pause(index);
       }
     }
   }
-  protected async _pauseTargetIfConfigured(
-    condition: AutoPauseCondition,
-  ): Promise<void> {
+  private async _pauseTargetIfConfigured(condition: AutoPauseCondition): Promise<void> {
     if (
       this._target !== null &&
       this._options?.autoPauseConditions?.includes(condition)
@@ -152,18 +150,18 @@ export class MediaActionsController {
       await this._pause(this._target.index);
     }
   }
-  protected async _pause(index: number): Promise<void> {
+  private async _pause(index: number): Promise<void> {
     await (await this._children[index]?.getMediaPlayerController())?.pause();
   }
 
-  protected async _muteAllIfConfigured(condition: AutoMuteCondition): Promise<void> {
+  private async _muteAllIfConfigured(condition: AutoMuteCondition): Promise<void> {
     if (this._options?.autoMuteConditions?.includes(condition)) {
       for (const index of this._children.keys()) {
         await this._mute(index);
       }
     }
   }
-  protected async _muteTargetIfConfigured(condition: AutoMuteCondition): Promise<void> {
+  private async _muteTargetIfConfigured(condition: AutoMuteCondition): Promise<void> {
     if (
       this._target !== null &&
       this._options?.autoMuteConditions?.includes(condition)
@@ -171,11 +169,11 @@ export class MediaActionsController {
       await this._mute(this._target.index);
     }
   }
-  protected async _mute(index: number): Promise<void> {
+  private async _mute(index: number): Promise<void> {
     await (await this._children[index]?.getMediaPlayerController())?.mute();
   }
 
-  protected _mutationHandler(
+  private _mutationHandler(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     _mutations: MutationRecord[],
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -184,7 +182,7 @@ export class MediaActionsController {
     this._initializeRoot();
   }
 
-  protected _mediaLoadedHandler = async (index: number): Promise<void> => {
+  private _mediaLoadedHandler = async (index: number): Promise<void> => {
     if (this._target?.index !== index) {
       return;
     }
@@ -192,7 +190,7 @@ export class MediaActionsController {
     await this._playTargetIfConfigured(this._target.selected ? 'selected' : 'visible');
   };
 
-  protected _removeChildHandlers(): void {
+  private _removeChildHandlers(): void {
     for (const [child, callback] of this._eventListeners.entries()) {
       child.removeEventListener('advanced-camera-card:media:loaded', callback);
     }
@@ -216,7 +214,7 @@ export class MediaActionsController {
     return true;
   }
 
-  protected _initializeRoot(): void {
+  private _initializeRoot(): void {
     if (!this._options || !this._root) {
       return;
     }
@@ -234,7 +232,7 @@ export class MediaActionsController {
     }
   }
 
-  protected async _intersectionHandler(
+  private async _intersectionHandler(
     entries: IntersectionObserverEntry[],
   ): Promise<void> {
     const wasIntersecting = this._viewportIntersecting;
@@ -248,11 +246,11 @@ export class MediaActionsController {
     }
   }
 
-  protected _visibilityHandler = async (): Promise<void> => {
+  private _visibilityHandler = async (): Promise<void> => {
     await this._changeVisibility(document.visibilityState === 'visible');
   };
 
-  protected _changeVisibility = async (visible: boolean): Promise<void> => {
+  private _changeVisibility = async (visible: boolean): Promise<void> => {
     if (visible) {
       await this._unmuteTargetIfConfigured('visible');
       await this._playTargetIfConfigured('visible');
@@ -262,7 +260,7 @@ export class MediaActionsController {
     }
   };
 
-  protected async _microphoneStateChangeHandler(
+  private async _microphoneStateChangeHandler(
     oldState?: MicrophoneState,
     newState?: MicrophoneState,
   ): Promise<void> {

src/components-lib/media-filter-controller.ts

@@ -68,24 +68,24 @@ export enum MediaFilterMediaType {
 }
 
 export class MediaFilterController {
-  protected _host: LitElement;
+  private _host: LitElement;
 
-  protected _mediaTypeOptions: SelectOption[];
-  protected _cameraOptions: SelectOption[] = [];
+  private _mediaTypeOptions: SelectOption[];
+  private _cameraOptions: SelectOption[] = [];
 
-  protected _whenOptions: SelectOption[] = [];
-  protected _staticWhenOptions: SelectOption[];
-  protected _metaDataWhenOptions: SelectOption[] = [];
+  private _whenOptions: SelectOption[] = [];
+  private _staticWhenOptions: SelectOption[];
+  private _metaDataWhenOptions: SelectOption[] = [];
 
-  protected _whatOptions: SelectOption[] = [];
-  protected _whereOptions: SelectOption[] = [];
-  protected _tagsOptions: SelectOption[] = [];
-  protected _favoriteOptions: SelectOption[];
-  protected _reviewedOptions: SelectOption[];
-  protected _severityOptions: SelectOption[];
+  private _whatOptions: SelectOption[] = [];
+  private _whereOptions: SelectOption[] = [];
+  private _tagsOptions: SelectOption[] = [];
+  private _favoriteOptions: SelectOption[];
+  private _reviewedOptions: SelectOption[];
+  private _severityOptions: SelectOption[];
 
-  protected _defaults: MediaFilterCoreDefaults | null = null;
-  protected _viewManager: ViewManagerInterface | null = null;
+  private _defaults: MediaFilterCoreDefaults | null = null;
+  private _viewManager: ViewManagerInterface | null = null;
 
   constructor(host: LitElement) {
     this._host = host;
@@ -450,15 +450,15 @@ export class MediaFilterController {
     this._host.requestUpdate();
   }
 
-  protected _computeWhenOptions(): void {
+  private _computeWhenOptions(): void {
     this._whenOptions = [...this._staticWhenOptions, ...this._metaDataWhenOptions];
   }
 
-  protected _dateRangeToString(when: DateRange): string {
+  private _dateRangeToString(when: DateRange): string {
     return `${formatDate(when.start)},${formatDate(when.end)}`;
   }
 
-  protected _stringToDateRange(input: string): DateRange {
+  private _stringToDateRange(input: string): DateRange {
     const dates = input.split(',');
     return {
       start: parse(dates[0], 'yyyy-MM-dd', new Date()),
@@ -466,7 +466,7 @@ export class MediaFilterController {
     };
   }
 
-  protected _getWhen(values: {
+  private _getWhen(values: {
     selected?: string | string[];
     from?: Date | null;
     to?: Date | null;
@@ -499,7 +499,7 @@ export class MediaFilterController {
     }
   }
 
-  protected _hasSingleUniqueValue(sets: (Set<unknown> | undefined)[]): boolean {
+  private _hasSingleUniqueValue(sets: (Set<unknown> | undefined)[]): boolean {
     if (sets.length === 0) {
       return false;
     }

src/components-lib/media-grid-controller.ts

@@ -47,18 +47,18 @@ export interface ExtendedMasonry extends Masonry {
 }
 
 export class MediaGridController {
-  protected _host: HTMLElement;
+  private _host: HTMLElement;
 
-  protected _selected: GridID | null;
-  protected _mediaLoadedInfoMap: Map<GridID, MediaLoadedInfo> = new Map();
-  protected _gridContents: MediaGridContents = new Map();
-  protected _masonry: ExtendedMasonry | null = null;
-  protected _displayConfig: ViewDisplayConfig | null = null;
-  protected _hostWidth: number;
-  protected _idAttribute: string;
-  protected _widthFactorAttribute: string;
+  private _selected: GridID | null;
+  private _mediaLoadedInfoMap: Map<GridID, MediaLoadedInfo> = new Map();
+  private _gridContents: MediaGridContents = new Map();
+  private _masonry: ExtendedMasonry | null = null;
+  private _displayConfig: ViewDisplayConfig | null = null;
+  private _hostWidth: number;
+  private _idAttribute: string;
+  private _widthFactorAttribute: string;
 
-  protected _throttledLayout = throttle(
+  private _throttledLayout = throttle(
     () => this._masonry?.layout?.(),
     // Throttle layout calls to larger than the masonry.js transitionDuration
     // value specified below.
@@ -68,18 +68,18 @@ export class MediaGridController {
 
   // If the order in which the observers are declared changes, the unittest must
   // be updated in triggerResizeObserver and triggerMutationObserver.
-  protected _hostMutationObserver = new MutationObserver(
+  private _hostMutationObserver = new MutationObserver(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     (_mutations: MutationRecord[], _observer: MutationObserver) =>
       this._calculateGridContentsFromHost(),
   );
-  protected _cellMutationObserver = new MutationObserver(
+  private _cellMutationObserver = new MutationObserver(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     (_mutations: MutationRecord[], _observer: MutationObserver) =>
       this._calculateGridContentsFromHost(),
   );
-  protected _hostResizeObserver = new ResizeObserver(this._hostResizeHandler.bind(this));
-  protected _cellResizeObserver = new ResizeObserver(this._cellResizeHandler.bind(this));
+  private _hostResizeObserver = new ResizeObserver(this._hostResizeHandler.bind(this));
+  private _cellResizeObserver = new ResizeObserver(this._cellResizeHandler.bind(this));
 
   constructor(host: HTMLElement, options?: MediaGridConstructorOptions) {
     this._host = host;
@@ -142,7 +142,7 @@ export class MediaGridController {
     return this._selected;
   }
 
-  protected _sortItemsInGrid(): void {
+  private _sortItemsInGrid(): void {
     const existingItems = this._masonry?.items;
     const selectedItem = existingItems?.find(
       (item) => item.element.getAttribute(this._idAttribute) === this._selected,
@@ -201,7 +201,7 @@ export class MediaGridController {
     this._updateSelectedStylesOnElements();
   }
 
-  protected _calculateGridContentsFromHost = (): void => {
+  private _calculateGridContentsFromHost = (): void => {
     const children = getChildrenFromElement(this._host);
     const gridContents: MediaGridContents = new Map();
     for (const child of children) {
@@ -212,7 +212,7 @@ export class MediaGridController {
     this._setGridContents(gridContents);
   };
 
-  protected _setGridContents(gridContents: MediaGridContents): void {
+  private _setGridContents(gridContents: MediaGridContents): void {
     this._gridContents = gridContents;
 
     // Remove media loaded info objects that belong to objects no longer in the
@@ -252,7 +252,7 @@ export class MediaGridController {
     this._setColumnSizeStyles();
   }
 
-  protected _handleMediaLoadedInfoEvent = (ev: CustomEvent<MediaLoadedInfo>): void => {
+  private _handleMediaLoadedInfoEvent = (ev: CustomEvent<MediaLoadedInfo>): void => {
     const eventPath = ev.composedPath();
 
     for (const [id, element] of this._gridContents.entries()) {
@@ -267,7 +267,7 @@ export class MediaGridController {
     }
   };
 
-  protected _hostResizeHandler(): void {
+  private _hostResizeHandler(): void {
     const dimensions = this._host.getBoundingClientRect();
 
     // Only resize things if the width has changed. It is expected that the
@@ -283,11 +283,11 @@ export class MediaGridController {
     }
   }
 
-  protected _cellResizeHandler(): void {
+  private _cellResizeHandler(): void {
     this._throttledLayout();
   }
 
-  protected _addChildEventListeners(child: MediaGridChild): void {
+  private _addChildEventListeners(child: MediaGridChild): void {
     child.addEventListener('click', this._handleSelectGridCellEvent, {
       capture: true,
     });
@@ -298,7 +298,7 @@ export class MediaGridController {
     );
   }
 
-  protected _removeChildEventListeners(child: MediaGridChild): void {
+  private _removeChildEventListeners(child: MediaGridChild): void {
     child.removeEventListener('click', this._handleSelectGridCellEvent, {
       capture: true,
     });
@@ -309,7 +309,7 @@ export class MediaGridController {
     );
   }
 
-  protected _createMasonry(): void {
+  private _createMasonry(): void {
     if (this._masonry) {
       this._masonry.destroy?.();
     }
@@ -325,7 +325,7 @@ export class MediaGridController {
     this._throttledLayout();
   }
 
-  protected _handleSelectGridCellEvent = (ev: Event): void => {
+  private _handleSelectGridCellEvent = (ev: Event): void => {
     const eventPath = ev.composedPath();
 
     for (const [id, element] of this._gridContents.entries()) {
@@ -340,7 +340,7 @@ export class MediaGridController {
     }
   };
 
-  protected _updateSelectedStylesOnElements(): void {
+  private _updateSelectedStylesOnElements(): void {
     for (const [id, element] of this._gridContents.entries()) {
       setOrRemoveAttribute(element, id === this._selected, 'selected');
 
@@ -351,7 +351,7 @@ export class MediaGridController {
     }
   }
 
-  protected _updateWidthFactorStyles(): void {
+  private _updateWidthFactorStyles(): void {
     for (const element of this._gridContents.values()) {
       const widthFactor = element.getAttribute(this._widthFactorAttribute);
       setOrRemoveStyleProperty(
@@ -363,7 +363,7 @@ export class MediaGridController {
     }
   }
 
-  protected _getColumnSize(): number {
+  private _getColumnSize(): number {
     const columns = this._getColumns();
     if (columns === 1) {
       return this._hostWidth;
@@ -372,7 +372,7 @@ export class MediaGridController {
     return Math.max(0, this._hostWidth / columns - MEDIA_GRID_HORIZONTAL_GUTTER_WIDTH);
   }
 
-  protected _getColumns(): number {
+  private _getColumns(): number {
     if (this._displayConfig?.grid_columns) {
       return this._displayConfig?.grid_columns;
     }
@@ -397,7 +397,7 @@ export class MediaGridController {
     return Math.max(1, minColumns);
   }
 
-  protected _setColumnSizeStyles(): void {
+  private _setColumnSizeStyles(): void {
     this._host.style.setProperty(
       '--advanced-camera-card-grid-column-size',
       `${this._getColumnSize()}px`,

src/components-lib/media/details-controller.ts

@@ -219,7 +219,7 @@ export class MediaDetailsController {
     };
   }
 
-  protected _getControls(context: OverlayControlsContext): OverlayMessageControl[] {
+  private _getControls(context: OverlayControlsContext): OverlayMessageControl[] {
     const controls: OverlayMessageControl[] = [];
     const item = this._item;
 

src/components-lib/menu-button-controller.ts

@@ -51,7 +51,7 @@ export interface MenuButtonControllerOptions {
 
 export class MenuButtonController {
   // Array of dynamic menu buttons to be added to menu.
-  protected _dynamicMenuButtons: MenuItem[] = [];
+  private _dynamicMenuButtons: MenuItem[] = [];
 
   public addDynamicMenuButton(button: MenuItem): void {
     if (!this._dynamicMenuButtons.includes(button)) {
@@ -128,7 +128,7 @@ export class MenuButtonController {
     ].filter(isTruthy);
   }
 
-  protected _getIrisButton(config: AdvancedCameraCardConfig): MenuItem {
+  private _getIrisButton(config: AdvancedCameraCardConfig): MenuItem {
     return {
       icon: 'iris',
       ...config.menu.buttons.iris,
@@ -145,7 +145,7 @@ export class MenuButtonController {
     };
   }
 
-  protected _getCamerasButton(
+  private _getCamerasButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     view?: View | null,
@@ -180,7 +180,7 @@ export class MenuButtonController {
     return null;
   }
 
-  protected _getSubstreamsButton(
+  private _getSubstreamsButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     view?: View | null,
@@ -243,7 +243,7 @@ export class MenuButtonController {
     return null;
   }
 
-  protected _getLiveButton(
+  private _getLiveButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     foldersManager: FoldersManager,
@@ -261,7 +261,7 @@ export class MenuButtonController {
       : null;
   }
 
-  protected _getClipsButton(
+  private _getClipsButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     foldersManager: FoldersManager,
@@ -280,7 +280,7 @@ export class MenuButtonController {
       : null;
   }
 
-  protected _getSnapshotsButton(
+  private _getSnapshotsButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     foldersManager: FoldersManager,
@@ -299,7 +299,7 @@ export class MenuButtonController {
       : null;
   }
 
-  protected _getRecordingsButton(
+  private _getRecordingsButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     foldersManager: FoldersManager,
@@ -318,7 +318,7 @@ export class MenuButtonController {
       : null;
   }
 
-  protected _getReviewsButton(
+  private _getReviewsButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     foldersManager: FoldersManager,
@@ -337,7 +337,7 @@ export class MenuButtonController {
       : null;
   }
 
-  protected _getGalleryButton(
+  private _getGalleryButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     foldersManager: FoldersManager,
@@ -356,7 +356,7 @@ export class MenuButtonController {
       : null;
   }
 
-  protected _getImageButton(
+  private _getImageButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     foldersManager: FoldersManager,
@@ -374,7 +374,7 @@ export class MenuButtonController {
       : null;
   }
 
-  protected _getTimelineButton(
+  private _getTimelineButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     foldersManager: FoldersManager,
@@ -392,7 +392,7 @@ export class MenuButtonController {
       : null;
   }
 
-  protected _getDownloadButton(
+  private _getDownloadButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     view?: View | null,
@@ -414,7 +414,7 @@ export class MenuButtonController {
     return null;
   }
 
-  protected _getInfoButton(
+  private _getInfoButton(
     config: AdvancedCameraCardConfig,
     _cameraManager: CameraManager,
     view?: View | null,
@@ -435,7 +435,7 @@ export class MenuButtonController {
     };
   }
 
-  protected _getSetReviewButton(
+  private _getSetReviewButton(
     config: AdvancedCameraCardConfig,
     view?: View | null,
   ): MenuItem | null {
@@ -460,7 +460,7 @@ export class MenuButtonController {
     };
   }
 
-  protected _getCameraUIButton(
+  private _getCameraUIButton(
     config: AdvancedCameraCardConfig,
     showCameraUIButton?: boolean,
   ): MenuItem | null {
@@ -475,7 +475,7 @@ export class MenuButtonController {
       : null;
   }
 
-  protected _getMicrophoneButton(
+  private _getMicrophoneButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     view?: View | null,
@@ -519,7 +519,7 @@ export class MenuButtonController {
     return null;
   }
 
-  protected _getExpandButton(
+  private _getExpandButton(
     config: AdvancedCameraCardConfig,
     inExpandedMode?: boolean,
   ): MenuItem {
@@ -533,7 +533,7 @@ export class MenuButtonController {
     };
   }
 
-  protected _getFullscreenButton(
+  private _getFullscreenButton(
     config: AdvancedCameraCardConfig,
     fullscreenManager?: FullscreenManager | null,
   ): MenuItem | null {
@@ -550,7 +550,7 @@ export class MenuButtonController {
       : null;
   }
 
-  protected _getCastButton(
+  private _getCastButton(
     hass: HomeAssistant,
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
@@ -599,7 +599,7 @@ export class MenuButtonController {
     return null;
   }
 
-  protected _getPlayPauseButton(
+  private _getPlayPauseButton(
     config: AdvancedCameraCardConfig,
     currentMediaLoadedInfo?: MediaLoadedInfo | null,
   ): MenuItem | null {
@@ -620,7 +620,7 @@ export class MenuButtonController {
     return null;
   }
 
-  protected _getMuteUnmuteButton(
+  private _getMuteUnmuteButton(
     config: AdvancedCameraCardConfig,
     currentMediaLoadedInfo?: MediaLoadedInfo | null,
   ): MenuItem | null {
@@ -641,7 +641,7 @@ export class MenuButtonController {
     return null;
   }
 
-  protected _getScreenshotButton(
+  private _getScreenshotButton(
     config: AdvancedCameraCardConfig,
     currentMediaLoadedInfo?: MediaLoadedInfo | null,
   ): MenuItem | null {
@@ -657,7 +657,7 @@ export class MenuButtonController {
     return null;
   }
 
-  protected _getDisplayModeButton(
+  private _getDisplayModeButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     foldersManager: FoldersManager,
@@ -686,7 +686,7 @@ export class MenuButtonController {
     return null;
   }
 
-  protected _getPTZControlsButton(
+  private _getPTZControlsButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     view?: View | null,
@@ -723,7 +723,7 @@ export class MenuButtonController {
     return null;
   }
 
-  protected _getPTZHomeButton(
+  private _getPTZHomeButton(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     view?: View | null,
@@ -754,7 +754,7 @@ export class MenuButtonController {
     };
   }
 
-  protected _getFoldersButton(
+  private _getFoldersButton(
     config: AdvancedCameraCardConfig,
     foldersManager?: FoldersManager | null,
     view?: View | null,
@@ -808,7 +808,7 @@ export class MenuButtonController {
    * Get the style of emphasized menu items.
    * @returns A StyleInfo.
    */
-  protected _getEmphasizedStyle(critical?: boolean): StyleInfo {
+  private _getEmphasizedStyle(critical?: boolean): StyleInfo {
     if (critical) {
       return {
         animation: 'pulse 3s infinite',
@@ -826,7 +826,7 @@ export class MenuButtonController {
    * @param button The button to examine.
    * @returns A StyleInfo object.
    */
-  protected _getStyleFromActions(
+  private _getStyleFromActions(
     config: AdvancedCameraCardConfig,
     cameraManager: CameraManager,
     foldersManager: FoldersManager,

src/components-lib/menu-controller.ts

@@ -11,10 +11,10 @@ import { getActionConfigGivenAction } from '../utils/action';
 import { arrayify, isTruthy, setOrRemoveAttribute } from '../utils/basic.js';
 
 export class MenuController {
-  protected _host: LitElement;
-  protected _config: MenuConfig | null = null;
-  protected _buttons: MenuItem[] = [];
-  protected _expanded = false;
+  private _host: LitElement;
+  private _config: MenuConfig | null = null;
+  private _buttons: MenuItem[] = [];
+  private _expanded = false;
 
   constructor(host: LitElement) {
     this._host = host;
@@ -146,7 +146,7 @@ export class MenuController {
     }
   }
 
-  protected _sortButtons(): void {
+  private _sortButtons(): void {
     this._buttons = orderBy(
       this._buttons,
       (button) => {
@@ -161,11 +161,11 @@ export class MenuController {
     );
   }
 
-  protected _isHidingMenu(): boolean {
+  private _isHidingMenu(): boolean {
     return this._config?.style === 'hidden';
   }
 
-  protected _isMenuToggleAction(action: ActionConfig): boolean {
+  private _isMenuToggleAction(action: ActionConfig): boolean {
     return (
       action.action === 'fire-dom-event' &&
       action.advanced_camera_card_action === 'menu_toggle'

src/components-lib/status-bar-controller.ts

@@ -9,11 +9,11 @@ import { arrayify, setOrRemoveAttribute } from '../utils/basic';
 import { Timer } from '../utils/timer';
 
 export class StatusBarController {
-  protected _host: LitElement;
-  protected _config: StatusBarConfig | null = null;
+  private _host: LitElement;
+  private _config: StatusBarConfig | null = null;
 
-  protected _popupTimer = new Timer();
-  protected _items: StatusBarItem[] = [];
+  private _popupTimer = new Timer();
+  private _items: StatusBarItem[] = [];
 
   constructor(host: LitElement) {
     this._host = host;
@@ -90,7 +90,7 @@ export class StatusBarController {
     });
   }
 
-  protected _getSufficientValue(item: StatusBarItem): string | null {
+  private _getSufficientValue(item: StatusBarItem): string | null {
     /* istanbul ignore else: cannot happen -- @preserve */
     if (item.type === 'custom:advanced-camera-card-status-bar-icon') {
       return item.icon;
@@ -103,17 +103,17 @@ export class StatusBarController {
     }
   }
 
-  protected _getSufficientValues(items: StatusBarItem[]): (string | null)[] {
+  private _getSufficientValues(items: StatusBarItem[]): (string | null)[] {
     return items
       .filter((item) => item.enabled !== false && item.sufficient)
       .map((item) => this._getSufficientValue(item));
   }
 
-  protected _show(): void {
+  private _show(): void {
     setOrRemoveAttribute(this._host, false, 'hide');
   }
 
-  protected _hide(): void {
+  private _hide(): void {
     setOrRemoveAttribute(this._host, true, 'hide');
   }
 }

src/components-lib/zoom/zoom-controller.ts

@@ -13,30 +13,30 @@ import {
 } from './types';
 
 export class ZoomController {
-  protected _element: HTMLElement;
-  protected _panzoom?: PanzoomObject;
+  private _element: HTMLElement;
+  private _panzoom?: PanzoomObject;
 
   // Is the controller zoomed in at all?
-  protected _zoomed = false;
+  private _zoomed = false;
 
   // Is the controller set to the default zoom/pan settings?
-  protected _default = true;
+  private _default = true;
 
   // Should clicks be allowed to propagate, or consumed as a pan/zoom action?
-  protected _allowClick = true;
+  private _allowClick = true;
 
-  protected _defaultSettings: PartialZoomSettings | null;
-  protected _settings: PartialZoomSettings | null;
+  private _defaultSettings: PartialZoomSettings | null;
+  private _settings: PartialZoomSettings | null;
 
   // These values should be suitably less than the value of STEP_DELAY_SECONDS
   // in the ptz_digital action, in order to ensure smooth movements of the
   // digital PTZ actions.
-  protected _debouncedChangeHandler = throttle(this._changeHandler.bind(this), 50);
-  protected _debouncedUpdater = throttle(this._updateBasedOnConfig.bind(this), 50);
+  private _debouncedChangeHandler = throttle(this._changeHandler.bind(this), 50);
+  private _debouncedUpdater = throttle(this._updateBasedOnConfig.bind(this), 50);
 
-  protected _resizeObserver = new ResizeObserver(this._debouncedUpdater);
+  private _resizeObserver = new ResizeObserver(this._debouncedUpdater);
 
-  protected _events = isHoverableDevice()
+  private _events = isHoverableDevice()
     ? {
         down: ['pointerdown'],
         move: ['pointermove'],
@@ -48,7 +48,7 @@ export class ZoomController {
         up: ['touchend', 'touchcancel'],
       };
 
-  protected _downHandler = (ev: Event) => {
+  private _downHandler = (ev: Event) => {
     if (this._shouldZoomOrPan(ev)) {
       this._panzoom?.handleDown(ev as PointerEvent);
       ev.stopPropagation();
@@ -61,7 +61,7 @@ export class ZoomController {
     }
   };
 
-  protected _clickHandler = (ev: Event) => {
+  private _clickHandler = (ev: Event) => {
     // When mouse clicking is used to pan, need to avoid that causing a click
     // handler elsewhere in the card being called. Example: Viewing a snapshot,
     // and panning within it should not cause a related clip to play (the click
@@ -77,21 +77,21 @@ export class ZoomController {
     this._allowClick = true;
   };
 
-  protected _moveHandler = (ev: Event) => {
+  private _moveHandler = (ev: Event) => {
     if (this._shouldZoomOrPan(ev)) {
       this._panzoom?.handleMove(ev as PointerEvent);
       ev.stopPropagation();
     }
   };
 
-  protected _upHandler = (ev: Event) => {
+  private _upHandler = (ev: Event) => {
     if (this._shouldZoomOrPan(ev)) {
       this._panzoom?.handleUp(ev as PointerEvent);
       ev.stopPropagation();
     }
   };
 
-  protected _wheelHandler = (ev: Event) => {
+  private _wheelHandler = (ev: Event) => {
     if (ev instanceof WheelEvent && this._shouldZoomOrPan(ev)) {
       this._panzoom?.zoomWithWheel(ev);
       ev.stopPropagation();
@@ -198,7 +198,7 @@ export class ZoomController {
     this._debouncedUpdater();
   }
 
-  protected _changeHandler(ev: Event): void {
+  private _changeHandler(ev: Event): void {
     const pz = (<CustomEvent<PanzoomEventDetail>>ev).detail;
     const unzoomed = this._isUnzoomed(pz.scale);
 
@@ -228,7 +228,7 @@ export class ZoomController {
     fireAdvancedCameraCardEvent(this._element, 'zoom:change', observed);
   }
 
-  protected _isZoomEqual(a: PartialZoomSettings, b: PartialZoomSettings): boolean {
+  private _isZoomEqual(a: PartialZoomSettings, b: PartialZoomSettings): boolean {
     // The ?? clauses below cannot be reached since this function is only ever
     // used fully specified by this object. It's kept as-is for completeness.
     return (
@@ -256,11 +256,11 @@ export class ZoomController {
     );
   }
 
-  protected _getConfigToUse(): PartialZoomSettings | null {
+  private _getConfigToUse(): PartialZoomSettings | null {
     return isZoomEmpty(this._settings) ? this._defaultSettings : this._settings;
   }
 
-  protected _updateBasedOnConfig(): void {
+  private _updateBasedOnConfig(): void {
     if (!this._panzoom) {
       return;
     }
@@ -329,7 +329,7 @@ export class ZoomController {
    * @param scale The desired (not current) scale.
    * @returns An object with x/y pan % values or null on error.
    */
-  protected _convertPercentToXYPan(
+  private _convertPercentToXYPan(
     x: number,
     y: number,
     scale: number,
@@ -345,7 +345,7 @@ export class ZoomController {
     };
   }
 
-  protected _convertXYPanToPercent(
+  private _convertXYPanToPercent(
     x: number,
     y: number,
     scale: number,
@@ -367,7 +367,7 @@ export class ZoomController {
     };
   }
 
-  protected _getTransformMinMax(
+  private _getTransformMinMax(
     desiredScale: number,
     currentScale?: number,
   ): {
@@ -397,7 +397,7 @@ export class ZoomController {
     };
   }
 
-  protected _getRenderedSize(scale?: number): { width: number; height: number } {
+  private _getRenderedSize(scale?: number): { width: number; height: number } {
     const rect = this._element.getBoundingClientRect();
     return {
       width: rect.width / (scale ?? ZOOM_DEFAULT_SCALE),
@@ -405,11 +405,11 @@ export class ZoomController {
     };
   }
 
-  protected _isUnzoomed(scale?: number): boolean {
+  private _isUnzoomed(scale?: number): boolean {
     return scale !== undefined && round(scale, ZOOM_PRECISION) <= 1;
   }
 
-  protected _isAtDefaultZoomAndPan(x: number, y: number, scale: number): boolean {
+  private _isAtDefaultZoomAndPan(x: number, y: number, scale: number): boolean {
     if (!this._defaultSettings) {
       return this._isUnzoomed(scale);
     }
@@ -438,7 +438,7 @@ export class ZoomController {
     );
   }
 
-  protected _shouldZoomOrPan(ev: Event): boolean {
+  private _shouldZoomOrPan(ev: Event): boolean {
     return (
       !this._isUnzoomed(this._panzoom?.getScale()) ||
       // TouchEvent does not exist on Firefox on non-touch events. See:
@@ -448,7 +448,7 @@ export class ZoomController {
     );
   }
 
-  protected _setTouchAction(touchEnabled: boolean): void {
+  private _setTouchAction(touchEnabled: boolean): void {
     this._element.style.touchAction = touchEnabled ? '' : 'none';
   }
 }