diff --git a/src/components/offline/offline.scss b/src/components/offline/offline.scss index da687ab8..c81d2914 100644 --- 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 index 983f0e9b..b0431ca0 100644 --- a/src/components/offline/offline.tsx +++ b/src/components/offline/offline.tsx @@ -58,25 +58,18 @@ export class Offline extends Component { return this.props.postBroadcast ? null : this.props.offlineBody; } - private originalTabIndexes: Map = 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,7 +83,7 @@ export class Offline extends Component { this._backgroundPlayer.muted = player.muted; this._backgroundPlayer.play(); } - this.disableGuiFocus(); + this.disableControls(); } componentWillUnmount(): void { @@ -98,7 +91,7 @@ export class Offline extends Component { this._backgroundPlayer.pause(); this._originalVideoElementParent!.prepend(this._backgroundPlayer.getVideoElement()); } - this.restoreGuiFocus(); + this.restoreControls(); } private _handleMute = (): void => {