diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index 140c7d6af..a38722d94 100644
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/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 && (
diff --git a/src/renderer/component/common/form-components/form-row.jsx b/src/renderer/component/common/form-components/form-row.jsx
index 3bd93252d..79f1b5cd0 100644
--- a/src/renderer/component/common/form-components/form-row.jsx
+++ b/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 {
- children,
- padded,
- verticallyCentered,
- stretch,
- alignRight,
- spaceBetween,
- } = this.props;
+ const { children, padded, verticallyCentered, stretch, alignRight } = 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}
diff --git a/src/renderer/component/recommendedContent/index.js b/src/renderer/component/recommendedContent/index.js
index 06885d139..1cc5c2f51 100644
--- a/src/renderer/component/recommendedContent/index.js
+++ b/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)),
});
diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx
index 6305b7861..7fedc5420 100644
--- a/src/renderer/component/recommendedContent/view.jsx
+++ b/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>
- <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>
+ <span>Related</span>
{recommendedContent &&
recommendedContent.length &&
recommendedContent.map(recommendedUri => (
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index 9dfab3fe2..8eba0ed2d 100644
--- a/src/renderer/page/file/view.jsx
+++ b/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>
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index f1a0b4f37..15fbe14e5 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/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;
diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss
index ff58835f6..9acd75954 100644
--- a/src/renderer/scss/component/_tooltip.scss
+++ b/src/renderer/scss/component/_tooltip.scss
@@ -75,8 +75,8 @@
.tooltip--right {
.tooltip__body {
- margin-top: -5px;
- margin-left: 10px;
+ margin-top: -30px;
+ margin-left: 110%;
&::after {
top: 17px;