fix(FEC-7963): native menus are not opened in mobile devices (Androi…

…d/iOS) (#189)

Issue occurs because the shell catch any click on it and focused his own element.
Moved the pre playback click logic to the pre playback component.

src/components/pre-playback-play-overlay/pre-playback-play-overlay.js

@@ -95,6 +95,7 @@ class PrePlaybackPlayOverlay extends BaseComponent {
    * @memberof PrePlaybackPlayOverlay
    */
   handleClick(): void {
+    this.player.getView().focus();
     this.player.play();
     if (this.props.prePlayback) {
       this._hidePrePlayback();
@@ -127,14 +128,14 @@ class PrePlaybackPlayOverlay extends BaseComponent {
         style={rootStyle}
         onClick={() => this.handleClick()}>
         {<a className={style.prePlaybackPlayButton}
-             tabIndex="0"
-             onKeyDown={(e) => {
-               if (e.keyCode === KeyMap.ENTER) {
-                 this.handleClick();
-               }
-             }}>
-            {props.isEnded ? <Icon type={IconType.StartOver}/> : <Icon type={IconType.Play}/>}
-          </a>}
+            tabIndex="0"
+            onKeyDown={(e) => {
+              if (e.keyCode === KeyMap.ENTER) {
+                this.handleClick();
+              }
+            }}>
+          {props.isEnded ? <Icon type={IconType.StartOver}/> : <Icon type={IconType.Play}/>}
+        </a>}
       </div>
     )
   }

src/components/shell/shell.js

@@ -50,7 +50,6 @@ class Shell extends BaseComponent {
   state: Object;
   _hoverTimeout: number;
   _fallbackToMutedAutoPlayMode: boolean;
-  _el: HTMLDivElement;
 
   /**
    * Creates an instance of Shell.
@@ -115,9 +114,6 @@ class Shell extends BaseComponent {
       this.player.muted = false;
       this._fallbackToMutedAutoPlayMode = false;
     }
-    if (!this.state.nav) {
-      this._el.focus();
-    }
   }
 
   /**
@@ -226,7 +222,6 @@ class Shell extends BaseComponent {
     return (
       <div
         tabIndex="0"
-        ref={el => this._el = el}
         className={playerClasses}
         onClick={() => this.onClick()}
         onMouseOver={() => this.onMouseOver()}