@wix/ricos 10.110.0 → 10.112.0

package/dist/es/plugin-video/viewer/nodeViewRenderers-loadable.js

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _nodeViewRenderers;
 var _excluded = ["node", "nodeIndex", "NodeViewContainer"],
-  _excluded2 = ["node"];
+  _excluded2 = ["node"],
+  _excluded3 = ["node", "nodeIndex", "NodeViewContainer"],
+  _excluded4 = ["node"];
 import loadable from "@loadable/component";
 import React, { useMemo } from "react";
 import { Node_Type } from "./../../ricos-types";
@@ -28,7 +30,7 @@ var VideoRenderer = function VideoRenderer(_ref) {
         return false;
       },
       importAsync: function importAsync() {
-        return import(/* webpackChunkName: "ricos_plugin_video" */"./video-loadable");
+        return import(/* webpackChunkName: "ricos_plugin_video" */"./viewer-video-loadable");
       },
       requireAsync: function requireAsync(props) {
         var _this = this;
@@ -48,9 +50,9 @@ var VideoRenderer = function VideoRenderer(_ref) {
       },
       resolve: function resolve() {
         if (require.resolveWeak) {
-          return require.resolveWeak("./video-loadable");
+          return require.resolveWeak("./viewer-video-loadable");
         }
-        return eval('require.resolve')("./video-loadable");
+        return eval('require.resolve')("./viewer-video-loadable");
       }
     });
   }, []);
@@ -68,5 +70,68 @@ var VideoLoadable = function VideoLoadable(_ref2) {
     node: node
   }, props));
 };
-var nodeViewRenderers = (_nodeViewRenderers = {}, _nodeViewRenderers[Node_Type.VIDEO] = VideoLoadable, _nodeViewRenderers);
+var CaptionRenderer = function CaptionRenderer(_ref3) {
+  var node = _ref3.node,
+    nodeIndex = _ref3.nodeIndex,
+    NodeViewContainer = _ref3.NodeViewContainer,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  var ImageCaption = useMemo(function () {
+    return loadable({
+      resolved: {},
+      chunkName: function chunkName() {
+        return "ricos_plugin_image_caption";
+      },
+      isReady: function isReady(props) {
+        var key = this.resolve(props);
+        if (this.resolved[key] !== true) {
+          return false;
+        }
+        if (typeof __webpack_modules__ !== 'undefined') {
+          return !!__webpack_modules__[key];
+        }
+        return false;
+      },
+      importAsync: function importAsync() {
+        return import(/* webpackChunkName: "ricos_plugin_image_caption" */"../../plugin-figure/viewer/viewer-caption-loadable");
+      },
+      requireAsync: function requireAsync(props) {
+        var _this = this;
+        var key = this.resolve(props);
+        this.resolved[key] = false;
+        return this.importAsync(props).then(function (resolved) {
+          _this.resolved[key] = true;
+          return resolved;
+        });
+      },
+      requireSync: function requireSync(props) {
+        var id = this.resolve(props);
+        if (typeof __webpack_require__ !== 'undefined') {
+          return __webpack_require__(id);
+        }
+        return eval('module.require')(id);
+      },
+      resolve: function resolve() {
+        if (require.resolveWeak) {
+          return require.resolveWeak("../../plugin-figure/viewer/viewer-caption-loadable");
+        }
+        return eval('require.resolve')("../../plugin-figure/viewer/viewer-caption-loadable");
+      }
+    });
+  }, []);
+  return /* @__PURE__ */React.createElement(ImageCaption, _extends({
+    key: node.id,
+    node: node,
+    nodeIndex: nodeIndex,
+    NodeViewContainer: NodeViewContainer
+  }, props));
+};
+var CaptionLoadable = function CaptionLoadable(_ref4) {
+  var node = _ref4.node,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  return /* @__PURE__ */React.createElement(CaptionRenderer, _extends({
+    key: node.id,
+    node: node
+  }, props));
+};
+var nodeViewRenderers = (_nodeViewRenderers = {}, _nodeViewRenderers[Node_Type.VIDEO] = VideoLoadable, _nodeViewRenderers[Node_Type.CAPTION] = CaptionLoadable, _nodeViewRenderers);
 export { nodeViewRenderers };

