ADA-2294 - Disable controls with styling

kaltura · Mar 4, 2025 · 761f903 · 761f903
1 parent 7150937
commit 761f903
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/src/components/offline/offline.scss b/src/components/offline/offline.scss
@@ -57,3 +57,12 @@
     }
   }
 }
+
+:global {
+  .controls-hidden .playkit-top-bar,
+  .controls-hidden .playkit-bottom-bar,
+  .controls-hidden .playkit-playback-controls,
+  .controls-hidden .playkit-center-playback-controls {
+    display: none !important;
+  }
+}
diff --git a/src/components/offline/offline.tsx b/src/components/offline/offline.tsx
@@ -58,25 +58,18 @@ export class Offline extends Component<OfflineProps, OfflineState> {
     return this.props.postBroadcast ? null : this.props.offlineBody;
   }
 
-  private originalTabIndexes: Map<HTMLElement, number | null> = new Map();
-
-  private disableGuiFocus() {
-    const guiAreaElements = document.querySelectorAll('.playkit-gui-area *');
-    guiAreaElements.forEach((element) => {
-      if (element instanceof HTMLElement && (element.tagName === 'button' || element.tagName === 'a' || element.hasAttribute('tabindex'))) {
-        this.originalTabIndexes.set(element, element.tabIndex);
-        element.tabIndex = -1;
-      }
-    });
+  private disableControls() {
+    const guiContainer = document.querySelector('.playkit-gui-area');
+    if (guiContainer) {
+        guiContainer.classList.add('controls-hidden');
+    }
   }
 
-  private restoreGuiFocus() {
-    this.originalTabIndexes.forEach((tabIndex, element) => {
-      if (element) {
-        element.tabIndex = tabIndex ?? 0;
-      }
-    });
-    this.originalTabIndexes.clear();
+  private restoreControls() {
+    const guiContainer = document.querySelector('.playkit-gui-area');
+    if (guiContainer) {
+        guiContainer.classList.remove('controls-hidden');
+    }
   }
 
   componentDidMount(): void {
@@ -90,15 +83,15 @@ export class Offline extends Component<OfflineProps, OfflineState> {
       this._backgroundPlayer.muted = player.muted;
       this._backgroundPlayer.play();
     }
-    this.disableGuiFocus();
+    this.disableControls();
   }
 
   componentWillUnmount(): void {
     if (this._backgroundPlayer) {
       this._backgroundPlayer.pause();
       this._originalVideoElementParent!.prepend(this._backgroundPlayer.getVideoElement());
     }
-    this.restoreGuiFocus();
+    this.restoreControls();
   }
 
   private _handleMute = (): void => {