react-video-content-youtube
Version:
Optimization YouTube video on page
262 lines (235 loc) • 8.67 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
var VideoContentYT = /*#__PURE__*/function (_Component) {
_inheritsLoose(VideoContentYT, _Component);
function VideoContentYT(main) {
var _this;
_this = _Component.call(this, main) || this;
_this.state = {
firstLoad: false,
autoPlay: false,
playBtnRed: false,
title: "",
className: "",
videoId: "",
thumbnailQuality: "",
showContent: false
};
return _this;
}
var _proto = VideoContentYT.prototype;
_proto.render = function render() {
var _this2 = this;
var _this$props = this.props,
_this$props$src = _this$props.src,
src = _this$props$src === void 0 ? "" : _this$props$src,
_this$props$params = _this$props.params,
params = _this$props$params === void 0 ? {} : _this$props$params;
if (!this.state.firstLoad) {
var localState = this.state;
var thumbnailQuality = {
"default": "default",
hq: "hqdefault",
mq: "mqdefault",
sd: "sddefault",
maxres: "maxresdefault"
};
var findInUrl = false;
if (src.indexOf("youtube") !== -1 && src.indexOf("watch") !== -1) {
findInUrl = true;
try {
localState.videoId = new URLSearchParams(new URL(src).search).get("v");
} catch (_unused) {
try {
localState.videoId = new URLSearchParams(new URL("https://" + src).search).get("v");
} catch (_unused2) {
return /*#__PURE__*/React__default.createElement("div", null, "error loading, wrong URL...");
}
}
}
if (src.indexOf("youtube") !== -1 && src.indexOf("embed") !== -1) {
findInUrl = true;
try {
localState.videoId = new URL(src).pathname.replace('/embed/', '');
} catch (_unused3) {
try {
localState.videoId = localState.videoId = new URL("https://" + src).pathname.replace('/embed/', '');
} catch (_unused4) {
return /*#__PURE__*/React__default.createElement("div", null, "error loading, wrong URL...");
}
}
}
if (src.indexOf("youtu.be") !== -1) {
findInUrl = true;
try {
localState.videoId = new URL(src).pathname.replace('/', '');
} catch (_unused5) {
try {
localState.videoId = new URL("https://" + src).pathname.replace('/', '');
} catch (_unused6) {
return /*#__PURE__*/React__default.createElement("div", null, "error loading, wrong URL...");
}
}
}
if (!findInUrl) {
localState.videoId = src;
} else {
if (!this.state.videoId) {
localState.firstLoad = true;
return /*#__PURE__*/React__default.createElement("div", null, "error loading, not found video ID...");
}
}
if (params.hasOwnProperty("title")) {
localState.title = params.title;
} else {
localState.title = "Video from YouTube";
}
if (params.hasOwnProperty("className")) {
localState.className = params.className;
} else {
localState.className = "VideoContent__" + this.state.videoId;
}
if (params.hasOwnProperty("autoPlay")) {
localState.autoPlay = params.autoPlay;
}
if (params.hasOwnProperty("thumbnailQuality")) {
if (params.thumbnailQuality === "auto") {
localState.thumbnailQuality = "maxresdefault";
} else {
try {
localState.thumbnailQuality = thumbnailQuality[params.thumbnailQuality];
} catch (_unused7) {
localState.thumbnailQuality = "maxresdefault";
}
}
} else {
localState.thumbnailQuality = "maxresdefault";
}
localState.firstLoad = true;
}
if (this.state.showContent) {
return /*#__PURE__*/React__default.createElement("div", {
className: this.state.className + "__iframeVideo",
style: {
position: "relative",
width: "100%",
height: "0",
paddingBottom: "56.25%"
}
}, /*#__PURE__*/React__default.createElement("iframe", {
className: this.state.className + "__iframe",
style: {
maxWidth: "100%",
width: "100%",
position: "absolute",
left: "0"
},
key: "vc_" + this.state.videoId + "__iframe",
title: this.state.title,
alt: this.state.title,
src: this.state.autoPlay ? "https://www.youtube.com/embed/" + this.state.videoId + "?rel=false&showinfo=false&autoplay=true" : "https://www.youtube.com/embed/" + this.state.videoId,
allow: "autoplay; encrypted-media",
width: "100%",
height: "100%",
frameborder: 0
}));
} else {
return /*#__PURE__*/React__default.createElement("div", {
className: this.state.className + "__imgVideo",
key: "vc_" + this.state.videoId + "__img",
style: {
position: "relative",
width: "100%",
height: "0",
paddingBottom: "56.25%",
backgroundColor: "#000000"
}
}, /*#__PURE__*/React__default.createElement("picture", null, /*#__PURE__*/React__default.createElement("source", {
srcSet: "https://i.ytimg.com/vi_webp/" + this.state.videoId + "/" + this.state.thumbnailQuality + ".webp",
type: "image/webp"
}), /*#__PURE__*/React__default.createElement("img", {
className: this.state.className + "__media",
key: "vc_" + this.state.videoId + "__media",
title: this.state.title,
style: {
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "100%",
border: "none"
},
src: "https://i.ytimg.com/vi/" + this.state.videoId + "/" + this.state.thumbnailQuality + ".jpg",
alt: this.state.title
})), /*#__PURE__*/React__default.createElement("button", {
className: this.state.className + "__button",
key: "vc_" + this.state.videoId + "__button",
style: {
position: "absolute",
top: "50%",
left: "50%",
zIndex: "1",
padding: "0",
width: "68px",
height: "48px",
border: "none",
backgroundColor: "transparent",
transform: "translate(-50%, -50%)",
cursor: "pointer"
},
type: "button",
"aria-label": "Play video",
onMouseOver: function onMouseOver(e) {
return _this2.setState({
playBtnRed: true
});
},
onMouseOut: function onMouseOut(e) {
return _this2.setState({
playBtnRed: false
});
},
onClick: function onClick() {
_this2.setState({
showContent: true
});
}
}, /*#__PURE__*/React__default.createElement("svg", {
width: "68",
height: "48",
viewBox: "0 0 68 48"
}, /*#__PURE__*/React__default.createElement("path", {
className: this.state.className + "__button-shape",
key: "vc_" + this.state.videoId + "__button-shape",
style: {
fill: this.state.playBtnRed ? "#ff0000" : "rgba(33,33,33,0.8)",
fillOpacity: this.state.playBtnRed ? "0.8" : "1"
},
d: "M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
}), /*#__PURE__*/React__default.createElement("path", {
className: this.state.className + "__button-icon",
key: "vc_" + this.state.videoId + "__button-icon",
style: {
fill: "#ffffff"
},
d: "M 45,24 27,14 27,34"
}))));
}
};
return VideoContentYT;
}(React.Component);
module.exports = VideoContentYT;
//# sourceMappingURL=index.js.map