Merge pull request #762 from busyorg/nd/youtube-preview

Use raw YouTube embed in single post
busyorg · Oct 7, 2017 · 0ca3b4a · 0ca3b4a
2 parents a2ced3d + eef058d
commit 0ca3b4a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 33 deletions.
diff --git 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(<PostFeedEmbed key={`embed-a-${i}`} embed={embed} />);
+      const embed = embedjs.get(link, { width: '100%', height: 400, autoplay: false });
+      sections.push(<PostFeedEmbed key={`embed-a-${i}`} inPost embed={embed} />);
       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 (
-    <div className={classNames('Body', { 'Body--full': props.full })}>
-      {htmlSections}
-    </div>
-  );
+  return <div className={classNames('Body', { 'Body--full': props.full })}>{htmlSections}</div>;
 };
 
 Body.propTypes = {

diff --git 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 <div dangerouslySetInnerHTML={{ __html: embed }} />;
-  }
+  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
+    <div dangerouslySetInnerHTML={{ __html: embed }} />
+  );
+
   renderThumbFirst(thumb) {
     return (
       <div role="presentation" className="PostFeedEmbed" onClick={this.handleThumbClick}>
@@ -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 <div />;
   }

diff --git 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
@@ -2171,23 +2171,12 @@ exports[`Storyshots Story Full story with embed 1`] = `
           }
         />
         <div
-          className="PostFeedEmbed"
-          onClick={[Function]}
-          role="presentation"
-        >
-          <div
-            className="PostFeedEmbed__playButton"
-          >
-            <i
-              className="iconfont icon-group icon-playon_fill"
-            />
-          </div>
-          <img
-            alt="thumbnail"
-            className="PostFeedEmbed__preview"
-            src="https://i.ytimg.com/vi/YxFzGoDoLwU/hqdefault.jpg"
-          />
-        </div>
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<iframe width=\\"100%\\" height=\\"400\\" src=\\"//www.youtube.com/embed/YxFzGoDoLwU?autoplay=0\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>",
+            }
+          }
+        />
         <div
           dangerouslySetInnerHTML={
             Object {