Autoplay: start playing/downloading video/audio/image in video component. Adds on/off checkbox on settings and file pages. Adds CHECK_SIMPLE icon (w/o circle).

add changelog entry

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
    * New dark mode ([#1269](https://github.com/lbryio/lbry-app/pull/1269))
    * Pre-fill publish URL after clicking "Put something here" link ([#1303](https://github.com/lbryio/lbry-app/pull/1303))
    * Add Danger JS to automate code reviews ([#1289](https://github.com/lbryio/lbry-app/pull/1289))
+   * Autoplay downloaded and free media ([#584](https://github.com/lbryio/lbry-app/pull/1453))
 
 ### Changed
    * Add flair to snackbar ([#1313](https://github.com/lbryio/lbry-app/pull/1313))

src/renderer/component/video/index.js

@@ -1,7 +1,8 @@
 import { connect } from 'react-redux';
+import * as settings from 'constants/settings';
 import { doChangeVolume } from 'redux/actions/app';
 import { selectVolume } from 'redux/selectors/app';
-import { doPlayUri, doSetPlayingUri } from 'redux/actions/content';
+import { doPlayUri, doSetPlayingUri, doLoadVideo } from 'redux/actions/content';
 import { doPlay, doPause, savePosition } from 'redux/actions/media';
 import {
   makeSelectMetadataForUri,
@@ -12,7 +13,10 @@ import {
   makeSelectLoadingForUri,
   makeSelectDownloadingForUri,
 } from 'lbry-redux';
-import { selectShowNsfw } from 'redux/selectors/settings';
+import {
+  makeSelectClientSetting,
+  selectShowNsfw
+} from 'redux/selectors/settings';
 import { selectMediaPaused, makeSelectMediaPositionForUri } from 'redux/selectors/media';
 import { selectPlayingUri } from 'redux/selectors/content';
 import Video from './view';
@@ -30,10 +34,12 @@ const select = (state, props) => ({
   volume: selectVolume(state),
   mediaPaused: selectMediaPaused(state),
   mediaPosition: makeSelectMediaPositionForUri(props.uri)(state),
+  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state)
 });
 
 const perform = dispatch => ({
   play: uri => dispatch(doPlayUri(uri)),
+  load: uri => dispatch(doLoadVideo(uri)),
   cancelPlay: () => dispatch(doSetPlayingUri(null)),
   changeVolume: volume => dispatch(doChangeVolume(volume)),
   doPlay: () => dispatch(doPlay()),

src/renderer/component/video/view.jsx

@@ -34,7 +34,7 @@ type Props = {
   mediaPosition: ?number,
   className: ?string,
   obscureNsfw: boolean,
-  play: string => void,
+  play: string => void
 };
 
 class Video extends React.PureComponent<Props> {
@@ -42,6 +42,52 @@ class Video extends React.PureComponent<Props> {
     this.props.cancelPlay();
   }
 
+  componentDidMount() {
+    this.handleAutoplay(this.props);
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    this.handleAutoplay(nextProps);
+  }
+
+  handleAutoplay(props: Props) {
+    const {
+      autoplay,
+      obscureNsfw,
+      playingUri,
+      fileInfo,
+      costInfo,
+      isDownloading,
+      uri,
+      load,
+      play
+    } = props;
+
+    const playable = (
+      autoplay &&
+      obscureNsfw === false &&
+      playingUri !== uri
+    );
+
+    if (
+      playable &&
+      costInfo &&
+      costInfo.cost === 0 &&
+      !fileInfo &&
+      !isDownloading
+    ) {
+      load(uri);
+      play(uri);
+    }
+    else if (
+      playable &&
+      fileInfo &&
+      fileInfo.blobs_completed > 0
+    ) {
+      play(uri);
+    }
+  }
+
   isMediaSame(nextProps: Props) {
     return (
       this.props.fileInfo &&
@@ -90,14 +136,18 @@ class Video extends React.PureComponent<Props> {
     }
 
     const poster = metadata && metadata.thumbnail;
+    const layoverClass = classnames('content__cover', { 'card__media--nsfw': shouldObscureNsfw });
+    const layoverStyle = !shouldObscureNsfw && poster ? { backgroundImage: `url("${poster}")` } : {};
 
     return (
       <div className={classnames('video', {}, className)}>
         {isPlaying && (
           <div className="content__view">
             {!isReadyToPlay ? (
-              <LoadingScreen status={loadStatusMessage} />
-            ) : (
+              <div className={layoverClass} style={layoverStyle}>
+                <LoadingScreen status={loadStatusMessage} />
+              </div>
+          ) : (
               <VideoPlayer
                 filename={fileInfo.file_name}
                 poster={poster}
@@ -119,10 +169,7 @@ class Video extends React.PureComponent<Props> {
           </div>
         )}
         {!isPlaying && (
-          <div
-            className={classnames('content__cover', { 'card__media--nsfw': shouldObscureNsfw })}
-            style={!shouldObscureNsfw && poster ? { backgroundImage: `url("${poster}")` } : {}}
-          >
+          <div className={layoverClass} style={layoverStyle}>
             <VideoPlayButton
               play={play}
               fileInfo={fileInfo}

src/renderer/constants/icons.js

@@ -24,3 +24,4 @@ export const PHONE = 'Phone';
 export const CHECK = 'CheckCircle';
 export const HEART = 'Heart';
 export const UNLOCK = 'Unlock';
+export const CHECK_SIMPLE = 'Check';

src/renderer/constants/settings.js

@@ -12,3 +12,4 @@ export const INSTANT_PURCHASE_MAX = 'instantPurchaseMax';
 export const THEME = 'theme';
 export const THEMES = 'themes';
 export const AUTOMATIC_DARK_MODE_ENABLED = 'automaticDarkModeEnabled';
+export const AUTOPLAY = 'autoplay';

src/renderer/page/file/index.js

@@ -1,7 +1,9 @@
 import { connect } from 'react-redux';
+import * as settings from 'constants/settings';
 import { doNavigate } from 'redux/actions/navigation';
 import { selectRewardContentClaimIds, selectPlayingUri } from 'redux/selectors/content';
 import { doCheckSubscription } from 'redux/actions/subscriptions';
+import { doSetClientSetting } from 'redux/actions/settings';
 import {
   doFetchFileInfo,
   doFetchCostInfoForUri,
@@ -13,7 +15,7 @@ import {
   makeSelectMetadataForUri,
   doNotify,
 } from 'lbry-redux';
-import { selectShowNsfw } from 'redux/selectors/settings';
+import { selectShowNsfw, makeSelectClientSetting } from 'redux/selectors/settings';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import { selectMediaPaused } from 'redux/selectors/media';
 import { doPrepareEdit } from 'redux/actions/publish';
@@ -31,6 +33,7 @@ const select = (state, props) => ({
   playingUri: selectPlayingUri(state),
   isPaused: selectMediaPaused(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state)
 });
 
 const perform = dispatch => ({
@@ -40,6 +43,7 @@ const perform = dispatch => ({
   checkSubscription: subscription => dispatch(doCheckSubscription(subscription)),
   openModal: (modal, props) => dispatch(doNotify(modal, props)),
   prepareEdit: (publishData, uri) => dispatch(doPrepareEdit(publishData, uri)),
+  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
 });
 
 export default connect(select, perform)(FilePage);

src/renderer/page/file/view.jsx

@@ -7,6 +7,7 @@ import FilePrice from 'component/filePrice';
 import FileDetails from 'component/fileDetails';
 import FileActions from 'component/fileActions';
 import UriIndicator from 'component/uriIndicator';
+import { FormField } from 'component/common/form';
 import Icon from 'component/common/icon';
 import DateTime from 'component/dateTime';
 import * as icons from 'constants/icons';
@@ -14,6 +15,7 @@ import Button from 'component/button';
 import SubscribeButton from 'component/subscribeButton';
 import Page from 'component/page';
 import player from 'render-media';
+import * as settings from 'constants/settings';
 
 type Props = {
   claim: {
@@ -45,9 +47,16 @@ type Props = {
   fetchFileInfo: string => void,
   fetchCostInfo: string => void,
   prepareEdit: ({}) => void,
+  setClientSetting: (string, boolean | string | Price) => void,
 };
 
 class FilePage extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+
+    (this: any).onAutoplayChange = this.onAutoplayChange.bind(this);
+  }
+
   componentDidMount() {
     const { uri, fileInfo, fetchFileInfo, costInfo, fetchCostInfo } = this.props;
 
@@ -88,6 +97,10 @@ class FilePage extends React.Component<Props> {
     }
   };
 
+  onAutoplayChange(event: SyntheticInputEvent<*>) {
+    this.props.setClientSetting(settings.AUTOPLAY, event.target.checked);
+  }
+
   render() {
     const {
       claim,
@@ -102,6 +115,8 @@ class FilePage extends React.Component<Props> {
       claimIsMine,
       prepareEdit,
       navigate,
+      autoplay,
+      setClientSetting
     } = this.props;
 
     // File info
@@ -144,6 +159,14 @@ class FilePage extends React.Component<Props> {
                 <div className="card__title-identity-icons">
                   <FilePrice uri={normalizeURI(uri)} />
                   {isRewardContent && <Icon icon={icons.FEATURED} />}
+                  <FormField
+                    type="checkbox"
+                    name="autoplay"
+                    className="autoplay"
+                    onChange={this.onAutoplayChange}
+                    checked={autoplay}
+                    postfix={__('Autoplay')}
+                  />
                 </div>
               </div>
               <span className="card__subtitle card__subtitle--file">

src/renderer/page/settings/index.js

@@ -26,6 +26,7 @@ const select = state => ({
   language: selectCurrentLanguage(state),
   languages: selectLanguages(state),
   automaticDarkModeEnabled: makeSelectClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED)(state),
+  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state)
 });
 
 const perform = dispatch => ({

src/renderer/page/settings/view.jsx

@@ -31,6 +31,7 @@ type Props = {
   currentTheme: string,
   themes: Array<string>,
   automaticDarkModeEnabled: boolean,
+  autoplay: boolean
 };
 
 type State = {
@@ -53,6 +54,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
     (this: any).onShareDataChange = this.onShareDataChange.bind(this);
     (this: any).onThemeChange = this.onThemeChange.bind(this);
     (this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
+    (this: any).onAutoplayChange = this.onAutoplayChange.bind(this);
     (this: any).clearCache = this.clearCache.bind(this);
     // (this: any).onLanguageChange = this.onLanguageChange.bind(this)
   }
@@ -95,6 +97,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
     this.props.setClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED, value);
   }
 
+  onAutoplayChange(event: SyntheticInputEvent<*>) {
+    this.props.setClientSetting(settings.AUTOPLAY, event.target.checked);
+  }
+
   onInstantPurchaseEnabledChange(enabled: boolean) {
     this.props.setClientSetting(settings.INSTANT_PURCHASE_ENABLED, enabled);
   }
@@ -138,6 +144,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
       currentTheme,
       themes,
       automaticDarkModeEnabled,
+      autoplay
     } = this.props;
 
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
@@ -239,6 +246,13 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
             <section className="card card--section">
               <div className="card__title">{__('Content Settings')}</div>
+              <FormField
+                type="checkbox"
+                name="autoplay"
+                onChange={this.onAutoplayChange}
+                checked={autoplay}
+                postfix={__('Autoplay media files')}
+              />
               <FormField
                 type="checkbox"
                 name="show_unavailable"

src/renderer/redux/reducers/settings.js

@@ -24,6 +24,7 @@ const defaultState = {
     theme: getLocalStorageSetting(SETTINGS.THEME, 'light'),
     themes: getLocalStorageSetting(SETTINGS.THEMES, []),
     automaticDarkModeEnabled: getLocalStorageSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false),
+    autoplay: getLocalStorageSetting(SETTINGS.AUTOPLAY, false)
   },
   isNight: false,
   languages: {},

src/renderer/scss/component/_card.scss

@@ -86,10 +86,15 @@
   display: flex;
   align-items: center;
   .credit-amount,
+  .autoplay,
   .icon {
     margin-top: $spacing-vertical * 1/3;
     margin-left: $spacing-vertical * 2/3;
   }
+
+  .autoplay .icon {
+    margin: 0 0 0 5px;
+  }
 }
 
 .card__title-identity-icons {

src/renderer/scss/component/_content.scss

@@ -59,7 +59,11 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   padding: 0 20px;
+  background-color: rgba(0, 0, 0, 0.5);
+  height: 100%;
+  width: 100%;
 }
 
 .content__loading-text {