package/dist/es/plugin-video/viewer/nodeViewRenderers-loadable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-video/viewer/nodeViewRenderers-loadable.tsx"],
-  "sourcesContent": ["import loadable from '@loadable/component';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { NodeViewRendererProps, NodeViewRenderers } from './../../ricos-types';\nimport { Node_Type } from './../../ricos-types';\n\nconst VideoRenderer: FC<NodeViewRendererProps> = ({\n  node,\n  nodeIndex,\n  NodeViewContainer,\n  ...props\n}: NodeViewRendererProps) => {\n  const Video = useMemo(\n    () => loadable(() => import(/* webpackChunkName: \"ricos_plugin_video\" */ './video')),\n    []\n  );\n  return (\n    <Video node={node} nodeIndex={nodeIndex} NodeViewContainer={NodeViewContainer} {...props} />\n  );\n};\n\nconst VideoLoadable = ({ node, ...props }: NodeViewRendererProps) => {\n  return <VideoRenderer key={node.id} node={node} {...props} />;\n};\n\nexport const nodeViewRenderers: NodeViewRenderers = {\n  [Node_Type.VIDEO]: VideoLoadable,\n};\n"],
-  "mappings": "AAAA,OAAO,cAAc;AAErB,OAAO,SAAS,eAAe;AAG/B,SAAS,iBAAiB;AAE1B,MAAM,gBAA2C,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA6B;AAC3B,QAAM,QAAQ;AAAA,IACZ,MAAM,SAAS,MAAM;AAAA;AAAA,MAAoD;AAAA,IAAS,CAAC;AAAA,IACnF,CAAC;AAAA,EACH;AACA,SACE,oCAAC,SAAM,MAAY,WAAsB,mBAAuC,GAAG,OAAO;AAE9F;AAEA,MAAM,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,MAA6B;AACnE,SAAO,oCAAC,iBAAc,KAAK,KAAK,IAAI,MAAa,GAAG,OAAO;AAC7D;AAEO,MAAM,oBAAuC;AAAA,EAClD,CAAC,UAAU,KAAK,GAAG;AACrB;",
+  "sourcesContent": ["import loadable from '@loadable/component';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { NodeViewRendererProps, NodeViewRenderers } from './../../ricos-types';\nimport { Node_Type } from './../../ricos-types';\n\nconst VideoRenderer: FC<NodeViewRendererProps> = ({\n  node,\n  nodeIndex,\n  NodeViewContainer,\n  ...props\n}: NodeViewRendererProps) => {\n  const Video = useMemo(\n    () => loadable(() => import(/* webpackChunkName: \"ricos_plugin_video\" */ './viewer-video')),\n    []\n  );\n  return (\n    <Video node={node} nodeIndex={nodeIndex} NodeViewContainer={NodeViewContainer} {...props} />\n  );\n};\n\nconst VideoLoadable = ({ node, ...props }: NodeViewRendererProps) => {\n  return <VideoRenderer key={node.id} node={node} {...props} />;\n};\n\nconst CaptionRenderer: FC<NodeViewRendererProps> = ({\n  node,\n  nodeIndex,\n  NodeViewContainer,\n  ...props\n}) => {\n  const ImageCaption = useMemo(\n    () =>\n      loadable(\n        () =>\n          import(\n            /* webpackChunkName: \"ricos_plugin_image_caption\" */ '../../plugin-figure/viewer/viewer-caption'\n          )\n      ),\n    []\n  );\n  return (\n    <ImageCaption\n      key={node.id}\n      node={node}\n      nodeIndex={nodeIndex}\n      NodeViewContainer={NodeViewContainer}\n      {...props}\n    />\n  );\n};\n\nconst CaptionLoadable = ({ node, ...props }: NodeViewRendererProps) => {\n  return <CaptionRenderer key={node.id} node={node} {...props} />;\n};\n\nexport const nodeViewRenderers: NodeViewRenderers = {\n  [Node_Type.VIDEO]: VideoLoadable,\n  [Node_Type.CAPTION]: CaptionLoadable,\n};\n"],
+  "mappings": "AAAA,OAAO,cAAc;AAErB,OAAO,SAAS,eAAe;AAG/B,SAAS,iBAAiB;AAE1B,MAAM,gBAA2C,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA6B;AAC3B,QAAM,QAAQ;AAAA,IACZ,MAAM,SAAS,MAAM;AAAA;AAAA,MAAoD;AAAA,IAAgB,CAAC;AAAA,IAC1F,CAAC;AAAA,EACH;AACA,SACE,oCAAC,SAAM,MAAY,WAAsB,mBAAuC,GAAG,OAAO;AAE9F;AAEA,MAAM,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,MAA6B;AACnE,SAAO,oCAAC,iBAAc,KAAK,KAAK,IAAI,MAAa,GAAG,OAAO;AAC7D;AAEA,MAAM,kBAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAe;AAAA,IACnB,MACE;AAAA,MACE,MACE;AAAA;AAAA,QACuD;AAAA,MACvD;AAAA,IACJ;AAAA,IACF,CAAC;AAAA,EACH;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,KAAK;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,MAA6B;AACrE,SAAO,oCAAC,mBAAgB,KAAK,KAAK,IAAI,MAAa,GAAG,OAAO;AAC/D;AAEO,MAAM,oBAAuC;AAAA,EAClD,CAAC,UAAU,KAAK,GAAG;AAAA,EACnB,CAAC,UAAU,OAAO,GAAG;AACvB;",
   "names": []
 }

package/dist/es/plugin-video/viewer/nodeViewRenderers.js

@@ -1,7 +1,9 @@
 import { Node_Type } from "./../../ricos-types";
-import Video from "./video";
+import Caption from "../../plugin-figure/viewer/viewer-caption";
+import Video from "./viewer-video";
 const nodeViewRenderers = {
-  [Node_Type.VIDEO]: Video
+  [Node_Type.VIDEO]: Video,
+  [Node_Type.CAPTION]: Caption
 };
 export {
   nodeViewRenderers

package/dist/es/plugin-video/viewer/nodeViewRenderers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-video/viewer/nodeViewRenderers.ts"],
-  "sourcesContent": ["import type { NodeViewRenderers } from './../../ricos-types';\nimport { Node_Type } from './../../ricos-types';\n\nimport Video from './video';\n\nexport const nodeViewRenderers: NodeViewRenderers = {\n  [Node_Type.VIDEO]: Video,\n};\n"],
-  "mappings": "AACA,SAAS,iBAAiB;AAE1B,OAAO,WAAW;AAEX,MAAM,oBAAuC;AAAA,EAClD,CAAC,UAAU,KAAK,GAAG;AACrB;",
+  "sourcesContent": ["import type { NodeViewRenderers } from './../../ricos-types';\nimport { Node_Type } from './../../ricos-types';\n\nimport Caption from '../../plugin-figure/viewer/viewer-caption';\nimport Video from './viewer-video';\n\nexport const nodeViewRenderers: NodeViewRenderers = {\n  [Node_Type.VIDEO]: Video,\n  [Node_Type.CAPTION]: Caption,\n};\n"],
+  "mappings": "AACA,SAAS,iBAAiB;AAE1B,OAAO,aAAa;AACpB,OAAO,WAAW;AAEX,MAAM,oBAAuC;AAAA,EAClD,CAAC,UAAU,KAAK,GAAG;AAAA,EACnB,CAAC,UAAU,OAAO,GAAG;AACvB;",
   "names": []
 }

