@scaleflex/widget-explorer 0.0.1

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

@@ -0,0 +1,165 @@
+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

@@ -0,0 +1,58 @@
+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;
+  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
+    })
+  });
+};
+export default Footer;

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

@@ -0,0 +1,232 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,106 @@
+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;
+  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
+    })]
+  });
+};
+export default FileWindowBody;