filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 22:12:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

added support for video's autoplay attr

Browse Source
This commit is contained in:
Aminejvm 2021-02-01 17:02:49 +01:00
parent 158b569dd1
commit b9acadf02d
2 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/core/CarouselSidebarData.js
View File

@ -105,7 +105,7 @@ const STYLES_TAG = css`
border: 1px solid ${Constants.system.darkGray};
`;
const STYLES_VISIBILITY_SECTION = css`
const STYLES_OPTIONS_SECTION = css`
display: flex;
flex-direction: row;
align-items: center;
@ -180,7 +180,7 @@ const STYLES_FILE_HIDDEN = css`
`;
const STYLES_TEXT = css`
color: ${Constants.system.darkGray}
color: ${Constants.system.darkGray};
line-height: 1.5;
`;
@ -291,6 +291,13 @@ export default class CarouselSidebarData extends React.Component {
}, 4000);
};
_handleToggleAutoPlay = async (e) => {
await this.props.onSave(
{ settings: { ...this.props.data?.settings, autoPlay: e.target.value } },
this.props.index
);
};
_handleUpload = async (e) => {
e.persist();
this.setState({ changingPreview: true });
@ -551,12 +558,12 @@ export default class CarouselSidebarData extends React.Component {
</div>
</div>
)}
{this.props.isOwner ? (
{this.props.isOwner && type?.startsWith("video/") ? (
<React.Fragment>
<div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
Visibility
</div>
<div css={STYLES_VISIBILITY_SECTION}>
<div css={STYLES_OPTIONS_SECTION}>
<div css={STYLES_TEXT}>{isVisible ? "Everyone" : "Link only"}</div>
<Toggle dark active={isVisible} onChange={this._handleToggleVisibility} />
</div>
@ -567,6 +574,26 @@ export default class CarouselSidebarData extends React.Component {
</div>
</React.Fragment>
) : null}
{this.props.isOwner ? (
<React.Fragment>
<div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
Settings
</div>
<div css={STYLES_OPTIONS_SECTION}>
<div css={STYLES_TEXT}>AutoPlay</div>
<Toggle
dark
active={this.props?.data?.settings?.autoPlay}
onChange={this._handleToggleAutoPlay}
/>
</div>
<div style={{ color: Constants.system.darkGray, marginTop: 8 }}>
{this.props?.data?.settings?.autoPlay
? "This video will be autoplayed when opened by others."
: "This video will be paused when opened by others."}
</div>
</React.Fragment>
) : null}
<input
css={STYLES_HIDDEN}
ref={(c) => {

2
components/core/SlateMediaObject.js
View File

@ -78,10 +78,12 @@ export default class SlateMediaObject extends React.Component {
}
if (type.startsWith("video/")) {
const autoPlay = this.props?.data?.settings?.autoPlay || false;
return (
<video
playsInline
controls
autoPlay={autoPlay}
name="media"
type={playType}
css={STYLES_OBJECT}