package/dist/es/plugin-video/viewer/video.js

@@ -1,25 +1,284 @@
-import React, { useContext } from "react";
-import { RicosViewerContext } from "./../../ricos-context";
-import { ROOT } from "../dataHooks";
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import { isDefined, isSSR } from "./../../wix-rich-content-common";
+import IframePlayer from "../IframePlayer";
+import { ReactPlayerWrapper } from "../reactPlayerWrapper";
 import styles from "../statics/styles/video-viewer-scss";
-import { VIDEO_TYPE } from "../types";
-import { VideoViewer } from "./video-viewer";
-const Video = ({ node, nodeIndex, NodeViewContainer }) => {
-  const { seoMode, config } = useContext(RicosViewerContext);
-  const { videoData } = node;
-  return /* @__PURE__ */ React.createElement(NodeViewContainer, { node, nodeIndex, key: node.id }, /* @__PURE__ */ React.createElement("div", { className: styles.video_container, "data-hook": ROOT }, !!videoData && /* @__PURE__ */ React.createElement(
-    VideoViewer,
+const Video = ({
+  config,
+  componentData,
+  nodeId,
+  isLight,
+  onReady,
+  isLoaded,
+  seoMode,
+  muted,
+  onDuration,
+  disabled
+}) => {
+  const [key, setKey] = useState("");
+  const [state, setState] = useState(() => {
+    const getInitialUrlState = () => {
+      const { src } = componentData.video || {};
+      if (src?.url) {
+        const normalizedUrl = normalizeUrl(src.url);
+        return {
+          type: "READY",
+          loadedUrl: normalizedUrl
+        };
+      }
+      if (src?.id && config.getVideoUrl) {
+        try {
+          const videoUrl = config.getVideoUrl({ pathname: src.id });
+          if (typeof videoUrl === "string") {
+            return {
+              type: "READY",
+              loadedUrl: normalizeUrl(videoUrl),
+              startingId: src.id
+            };
+          }
+          return { type: "INITIAL" };
+        } catch (e) {
+          return { type: "INITIAL" };
+        }
+      }
+      return { type: "INITIAL" };
+    };
+    const getInitialThumbnailUrlState = () => {
+      const thumbnailId = componentData?.thumbnail?.src?.id;
+      const thumbnailSrc = componentData?.thumbnail?.src?.url;
+      if (thumbnailSrc) {
+        return {
+          type: "READY",
+          loadedUrl: thumbnailSrc
+        };
+      }
+      if (!thumbnailId || !config.getThumbnailUrl) {
+        return { type: "INITIAL" };
+      }
+      try {
+        const thumbnailUrl = config.getThumbnailUrl({ pathname: thumbnailId });
+        if (typeof thumbnailUrl === "string") {
+          return {
+            type: "READY",
+            loadedUrl: thumbnailUrl,
+            startingId: thumbnailId
+          };
+        }
+      } catch (e) {
+        return { type: "INITIAL" };
+      }
+      return { type: "INITIAL" };
+    };
+    return {
+      isLoaded: false,
+      isVideoWrapperAttachedToDom: false,
+      url: getInitialUrlState(),
+      thumbnailUrl: getInitialThumbnailUrlState()
+    };
+  });
+  useEffect(() => {
+    setKey("mounted");
+  }, []);
+  useEffect(() => {
+    const updateUrl = async () => {
+      const { src } = componentData.video || {};
+      const currentUrl = state.url;
+      if (currentUrl.type === "LOADING") {
+        return;
+      }
+      if (src?.url) {
+        const normalizedUrl = normalizeUrl(src.url);
+        if (currentUrl.type === "READY" && currentUrl.loadedUrl === normalizedUrl) {
+          return;
+        }
+        setState((prev) => ({
+          ...prev,
+          url: {
+            type: "READY",
+            loadedUrl: normalizedUrl
+          }
+        }));
+        return;
+      }
+      if (src?.id && config.getVideoUrl) {
+        if (currentUrl.type === "READY" && currentUrl.startingId === src.id) {
+          return;
+        }
+        setState((prev) => ({ ...prev, url: { type: "LOADING" } }));
+        try {
+          const videoUrl = await config.getVideoUrl({ pathname: src.id });
+          setState((prev) => ({
+            ...prev,
+            url: {
+              type: "READY",
+              loadedUrl: normalizeUrl(videoUrl),
+              startingId: src.id
+            }
+          }));
+          return;
+        } catch (e) {
+          setState((prev) => ({ ...prev, url: { type: "READY", startingId: src.id } }));
+          return;
+        }
+      }
+      if (currentUrl.type !== "READY") {
+        setState((prev) => ({ ...prev, url: { type: "READY" } }));
+      }
+    };
+    updateUrl();
+  }, [componentData.video, config.getVideoUrl, state.url]);
+  useEffect(() => {
+    const updateThumbnail = async () => {
+      const { src } = componentData.thumbnail || {};
+      const thumbnailId = src?.id;
+      const thumbnailSrc = src?.url;
+      const thumbnailState = state.thumbnailUrl;
+      if (thumbnailSrc) {
+        if (state.thumbnailUrl.type === "READY" && thumbnailSrc === state.thumbnailUrl.loadedUrl) {
+          return;
+        }
+        setState((prev) => ({
+          ...prev,
+          thumbnailUrl: {
+            type: "READY",
+            loadedUrl: thumbnailSrc
+          }
+        }));
+        return;
+      }
+      if (thumbnailState.type === "LOADING") {
+        return;
+      }
+      if (!thumbnailId) {
+        if (thumbnailState.type === "INITIAL") {
+          setState((prev) => ({ ...prev, thumbnailUrl: { type: "READY" } }));
+        }
+        return;
+      }
+      if (!config.getThumbnailUrl) {
+        if (thumbnailState.type === "INITIAL" || thumbnailState.type === "READY" && thumbnailState.startingId !== thumbnailId) {
+          setState((prev) => ({ ...prev, thumbnailUrl: { type: "READY", startingId: thumbnailId } }));
+        }
+        return;
+      }
+      if (thumbnailState.type === "READY" && thumbnailState.startingId === thumbnailId && !!thumbnailState.loadedUrl) {
+        return;
+      }
+      try {
+        setState((prev) => ({ ...prev, thumbnailUrl: { type: "LOADING" } }));
+        const thumbnailUrl = await config.getThumbnailUrl({ pathname: thumbnailId });
+        setState((prev) => ({
+          ...prev,
+          thumbnailUrl: {
+            type: "READY",
+            loadedUrl: thumbnailUrl,
+            startingId: thumbnailId
+          }
+        }));
+      } catch (e) {
+        setState((prev) => ({ ...prev, thumbnailUrl: { type: "READY", startingId: thumbnailId } }));
+      }
+    };
+    updateThumbnail();
+  }, [componentData.thumbnail, config.getThumbnailUrl, state.thumbnailUrl]);
+  useEffect(() => {
+    if (!state.isVideoWrapperAttachedToDom) {
+      const videoRatio = getVideoRatio();
+      if (videoRatio) {
+        setVideoRatio(videoRatio.ratio, videoRatio.wrapper);
+        setState((prev) => ({ ...prev, isVideoWrapperAttachedToDom: true }));
+      }
+    }
+  }, [state.isVideoWrapperAttachedToDom]);
+  const getVideoRatio = () => {
+    const wrapper = ReactDOM.findDOMNode(void 0)?.parentNode;
+    if (!wrapper) {
+      return void 0;
+    }
+    const element = wrapper.querySelector("iframe, video");
+    if (!element) {
+      return void 0;
+    }
+    const ratio = element.clientHeight / element.clientWidth;
+    return !isNaN(ratio) ? { ratio, wrapper } : void 0;
+  };
+  const setVideoRatio = (ratio, wrapper) => {
+    wrapper.style["padding-bottom"] = ratio * 100 + "%";
+  };
+  const onReactPlayerReady = (player) => {
+    if (onReady) {
+      onReady(player);
+      return;
+    }
+    if (!isLoaded) {
+      setState((prev) => ({ ...prev, isLoaded: true }));
+    }
+  };
+  const handleContextMenu = (e) => componentData.disableDownload && e.preventDefault();
+  const getDownloadProps = () => {
+    if (isDefined(componentData?.disableDownload) && componentData.disableDownload || isDefined(config?.disableDownload) && config.disableDownload) {
+      return {
+        config: {
+          file: {
+            attributes: {
+              controlsList: "nodownload"
+            }
+          }
+        }
+      };
+    }
+    return {
+      config: {}
+    };
+  };
+  const getLightProps = () => {
+    if (!isLight) {
+      return {
+        isLight: false
+      };
+    }
+    return {
+      isLight: true,
+      thumbnail: state.thumbnailUrl.type === "READY" ? state.thumbnailUrl.loadedUrl : void 0
+    };
+  };
+  const url = state.url.type === "READY" ? state.url.loadedUrl : void 0;
+  if (!url) {
+    return null;
+  }
+  const isCustomVideo = !!componentData.video?.src?.id;
+  const shouldRenderIframe = isSSR() && seoMode && url;
+  const { autoPlay = false, playInLoop = false, showControls = true } = componentData.options || {};
+  return shouldRenderIframe ? /* @__PURE__ */ React.createElement(IframePlayer, { isCustomVideo, url }) : /* @__PURE__ */ React.createElement(
+    ReactPlayerWrapper,
     {
-      config: config[VIDEO_TYPE] || {},
-      componentData: videoData,
-      nodeId: node.id,
-      seoMode: !!seoMode,
-      isLight: true
+      className: styles.video_player,
+      onContextMenu: handleContextMenu,
+      controls: isLoaded !== false && showControls,
+      url,
+      onReady: onReactPlayerReady,
+      disabled,
+      width: "100%",
+      height: "100%",
+      key,
+      onDuration,
+      onProgress: (progress) => {
+        config.onProgress?.({ ...progress, id: nodeId });
+      },
+      progressInterval: config.progressInterval || 1e3,
+      muted: muted || autoPlay,
+      isLoaded: isLoaded || state.isLoaded,
+      autoPlay,
+      loop: playInLoop,
+      isCustomVideo,
+      ...getLightProps(),
+      ...getDownloadProps()
     }
-  )));
+  );
 };
-var video_default = Video;
+const normalizeUrl = (url) => url && (url.toLowerCase().indexOf("vimeo") === 0 ? "https://" + url : url);
 export {
-  video_default as default
+  Video
 };
 //# sourceMappingURL=video.js.map

package/dist/es/plugin-video/viewer/video.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-video/viewer/video.tsx"],
-  "sourcesContent": ["import React, { useContext } from 'react';\n\nimport { RicosViewerContext } from './../../ricos-context';\nimport type { NodeViewRendererProps } from './../../ricos-types';\n\nimport { ROOT } from '../dataHooks';\nimport styles from '../statics/styles/video-viewer-scss';\nimport { VIDEO_TYPE } from '../types';\nimport { VideoViewer } from './video-viewer';\n\nconst Video = ({ node, nodeIndex, NodeViewContainer }: NodeViewRendererProps) => {\n  const { seoMode, config } = useContext(RicosViewerContext);\n  const { videoData } = node;\n\n  return (\n    <NodeViewContainer node={node} nodeIndex={nodeIndex} key={node.id}>\n      <div className={styles.video_container} data-hook={ROOT}>\n        {!!videoData && (\n          <VideoViewer\n            config={config[VIDEO_TYPE] || {}}\n            componentData={videoData}\n            nodeId={node.id}\n            seoMode={!!seoMode}\n            isLight\n          />\n        )}\n      </div>\n    </NodeViewContainer>\n  );\n};\n\nexport default Video;\n"],
-  "mappings": "AAAA,OAAO,SAAS,kBAAkB;AAElC,SAAS,0BAA0B;AAGnC,SAAS,YAAY;AACrB,OAAO,YAAY;AACnB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAE5B,MAAM,QAAQ,CAAC,EAAE,MAAM,WAAW,kBAAkB,MAA6B;AAC/E,QAAM,EAAE,SAAS,OAAO,IAAI,WAAW,kBAAkB;AACzD,QAAM,EAAE,UAAU,IAAI;AAEtB,SACE,oCAAC,qBAAkB,MAAY,WAAsB,KAAK,KAAK,MAC7D,oCAAC,SAAI,WAAW,OAAO,iBAAiB,aAAW,QAChD,CAAC,CAAC,aACD;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,OAAO,UAAU,KAAK,CAAC;AAAA,MAC/B,eAAe;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,SAAS,CAAC,CAAC;AAAA,MACX,SAAO;AAAA;AAAA,EACT,CAEJ,CACF;AAEJ;AAEA,IAAO,gBAAQ;",
+  "sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport type { VideoData } from './../../ricos-schema/legacy/wix/rich_content/v1';\nimport { isDefined, isSSR } from './../../wix-rich-content-common';\n\nimport IframePlayer from '../IframePlayer';\nimport type { ReactPlayerWrapperProps } from '../reactPlayerWrapper';\nimport { ReactPlayerWrapper } from '../reactPlayerWrapper';\nimport styles from '../statics/styles/video-viewer-scss';\nimport type { VideoPluginEditorConfig } from '../types';\n\ntype Props = {\n  config: VideoPluginEditorConfig;\n  componentData: VideoData;\n  nodeId: string;\n  isLight: boolean;\n  onReady?: ReactPlayerWrapperProps['onReady'];\n  isLoaded?: boolean;\n  seoMode?: boolean;\n  muted?: boolean;\n  onDuration?: (duration: number) => void;\n  disabled?: boolean;\n};\n\ntype UrlState =\n  | {\n      type: 'LOADING' | 'INITIAL';\n    }\n  | {\n      type: 'READY';\n      loadedUrl?: string;\n      startingId?: string;\n    };\n\ntype State = {\n  url: UrlState;\n  thumbnailUrl: UrlState;\n  isLoaded: boolean;\n  isVideoWrapperAttachedToDom: boolean;\n};\n\nexport const Video: React.FC<Props> = ({\n  config,\n  componentData,\n  nodeId,\n  isLight,\n  onReady,\n  isLoaded,\n  seoMode,\n  muted,\n  onDuration,\n  disabled,\n}) => {\n  const [key, setKey] = useState('');\n  const [state, setState] = useState<State>(() => {\n    const getInitialUrlState = (): UrlState => {\n      const { src } = componentData.video || {};\n\n      if (src?.url) {\n        const normalizedUrl = normalizeUrl(src.url);\n\n        return {\n          type: 'READY',\n          loadedUrl: normalizedUrl,\n        };\n      }\n      if (src?.id && config.getVideoUrl) {\n        try {\n          const videoUrl = config.getVideoUrl({ pathname: src.id });\n          if (typeof videoUrl === 'string') {\n            return {\n              type: 'READY',\n              loadedUrl: normalizeUrl(videoUrl),\n              startingId: src.id,\n            };\n          }\n\n          return { type: 'INITIAL' };\n        } catch (e) {\n          return { type: 'INITIAL' };\n        }\n      }\n\n      return { type: 'INITIAL' };\n    };\n\n    const getInitialThumbnailUrlState = (): UrlState => {\n      const thumbnailId = componentData?.thumbnail?.src?.id;\n      const thumbnailSrc = componentData?.thumbnail?.src?.url;\n\n      if (thumbnailSrc) {\n        return {\n          type: 'READY',\n          loadedUrl: thumbnailSrc,\n        };\n      }\n      if (!thumbnailId || !config.getThumbnailUrl) {\n        return { type: 'INITIAL' };\n      }\n\n      try {\n        const thumbnailUrl = config.getThumbnailUrl({ pathname: thumbnailId });\n\n        if (typeof thumbnailUrl === 'string') {\n          return {\n            type: 'READY',\n            loadedUrl: thumbnailUrl,\n            startingId: thumbnailId,\n          };\n        }\n      } catch (e) {\n        return { type: 'INITIAL' };\n      }\n\n      return { type: 'INITIAL' };\n    };\n\n    return {\n      isLoaded: false,\n      isVideoWrapperAttachedToDom: false,\n      url: getInitialUrlState(),\n      thumbnailUrl: getInitialThumbnailUrlState(),\n    };\n  });\n\n  useEffect(() => {\n    setKey('mounted'); //remounts reactPlayer after ssr. Fixes bug where internal player id changes in client\n  }, []);\n\n  useEffect(() => {\n    const updateUrl = async () => {\n      const { src } = componentData.video || {};\n      const currentUrl = state.url;\n\n      if (currentUrl.type === 'LOADING') {\n        return;\n      }\n\n      if (src?.url) {\n        const normalizedUrl = normalizeUrl(src.url);\n        if (currentUrl.type === 'READY' && currentUrl.loadedUrl === normalizedUrl) {\n          return;\n        }\n        setState(prev => ({\n          ...prev,\n          url: {\n            type: 'READY',\n            loadedUrl: normalizedUrl,\n          },\n        }));\n        return;\n      }\n\n      if (src?.id && config.getVideoUrl) {\n        if (currentUrl.type === 'READY' && currentUrl.startingId === src.id) {\n          return;\n        }\n\n        setState(prev => ({ ...prev, url: { type: 'LOADING' } }));\n\n        try {\n          const videoUrl = await config.getVideoUrl({ pathname: src.id });\n          setState(prev => ({\n            ...prev,\n            url: {\n              type: 'READY',\n              loadedUrl: normalizeUrl(videoUrl),\n              startingId: src.id,\n            },\n          }));\n          return;\n        } catch (e) {\n          setState(prev => ({ ...prev, url: { type: 'READY', startingId: src.id } }));\n          return;\n        }\n      }\n\n      if (currentUrl.type !== 'READY') {\n        setState(prev => ({ ...prev, url: { type: 'READY' } }));\n      }\n    };\n\n    updateUrl();\n  }, [componentData.video, config.getVideoUrl, state.url]);\n\n  useEffect(() => {\n    const updateThumbnail = async () => {\n      const { src } = componentData.thumbnail || {};\n      const thumbnailId = src?.id;\n      const thumbnailSrc = src?.url;\n      const thumbnailState = state.thumbnailUrl;\n\n      if (thumbnailSrc) {\n        if (state.thumbnailUrl.type === 'READY' && thumbnailSrc === state.thumbnailUrl.loadedUrl) {\n          return;\n        }\n\n        setState(prev => ({\n          ...prev,\n          thumbnailUrl: {\n            type: 'READY',\n            loadedUrl: thumbnailSrc,\n          },\n        }));\n        return;\n      }\n\n      if (thumbnailState.type === 'LOADING') {\n        return;\n      }\n\n      if (!thumbnailId) {\n        if (thumbnailState.type === 'INITIAL') {\n          setState(prev => ({ ...prev, thumbnailUrl: { type: 'READY' } }));\n        }\n        return;\n      }\n\n      if (!config.getThumbnailUrl) {\n        if (\n          thumbnailState.type === 'INITIAL' ||\n          (thumbnailState.type === 'READY' && thumbnailState.startingId !== thumbnailId)\n        ) {\n          setState(prev => ({ ...prev, thumbnailUrl: { type: 'READY', startingId: thumbnailId } }));\n        }\n        return;\n      }\n      if (\n        thumbnailState.type === 'READY' &&\n        thumbnailState.startingId === thumbnailId &&\n        !!thumbnailState.loadedUrl\n      ) {\n        return;\n      }\n\n      try {\n        setState(prev => ({ ...prev, thumbnailUrl: { type: 'LOADING' } }));\n        const thumbnailUrl = await config.getThumbnailUrl({ pathname: thumbnailId });\n        setState(prev => ({\n          ...prev,\n          thumbnailUrl: {\n            type: 'READY',\n            loadedUrl: thumbnailUrl,\n            startingId: thumbnailId,\n          },\n        }));\n      } catch (e) {\n        setState(prev => ({ ...prev, thumbnailUrl: { type: 'READY', startingId: thumbnailId } }));\n      }\n    };\n\n    updateThumbnail();\n  }, [componentData.thumbnail, config.getThumbnailUrl, state.thumbnailUrl]);\n\n  useEffect(() => {\n    if (!state.isVideoWrapperAttachedToDom) {\n      const videoRatio = getVideoRatio();\n      if (videoRatio) {\n        setVideoRatio(videoRatio.ratio, videoRatio.wrapper);\n        setState(prev => ({ ...prev, isVideoWrapperAttachedToDom: true }));\n      }\n    }\n  }, [state.isVideoWrapperAttachedToDom]);\n\n  const getVideoRatio = (): { ratio: number; wrapper: ParentNode } | undefined => {\n    // eslint-disable-next-line react/no-find-dom-node\n    const wrapper = ReactDOM.findDOMNode(this)?.parentNode;\n\n    if (!wrapper) {\n      return undefined;\n    }\n\n    const element = wrapper.querySelector('iframe, video');\n    if (!element) {\n      return undefined;\n    }\n\n    const ratio = element.clientHeight / element.clientWidth;\n\n    return !isNaN(ratio) ? { ratio, wrapper: wrapper as ParentNode } : undefined;\n  };\n\n  const setVideoRatio = (ratio: number, wrapper: ParentNode) => {\n    (wrapper as HTMLElement).style['padding-bottom'] = ratio * 100 + '%';\n  };\n\n  /**\n   * A bit confusing to understand at first, but the idea is that at first\n   * you let the parent control \"isLoaded\" state for themselves and if they do not\n   * want to do that, control it here.\n   */\n  const onReactPlayerReady: ReactPlayerWrapperProps['onReady'] = player => {\n    if (onReady) {\n      onReady(player);\n      return;\n    }\n\n    if (!isLoaded) {\n      setState(prev => ({ ...prev, isLoaded: true }));\n    }\n  };\n\n  const handleContextMenu = (e: React.MouseEvent) =>\n    componentData.disableDownload && e.preventDefault();\n\n  const getDownloadProps = () => {\n    if (\n      (isDefined(componentData?.disableDownload) && componentData.disableDownload) ||\n      (isDefined(config?.disableDownload) && config.disableDownload)\n    ) {\n      return {\n        config: {\n          file: {\n            attributes: {\n              controlsList: 'nodownload',\n            },\n          },\n        },\n      };\n    }\n\n    return {\n      config: {},\n    };\n  };\n\n  const getLightProps = () => {\n    if (!isLight) {\n      return {\n        isLight: false,\n      } as const;\n    }\n\n    return {\n      isLight: true,\n      thumbnail: state.thumbnailUrl.type === 'READY' ? state.thumbnailUrl.loadedUrl : undefined,\n    } as const;\n  };\n\n  const url = state.url.type === 'READY' ? state.url.loadedUrl : undefined;\n\n  if (!url) {\n    return null;\n  }\n\n  const isCustomVideo = !!componentData.video?.src?.id;\n  const shouldRenderIframe = isSSR() && seoMode && url;\n\n  const { autoPlay = false, playInLoop = false, showControls = true } = componentData.options || {};\n\n  return shouldRenderIframe ? (\n    <IframePlayer isCustomVideo={isCustomVideo} url={url} />\n  ) : (\n    <ReactPlayerWrapper\n      className={styles.video_player}\n      onContextMenu={handleContextMenu}\n      controls={isLoaded !== false && showControls}\n      url={url}\n      onReady={onReactPlayerReady}\n      disabled={disabled}\n      width=\"100%\"\n      height=\"100%\"\n      key={key}\n      onDuration={onDuration}\n      onProgress={progress => {\n        config.onProgress?.({ ...progress, id: nodeId });\n      }}\n      progressInterval={config.progressInterval || 1000}\n      muted={muted || autoPlay}\n      isLoaded={isLoaded || state.isLoaded}\n      autoPlay={autoPlay}\n      loop={playInLoop}\n      isCustomVideo={isCustomVideo}\n      {...getLightProps()}\n      {...getDownloadProps()}\n    />\n  );\n};\n\nconst normalizeUrl = (url: string) =>\n  url && (url.toLowerCase().indexOf('vimeo') === 0 ? 'https://' + url : url); //vimeo player needs urls prefixed with http[s]\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/es/plugin-video/viewer/viewer-video-loadable.js

@@ -0,0 +1,48 @@
+import React, { useContext } from "react";
+import { RicosViewerContext } from "./../../ricos-context";
+import { ViewerFigure } from "../../plugin-figure/viewer/viewer-figure";
+import { VIDEO_ROOT } from "../dataHooks";
+import styles from "../statics/styles/video-viewer-scss";
+import { VIDEO_TYPE } from "../types";
+import { Video } from "./video";
+const ViewerVideo = ({
+  node,
+  nodeIndex,
+  NodeViewContainer,
+  RicosNodesRenderer
+}) => {
+  const { seoMode, config } = useContext(RicosViewerContext);
+  const { videoData } = node;
+  if (!videoData) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    ViewerFigure,
+    {
+      node,
+      nodeIndex,
+      NodeViewContainer,
+      RicosNodesRenderer
+    },
+    /* @__PURE__ */ React.createElement("div", { className: styles.video_container, "data-hook": VIDEO_ROOT }, /* @__PURE__ */ React.createElement(
+      Video,
+      {
+        config: config[VIDEO_TYPE] || {},
+        componentData: videoData,
+        nodeId: node.id,
+        seoMode: !!seoMode,
+        isLight: true
+      }
+    ))
+  );
+};
+const VideoRenderer = ({ node, ...props }) => {
+  return /* @__PURE__ */ React.createElement(ViewerVideo, { key: node.id, node, ...props });
+};
+var viewer_video_default = VideoRenderer;
+export {
+  viewer_video_default as default
+};
+//# sourceMappingURL=viewer-video.js.map
+
+import "@wix/ricos/css/plugin-video-viewer.global.css";

