synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
78 lines • 4.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_2 = require("react");
var SynapseClient_1 = require("../../utils/SynapseClient");
var synapseTypes_1 = require("../../utils/synapseTypes");
var utils_1 = require("../../utils/");
var SynapseContext_1 = require("../../utils/SynapseContext");
function SynapseVideo(_a) {
var _b, _c;
var params = _a.params;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _d = (0, react_2.useState)(), externalVideoUrl = _d[0], setExternalVideoUrl = _d[1];
var _e = (0, react_2.useState)(), synapseVideoPresignedUrl = _e[0], setSynapseVideoPresignedUrl = _e[1];
var videoWidth = (_b = params.width) !== null && _b !== void 0 ? _b : '';
var videoHeight = (_c = params.height) !== null && _c !== void 0 ? _c : '';
(0, react_2.useEffect)(function () {
var getVideo = function () {
if (params.videoId)
setExternalVideoUrl("https://www.youtube.com/embed/" + params.videoId);
else if (params.vimeoId)
setExternalVideoUrl("https://player.vimeo.com/video/" + params.vimeoId);
else {
var videoKey_1 = params.oggSynapseId || params.mp4SynapseId || params.webmSynapseId;
(0, SynapseClient_1.getEntity)(accessToken, videoKey_1).then(function (data) {
var fileHandleAssociationList = [
{
associateObjectId: videoKey_1,
associateObjectType: synapseTypes_1.FileHandleAssociateType.FileEntity,
fileHandleId: data.dataFileHandleId,
},
];
getSynapseFiles(fileHandleAssociationList, data.dataFileHandleId);
});
}
};
var getSynapseFiles = function (fileHandleAssociationList, id) {
var request = {
includeFileHandles: false,
includePreSignedURLs: true,
includePreviewPreSignedURLs: false,
requestedFiles: fileHandleAssociationList,
};
(0, SynapseClient_1.getFiles)(request, accessToken)
.then(function (data) {
var preSignedURL = data.requestedFiles.filter(function (el) { return el.fileHandleId === id; })[0].preSignedURL;
setSynapseVideoPresignedUrl(preSignedURL);
})
.catch(function (err) {
console.error('Error on getting video ', err);
});
};
getVideo();
}, [externalVideoUrl, params, accessToken, videoHeight, videoWidth]);
var RenderVideo = function () {
if (synapseVideoPresignedUrl) {
if (accessToken) {
return (react_1.default.createElement("video", { controls: true, src: synapseVideoPresignedUrl, width: videoWidth, height: videoHeight, "data-testid": "synapse-video-url" }, "It does not support the HTML5 Video element."));
}
else { // if not logged in, show login button
return (react_1.default.createElement("p", null,
"You will need to",
react_1.default.createElement("button", { "data-testid": "video-login", className: utils_1.SynapseConstants.SRC_SIGN_IN_CLASS + " sign-in-btn default\n " }, "Sign in"),
"in for access to that resource."));
}
}
else if (externalVideoUrl) {
return (react_1.default.createElement("iframe", { title: "video frame", src: externalVideoUrl, width: videoWidth, height: videoHeight }));
}
else {
return react_1.default.createElement(react_1.default.Fragment, null);
}
};
return (react_1.default.createElement(RenderVideo, null));
}
exports.default = SynapseVideo;
//# sourceMappingURL=SynapseVideo.js.map