@scaleflex/widget-explorer 4.3.0 → 4.4.0

package/lib/components/FileWindowPanel/Body/BodyFile.js

@@ -1,165 +0,0 @@
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-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(r) { if (Array.isArray(r)) return r; }
-import { useEffect, useState } from 'react';
-import isSupportedVideo from '@scaleflex/widget-utils/lib/isSupportedVideo';
-import LinkHelper from '@scaleflex/widget-utils/lib/LinkHelper';
-import getItemIcon from '@scaleflex/widget-utils/lib/getItemIcon';
-import getFileLink from '@scaleflex/widget-utils/lib/getFileLink';
-import isImage from '@scaleflex/widget-utils/lib/isImage';
-import isPhotoshopFile from '@scaleflex/widget-utils/lib/isPhotoshopFile';
-import getFormattedPreviewUrl from '@scaleflex/widget-utils/lib/getFormattedPreviewUrl';
-import { FILE_TYPES_AND_ICONS, PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
-import { Skeleton } from '@scaleflex/ui/core';
-import { useCore } from '@scaleflex/widget-core/lib/hooks';
-import getFileExtension from '@scaleflex/widget-utils/lib/getFileExtension';
-import { useExplorer } from '../../../hooks/';
-import { DEFAULT_ZOOM_RATIO } from './Body.constants';
-import Styled from './Body.styled';
-import VideoEmbed from './VideoEmbed';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-var BodyFile = function BodyFile(_ref) {
-  var _file$url, _file$info, _file$remote, _file$remote$body;
-  var file = _ref.file,
-    zoomRatio = _ref.zoomRatio,
-    panningDimens = _ref.panningDimens,
-    previewFileCdnUrl = _ref.previewFileCdnUrl,
-    setPanningDimens = _ref.setPanningDimens,
-    isPanEnabled = _ref.isPanEnabled,
-    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;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    fileResizedPreviewSrc = _useState2[0],
-    setFileResizedPreviewSrc = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFailedToViewPdf = _useState4[0],
-    setIsFailedToViewPdf = _useState4[1];
-  var _useState5 = useState(true),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isImageLoading = _useState6[0],
-    setIsImageLoading = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isIconType = _useState8[0],
-    setIsIconType = _useState8[1];
-  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 || file.thumbnail || '';
-  var formattedFilePreviewUrl = getFormattedPreviewUrl({
-    url: filePreviewUrl,
-    isDevEnv: isDevEnv,
-    containerToken: container
-  });
-  useEffect(function () {
-    if (zoomRatio <= DEFAULT_ZOOM_RATIO) {
-      setPanningDimens({
-        x: 0,
-        y: 0
-      });
-    }
-  }, [zoomRatio]);
-  var getFileResizedPreviewSrc = function getFileResizedPreviewSrc() {
-    var _previewEl$current;
-    var defaultIconSrc = getItemIcon({
-      fileOrFolder: file,
-      showWidth: false
-    });
-    var nextFormattedFilePreviewUrl = previewFileCdnUrl ? getFileLink(file) : formattedFilePreviewUrl;
-    var href = (isImage(file) || isPhotoshopFile(file)) && nextFormattedFilePreviewUrl ? nextFormattedFilePreviewUrl : 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;
-    }
-    var defaultWidthInCaseOfZero = 300;
-    return new LinkHelper({
-      href: href,
-      wrapEncodeUrl: true
-    }).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) || defaultWidthInCaseOfZero
-    });
-  };
-
-  // We are adding the setFileResizedPreviewSrc inside useEffect, to be triggered after having the ref of previewRef available for considering the wrapper's width.
-  useEffect(function () {
-    setFileResizedPreviewSrc(getFileResizedPreviewSrc());
-    setIsImageLoading(true);
-  }, [formattedFilePreviewUrl, file === null || file === void 0 ? void 0 : file.uuid]);
-  var loadImageHandler = function loadImageHandler() {
-    setIsImageLoading(false);
-    if (file.blob) {
-      URL.revokeObjectURL(file.blob);
-    }
-  };
-  var imageLoadingErrorHandler = function imageLoadingErrorHandler(e) {
-    e.target.src = FILE_TYPES_AND_ICONS[getFileExtension(file)] || FILE_TYPES_AND_ICONS._default;
-    setIsIconType(true);
-    setIsImageLoading(false);
-  };
-  if (isPdfPreviewSupported && !isFailedToViewPdf) {
-    var pdfJsPlugin = getPlugin(PLUGINS_IDS.PDF_JS);
-    return file.uuid || file.id ? /*#__PURE__*/_jsx(pdfJsPlugin.render, {
-      file: file,
-      setIsFailedToViewPdf: setIsFailedToViewPdf
-    }) : /*#__PURE__*/_jsx(Skeleton, {
-      width: "100%",
-      height: "100%"
-    });
-  }
-  if (isSupportedVideo(file) && !isMediaLoadingFailed && !file.loading) {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(VideoEmbed, {
-        file: file,
-        setVideoRef: setVideoRef,
-        formattedFilePreviewUrl: formattedFilePreviewUrl,
-        onError: function onError() {
-          return setIsMediaLoadingFailed(true);
-        },
-        isDevEnv: isDevEnv,
-        videoEl: videoEl
-      })
-    });
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Styled.Skeleton, {
-      absolutePosition: true,
-      $hidden: !isImageLoading
-    }), Boolean(fileResizedPreviewSrc) && /*#__PURE__*/_jsx(Styled.BodyFile, {
-      ref: setImgRef,
-      src: fileResizedPreviewSrc,
-      alt: file === null || file === void 0 ? void 0 : file.name,
-      draggable: false,
-      $zoomRatio: zoomRatio,
-      onLoad: loadImageHandler,
-      onError: imageLoadingErrorHandler,
-      $hidden: isImageLoading,
-      $pan: panningDimens,
-      $isPanEnabled: isPanEnabled,
-      $isTransparencySupported: isTransparencySupported && !isIconType
-    })]
-  });
-};
-export default BodyFile;