package/dist/es/plugin-video/viewer/viewer-video.js

@@ -0,0 +1,46 @@
+import React, { useContext } from "react";
+import { RicosViewerContext } from "./../../ricos-context";
+import { ViewerFigure } from "../../plugin-figure/viewer/viewer-figure";
+import { VIDEO_ROOT } from "../dataHooks";
+import styles from "../statics/styles/video-viewer-scss";
+import { VIDEO_TYPE } from "../types";
+import { Video } from "./video";
+const ViewerVideo = ({
+  node,
+  nodeIndex,
+  NodeViewContainer,
+  RicosNodesRenderer
+}) => {
+  const { seoMode, config } = useContext(RicosViewerContext);
+  const { videoData } = node;
+  if (!videoData) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    ViewerFigure,
+    {
+      node,
+      nodeIndex,
+      NodeViewContainer,
+      RicosNodesRenderer
+    },
+    /* @__PURE__ */ React.createElement("div", { className: styles.video_container, "data-hook": VIDEO_ROOT }, /* @__PURE__ */ React.createElement(
+      Video,
+      {
+        config: config[VIDEO_TYPE] || {},
+        componentData: videoData,
+        nodeId: node.id,
+        seoMode: !!seoMode,
+        isLight: true
+      }
+    ))
+  );
+};
+const VideoRenderer = ({ node, ...props }) => {
+  return /* @__PURE__ */ React.createElement(ViewerVideo, { key: node.id, node, ...props });
+};
+var viewer_video_default = VideoRenderer;
+export {
+  viewer_video_default as default
+};
+//# sourceMappingURL=viewer-video.js.map

