fix(ADA-1593): fix focus issue on play-pause button with different pl…

…ayer sizes (#962)

issue:
play-pause button is undefined , so we weren't able to perform focus
action on the button

solution:
after discussing with @SivanA-Kaltura 
it's better to change the way we reference play-pause button to be able
to focus on the button element when it's on bigger player sizes.

---------

Co-authored-by: lianbenjamin <79077248+lianbenjamin@users.noreply.github.com>

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

@@ -1,5 +1,5 @@
 import style from '../../styles/style.scss';
-import {h, Component, VNode} from 'preact';
+import { h, Component, VNode, RefObject, createRef } from 'preact';
 import {withText} from 'preact-i18n';
 import {connect} from 'react-redux';
 import {default as Icon, IconType} from '../icon';
@@ -51,7 +51,7 @@ const COMPONENT_NAME = 'PlayPause';
   title: 'controls.title'
 })
 class PlayPause extends Component<any, any> {
-  private _playPauseButtonRef?: HTMLButtonElement;
+  private _playPauseButtonRef?: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
 
   /**
    * component mounted
@@ -65,7 +65,7 @@ class PlayPause extends Component<any, any> {
     eventManager.listenOnce(player, player.Event.UI.USER_CLICKED_PLAY, () => {
       eventManager.listenOnce(player, player.Event.Core.FIRST_PLAY, () => {
         if (!smallSizes.includes(this.props.playerSize)) {
-          this._playPauseButtonRef?.focus();
+          this._playPauseButtonRef?.current?.querySelector("button")?.focus();
         }
       });
     });
@@ -97,28 +97,31 @@ class PlayPause extends Component<any, any> {
     const playbackStateText = this.props.isPlayingAdOrPlayback ? this.props.pauseText : this.props.playText;
     const labelText = isStartOver ? this.props.startOverText : playbackStateText;
     return (
+
       <ButtonControl name={COMPONENT_NAME}>
-        <Tooltip label={labelText}>
-          <Button
-            tabIndex="0"
-            aria-label={`${labelText}, ${entryName}`}
-            className={controlButtonClass}
-            onClick={this.togglePlayPause}
-            ref={node => {
-              this._playPauseButtonRef = node;
-            }}>
-            {isStartOver ? (
-              <Icon type={IconType.StartOver} />
-            ) : (
-              <div>
-                <Icon type={IconType.Play} />
-                <Icon type={IconType.Pause} />
-              </div>
-            )}
-          </Button>
-        </Tooltip>
+        <div ref={this._playPauseButtonRef} >
+          <Tooltip label={labelText}>
+            <Button
+              tabIndex="0"
+              aria-label={`${labelText}, ${entryName}`}
+              className={controlButtonClass}
+              onClick={this.togglePlayPause}
+            >
+              {isStartOver ? (
+                <Icon type={IconType.StartOver} />
+              ) : (
+                <div>
+                  <Icon type={IconType.Play} />
+                  <Icon type={IconType.Pause} />
+                </div>
+              )}
+            </Button>
+          </Tooltip>
+        </div>
       </ButtonControl>
-    );
+
+  )
+    ;
   }
 }
 

src/components/seekbar/seekbar.tsx

@@ -104,7 +104,7 @@ class SeekBar extends Component<any, any> {
    * @memberof SeekBar
    */
   componentDidMount(): void {
-    const {player, eventManager, playerSize} = this.props;
+    const {player, eventManager} = this.props;
     const clientRect = this._seekBarElement.getBoundingClientRect();
     this.props.updateSeekbarClientRect(clientRect);
     eventManager.listen(player, EventType.GUI_RESIZE, () => {