move autoplay back to below file actions

src/renderer/component/common/form-components/form-field.jsx

@@ -40,7 +40,6 @@ export class FormField extends React.PureComponent<Props> {
       children,
       stretch,
       affixClass,
-      firstInList,
       ...inputProps
     } = this.props;
 
@@ -103,7 +102,6 @@ export class FormField extends React.PureComponent<Props> {
         <div
           className={classnames('form-field__input', {
             'form-field--auto-height': type === 'markdown',
-            'form-field--first-item': firstInList,
           })}
         >
           {prefix && (

src/renderer/component/common/form-components/form-row.jsx

@@ -9,7 +9,6 @@ type Props = {
   verticallyCentered?: boolean,
   stretch?: boolean,
   alignRight?: boolean,
-  spaceBetween?: boolean,
 };
 
 export class FormRow extends React.PureComponent<Props> {
@@ -18,14 +17,7 @@ export class FormRow extends React.PureComponent<Props> {
   };
 
   render() {
-    const {
+    const { children, padded, verticallyCentered, stretch, alignRight } = this.props;
-      children,
-      padded,
-      verticallyCentered,
-      stretch,
-      alignRight,
-      spaceBetween,
-    } = this.props;
     return (
       <div
         className={classnames('form-row', {
@@ -33,7 +25,6 @@ export class FormRow extends React.PureComponent<Props> {
           'form-row--vertically-centered': verticallyCentered,
           'form-row--stretch': stretch,
           'form-row--right': alignRight,
-          'form-row--space-between': spaceBetween,
         })}
       >
         {children}

src/renderer/component/recommendedContent/index.js

@@ -1,18 +1,13 @@
-import * as settings from 'constants/settings';
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri, doSearch, makeSelectRecommendedContentForUri } from 'lbry-redux';
-import { doSetClientSetting } from 'redux/actions/settings';
-import { makeSelectClientSetting } from 'redux/selectors/settings';
 import RecommendedVideos from './view';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
   recommendedContent: makeSelectRecommendedContentForUri(props.uri)(state),
-  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
 });
 
 const perform = dispatch => ({
-  setAutoplay: value => dispatch(doSetClientSetting(settings.AUTOPLAY, value)),
   search: query => dispatch(doSearch(query, 20)),
 });
 

src/renderer/component/recommendedContent/view.jsx

@@ -1,17 +1,13 @@
 // @flow
 import React from 'react';
 import FileTile from 'component/fileTile';
-import { FormRow, FormField } from 'component/common/form';
-import ToolTip from 'component/common/tooltip';
 import type { Claim } from 'types/claim';
 
 type Props = {
   uri: string,
   claim: ?Claim,
-  autoplay: boolean,
   recommendedContent: Array<string>,
   search: string => void,
-  setAutoplay: boolean => void,
 };
 
 type State = {
@@ -62,24 +58,11 @@ export default class RecommendedContent extends React.PureComponent<Props, State
   }
 
   render() {
-    const { autoplay, setAutoplay, recommendedContent } = this.props;
+    const { recommendedContent } = this.props;
 
     return (
       <section className="card__list--recommended">
-        <FormRow spaceBetween>
+        <span>Related</span>
-          <span>Related</span>
-          <ToolTip onComponent body={__('Automatically download and play free content.')}>
-            <FormField
-              firstInList
-              affixClass="form-field__prefix--recommended-content"
-              name="autoplay"
-              type="checkbox"
-              prefix={__('Autoplay')}
-              checked={autoplay}
-              onChange={e => setAutoplay(e.target.checked)}
-            />
-          </ToolTip>
-        </FormRow>
         {recommendedContent &&
           recommendedContent.length &&
           recommendedContent.map(recommendedUri => (

src/renderer/page/file/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import * as settings from 'constants/settings';
 import { buildURI, normalizeURI, MODALS } from 'lbry-redux';
 import FileViewer from 'component/fileViewer';
 import Thumbnail from 'component/common/thumbnail';
@@ -20,6 +21,8 @@ import FileDownloadLink from 'component/fileDownloadLink';
 import classnames from 'classnames';
 import getMediaType from 'util/getMediaType';
 import RecommendedContent from 'component/recommendedContent';
+import { FormField, FormRow } from 'component/common/form';
+import ToolTip from 'component/common/tooltip';
 
 type Props = {
   claim: Claim,
@@ -43,6 +46,8 @@ type Props = {
   prepareEdit: ({}, string) => void,
   checkSubscription: ({ channelName: string, uri: string }) => void,
   subscriptions: Array<Subscription>,
+  setClientSetting: (string, boolean | string) => void,
+  autoplay: boolean,
 };
 
 class FilePage extends React.Component<Props> {
@@ -59,6 +64,12 @@ class FilePage extends React.Component<Props> {
     'application',
   ];
 
+  constructor(props: Props) {
+    super(props);
+
+    (this: any).onAutoplayChange = this.onAutoplayChange.bind(this);
+  }
+
   componentDidMount() {
     const { uri, fileInfo, fetchFileInfo, fetchCostInfo } = this.props;
 
@@ -79,6 +90,10 @@ class FilePage extends React.Component<Props> {
     }
   }
 
+  onAutoplayChange(event: SyntheticInputEvent<*>) {
+    this.props.setClientSetting(settings.AUTOPLAY, event.target.checked);
+  }
+
   checkSubscription = (props: Props) => {
     if (props.subscriptions.find(sub => sub.channelName === props.claim.channel_name)) {
       props.checkSubscription({
@@ -108,6 +123,7 @@ class FilePage extends React.Component<Props> {
       navigate,
       costInfo,
       fileInfo,
+      autoplay,
     } = this.props;
 
     // File info
@@ -213,6 +229,17 @@ class FilePage extends React.Component<Props> {
                 <FileActions uri={uri} claimId={claim.claim_id} />
               </div>
             </div>
+            <FormRow padded>
+              <ToolTip direction="right" body={__('Automatically download and play free content.')}>
+                <FormField
+                  name="autoplay"
+                  type="checkbox"
+                  postfix={__('Autoplay')}
+                  checked={autoplay}
+                  onChange={this.onAutoplayChange}
+                />
+              </ToolTip>
+            </FormRow>
             <div className="card__content--extra-padding">
               <FileDetails uri={uri} />
             </div>

src/renderer/scss/component/_form-field.scss

@@ -12,7 +12,7 @@
   }
 
   &.form-row--padded {
-    padding-top: $spacing-vertical * 2/3;
+    padding-top: $spacing-vertical * 1/3;
   }
 
   &.form-row--vertically-centered {
@@ -27,10 +27,6 @@
     justify-content: flex-end;
   }
 
-  &.form-row--space-between {
-    justify-content: space-between;
-  }
-
   .form-field.form-field--stretch {
     width: 100%;
 
@@ -125,11 +121,6 @@
   padding-left: $spacing-vertical * 1/3;
 }
 
-.form-field__prefix--recommended-content {
-  font-size: 12px;
-  align-self: center;
-}
-
 .form-field__select {
   min-width: 60px;
   height: 30px;

src/renderer/scss/component/_tooltip.scss

@@ -75,8 +75,8 @@
 
 .tooltip--right {
   .tooltip__body {
-    margin-top: -5px;
+    margin-top: -30px;
-    margin-left: 10px;
+    margin-left: 110%;
 
     &::after {
       top: 17px;