Commit dc988018 authored by Dan Notestein's avatar Dan Notestein
Browse files

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

Fix youtube css

See merge request !292
parents 8618a755 c79d782b
......@@ -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";
......
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>
);
}
/* 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;
.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;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment