Merge pull request #2604 from lbryio/fullscreen-fix

Enable viewer shortcut keys

src/ui/component/fileViewer/index.js

@@ -11,7 +11,6 @@ import {
   makeSelectFileInfoForUri,
   makeSelectLoadingForUri,
   makeSelectDownloadingForUri,
-  selectSearchBarFocused,
   makeSelectFirstRecommendedFileForUri,
   makeSelectClaimIsNsfw,
   makeSelectThumbnailForUri,
@@ -34,7 +33,6 @@ const select = (state, props) => ({
   volume: selectVolume(state),
   position: makeSelectContentPositionForUri(props.uri)(state),
   autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
-  searchBarFocused: selectSearchBarFocused(state),
   fileInfoErrors: selectFileInfoErrors(state),
   nextFileToPlay: makeSelectFirstRecommendedFileForUri(props.uri)(state),
   nsfw: makeSelectClaimIsNsfw(props.uri)(state),

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

@@ -12,6 +12,7 @@ import path from 'path';
 import player from 'render-media';
 import FileRender from 'component/fileRender';
 import LoadingScreen from 'component/common/loading-screen';
+import detectTyping from 'util/detect-typing';
 import { fullscreenElement, requestFullscreen, exitFullscreen } from 'util/full-screen';
 
 // Shorcut key code for fullscreen (f)
@@ -31,7 +32,6 @@ type Props = {
   savePosition: number => void,
   changeVolume: number => void,
   viewerContainer: { current: ElementRef<any> },
-  searchBarFocused: boolean,
 };
 
 type State = {
@@ -96,6 +96,9 @@ class MediaPlayer extends React.PureComponent<Props, State> {
       }
     }, 5000);
     // @endif
+
+    // Register handler for custom shortcut keys
+    document.addEventListener('keydown', this.handleKeyDown);
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -115,27 +118,23 @@ class MediaPlayer extends React.PureComponent<Props, State> {
   componentWillUnmount() {
     const mediaElement = this.mediaContainer.current.children[0];
 
-    // Temorarily removing for comments the keydown handler needs to know
-    // if a user is typing
-    // document.removeEventListener('keydown', this.handleKeyDown);
-
     if (mediaElement) {
       mediaElement.removeEventListener('click', this.togglePlay);
       mediaElement.removeEventListener('dbclick', this.handleDoubleClick);
     }
+
+    document.removeEventListener('keydown', this.handleKeyDown);
   }
 
-  handleKeyDown = (event: SyntheticKeyboardEvent<*>) => {
+  handleKeyDown = (event: KeyboardEvent) => {
-    const { searchBarFocused } = this.props;
+    if (!detectTyping()) {
-
-    if (!searchBarFocused) {
       // Handle fullscreen shortcut key (f)
       if (event.keyCode === F_KEYCODE) {
-        // this.toggleFullscreen();
+        this.toggleFullscreen();
       }
       // Handle toggle play
       // @if TARGET='app'
-      // this.togglePlay(event);
+      this.togglePlay(event);
       // @endif
     }
   };

src/ui/component/fileViewer/view.jsx

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import analytics from 'analytics';
 import LoadingScreen from 'component/common/loading-screen';
 import PlayButton from './internal/play-button';
+import detectTyping from 'util/detect-typing';
 
 const Player = React.lazy(() =>
   import(
@@ -43,7 +44,6 @@ type Props = {
   className: ?string,
   obscureNsfw: boolean,
   play: string => void,
-  searchBarFocused: boolean,
   mediaType: string,
   claimRewards: () => void,
   nextFileToPlay: ?string,
@@ -77,9 +77,7 @@ class FileViewer extends React.PureComponent<Props> {
     }
 
     this.handleAutoplay(this.props);
-    // Commented out because it would play/pause if you were typing in the comment field
+    window.addEventListener('keydown', this.handleKeyDown);
-    // Need a way to check if you are typing
-    // window.addEventListener('keydown', this.handleKeyDown);
   }
 
   componentDidUpdate(prev: Props) {
@@ -127,13 +125,11 @@ class FileViewer extends React.PureComponent<Props> {
     }
 
     this.props.cancelPlay();
-    // window.removeEventListener('keydown', this.handleKeyDown);
+    window.removeEventListener('keydown', this.handleKeyDown);
   }
 
-  handleKeyDown(event: SyntheticKeyboardEvent<*>) {
+  handleKeyDown(event: KeyboardEvent) {
-    const { searchBarFocused } = this.props;
+    if (!detectTyping()) {
-
-    if (!searchBarFocused) {
       if (event.keyCode === SPACE_BAR_KEYCODE) {
         event.preventDefault(); // prevent page scroll
         this.playContent();
@@ -233,7 +229,6 @@ class FileViewer extends React.PureComponent<Props> {
       mediaType,
       insufficientCredits,
       viewerContainer,
-      searchBarFocused,
       thumbnail,
       nsfw,
     } = this.props;
@@ -294,7 +289,6 @@ class FileViewer extends React.PureComponent<Props> {
                   onStartCb={this.onFileStartCb}
                   onFinishCb={this.onFileFinishCb}
                   playingUri={playingUri}
-                  searchBarFocused={searchBarFocused}
                   viewerContainer={viewerContainer}
                 />
               </Suspense>

src/ui/util/detect-typing.js

@@ -0,0 +1,13 @@
+// A simple function to detect if a user is typing:
+// useful when hanlding shorcut keys.
+
+export default function detectTyping() {
+  const activeElement = document.activeElement;
+
+  if (activeElement) {
+    const elementType = activeElement.tagName.toLowerCase();
+    return elementType === 'input' || elementType === 'textarea';
+  }
+
+  return false;
+}

static/locales/en.json

@@ -479,5 +479,9 @@
   "We know this page won't win any design awards, we have a cool idea for channel edits in the future. We just wanted to release a very very very basic version that just barely kinda works so people can use": "We know this page won't win any design awards, we have a cool idea for channel edits in the future. We just wanted to release a very very very basic version that just barely kinda works so people can use",
   "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use",
   "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version in the works.": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version in the works.",
-  "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on.": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on."
+  "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on.": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on.",
+  "Got it!": "Got it!",
+  "Filter": "Filter",
+  "Rendering document.": "Rendering document.",
+  "Sorry, looks like we can't load the document.": "Sorry, looks like we can't load the document."
 }