src/renderer/page/file/view.jsx

@@ -41,6 +41,7 @@ type Props = {
   playingUri: ?string,
   isPaused: boolean,
   claimIsMine: boolean,
+  autoplay: boolean,
   costInfo: ?{},
   navigate: (string, ?{}) => void,
   openModal: ({ id: string }, { uri: string }) => void,
@@ -78,6 +79,10 @@ class FilePage extends React.Component<Props> {
     }
   }
 
+  onAutoplayChange(event: SyntheticInputEvent<*>) {
+    this.props.setClientSetting(settings.AUTOPLAY, event.target.checked);
+  }
+
   checkSubscription = (props: Props) => {
     if (
       props.subscriptions
@@ -97,10 +102,6 @@ class FilePage extends React.Component<Props> {
     }
   };
 
-  onAutoplayChange(event: SyntheticInputEvent<*>) {
-    this.props.setClientSetting(settings.AUTOPLAY, event.target.checked);
-  }
-
   render() {
     const {
       claim,
@@ -116,7 +117,6 @@ class FilePage extends React.Component<Props> {
       prepareEdit,
       navigate,
       autoplay,
-      setClientSetting
     } = this.props;
 
     // File info
@@ -159,14 +159,6 @@ 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">
@@ -200,6 +192,15 @@ class FilePage extends React.Component<Props> {
                   )}
                 </div>
               </div>
+              <div className="autoplay">
+                <FormField
+                  type="checkbox"
+                  name="autoplay"
+                  onChange={this.onAutoplayChange}
+                  checked={autoplay}
+                  postfix={__('Autoplay')}
+                />
+              </div>
             </div>
 
             <div className="card__content">

src/renderer/scss/component/_card.scss

@@ -86,15 +86,10 @@
   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 {
@@ -173,12 +168,16 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: $spacing-width 0;
+  padding: $spacing-width 0 0;
 }
 
 .card__channel-info--large {
   padding-top: 0;
-  padding-bottom: $spacing-width;
+  padding-bottom: 0;
+}
+
+.autoplay div div input {
+  margin: 0 0 $spacing-vertical auto;
 }
 
 .card__content {