Merge branch 'fix-youtube-css' into 'develop'

Fix youtube css

See merge request !292

src/app/components/all.scss

@@ -23,7 +23,6 @@
 @import "./elements/TagList";
 @import "./elements/Reputation";
 @import "./elements/Reblog";
-@import "./elements/YoutubePreview";
 @import "./elements/ShareMenu";
 @import "./elements/Author/styles";
 @import "./elements/AuthorDropdown";

src/app/components/elements/EmbeddedPlayers/youtube.jsx

 import React from 'react';
-import YoutubePreview from 'app/components/elements/YoutubePreview';
 
 /**
  * Regular expressions for detecting and validating provider URLs
@@ -115,21 +114,51 @@ export function embedNode(child, links, images) {
 /**
  * Generates the Markdown/HTML code to override the detected URL with an iFrame
  * @param idx
- * @param threespeakId
+ * @param id
  * @param width
  * @param height
+ * @param startTime
  * @returns {*}
  */
-export function genIframeMd(idx, id, width, height, startTime) {
+export function genIframeMd(idx, id, width, height, startTime = 0) {
+    const url = `https://www.youtube.com/embed/${id}?autoplay=1&autohide=1&enablejsapi=0&rel=0&origin=https://hive.blog&start=${startTime}`;
+
+    let sandbox = sandboxConfig.useSandbox;
+    if (sandbox) {
+        if (Object.prototype.hasOwnProperty.call(sandboxConfig, 'sandboxAttributes')) {
+            sandbox = sandboxConfig.sandboxAttributes.join(' ');
+        }
+    }
+    const aspectRatioPercent = (height / width) * 100;
+    const iframeProps = {
+        src: url,
+        width,
+        height,
+        frameBorder: '0',
+        webkitallowfullscreen: 'webkitallowfullscreen',
+        mozallowfullscreen: 'mozallowfullscreen',
+        allowFullScreen: 'allowFullScreen',
+    };
+    if (sandbox) {
+        iframeProps.sandbox = sandbox;
+    }
+
     return (
-        <YoutubePreview
+        <div
             key={`youtube-${id}-${idx}`}
-            width={parseInt(width)}
-            height={parseInt(height)}
-            youTubeId={id}
-            startTime={startTime}
-            frameBorder="0"
-            allowFullScreen="true"
-        />
+            className="videoWrapper"
+            style={{
+                position: 'relative',
+                width: '100%',
+                height: 0,
+                paddingBottom: `${aspectRatioPercent}%`,
+            }}
+        >
+            <iframe
+                title="Youtube embedded player"
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...iframeProps}
+            />
+        </div>
     );
 }

src/app/components/elements/YoutubePreview.jsx

-/* eslint react/prop-types: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-// import shouldComponentUpdate  from 'app/utils/shouldComponentUpdate';
-
-const { string, number } = PropTypes;
-
-const propTypes = {
-    youTubeId: string.isRequired,
-    width: number,
-    height: number,
-    startTime: number,
-    dataParams: string,
-};
-
-const defaultProps = {
-    width: 640,
-    height: 360,
-    startTime: 0,
-    dataParams: 'enablejsapi=0&rel=0&origin=https://hive.blog',
-};
-
-/** Lots of iframes in a post can be very slow.  This component only inserts the iframe when it is actually needed. */
-export default class YoutubePreview extends React.Component {
-    constructor() {
-        super();
-        this.state = {};
-    }
-
-    // shouldComponentUpdate = shouldComponentUpdate(this, 'YoutubePreview');
-
-    onPlay = () => {
-        this.setState({ play: true });
-    };
-
-    render() {
-        const {
-            youTubeId, width, height, startTime, dataParams
-        } = this.props;
-        const { play } = this.state;
-
-        if (!play) {
-            // mqdefault.jpg (medium quality version, 320px × 180px)
-            // hqdefault.jpg (high quality version, 480px × 360px
-            // sddefault.jpg (standard definition version, 640px × 480px)
-            const thumbnail = width <= 320
-                ? 'mqdefault.jpg'
-                : width <= 480
-                    ? 'hqdefault.jpg'
-                    : '0.jpg';
-            const previewLink = `https://img.youtube.com/vi/${youTubeId}/${thumbnail}`;
-
-            return (
-                <div
-                    className="videoWrapper youtube"
-                    onClick={this.onPlay}
-                    style={{
-                        backgroundImage: 'url(' + previewLink + ')',
-                        height: `${height}px`,
-                    }}
-                    role="button"
-                    tabIndex={0}
-                >
-                    <div className="play" />
-                </div>
-            );
-        }
-        const autoPlaySrc = `https://www.youtube.com/embed/${youTubeId}?autoplay=1&autohide=1&${dataParams}&start=${startTime}`;
-
-        const aspectRatioPercent = (height / width) * 100;
-        return (
-            <div
-                className="videoWrapper"
-                style={{
-                    position: 'relative',
-                    width: '100%',
-                    height: 0,
-                    paddingBottom: `${aspectRatioPercent}%`,
-                }}
-            >
-                <iframe
-                    width={width}
-                    height={height}
-                    src={autoPlaySrc}
-                    frameBorder="0"
-                    allowFullScreen="true"
-                    title="Youtube video player"
-                />
-            </div>
-        );
-    }
-}
-
-YoutubePreview.propTypes = propTypes;
-YoutubePreview.defaultProps = defaultProps;

src/app/components/elements/YoutubePreview.scss

-.youtube {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  transition: all 200ms ease-out;
-  cursor: pointer;
-  padding-top: 56.25%;
-  overflow: hidden;
-
-  .play {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ +CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=") no-repeat center center;
-    background-size: 64px 64px;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    opacity: .8;
-    filter: alpha(opacity=80);
-    transition: all 0.2s ease-out;
-    &:hover {
-      opacity: 1;
-      filter: alpha(opacity=100);
-    }
-    top: 0;
-  }
-}