package/dist/es/plugin-video/viewer/viewer-video.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-video/viewer/viewer-video.tsx"],
+  "sourcesContent": ["import React, { useContext } from 'react';\n\nimport { RicosViewerContext } from './../../ricos-context';\nimport type { NodeViewRenderer, NodeViewRendererProps } from './../../ricos-types';\n\nimport { ViewerFigure } from '../../plugin-figure/viewer/viewer-figure';\nimport { VIDEO_ROOT } from '../dataHooks';\nimport styles from '../statics/styles/video-viewer-scss';\nimport { VIDEO_TYPE } from '../types';\nimport { Video } from './video';\n\nconst ViewerVideo = ({\n  node,\n  nodeIndex,\n  NodeViewContainer,\n  RicosNodesRenderer,\n}: NodeViewRendererProps) => {\n  const { seoMode, config } = useContext(RicosViewerContext);\n  const { videoData } = node;\n\n  if (!videoData) {\n    return null;\n  }\n\n  return (\n    <ViewerFigure\n      node={node}\n      nodeIndex={nodeIndex}\n      NodeViewContainer={NodeViewContainer}\n      RicosNodesRenderer={RicosNodesRenderer}\n    >\n      <div className={styles.video_container} data-hook={VIDEO_ROOT}>\n        <Video\n          config={config[VIDEO_TYPE] || {}}\n          componentData={videoData}\n          nodeId={node.id}\n          seoMode={!!seoMode}\n          isLight\n        />\n      </div>\n    </ViewerFigure>\n  );\n};\n\nconst VideoRenderer: NodeViewRenderer = ({ node, ...props }) => {\n  return <ViewerVideo key={node.id} node={node} {...props} />;\n};\n\nexport default VideoRenderer;\n"],
+  "mappings": "AAAA,OAAO,SAAS,kBAAkB;AAElC,SAAS,0BAA0B;AAGnC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,OAAO,YAAY;AACnB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AAEtB,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,QAAM,EAAE,SAAS,OAAO,IAAI,WAAW,kBAAkB;AACzD,QAAM,EAAE,UAAU,IAAI;AAEtB,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,oCAAC,SAAI,WAAW,OAAO,iBAAiB,aAAW,cACjD;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,OAAO,UAAU,KAAK,CAAC;AAAA,QAC/B,eAAe;AAAA,QACf,QAAQ,KAAK;AAAA,QACb,SAAS,CAAC,CAAC;AAAA,QACX,SAAO;AAAA;AAAA,IACT,CACF;AAAA,EACF;AAEJ;AAEA,MAAM,gBAAkC,CAAC,EAAE,MAAM,GAAG,MAAM,MAAM;AAC9D,SAAO,oCAAC,eAAY,KAAK,KAAK,IAAI,MAAa,GAAG,OAAO;AAC3D;AAEA,IAAO,uBAAQ;",
+  "names": []
+}

