fix toggleFullScreen method of player

src/ui/component/fileActions/view.jsx

@@ -4,7 +4,7 @@ import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import Button from 'component/button';
 import Tooltip from 'component/common/tooltip';
-import { requestFullscreen } from 'util/full-screen';
+import { requestFullscreen, fullscreenElement } from 'util/full-screen';
 
 type FileInfo = {
   claim_id: string,
@@ -16,14 +16,19 @@ type Props = {
   openModal: (id: string, { uri: string }) => void,
   claimIsMine: boolean,
   fileInfo: FileInfo,
+  viewerContainer: React.Ref,
   showFullscreen: boolean,
 };
 
 class FileActions extends React.PureComponent<Props> {
   maximizeViewer = () => {
-    // Get viewer container
+    const { viewerContainer } = this.props;
-    const viewer = document.getElementsByClassName('content__embedded')[0];
+    const isFullscreen = fullscreenElement();
-    requestFullscreen(viewer);
+    // Request fullscreen if viewer is ready
+    // And if there is no fullscreen element active
+    if (!isFullscreen && viewerContainer && viewerContainer.current !== null) {
+      requestFullscreen(viewerContainer.current);
+    }
   };
 
   render() {

src/ui/component/fileViewer/internal/player.jsx

@@ -1,14 +1,20 @@
 // @flow
 import '@babel/polyfill';
 import * as React from 'react';
+
 // @if TARGET='app'
-import { remote } from 'electron';
 import fs from 'fs';
+import { remote } from 'electron';
 // @endif
+
 import path from 'path';
 import player from 'render-media';
 import FileRender from 'component/fileRender';
 import LoadingScreen from 'component/common/loading-screen';
+import { fullscreenElement, requestFullscreen, exitFullscreen } from 'util/full-screen';
+
+// Shorcut key code for fullscreen (f)
+const F_KEYCODE = 70;
 
 type Props = {
   contentType: string,
@@ -23,6 +29,8 @@ type Props = {
   onFinishCb: ?() => void,
   savePosition: number => void,
   changeVolume: number => void,
+  viewerContainer: React.Ref,
+  searchBarFocused: boolean,
 };
 
 type State = {
@@ -69,7 +77,6 @@ class MediaPlayer extends React.PureComponent<Props, State> {
 
     this.mediaContainer = React.createRef();
     (this: any).togglePlay = this.togglePlay.bind(this);
-    (this: any).toggleFullScreen = this.toggleFullScreen.bind(this);
   }
 
   componentDidMount() {
@@ -91,25 +98,62 @@ class MediaPlayer extends React.PureComponent<Props, State> {
   componentWillUnmount() {
     const mediaElement = this.mediaContainer.current.children[0];
 
-    document.removeEventListener('keydown', this.togglePlay);
+    document.removeEventListener('keydown', this.handleKeyDown);
 
     if (mediaElement) {
       mediaElement.removeEventListener('click', this.togglePlay);
+      mediaElement.removeEventListener('dbclick', this.handleDoubleClick);
     }
   }
 
-  toggleFullScreen() {
+  handleKeyDown = (event: SyntheticKeyboardEvent<*>) => {
-    const mediaElement = this.mediaContainer.current;
+    const { searchBarFocused } = this.props;
-    if (mediaElement) {
+
-      // $FlowFixMe
+    if (!searchBarFocused) {
-      if (document.webkitIsFullScreen) {
+      // Handle fullscreen shortcut key (f)
-        // $FlowFixMe
+      if (event.keyCode === F_KEYCODE) {
-        document.webkitExitFullscreen();
+        this.toggleFullscreen();
-      } else {
-        mediaElement.webkitRequestFullScreen();
       }
+      // Handle toggle play
+      this.togglePlay(event);
     }
-  }
+  };
+
+  handleDoubleClick = (event: SyntheticInputEvent<*>) => {
+    // Prevent pause / play
+    event.preventDefault();
+    event.stopPropagation();
+    // Trigger fullscreen mode
+    this.toggleFullscreen();
+  };
+
+  toggleFullscreen = () => {
+    const { viewerContainer } = this.props;
+    const isFullscreen = fullscreenElement();
+    const isPlayableType = this.playableType();
+
+    if (!isFullscreen) {
+      // Enter fullscreen mode if content is not playable
+      // Otherwise it should be handle internally on the video player
+      // or it will break the toggle fullscreen button
+      if (!isPlayableType && viewerContainer && viewerContainer.current !== null) {
+        requestFullscreen(viewerContainer.current);
+      }
+      // Request fullscreen mode for the media player (renderMedia)
+      // Don't use this with the new player
+      // @if TARGET='app'
+      else {
+        const mediaContainer = this.mediaContainer.current;
+        const mediaElement = mediaContainer && mediaContainer.children[0];
+        if (mediaElement) {
+          requestFullscreen(mediaElement);
+        }
+      }
+      // @endif
+    } else {
+      exitFullscreen();
+    }
+  };
 
   async playMedia() {
     const container = this.mediaContainer.current;
@@ -165,7 +209,8 @@ class MediaPlayer extends React.PureComponent<Props, State> {
       );
     }
 
-    document.addEventListener('keydown', this.togglePlay);
+    document.addEventListener('keydown', this.handleKeyDown);
+
     const mediaElement = container.children[0];
     if (mediaElement) {
       if (position) {
@@ -188,7 +233,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
         changeVolume(mediaElement.volume);
       });
       mediaElement.volume = volume;
-      mediaElement.addEventListener('dblclick', this.toggleFullScreen);
+      mediaElement.addEventListener('dblclick', this.handleDoubleClick);
     }
     // @endif
 

src/ui/component/fileViewer/view.jsx

@@ -5,7 +5,6 @@ import classnames from 'classnames';
 import analytics from 'analytics';
 import LoadingScreen from 'component/common/loading-screen';
 import PlayButton from './internal/play-button';
-import { requestFullscreen, exitFullscreen } from 'util/full-screen';
 
 const Player = React.lazy(() =>
   import(
@@ -14,7 +13,6 @@ const Player = React.lazy(() =>
   )
 );
 
-const F_KEYCODE = 70;
 const SPACE_BAR_KEYCODE = 32;
 
 type Props = {
@@ -54,6 +52,7 @@ type Props = {
   nsfw: boolean,
   thumbnail: ?string,
   isPlayableType: boolean,
+  viewerContainer: React.Ref,
 };
 
 class FileViewer extends React.PureComponent<Props> {
@@ -68,8 +67,6 @@ class FileViewer extends React.PureComponent<Props> {
     // Don't add these variables to state because we don't need to re-render when their values change
     (this: any).startTime = undefined;
     (this: any).playTime = undefined;
-
-    (this: any).container = React.createRef();
   }
 
   componentDidMount() {
@@ -138,34 +135,6 @@ class FileViewer extends React.PureComponent<Props> {
         event.preventDefault(); // prevent page scroll
         this.playContent();
       }
-
-      // Handle fullscreen shortcut key (f)
-      if (event.keyCode === F_KEYCODE) {
-        this.toggleFullscreen();
-      }
-    }
-  }
-
-  toggleFullscreen() {
-    const { isPlayableType } = this.props;
-
-    if (!document.webkitFullscreenElement) {
-      // Enter fullscreen mode if content is not playable
-      // Otherwise it should be handle internally on the video player
-      // or it will break the toggle fullscreen button
-      if (!isPlayableType) {
-        requestFullscreen(this.container.current);
-      }
-      // Request fullscreen mode for the video player
-      // Don't use this with the new player
-      // @if TARGET='app'
-      else {
-        const video = document.getElementsByTagName('video')[0];
-        video && requestFullscreen(video);
-      }
-      // @endif
-    } else {
-      exitFullscreen();
     }
   }
 
@@ -260,6 +229,8 @@ class FileViewer extends React.PureComponent<Props> {
       obscureNsfw,
       mediaType,
       insufficientCredits,
+      viewerContainer,
+      searchBarFocused,
       thumbnail,
       nsfw,
     } = this.props;
@@ -295,7 +266,7 @@ class FileViewer extends React.PureComponent<Props> {
     const layoverStyle = !shouldObscureNsfw && thumbnail ? { backgroundImage: `url("${thumbnail}")` } : {};
 
     return (
-      <div className={classnames('video', {}, className)} ref={this.container}>
+      <div className={classnames('video', {}, className)} ref={viewerContainer}>
         {isPlaying && (
           <div className="content__view">
             {!isReadyToPlay ? (
@@ -320,6 +291,8 @@ class FileViewer extends React.PureComponent<Props> {
                   onStartCb={this.onFileStartCb}
                   onFinishCb={this.onFileFinishCb}
                   playingUri={playingUri}
+                  searchBarFocused={searchBarFocused}
+                  viewerContainer={viewerContainer}
                 />
               </Suspense>
             )}

src/ui/page/file/view.jsx

@@ -62,16 +62,21 @@ class FilePage extends React.Component<Props> {
     'application',
   ];
 
+  constructor(props: Props) {
+    super(props);
+    (this: any).viewerContainer = React.createRef();
+  }
+
   componentDidMount() {
     const {
       uri,
+      claim,
       fetchFileInfo,
       fetchCostInfo,
       setViewed,
       isSubscribed,
       claimIsMine,
       fetchViewCount,
-      claim,
     } = this.props;
 
     if (isSubscribed) {
@@ -198,11 +203,12 @@ class FilePage extends React.Component<Props> {
           )}
           {showFile && (
             <FileViewer
-              insufficientCredits={insufficientCredits}
-              className="content__embedded"
               uri={uri}
+              className="content__embedded"
               mediaType={mediaType}
               isPlayableType={isPlayableType}
+              viewerContainer={this.viewerContainer}
+              insufficientCredits={insufficientCredits}
             />
           )}
           {!showFile &&
@@ -288,7 +294,12 @@ class FilePage extends React.Component<Props> {
 
             <div className="media__action-group--large">
               <FileDownloadLink uri={uri} />
-              <FileActions uri={uri} claimId={claim.claim_id} showFullscreen={isPreviewType} />
+              <FileActions
+                uri={uri}
+                claimId={claim.claim_id}
+                showFullscreen={isPreviewType}
+                viewerContainer={this.viewerContainer}
+              />
             </div>
           </div>
 

src/ui/util/full-screen.js

@@ -26,7 +26,8 @@ const getPrefix = () => {
 
 export const fullscreenElement = () => {
   const index = getPrefix();
-  return prefixes.fullscreenElement[index];
+  const prefix = prefixes.fullscreenElement[index];
+  return document[prefix];
 };
 
 export const requestFullscreen = elem => {