From 3cffb4d59a94ed2ac41acc7eff775ededef948e1 Mon Sep 17 00:00:00 2001
From: Christian Pillsbury <cpillsbury@mux.com>
Date: Mon, 18 Aug 2025 10:54:00 -0500
Subject: [PATCH] fix: refactor private fields to public with underscore
 convention
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves TypeScript TS4094 error "Property may not be private or protected"
in exported anonymous classes created by factory functions.

Changes:
- #mediaStore → _mediaStore (public with underscore convention)
- #mediaSlot → _mediaSlot (public with underscore convention)
- #handleMediaSlotChange → _handleMediaSlotChange (public with underscore)

The underscore prefix indicates internal/private usage by convention
while avoiding TypeScript restrictions on anonymous class exports.

Affected files:
- media-mute-button.ts: 5 field references updated
- media-play-button.ts: 5 field references updated
- media-container.ts: 10 field references updated

All HTML packages now build successfully without TS4094 errors.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/connected/media-mute-button.ts  | 10 +++++-----
 .../components/connected/media-play-button.ts  | 10 +++++-----
 packages/html/html/src/media-container.ts      | 18 +++++++++---------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/html/html/src/components/connected/media-mute-button.ts b/packages/html/html/src/components/connected/media-mute-button.ts
index d4091b2d..75a6f06e 100644
--- a/packages/html/html/src/components/connected/media-mute-button.ts
+++ b/packages/html/html/src/components/connected/media-mute-button.ts
@@ -12,13 +12,13 @@ export const toConnectedMediaMuteButton = (BaseClass = HTMLElement) => {
       ];
     }
 
-    #mediaStore: any;
+    _mediaStore: any;
 
     contexts = {
       mediaStore: (mediaStore: any) => {
-        this.#mediaStore = mediaStore;
+        this._mediaStore = mediaStore;
 
-        this.#mediaStore.subscribeKeys(
+        this._mediaStore.subscribeKeys(
           ['mediaVolumeLevel', 'mediaMuted'],
           ({ mediaVolumeLevel, mediaMuted }: any) => {
             /** @ts-ignore */
@@ -54,11 +54,11 @@ export const toConnectedMediaMuteButton = (BaseClass = HTMLElement) => {
       /** @ts-ignore */
       super.handleEvent?.(event);
       if (
-        this.#mediaStore &&
+        this._mediaStore &&
         ['mediamuterequest', 'mediaunmuterequest'].includes(event.type)
       ) {
         const { type, detail } = event;
-        this.#mediaStore.dispatch({ type, detail });
+        this._mediaStore.dispatch({ type, detail });
       }
     }
   };
diff --git a/packages/html/html/src/components/connected/media-play-button.ts b/packages/html/html/src/components/connected/media-play-button.ts
index 1f2697fa..8a88e468 100644
--- a/packages/html/html/src/components/connected/media-play-button.ts
+++ b/packages/html/html/src/components/connected/media-play-button.ts
@@ -11,13 +11,13 @@ export const toConnectedMediaPlayButton = (BaseClass = HTMLElement) => {
       ];
     }
 
-    #mediaStore: any;
+    _mediaStore: any;
 
     contexts = {
       mediaStore: (mediaStore: any) => {
-        this.#mediaStore = mediaStore;
+        this._mediaStore = mediaStore;
 
-        this.#mediaStore.subscribeKeys(
+        this._mediaStore.subscribeKeys(
           ['mediaPaused'],
           ({ mediaPaused }: any) => {
             // NOTE: We may want to assume setting properties instead of attributes here to leave things generic for
@@ -52,11 +52,11 @@ export const toConnectedMediaPlayButton = (BaseClass = HTMLElement) => {
       /** @ts-ignore */
       super.handleEvent?.(event);
       if (
-        this.#mediaStore &&
+        this._mediaStore &&
         ['mediaplayrequest', 'mediapauserequest'].includes(event.type)
       ) {
         const { type, detail } = event;
-        this.#mediaStore.dispatch({ type, detail });
+        this._mediaStore.dispatch({ type, detail });
       }
     }
   };
diff --git a/packages/html/html/src/media-container.ts b/packages/html/html/src/media-container.ts
index 9357db10..4a4e0cdc 100644
--- a/packages/html/html/src/media-container.ts
+++ b/packages/html/html/src/media-container.ts
@@ -12,13 +12,13 @@ export class MediaContainer extends ConsumerMixin(HTMLElement) {
   static shadowRootOptions = { mode: 'open' as ShadowRootMode };
   static getTemplateHTML = getTemplateHTML;
 
-  #mediaStore: any;
-  #mediaSlot: HTMLSlotElement;
+  _mediaStore: any;
+  _mediaSlot: HTMLSlotElement;
 
   contexts = {
     mediaStore: (mediaStore: any) => {
-      this.#mediaStore = mediaStore;
-      this.#handleMediaSlotChange();
+      this._mediaStore = mediaStore;
+      this._handleMediaSlotChange();
     },
   };
 
@@ -34,13 +34,13 @@ export class MediaContainer extends ConsumerMixin(HTMLElement) {
     }
 
     // @ts-ignore - Shadow DOM property access
-    this.#mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;
-    this.#mediaSlot.addEventListener('slotchange', this.#handleMediaSlotChange);
+    this._mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;
+    this._mediaSlot.addEventListener('slotchange', this._handleMediaSlotChange);
   }
 
-  #handleMediaSlotChange = () => {
-    const media = this.#mediaSlot.assignedElements({ flatten: true })[0];
-    this.#mediaStore.dispatch({ type: 'mediaelementchangerequest', detail: media });
+  _handleMediaSlotChange = () => {
+    const media = this._mediaSlot.assignedElements({ flatten: true })[0];
+    this._mediaStore.dispatch({ type: 'mediaelementchangerequest', detail: media });
   };
 }