package/lib/components/FileWindowPanel/Body/Footer.js

@@ -1,60 +0,0 @@
-import { useEffect, Fragment } from 'react';
-import { usePlugin } from '@scaleflex/widget-core/lib/hooks';
-import getFileAssetsTokenUrl from '@scaleflex/widget-utils/lib/getFileAssetsTokenUrl';
-import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
-import { useExplorer } from '../../../hooks';
-import ActionButtons from './ActionButtons';
-import Styled from './Body.styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-var Footer = function Footer(_ref) {
-  var _ref$previewedFile = _ref.previewedFile,
-    previewedFile = _ref$previewedFile === void 0 ? {} : _ref$previewedFile,
-    zoomRatio = _ref.zoomRatio,
-    setZoomRatio = _ref.setZoomRatio,
-    isPdfFile = _ref.isPdfFile,
-    isPdfPreviewSupported = _ref.isPdfPreviewSupported,
-    isImageFile = _ref.isImageFile,
-    isAudioFileAndSupportsPlayback = _ref.isAudioFileAndSupportsPlayback,
-    setIsFileTabsHidden = _ref.setIsFileTabsHidden,
-    isFileTabsHidden = _ref.isFileTabsHidden,
-    useAssetsPicker = _ref.useAssetsPicker;
-  var _useExplorer = useExplorer(),
-    isDevEnv = _useExplorer.isDevEnv;
-  var mediaPlayerPlugin = usePlugin(PLUGINS_IDS.MEDIA_PLAYER);
-  var hasActionButtons = isImageFile || isPdfFile;
-  var audioUrl = '';
-  useEffect(function () {
-    return function () {
-      if (previewedFile !== null && previewedFile !== void 0 && previewedFile.blob) {
-        URL.revokeObjectURL(previewedFile.blob);
-      }
-    };
-  }, [previewedFile === null || previewedFile === void 0 ? void 0 : previewedFile.blob]);
-  if (isAudioFileAndSupportsPlayback && mediaPlayerPlugin) {
-    var _previewedFile$info, _previewedFile$remote, _previewedFile$remote2, _previewedFile$url;
-    audioUrl = ((_previewedFile$info = previewedFile.info) === null || _previewedFile$info === void 0 ? void 0 : _previewedFile$info.preview) || (previewedFile === null || previewedFile === void 0 ? void 0 : previewedFile.preview) || (previewedFile === null || previewedFile === void 0 ? void 0 : (_previewedFile$remote = previewedFile.remote) === null || _previewedFile$remote === void 0 ? void 0 : (_previewedFile$remote2 = _previewedFile$remote.body) === null || _previewedFile$remote2 === void 0 ? void 0 : _previewedFile$remote2.url) || previewedFile.blob || getFileAssetsTokenUrl(previewedFile === null || previewedFile === void 0 ? void 0 : (_previewedFile$url = previewedFile.url) === null || _previewedFile$url === void 0 ? void 0 : _previewedFile$url.cdn, isDevEnv) || '';
-    return /*#__PURE__*/_jsx(Fragment, {
-      children: /*#__PURE__*/_jsx(mediaPlayerPlugin.render, {
-        mediaOptions: {
-          audioPath: audioUrl
-        }
-      })
-    }, mediaPlayerPlugin.id);
-  }
-  if (!hasActionButtons) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(Styled.Footer, {
-    $centered: true,
-    $isPdfPreview: isPdfPreviewSupported,
-    children: /*#__PURE__*/_jsx(ActionButtons, {
-      zoomRatio: zoomRatio,
-      setZoomRatio: setZoomRatio,
-      isImageOrPdf: hasActionButtons,
-      setIsFileTabsHidden: setIsFileTabsHidden,
-      isFileTabsHidden: isFileTabsHidden,
-      useAssetsPicker: useAssetsPicker
-    })
-  });
-};
-export default Footer;

