fix playing from spacebar

src/renderer/component/video/index.js

@@ -12,11 +12,9 @@ import {
   makeSelectFileInfoForUri,
   makeSelectLoadingForUri,
   makeSelectDownloadingForUri,
+  selectSearchBarFocused,
 } from 'lbry-redux';
-import {
+import { makeSelectClientSetting, selectShowNsfw } from 'redux/selectors/settings';
-  makeSelectClientSetting,
-  selectShowNsfw
-} from 'redux/selectors/settings';
 import { selectMediaPaused, makeSelectMediaPositionForUri } from 'redux/selectors/media';
 import { selectPlayingUri } from 'redux/selectors/content';
 import Video from './view';
@@ -34,7 +32,8 @@ const select = (state, props) => ({
   volume: selectVolume(state),
   mediaPaused: selectMediaPaused(state),
   mediaPosition: makeSelectMediaPositionForUri(props.uri)(state),
-  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state)
+  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
+  searchBarFocused: selectSearchBarFocused(state),
 });
 
 const perform = dispatch => ({

src/renderer/component/video/internal/play-button.jsx

@@ -3,40 +3,22 @@ import React from 'react';
 import Button from 'component/button';
 
 type Props = {
-  play: string => void,
+  play: () => void,
   isLoading: boolean,
-  uri: string,
   mediaType: string,
   fileInfo: ?{},
 };
 
 class VideoPlayButton extends React.PureComponent<Props> {
-  watch: () => void;
-
-  constructor() {
-    super();
-    this.watch = this.watch.bind(this);
-  }
-
-  watch() {
-    this.props.play(this.props.uri);
-  }
-
   render() {
-    const { fileInfo, mediaType, isLoading } = this.props;
+    const { fileInfo, mediaType, isLoading, play } = this.props;
     const disabled = isLoading || fileInfo === undefined;
     const doesPlayback = ['audio', 'video'].indexOf(mediaType) !== -1;
     const icon = doesPlayback ? 'Play' : 'Folder';
     const label = doesPlayback ? 'Play' : 'View';
 
     return (
-      <Button
+      <Button button="secondary" disabled={disabled} label={label} icon={icon} onClick={play} />
-        button="secondary"
-        disabled={disabled}
-        label={label}
-        icon={icon}
-        onClick={this.watch}
-      />
     );
   }
 }

src/renderer/component/video/view.jsx

@@ -37,11 +37,20 @@ type Props = {
   className: ?string,
   obscureNsfw: boolean,
   play: string => void,
+  searchBarFocused: boolean,
 };
 
 class Video extends React.PureComponent<Props> {
+  constructor() {
+    super();
+
+    (this: any).playContent = this.playContent.bind(this);
+    (this: any).handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
   componentDidMount() {
     this.handleAutoplay(this.props);
+    window.addEventListener('keydown', this.handleKeyDown);
   }
 
   componentWillReceiveProps(nextProps: Props) {
@@ -57,10 +66,29 @@ class Video extends React.PureComponent<Props> {
 
   componentWillUnmount() {
     this.props.cancelPlay();
+    window.removeEventListener('keydown', this.handleKeyDown);
   }
 
-  handleAutoplay(props: Props) {
+  handleKeyDown(event: SyntheticKeyboardEvent<*>) {
-    const { autoplay, playingUri, fileInfo, costInfo, isDownloading, uri, load, play, metadata } = props;
+    const { searchBarFocused } = this.props;
+    if (!searchBarFocused && event.keyCode === 32) {
+      event.preventDefault(); // prevent page scroll
+      this.playContent();
+    }
+  }
+
+  handleAutoplay = (props: Props) => {
+    const {
+      autoplay,
+      playingUri,
+      fileInfo,
+      costInfo,
+      isDownloading,
+      uri,
+      load,
+      play,
+      metadata,
+    } = props;
 
     const playable = autoplay && playingUri !== uri && metadata && !metadata.nsfw;
 
@@ -70,7 +98,7 @@ class Video extends React.PureComponent<Props> {
     } else if (playable && fileInfo && fileInfo.blobs_completed > 0) {
       play(uri);
     }
-  }
+  };
 
   isMediaSame(nextProps: Props) {
     return (
@@ -80,6 +108,11 @@ class Video extends React.PureComponent<Props> {
     );
   }
 
+  playContent() {
+    const { play, uri } = this.props;
+    play(uri);
+  }
+
   render() {
     const {
       metadata,
@@ -99,7 +132,6 @@ class Video extends React.PureComponent<Props> {
       mediaPosition,
       className,
       obscureNsfw,
-      play,
     } = this.props;
 
     const isPlaying = playingUri === uri;
@@ -154,9 +186,14 @@ class Video extends React.PureComponent<Props> {
           </div>
         )}
         {!isPlaying && (
-          <div className={layoverClass} style={layoverStyle}>
+          <div
+            role="button"
+            onClick={this.playContent}
+            className={layoverClass}
+            style={layoverStyle}
+          >
             <VideoPlayButton
-              play={play}
+              play={this.playContent}
               fileInfo={fileInfo}
               uri={uri}
               isLoading={isLoading}

src/renderer/component/wunderbar/index.js

@@ -5,6 +5,8 @@ import {
   doUpdateSearchQuery,
   doNotify,
   MODALS,
+  doFocusSearchInput,
+  doBlurSearchInput,
 } from 'lbry-redux';
 import { doNavigate } from 'redux/actions/navigation';
 import Wunderbar from './view';
@@ -30,6 +32,8 @@ const perform = dispatch => ({
   },
   onSubmit: (uri, extraParams) => dispatch(doNavigate('/show', { uri, ...extraParams })),
   updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)),
+  doFocus: () => dispatch(doFocusSearchInput()),
+  doBlur: () => dispatch(doBlurSearchInput()),
 });
 
 export default connect(select, perform)(Wunderbar);

src/renderer/component/wunderbar/view.jsx

@@ -13,6 +13,8 @@ type Props = {
   onSubmit: (string, {}) => void,
   wunderbarValue: ?string,
   suggestions: Array<string>,
+  doFocus: () => void,
+  doBlur: () => void,
 };
 
 class WunderBar extends React.PureComponent<Props> {
@@ -83,7 +85,7 @@ class WunderBar extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 
   render() {
-    const { wunderbarValue, suggestions } = this.props;
+    const { wunderbarValue, suggestions, doFocus, doBlur } = this.props;
 
     return (
       <div className="wunderbar">
@@ -96,6 +98,10 @@ class WunderBar extends React.PureComponent<Props> {
           getItemValue={item => item.value}
           onChange={this.handleChange}
           onSelect={this.handleSubmit}
+          inputProps={{
+            onFocus: doFocus,
+            onBlur: doBlur,
+          }}
           renderInput={props => (
             <input
               {...props}

yarn.lock

@@ -8267,9 +8267,9 @@ remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
 
-render-media@^2.12.0:
+render-media@^3.1.0:
-  version "2.12.0"
+  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/render-media/-/render-media-2.12.0.tgz#e44714d5c9789ec6330ffcaf12c552837e3d80f9"
+  resolved "https://registry.yarnpkg.com/render-media/-/render-media-3.1.0.tgz#6bf9e7603fa819afe56c57b6baedd33e60c4acba"
   dependencies:
     debug "^3.1.0"
     is-ascii "^1.0.0"