package/dist/es/plugin-video/viewer-styles-inject.js

@@ -1,6 +1,6 @@
-var styleDataHash = '736ef221';  
+var styleDataHash = 'e565a934';  
 export const injectCss = (() => {
-  var css = `.jgUXT{height:100%;position:absolute;top:0;width:100%;z-index:0}[dir] .jgUXT{border:0}[dir=ltr] .jgUXT{left:0}[dir=rtl] .jgUXT{right:0}.bf8fR{bottom:0;position:absolute;top:0;z-index:3}[dir=ltr] .bf8fR,[dir=rtl] .bf8fR{left:0;right:0}.t7oRj{height:0;position:relative}[dir] .t7oRj{padding-bottom:56.25%}@supports not (contain:inline-size){@media only screen and (max-width:640px){.t7oRj{min-width:auto}}}@container (width < 640px){.t7oRj{min-width:auto}}`;
+  var css = `.U5BMo{height:100%;position:absolute;top:0;width:100%;z-index:0}[dir] .U5BMo{border:0}[dir=ltr] .U5BMo{left:0}[dir=rtl] .U5BMo{right:0}._5dK9z{bottom:0;position:absolute;top:0;z-index:3}[dir=ltr] ._5dK9z,[dir=rtl] ._5dK9z{left:0;right:0}.kLbyY{height:0;position:relative}[dir] .kLbyY{padding-bottom:56.25%}@supports not (contain:inline-size){@media only screen and (max-width:640px){.kLbyY{min-width:auto}}}@container (width < 640px){.kLbyY{min-width:auto}}.glob_fontElementMap,.wn3kv{font-family:var(--ricos-font-family,unset)}.vEdwH{--ricos-custom-p-font-size:14px;color:var(--ricos-custom-p-color,unset);display:block;font-family:var(--ricos-custom-p-font-family,unset);font-size:var(--ricos-custom-p-font-size,unset);font-style:var(--ricos-custom-p-font-style,unset);font-weight:var(--ricos-custom-p-font-weight,unset);justify-content:center;line-height:var(--ricos-custom-p-line-height,unset);min-height:var(--ricos-custom-p-min-height,unset);padding-inline:16px;text-align:center;text-decoration:var(--ricos-custom-p-text-decoration,unset)}.vEdwH>span>a,.vEdwH>span>span{background-color:var(--ricos-custom-p-background-color,unset)}@supports not (contain:inline-size){@media only screen and (max-width:640px){.vEdwH{font-size:var(--ricos-custom-p-font-size,unset)}}}@container (width < 640px){.vEdwH{font-size:var(--ricos-custom-p-font-size,unset)}}.rueY7{margin:12px 0}`;
   var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';
 
   if (isTest || !css || typeof document === 'undefined') { return; }

package/dist/es/pm-converters/collect.js

@@ -21,8 +21,8 @@ const collectPmConverters = (plugins) => {
 const createFromPmConverters = (converters) => {
   const fromPmNodeChildren = (node) => (node.content || []).map(fromPmNode).filter(isDefined);
   const fromPmNode = (node) => {
-    const convert = converters[node.type] === void 0 ? unsupportedFromPm : converters[node.type];
-    return convert(node, fromPmNodeChildren);
+    const convertersArr = converters[node.type] === void 0 ? [unsupportedFromPm] : converters[node.type];
+    return convertersArr.map((convert) => convert(node, fromPmNodeChildren)).find(isDefined);
   };
   return {
     fromPmNodeChildren,
@@ -68,11 +68,17 @@ const createToPmConverters = (converters) => {
     }
   };
 };
-const collectFromPmNodeConverters = (proseNodeConverters) => Object.fromEntries(
-  proseNodeConverters.flatMap(
-    (converter) => converter.fromPm.types.map((t) => [t, converter.fromPm.convert])
-  )
-);
+const collectFromPmNodeConverters = (proseNodeConverters) => {
+  return proseNodeConverters.reduce((acc, converter) => {
+    converter.fromPm.types.forEach((type) => {
+      if (!acc[type]) {
+        acc[type] = [];
+      }
+      acc[type].push(converter.fromPm.convert);
+    });
+    return acc;
+  }, {});
+};
 const collectFromPmMarkConverters = (proseMarkConverters) => Object.fromEntries(
   proseMarkConverters.map((converter) => [converter.fromPm.type, converter.fromPm.convert])
 );