package/lib/components/FileWindowPanel/Body/Preview.js

@@ -1,232 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-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(r) { if (Array.isArray(r)) return r; }
-import { useMemo, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { ArrowRightOutline, ArrowLeftOutline } from '@scaleflex/icons';
-import isTransparencySupported from '@scaleflex/widget-utils/lib/isTransparencySupported';
-import { DEFAULT_ZOOM_RATIO, WHEEL_ZOOM_RATIO_PERCENTAGE, MIN_ZOOM_RATIO, MAX_ZOOM_RATIO } from './Body.constants';
-import BodyFile from './BodyFile';
-import StyledBody from './Body.styled';
-import PreviewPlaceholder from './PreviewPlaceholder';
-import { selectCurrentFilesIdsOrUuids, selectFilesVariations } from '../../../slices/files.slice';
-import { fileWindowUpdated } from '../../../slices/panels.slice';
-import { VARIATIONS_TAB_IDS } from '../FileTabs/VariationsTab/Variations.constants';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var previousTouch;
-var Preview = function Preview(_ref) {
-  var _ref$previewedFile = _ref.previewedFile,
-    previewedFile = _ref$previewedFile === void 0 ? {} : _ref$previewedFile,
-    zoomRatio = _ref.zoomRatio,
-    setZoomRatio = _ref.setZoomRatio,
-    isPdfPreviewSupported = _ref.isPdfPreviewSupported,
-    activeTabId = _ref.activeTabId,
-    videoEl = _ref.videoEl,
-    setVideoRef = _ref.setVideoRef,
-    isFileLoading = _ref.isFileLoading,
-    isFileFailedToLoad = _ref.isFileFailedToLoad,
-    setFileData = _ref.setFileData,
-    imgEl = _ref.imgEl,
-    setImgRef = _ref.setImgRef,
-    isMediaLoadingFailed = _ref.isMediaLoadingFailed,
-    setIsMediaLoadingFailed = _ref.setIsMediaLoadingFailed,
-    alertUnsavedChangesFirst = _ref.alertUnsavedChangesFirst,
-    activeVariationsTabId = _ref.activeVariationsTabId;
-  var dispatch = useDispatch();
-  var filesArray = useSelector(selectCurrentFilesIdsOrUuids);
-  var filesVariations = useSelector(selectFilesVariations);
-  var previewEl = useRef();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPanEnabled = _useState2[0],
-    setIsPanEnabled = _useState2[1];
-  var _useState3 = useState({
-      x: 0,
-      y: 0
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    panningDimens = _useState4[0],
-    setPanningDimens = _useState4[1];
-  var isOneFile = filesArray.length === 1;
-  var currentIndex = useMemo(function () {
-    return Array.isArray(filesArray) ? filesArray.findIndex(function (item) {
-      return item === previewedFile.uuid || previewedFile.id;
-    }) : 0;
-  }, [filesArray, previewedFile]);
-  var isFileFound = currentIndex !== -1;
-  var isLastFile = isFileFound && currentIndex === (filesArray === null || filesArray === void 0 ? void 0 : filesArray.length) - 1;
-  var _disablePan = function disablePan() {
-    setIsPanEnabled(false);
-    previousTouch = null;
-    document.removeEventListener('mouseleave', _disablePan);
-    document.removeEventListener('mouseup', _disablePan);
-    document.removeEventListener('touchcancel', _disablePan);
-    document.removeEventListener('touchend', _disablePan);
-  };
-  var enablePan = function enablePan() {
-    setIsPanEnabled(true);
-    // We are setting those events on document to support panning
-    // even if user went outside element and get back while holding pointer down
-    document.addEventListener('mouseleave', _disablePan, {
-      once: true
-    });
-    document.addEventListener('mouseup', _disablePan, {
-      once: true
-    });
-    document.addEventListener('touchcancel', _disablePan, {
-      once: true
-    });
-    document.addEventListener('touchend', _disablePan, {
-      once: true
-    });
-  };
-  var handlePanning = function handlePanning(e) {
-    if (zoomRatio > DEFAULT_ZOOM_RATIO && isPanEnabled && imgEl !== null && imgEl !== void 0 && imgEl.current) {
-      var panningArea = {
-        x: (imgEl.current.width * zoomRatio - previewEl.current.offsetWidth) / (2 * zoomRatio),
-        y: (imgEl.current.height * zoomRatio - previewEl.current.offsetHeight) / (2 * zoomRatio)
-      };
-      setPanningDimens(function (latestDimens) {
-        return {
-          x: Math.min(Math.max(-panningArea.x, latestDimens.x + e.movementX), panningArea.x),
-          y: Math.min(Math.max(-panningArea.y, latestDimens.y + e.movementY), panningArea.y)
-        };
-      });
-    }
-  };
-  var handleTouchPanning = function handleTouchPanning(e) {
-    var touch = e.touches[0];
-    if (previousTouch) {
-      setIsPanEnabled(true);
-      var event = _objectSpread(_objectSpread({}, e), {}, {
-        movementX: touch.pageX - previousTouch.pageX,
-        movementY: touch.pageY - previousTouch.pageY
-      });
-      handlePanning(event);
-    }
-    previousTouch = touch;
-  };
-  var zoomByWheel = function zoomByWheel(e) {
-    if (isPdfPreviewSupported) return; // [TODO]: currently we have a big delay when zoom PDF by wheel
-
-    setZoomRatio(function (latestZoomRatio) {
-      return Math.min(MAX_ZOOM_RATIO, Math.max(MIN_ZOOM_RATIO, latestZoomRatio + (e.deltaY > 1 ? -WHEEL_ZOOM_RATIO_PERCENTAGE : WHEEL_ZOOM_RATIO_PERCENTAGE)));
-    });
-  };
-  var updateFileWindow = function updateFileWindow(fileUuid) {
-    dispatch(fileWindowUpdated({
-      "for": fileUuid,
-      enableEdit: false,
-      enableRename: false,
-      tabId: activeTabId
-    }));
-  };
-  var getNextFile = function getNextFile() {
-    if (!isFileFound) {
-      return;
-    }
-    var nextIndex = currentIndex + 1;
-    var nextFile = nextIndex < filesArray.length ? filesArray[nextIndex] : filesArray[0];
-    if (nextFile) {
-      alertUnsavedChangesFirst(function () {
-        updateFileWindow(nextFile);
-      });
-    }
-  };
-  var getPreviousFile = function getPreviousFile() {
-    if (!isFileFound) {
-      return;
-    }
-    var previousIndex = currentIndex === 0 ? filesArray.length - 1 : currentIndex - 1;
-    var previousFile = filesArray[previousIndex];
-    if (previousFile) {
-      alertUnsavedChangesFirst(function () {
-        updateFileWindow(previousFile);
-      });
-    }
-  };
-  var displayedFile = _objectSpread(_objectSpread({}, previewedFile), filesVariations);
-  if (isFileFailedToLoad) {
-    return /*#__PURE__*/_jsx(StyledBody.Body, {
-      ref: previewEl,
-      onTouchMove: handleTouchPanning,
-      onMouseDown: enablePan,
-      onMouseMove: handlePanning,
-      onWheel: zoomByWheel,
-      $fullWidth: isPdfPreviewSupported,
-      draggable: "false",
-      $hidePagination: isOneFile,
-      children: /*#__PURE__*/_jsx(PreviewPlaceholder, {
-        setFileData: setFileData
-      })
-    });
-  }
-  if (isFileLoading) {
-    return /*#__PURE__*/_jsx(StyledBody.Body, {
-      ref: previewEl,
-      onTouchMove: handleTouchPanning,
-      onMouseDown: enablePan,
-      onMouseMove: handlePanning,
-      onWheel: zoomByWheel,
-      $fullWidth: isPdfPreviewSupported,
-      draggable: "false",
-      $hidePagination: isOneFile,
-      isFileLoading: isFileLoading,
-      children: /*#__PURE__*/_jsx(StyledBody.Skeleton, {
-        height: 250
-      })
-    });
-  }
-  return /*#__PURE__*/_jsxs(StyledBody.Body, {
-    ref: previewEl,
-    onTouchMove: handleTouchPanning,
-    onMouseDown: enablePan,
-    onMouseMove: handlePanning,
-    onWheel: zoomByWheel,
-    $fullWidth: isPdfPreviewSupported,
-    draggable: "false",
-    $hidePagination: isOneFile,
-    children: [/*#__PURE__*/_jsx(StyledBody.FilePaginationButtons, {
-      color: "primary",
-      left: true,
-      onClick: getPreviousFile,
-      disabled: !isFileFound || !currentIndex,
-      children: /*#__PURE__*/_jsx(ArrowLeftOutline, {
-        size: 20
-      })
-    }), /*#__PURE__*/_jsx(BodyFile, {
-      file: displayedFile,
-      zoomRatio: zoomRatio,
-      panningDimens: panningDimens,
-      setPanningDimens: setPanningDimens,
-      isPanEnabled: isPanEnabled,
-      imgEl: imgEl,
-      setImgRef: setImgRef,
-      previewEl: previewEl,
-      videoEl: videoEl,
-      isPdfPreviewSupported: isPdfPreviewSupported,
-      isTransparencySupported: isTransparencySupported(displayedFile),
-      setVideoRef: setVideoRef,
-      isMediaLoadingFailed: isMediaLoadingFailed,
-      setIsMediaLoadingFailed: setIsMediaLoadingFailed,
-      previewFileCdnUrl: activeVariationsTabId === VARIATIONS_TAB_IDS.AUTOMATIC
-    }), /*#__PURE__*/_jsx(StyledBody.FilePaginationButtons, {
-      color: "primary",
-      onClick: getNextFile,
-      disabled: isLastFile,
-      children: /*#__PURE__*/_jsx(ArrowRightOutline, {
-        size: 20
-      })
-    })]
-  });
-};
-export default Preview;

package/lib/components/FileWindowPanel/Body/PreviewPlaceholder.js

@@ -1,20 +0,0 @@
-import { useExplorerI18n } from '../../../hooks';
-import Styled from './Body.styled';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var PreviewPlaceholder = function PreviewPlaceholder(_ref) {
-  var setFileData = _ref.setFileData;
-  var i18n = useExplorerI18n();
-  return /*#__PURE__*/_jsxs(Styled.PlaceholderWrapper, {
-    children: [/*#__PURE__*/_jsx(Styled.PlaceholderIcon, {
-      size: 150
-    }), /*#__PURE__*/_jsx(Styled.PlaceholderTitle, {
-      children: i18n('manageModalPreviewPlaceholderTitle')
-    }), /*#__PURE__*/_jsxs(Styled.PlaceholderHint, {
-      children: [i18n('manageModalPreviewPlaceholderHintOne'), /*#__PURE__*/_jsx(Styled.RetryButton, {
-        onClick: setFileData,
-        children: i18n('manageModalPreviewPlaceholderHintTwo')
-      }), i18n('manageModalPreviewPlaceholderHintThree')]
-    })]
-  });
-};
-export default PreviewPlaceholder;

package/lib/components/FileWindowPanel/Body/VideoEmbed.js

@@ -1,80 +0,0 @@
-import { useSelector } from 'react-redux';
-import { Fragment, useEffect } from 'react';
-import { usePlugin } from '@scaleflex/widget-core/lib/hooks';
-import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
-import getFileAssetsTokenUrl from '@scaleflex/widget-utils/lib/getFileAssetsTokenUrl';
-import convertVideoFileTypeToSupported from '@scaleflex/widget-utils/lib/convertVideoFileTypeToSupported';
-import Styled from './Body.styled';
-import { selectImageEditorFile } from '../../../slices/panels.slice';
-import { jsx as _jsx } from "react/jsx-runtime";
-var VideoEmbed = function VideoEmbed(_ref) {
-  var _file$url, _file$info, _file$info$playlists, _playlist$playlists, _playlist$playlists2;
-  var file = _ref.file,
-    formattedFilePreviewUrl = _ref.formattedFilePreviewUrl,
-    onError = _ref.onError,
-    setVideoRef = _ref.setVideoRef,
-    isDevEnv = _ref.isDevEnv,
-    videoEl = _ref.videoEl;
-  var mediaPlayerPlugin = usePlugin(PLUGINS_IDS.MEDIA_PLAYER);
-  var imageEditorFile = useSelector(selectImageEditorFile);
-  useEffect(function () {
-    if (imageEditorFile && !videoEl.current.paused) {
-      toggleNativeVideo();
-    }
-  }, [imageEditorFile]);
-  if (!file) {
-    return null;
-  }
-  var videoUrl = (_file$url = file.url) !== null && _file$url !== void 0 && _file$url.cdn ? getFileAssetsTokenUrl(file.url.cdn, isDevEnv) : formattedFilePreviewUrl;
-  var videoType = convertVideoFileTypeToSupported(file.type);
-  var toggleNativeVideo = function toggleNativeVideo() {
-    if (!videoEl) {
-      return;
-    }
-    if (videoEl.current.paused) {
-      videoEl.current.play();
-    } else {
-      videoEl.current.pause();
-    }
-  };
-  var renderNativeVideoElem = function renderNativeVideoElem() {
-    return /*#__PURE__*/_jsx(Styled.VideoWrapper, {
-      onClick: toggleNativeVideo,
-      children: /*#__PURE__*/_jsx("video", {
-        onError: onError,
-        ref: setVideoRef,
-        controls: true,
-        autoPlay: true,
-        children: /*#__PURE__*/_jsx("source", {
-          src: videoUrl,
-          type: videoType
-        })
-      })
-    });
-  };
-  if (!mediaPlayerPlugin) {
-    return renderNativeVideoElem();
-  }
-  var playlist = file === null || file === void 0 ? void 0 : (_file$info = file.info) === null || _file$info === void 0 ? void 0 : (_file$info$playlists = _file$info.playlists) === null || _file$info$playlists === void 0 ? void 0 : _file$info$playlists[0];
-  // .playlists[0] as some files have such wrong structure from BE.
-  var playlistSrc = (playlist === null || playlist === void 0 ? void 0 : (_playlist$playlists = playlist.playlists) === null || _playlist$playlists === void 0 ? void 0 : _playlist$playlists[0]) || playlist;
-  var isHlsVideoPlaylist = playlistSrc && playlistSrc.endsWith('.m3u8');
-  var videoOptions = {
-    sources: [isHlsVideoPlaylist && {
-      src: (playlist === null || playlist === void 0 ? void 0 : (_playlist$playlists2 = playlist.playlists) === null || _playlist$playlists2 === void 0 ? void 0 : _playlist$playlists2[0]) || playlist,
-      type: 'application/x-mpegURL'
-    }, {
-      src: videoUrl,
-      type: videoType
-    }].filter(Boolean),
-    setVideoRef: setVideoRef
-  };
-  return /*#__PURE__*/_jsx(Fragment, {
-    children: /*#__PURE__*/_jsx(mediaPlayerPlugin.render, {
-      type: "video",
-      mediaOptions: videoOptions,
-      onError: onError
-    })
-  }, mediaPlayerPlugin.id);
-};
-export default VideoEmbed;

package/lib/components/FileWindowPanel/Body/index.js

@@ -1,108 +0,0 @@
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-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(r) { if (Array.isArray(r)) return r; }
-import { useState, useCallback } from 'react';
-import { DEFAULT_ZOOM_RATIO } from './Body.constants';
-import Styled from './Body.styled';
-import Footer from './Footer';
-import Preview from './Preview';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var FileWindowBody = function FileWindowBody(_ref) {
-  var _ref$originalFile = _ref.originalFile,
-    originalFile = _ref$originalFile === void 0 ? {} : _ref$originalFile,
-    _ref$previewedFile = _ref.previewedFile,
-    previewedFile = _ref$previewedFile === void 0 ? {} : _ref$previewedFile,
-    isSupportAnnotationFile = _ref.isSupportAnnotationFile,
-    setFileData = _ref.setFileData,
-    activeTabId = _ref.activeTabId,
-    setActiveTabId = _ref.setActiveTabId,
-    isPdfPreviewSupported = _ref.isPdfPreviewSupported,
-    isImageFile = _ref.isImageFile,
-    isPdfFile = _ref.isPdfFile,
-    isAudioFileAndSupportsPlayback = _ref.isAudioFileAndSupportsPlayback,
-    isAudioFile = _ref.isAudioFile,
-    activeVariationsTabId = _ref.activeVariationsTabId,
-    alertUnsavedChangesFirst = _ref.alertUnsavedChangesFirst,
-    isVariantsOpened = _ref.isVariantsOpened,
-    setIsVariantsOpened = _ref.setIsVariantsOpened,
-    setIsFileTabsHidden = _ref.setIsFileTabsHidden,
-    isFileTabsHidden = _ref.isFileTabsHidden,
-    useAssetsPicker = _ref.useAssetsPicker;
-  var _useState = useState(DEFAULT_ZOOM_RATIO),
-    _useState2 = _slicedToArray(_useState, 2),
-    zoomRatio = _useState2[0],
-    setZoomRatio = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    videoEl = _useState4[0],
-    setVideoEl = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    imgEl = _useState6[0],
-    setImgEl = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isMediaLoadingFailed = _useState8[0],
-    setIsMediaLoadingFailed = _useState8[1];
-  var isFileLoading = originalFile.loading;
-  var isFileFailedToLoad = originalFile.error;
-  var _isPdfPreviewSupported = isPdfFile && isPdfPreviewSupported;
-  var setVideoRef = useCallback(function (node) {
-    if (node !== null) {
-      setVideoEl({
-        current: node
-      });
-    }
-  }, [previewedFile]);
-  var setImgRef = useCallback(function (node) {
-    if (node !== null) {
-      setImgEl({
-        current: node
-      });
-    }
-  }, [previewedFile]);
-  return /*#__PURE__*/_jsxs(Styled.Container, {
-    children: [/*#__PURE__*/_jsx(Preview, {
-      originalFile: originalFile,
-      previewedFile: previewedFile // the file previewed (original/version)
-      ,
-      zoomRatio: zoomRatio,
-      setZoomRatio: setZoomRatio,
-      isPdfPreviewSupported: _isPdfPreviewSupported,
-      videoEl: videoEl,
-      isFileLoading: isFileLoading,
-      isFileFailedToLoad: isFileFailedToLoad,
-      setFileData: setFileData,
-      setVideoRef: setVideoRef,
-      imgEl: imgEl,
-      setImgRef: setImgRef,
-      activeTabId: activeTabId,
-      setActiveTabId: setActiveTabId,
-      isSupportAnnotationFile: isSupportAnnotationFile,
-      isMediaLoadingFailed: isMediaLoadingFailed,
-      setIsMediaLoadingFailed: setIsMediaLoadingFailed,
-      alertUnsavedChangesFirst: alertUnsavedChangesFirst,
-      activeVariationsTabId: activeVariationsTabId
-    }), /*#__PURE__*/_jsx(Footer, {
-      isImageFile: isImageFile,
-      isPdfFile: isPdfFile,
-      isAudioFile: isAudioFile,
-      originalFile: originalFile,
-      previewedFile: previewedFile,
-      zoomRatio: zoomRatio,
-      setZoomRatio: setZoomRatio,
-      isPdfPreviewSupported: _isPdfPreviewSupported,
-      isMediaLoadingFailed: isMediaLoadingFailed,
-      isAudioFileAndSupportsPlayback: isAudioFileAndSupportsPlayback,
-      isVariantsOpened: isVariantsOpened,
-      setIsVariantsOpened: setIsVariantsOpened,
-      setIsFileTabsHidden: setIsFileTabsHidden,
-      isFileTabsHidden: isFileTabsHidden,
-      useAssetsPicker: useAssetsPicker
-    })]
-  });
-};
-export default FileWindowBody;