diff --git a/src/components/Story/Body.js b/src/components/Story/Body.js index 39088c6037..c6ec7ebeea 100644 --- a/src/components/Story/Body.js +++ b/src/components/Story/Body.js @@ -53,8 +53,8 @@ export function getHtml(body, jsonMetadata = {}, returnType = 'Object') { const id = match[1]; const type = match[2]; const link = match[3]; - const embed = embedjs.get(link, { width: '100%', height: 400, autoplay: true }); - sections.push(); + const embed = embedjs.get(link, { width: '100%', height: 400, autoplay: false }); + sections.push(); section = section.substring(`${id} ${type} ${link} ~~~`.length); } if (section !== '') { @@ -67,11 +67,7 @@ export function getHtml(body, jsonMetadata = {}, returnType = 'Object') { const Body = (props) => { const htmlSections = getHtml(props.body, props.jsonMetadata); - return ( -
- {htmlSections} -
- ); + return
{htmlSections}
; }; Body.propTypes = { diff --git a/src/components/Story/PostFeedEmbed.js b/src/components/Story/PostFeedEmbed.js index 38798f930e..5ba0da1264 100644 --- a/src/components/Story/PostFeedEmbed.js +++ b/src/components/Story/PostFeedEmbed.js @@ -9,12 +9,12 @@ export default class PostFeedEmbed extends React.Component { thumbnail: PropTypes.string, embed: PropTypes.string, }).isRequired, + inPost: PropTypes.bool, }; - static renderWithIframe(embed) { - // eslint-disable-next-line react/no-danger - return
; - } + static defaultProps = { + inPost: false, + }; constructor(props) { super(props); @@ -28,6 +28,11 @@ export default class PostFeedEmbed extends React.Component { this.setState({ showIframe: true }); }; + renderWithIframe = embed => ( + // eslint-disable-next-line react/no-danger +
+ ); + renderThumbFirst(thumb) { return (
@@ -40,15 +45,16 @@ export default class PostFeedEmbed extends React.Component { } render() { - const { embed } = this.props; + const { embed, inPost } = this.props; + const shouldRenderThumb = inPost ? false : !this.state.showIframe; if ( - (embed.provider_name === 'YouTube' || embed.provider_name === 'DTube') - && !this.state.showIframe + (embed.provider_name === 'YouTube' || embed.provider_name === 'DTube') && + shouldRenderThumb ) { return this.renderThumbFirst(embed.thumbnail); } else if (embed.embed) { - return PostFeedEmbed.renderWithIframe(embed.embed); + return this.renderWithIframe(embed.embed); } return
; } diff --git a/src/components/Story/PostFeedEmbed.less b/src/components/Story/PostFeedEmbed.less index 3f1bf9a6c4..a399131e1a 100644 --- a/src/components/Story/PostFeedEmbed.less +++ b/src/components/Story/PostFeedEmbed.less @@ -23,7 +23,7 @@ &__preview { display: block; - max-width: 100%; + width: 100%; max-height: 400px; margin: 0 auto; } diff --git a/src/stories/__snapshots__/stories.test.js.snap b/src/stories/__snapshots__/stories.test.js.snap index 38a241bb4a..141289f842 100644 --- a/src/stories/__snapshots__/stories.test.js.snap +++ b/src/stories/__snapshots__/stories.test.js.snap @@ -2171,23 +2171,12 @@ exports[`Storyshots Story Full story with embed 1`] = ` } />
-
- -
- thumbnail -
+ dangerouslySetInnerHTML={ + Object { + "__html": "", + } + } + />