Repository URL to install this package:
|
Version:
3.12.20 ▾
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { Fragment, useEffect, useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import isSupportedVideo from '@filerobot/utils/lib/isSupportedVideo';
import LinkHelper from '@filerobot/utils/lib/LinkHelper';
import getItemIcon from '@filerobot/utils/lib/getItemIcon';
import getFileLink from '@filerobot/utils/lib/getFileLink';
import isImage from '@filerobot/utils/lib/isImage';
import convertVideoFileTypeToSupported from '@filerobot/utils/lib/convertVideoFileTypeToSupported';
import { Canvas } from 'react-filerobot-media-annotator';
import getFormattedPreviewUrl from '@filerobot/utils/lib/getFormattedPreviewUrl';
import { PLUGINS_IDS } from '@filerobot/utils/lib/constants';
import { useCore } from '@filerobot/core/lib/hooks';
import getFileAssetsTokenUrl from '@filerobot/utils/lib/getFileAssetsTokenUrl';
import { selectIsShareboxView } from '../../../slices/views.slice';
import { useExplorer } from '../../../hooks/';
import { DEFAULT_ZOOM_RATIO } from './Body.constants';
import Styled from './Body.styled';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var BodyFile = function BodyFile(_ref) {
var _file$url, _file$info, _file$remote, _file$remote$body, _file$url2;
var file = _ref.file,
zoomRatio = _ref.zoomRatio,
panningDimens = _ref.panningDimens,
isCommentsTabOpened = _ref.isCommentsTabOpened,
setPanningDimens = _ref.setPanningDimens,
isPanEnabled = _ref.isPanEnabled,
imgEl = _ref.imgEl,
setImgRef = _ref.setImgRef,
previewEl = _ref.previewEl,
isPdfPreviewSupported = _ref.isPdfPreviewSupported,
videoEl = _ref.videoEl,
setVideoRef = _ref.setVideoRef,
isTransparencySupported = _ref.isTransparencySupported,
isMediaLoadingFailed = _ref.isMediaLoadingFailed,
setIsMediaLoadingFailed = _ref.setIsMediaLoadingFailed;
var _useCore = useCore(),
getPlugin = _useCore.getPlugin,
container = _useCore.opts.container;
var _useExplorer = useExplorer(),
isDevEnv = _useExplorer.isDevEnv,
floaty = _useExplorer.opts.floaty;
var isShareboxView = useSelector(selectIsShareboxView);
var hiddenImageLoading = isPdfPreviewSupported || isSupportedVideo(file) || !isShareboxView;
var _useState = useState(!hiddenImageLoading),
_useState2 = _slicedToArray(_useState, 2),
isImageLoading = _useState2[0],
setIsImageLoading = _useState2[1];
var videoUrl = '';
var isBgRemoved = file.bgRemoved;
var fileVersionPreviewUrl = getFileLink(file, (file === null || file === void 0 ? void 0 : (_file$url = file.url) === null || _file$url === void 0 ? void 0 : _file$url.version_preview_link) && 'version_preview_link');
// file.info.preview is preview for big files and always proffered to use if exists, please note that order here matters
var filePreviewUrl = ((_file$info = file.info) === null || _file$info === void 0 ? void 0 : _file$info.preview) || fileVersionPreviewUrl || (file === null || file === void 0 ? void 0 : file.preview) || (file === null || file === void 0 ? void 0 : (_file$remote = file.remote) === null || _file$remote === void 0 ? void 0 : (_file$remote$body = _file$remote.body) === null || _file$remote$body === void 0 ? void 0 : _file$remote$body.url) || file.blob || '';
var pdfPath = useMemo(function () {
return getFileLink(file);
}, [file]);
var previewUrl = getFormattedPreviewUrl({
url: filePreviewUrl,
isDevEnv: isDevEnv,
isHubMode: floaty,
containerToken: container,
provideContainerToken: Boolean(file === null || file === void 0 ? void 0 : (_file$url2 = file.url) === null || _file$url2 === void 0 ? void 0 : _file$url2.version_preview_link)
});
useEffect(function () {
if (zoomRatio <= DEFAULT_ZOOM_RATIO) {
setPanningDimens({
x: 0,
y: 0
});
}
}, [zoomRatio]);
var toggleVideo = function toggleVideo() {
if (!videoEl || isCommentsTabOpened) {
return;
}
if (videoEl.current.paused) {
videoEl.current.play();
} else {
videoEl.current.pause();
}
};
var renderAnnotatorCanvas = function renderAnnotatorCanvas(mediaRef) {
return /*#__PURE__*/_jsx(Styled.CanvasWrapper, {
children: (mediaRef === null || mediaRef === void 0 ? void 0 : mediaRef.current) && /*#__PURE__*/_jsx(Canvas, {
mediaRef: mediaRef
})
});
};
var getImgSrc = function getImgSrc() {
var _previewEl$current;
var defaultIconSrc = getItemIcon({
fileOrFolder: file
});
var href = isImage(file) && previewUrl ? previewUrl : defaultIconSrc || '';
// No need extra params for local file. Case: upload file required metadata field.
if (isImage(file) && !file.url && file !== null && file !== void 0 && file.preview) {
return href;
}
if (isBgRemoved) {
href = file.url;
}
return new LinkHelper({
href: href
}).appendSearchParams({
func: 'bound',
org_if_sml: 1,
w: Math.floor(((_previewEl$current = previewEl.current) === null || _previewEl$current === void 0 ? void 0 : _previewEl$current.offsetWidth) * devicePixelRatio)
});
};
useEffect(function () {
if (hiddenImageLoading || isImageLoading) return;
setIsImageLoading(true);
}, [filePreviewUrl]);
var loadImageHandler = function loadImageHandler() {
setIsImageLoading(false);
};
if (isPdfPreviewSupported) {
var targetPlugin = getPlugin(PLUGINS_IDS.PDF_JS);
return /*#__PURE__*/_jsx(Fragment, {
children: /*#__PURE__*/_jsx(targetPlugin.render, {
pdfPath: pdfPath,
file: file
})
}, targetPlugin.id);
}
if (isSupportedVideo(file) && !isMediaLoadingFailed) {
var _file$url3, _previewEl$current2, _previewEl$current3;
if (file !== null && file !== void 0 && (_file$url3 = file.url) !== null && _file$url3 !== void 0 && _file$url3.cdn) {
var _file$url4;
videoUrl = getFileAssetsTokenUrl(file === null || file === void 0 ? void 0 : (_file$url4 = file.url) === null || _file$url4 === void 0 ? void 0 : _file$url4.cdn, isDevEnv);
} else {
videoUrl = filePreviewUrl;
}
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Styled.VideoWrapper, {
onClick: toggleVideo,
children: /*#__PURE__*/_jsx("video", {
onError: function onError() {
return setIsMediaLoadingFailed(true);
},
ref: setVideoRef,
width: (_previewEl$current2 = previewEl.current) === null || _previewEl$current2 === void 0 ? void 0 : _previewEl$current2.offsetWidth,
height: (_previewEl$current3 = previewEl.current) === null || _previewEl$current3 === void 0 ? void 0 : _previewEl$current3.offsetHeight,
children: /*#__PURE__*/_jsx("source", {
src: videoUrl,
type: convertVideoFileTypeToSupported(file.type)
})
})
}), isCommentsTabOpened && renderAnnotatorCanvas(videoEl)]
});
}
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Styled.Skeleton, {
absolutePosition: true,
hidden: !isImageLoading
}), /*#__PURE__*/_jsx(Styled.BodyFile, {
ref: setImgRef,
src: getImgSrc(),
alt: file === null || file === void 0 ? void 0 : file.name,
draggable: false,
$zoomRatio: zoomRatio,
onLoad: loadImageHandler,
hidden: isImageLoading,
$pan: panningDimens,
$isPanEnabled: isPanEnabled,
$isTransparencySupported: isTransparencySupported
}), isCommentsTabOpened && renderAnnotatorCanvas(imgEl)]
});
};
export default BodyFile;