fix(ADA-1593): shift focus to seekbar when playing/pausing media with…

…in small width players (#942)

issue:
when trying to play/pause a video in a small /extra small /tiny width
player using voiceover on mac, the play/pause button disappears after a
couple of seconds and the user is unable to pause or play the video
again.

fix:
since play/pause button is not in the bottom bar in these widths, switch
the focus on the seekbar, which will enable the play/pause
functionality.

width <= 480:

![image](https://github.com/user-attachments/assets/cd78eba5-3c87-4d40-af80-7d3418f9648a)


width > 480:

![image](https://github.com/user-attachments/assets/fcb7cf84-37a6-493e-9c10-e1694d6cb7c0)

---------

Co-authored-by: lianbenjamin <[email protected]>

src/components/play-pause/play-pause.tsx

@@ -15,6 +15,7 @@ import {Button} from '../button';
 import {actions as shellActions} from '../../reducers/shell';
 import {ButtonControl} from '../button-control';
 import {withEventManager} from '../../event';
+import {PLAYER_SIZE} from '../shell';
 
 /**
  * mapping state to props
@@ -25,7 +26,8 @@ const mapStateToProps = state => ({
   isPlayingAdOrPlayback: isPlayingAdOrPlayback(state.engine),
   isPlaying: state.engine.isPlaying,
   adBreak: state.engine.adBreak,
-  isPlaybackEnded: state.engine.isPlaybackEnded
+  isPlaybackEnded: state.engine.isPlaybackEnded,
+  playerSize: state.shell.playerSize
 });
 
 const COMPONENT_NAME = 'PlayPause';
@@ -57,12 +59,15 @@ class PlayPause extends Component<any, any> {
    * @memberof PlayPause
    */
   componentDidMount(): void {
-    const {eventManager, player} = this.props;
-    eventManager.listenOnce(player, player.Event.UI.USER_CLICKED_PLAY, () => {
-      eventManager.listenOnce(player, player.Event.Core.FIRST_PLAY, () => {
-        this._playPauseButtonRef?.focus();
+    const {eventManager, player, playerSize} = this.props;
+    const smallSizes = [PLAYER_SIZE.TINY, PLAYER_SIZE.EXTRA_SMALL, PLAYER_SIZE.SMALL];
+    if (!smallSizes.includes(playerSize)) {
+      eventManager.listenOnce(player, player.Event.UI.USER_CLICKED_PLAY, () => {
+        eventManager.listenOnce(player, player.Event.Core.FIRST_PLAY, () => {
+          this._playPauseButtonRef?.focus();
+        });
       });
-    });
+    }
   }
 
   /**

src/components/seekbar/seekbar.tsx

@@ -15,6 +15,7 @@ import {EventType, withEventManager} from '../../event';
 import {SeekBarPreview} from '../seekbar-preview';
 import {ProgressIndicator} from '../progress-indicator';
 import {KeyboardEventHandlers} from '../../types';
+import {PLAYER_SIZE} from '../shell';
 
 /**
  * mapping state to props
@@ -29,7 +30,8 @@ const mapStateToProps = state => ({
   hideTimeBubble: state.seekbar.hideTimeBubble,
   segments: state.seekbar.segments,
   seekbarClasses: state.seekbar.seekbarClasses,
-  isPreventSeek: state.seekbar.isPreventSeek
+  isPreventSeek: state.seekbar.isPreventSeek,
+  playerSize: state.shell.playerSize
 });
 
 const COMPONENT_NAME = 'SeekBar';
@@ -98,7 +100,7 @@ class SeekBar extends Component<any, any> {
    * @memberof SeekBar
    */
   componentDidMount(): void {
-    const {player, eventManager} = this.props;
+    const {player, eventManager, playerSize} = this.props;
     const clientRect = this._seekBarElement.getBoundingClientRect();
     this.props.updateSeekbarClientRect(clientRect);
     eventManager.listen(player, EventType.GUI_RESIZE, () => {
@@ -109,6 +111,14 @@ class SeekBar extends Component<any, any> {
         this.setState({resizing: false});
       }, Number(style.defaultTransitionTime));
     });
+    const smallSizes = [PLAYER_SIZE.TINY, PLAYER_SIZE.EXTRA_SMALL, PLAYER_SIZE.SMALL];
+    if (smallSizes.includes(playerSize)) {
+      eventManager.listenOnce(player, player.Event.UI.USER_CLICKED_PLAY, () => {
+        eventManager.listenOnce(player, player.Event.Core.FIRST_PLAY, () => {
+          this._seekBarElement?.focus();
+        });
+      });
+    }
     document.addEventListener('mouseup', this.onPlayerMouseUp);
     document.addEventListener('mousemove', this.onPlayerMouseMove);
     this.props.registerKeyboardEvents(this._keyboardEventHandlers);