@makeswift/runtime 0.0.0-e0c0445 → 0.0.0-e5fb3bd

package/dist/esm/components/page/Page.js

@@ -0,0 +1,184 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, createElement, useMemo, useEffect, useRef, useState } from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+import parse from "html-react-parser";
+import Head from "next/head";
+import { BodySnippet } from "./BodySnippet";
+import { DocumentReference } from "../../runtimes/react";
+import { createDocumentReference } from "../../state/react-page";
+import { useMakeswiftHostApiClient } from "../../next/context/makeswift-host-api-client";
+import { useIsInBuilder } from "../../react";
+import deepEqual from "../../utils/deepEqual";
+import { useRouterLocaleSync } from "../hooks/useRouterLocaleSync";
+const SnippetLocation = {
+  Body: "BODY",
+  Head: "HEAD"
+};
+const defaultFavicon = {
+  mimetype: "image/png",
+  publicUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC"
+};
+const VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_.\-\d]*$/;
+const VALID_HEAD_ELEMENT_TYPES = [
+  "title",
+  "base",
+  "link",
+  "style",
+  "meta",
+  "script",
+  "noscript",
+  "template"
+];
+function snippetToElement(snippet) {
+  return Children.map(parse(snippet.code), (element) => {
+    if (typeof element === "string")
+      return element;
+    if (!VALID_TAG_REGEX.test(element.type))
+      return null;
+    const key = element.key ? `${snippet.id}:${element.key}` : snippet.id;
+    return createElement(element.type, { ...element.props, key });
+  });
+}
+const filterUsedSnippetProperties = ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+}) => ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+});
+function Page({ document: page }) {
+  const isInBuilder = useIsInBuilder();
+  const [snippets, setSnippets] = useState(page.snippets);
+  const cachedPage = useCachedPage(isInBuilder ? page.id : null);
+  useEffect(() => {
+    if (cachedPage == null)
+      return;
+    const oldSnippets = snippets.map(filterUsedSnippetProperties);
+    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties);
+    if (deepEqual(newSnippets, oldSnippets))
+      return;
+    setSnippets(cachedPage.snippets);
+  }, [cachedPage]);
+  const site = useCachedSite(isInBuilder ? page.site.id : null);
+  const baseLocalizedPage = page.localizedPages.find(({ parentId }) => parentId == null);
+  const favicon = page.meta.favicon ?? defaultFavicon;
+  const title = baseLocalizedPage?.meta.title ?? page.meta.title;
+  const description = baseLocalizedPage?.meta.description ?? page.meta.description;
+  const keywords = baseLocalizedPage?.meta.keywords ?? page.meta.keywords;
+  const socialImage = baseLocalizedPage?.meta.socialImage ?? page.meta.socialImage;
+  const canonicalUrl = baseLocalizedPage?.seo.canonicalUrl ?? page.seo.canonicalUrl;
+  const isIndexingBlocked = baseLocalizedPage?.seo.isIndexingBlocked ?? page.seo.isIndexingBlocked;
+  const fontFamilyParamValue = useMemo(() => {
+    if (site == null) {
+      return page.fonts.map(({ family, variants }) => {
+        return `${family.replace(/ /g, "+")}:${variants.join()}`;
+      }).join("|");
+    }
+    return site.googleFonts.edges.filter((edge) => edge != null).map(({ activeVariants, node: { family, variants } }) => {
+      const activeVariantSpecifiers = variants.filter(
+        (variant) => activeVariants.some((activeVariant) => activeVariant.specifier === variant.specifier)
+      ).map((variant) => variant.specifier).join();
+      return `${family.replace(/ /g, "+")}:${activeVariantSpecifiers}`;
+    }).join("|");
+  }, [site, page]);
+  const filteredSnippets = useMemo(
+    () => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled),
+    [snippets, isInBuilder]
+  );
+  const headSnippets = useMemo(
+    () => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head),
+    [filteredSnippets]
+  );
+  const previousHeadSnippets = useRef(null);
+  useEffect(() => {
+    const headSnippetsToCleanUp = (previousHeadSnippets.current ?? []).filter((previousSnippet) => previousSnippet.cleanup != null).filter((previousSnippet) => !headSnippets.some((snippet) => previousSnippet.id === snippet.id));
+    headSnippetsToCleanUp.forEach((snippetToCleanUp) => {
+      if (snippetToCleanUp.cleanup == null)
+        return;
+      const cleanUp = new Function(snippetToCleanUp.cleanup);
+      try {
+        cleanUp();
+      } catch {
+      }
+    });
+    previousHeadSnippets.current = headSnippets;
+  }, [headSnippets]);
+  const documentId = baseLocalizedPage?.elementTreeId ?? page.id;
+  useRouterLocaleSync();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Head, { children: [
+      /* @__PURE__ */ jsx("style", { children: `
+            html {
+              font-family: sans-serif;
+            }
+            div#__next {
+              overflow: hidden;
+            }
+          ` }),
+      /* @__PURE__ */ jsx("link", { rel: "icon", type: favicon.mimetype, href: favicon.publicUrl }),
+      canonicalUrl && /* @__PURE__ */ jsx("link", { rel: "canonical", href: canonicalUrl }),
+      isIndexingBlocked && /* @__PURE__ */ jsx("meta", { name: "robots", content: "noindex" }),
+      title && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("title", { children: title }),
+        /* @__PURE__ */ jsx("meta", { property: "og:title", content: title }),
+        /* @__PURE__ */ jsx("meta", { name: "twitter:title", content: title }),
+        /* @__PURE__ */ jsx("meta", { itemProp: "name", content: title })
+      ] }),
+      description && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("meta", { name: "description", content: description }),
+        /* @__PURE__ */ jsx("meta", { property: "og:description", content: description }),
+        /* @__PURE__ */ jsx("meta", { name: "twitter:description", content: description }),
+        /* @__PURE__ */ jsx("meta", { itemProp: "description", content: description })
+      ] }),
+      keywords && /* @__PURE__ */ jsx("meta", { name: "keywords", content: keywords }),
+      socialImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("meta", { property: "og:image", content: socialImage.publicUrl }),
+        /* @__PURE__ */ jsx("meta", { property: "og:image:type", content: socialImage.mimetype }),
+        /* @__PURE__ */ jsx("meta", { name: "twitter:image", content: socialImage.publicUrl }),
+        /* @__PURE__ */ jsx("meta", { name: "twitter:card", content: "summary_large_image" }),
+        /* @__PURE__ */ jsx("meta", { itemProp: "image", content: socialImage.publicUrl })
+      ] }),
+      fontFamilyParamValue !== "" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+        "link",
+        {
+          rel: "stylesheet",
+          href: `https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`
+        }
+      ) }),
+      headSnippets.map(snippetToElement).map(
+        (children) => Children.map(children, (child) => {
+          if (typeof child === "string")
+            return child;
+          if (VALID_HEAD_ELEMENT_TYPES.includes(child.type))
+            return child;
+          return null;
+        })
+      )
+    ] }),
+    /* @__PURE__ */ jsx(DocumentReference, { documentReference: createDocumentReference(documentId) }),
+    filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsx(BodySnippet, { code: snippet.code, cleanup: snippet.cleanup }, snippet.id))
+  ] });
+}
+function useCachedPage(pageId) {
+  const client = useMakeswiftHostApiClient();
+  const getSnapshot = () => pageId == null ? null : client.readPage(pageId);
+  const page = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  return page;
+}
+function useCachedSite(siteId) {
+  const client = useMakeswiftHostApiClient();
+  const getSnapshot = () => siteId == null ? null : client.readSite(siteId);
+  const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  return site;
+}
+export {
+  Page
+};
+//# sourceMappingURL=Page.js.map

package/dist/esm/components/page/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/page/Page.tsx"],"sourcesContent":["'use client'\n\nimport { ReactElement, Children, createElement, useMemo, useEffect, useRef, useState } from 'react'\nimport { useSyncExternalStore } from 'use-sync-external-store/shim'\nimport parse from 'html-react-parser'\nimport Head from 'next/head'\n\nimport { BodySnippet } from './BodySnippet'\nimport { DocumentReference } from '../../runtimes/react'\nimport { createDocumentReference } from '../../state/react-page'\nimport { useMakeswiftHostApiClient } from '../../next/context/makeswift-host-api-client'\nimport { useIsInBuilder } from '../../react'\nimport deepEqual from '../../utils/deepEqual'\nimport { MakeswiftPageDocument } from '../../next'\nimport { Page as PageType, Site } from '../../api'\nimport { useRouterLocaleSync } from '../hooks/useRouterLocaleSync'\n\nconst SnippetLocation = {\n  Body: 'BODY',\n  Head: 'HEAD',\n} as const\n\ntype SnippetLocation = typeof SnippetLocation[keyof typeof SnippetLocation]\n\ntype Snippet = {\n  builderEnabled: boolean\n  cleanup: string | null\n  code: string\n  id: string\n  liveEnabled: boolean\n  location: SnippetLocation\n}\n\nconst defaultFavicon = {\n  mimetype: 'image/png',\n  publicUrl:\n    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC',\n}\n\n// Taken from https://github.com/facebook/react/blob/14bac6193a334eda42e727336e8967419f08f5df/packages/react-dom/src/server/ReactPartialRenderer.js#L208\nconst VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_.\\-\\d]*$/\n\nconst VALID_HEAD_ELEMENT_TYPES = [\n  'title',\n  'base',\n  'link',\n  'style',\n  'meta',\n  'script',\n  'noscript',\n  'template',\n]\n\nfunction snippetToElement(snippet: Pick<Snippet, 'id' | 'code'>): (string | ReactElement)[] {\n  return Children.map(parse(snippet.code), element => {\n    if (typeof element === 'string') return element\n\n    if (!VALID_TAG_REGEX.test(element.type)) return null\n\n    const key = element.key ? `${snippet.id}:${element.key}` : snippet.id\n\n    return createElement(element.type, { ...element.props, key })\n  })\n}\n\nconst filterUsedSnippetProperties = ({\n  code,\n  builderEnabled,\n  liveEnabled,\n  location,\n  cleanup,\n}: Snippet) => ({\n  code,\n  builderEnabled,\n  liveEnabled,\n  location,\n  cleanup,\n})\n\ntype Props = {\n  document: MakeswiftPageDocument\n}\n\nexport function Page({ document: page }: Props): JSX.Element {\n  const isInBuilder = useIsInBuilder()\n  const [snippets, setSnippets] = useState(page.snippets)\n  // We're using cached results here for page snippets and site fonts so that anytime the user\n  // changes the snippets or fonts on the builder, the change would be reflected here.\n  // See this PR for discussions and things we can do to improve it in the future:\n  // https://github.com/makeswift/makeswift/pull/77\n  const cachedPage = useCachedPage(isInBuilder ? page.id : null)\n  useEffect(() => {\n    if (cachedPage == null) return\n\n    const oldSnippets = snippets.map(filterUsedSnippetProperties)\n    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties)\n\n    if (deepEqual(newSnippets, oldSnippets)) return\n\n    setSnippets(cachedPage.snippets)\n  }, [cachedPage])\n  const site = useCachedSite(isInBuilder ? page.site.id : null)\n\n  const baseLocalizedPage = page.localizedPages.find(({ parentId }) => parentId == null)\n  const favicon = page.meta.favicon ?? defaultFavicon\n  const title = baseLocalizedPage?.meta.title ?? page.meta.title\n  const description = baseLocalizedPage?.meta.description ?? page.meta.description\n  const keywords = baseLocalizedPage?.meta.keywords ?? page.meta.keywords\n  const socialImage = baseLocalizedPage?.meta.socialImage ?? page.meta.socialImage\n  const canonicalUrl = baseLocalizedPage?.seo.canonicalUrl ?? page.seo.canonicalUrl\n  const isIndexingBlocked = baseLocalizedPage?.seo.isIndexingBlocked ?? page.seo.isIndexingBlocked\n\n  const fontFamilyParamValue = useMemo(() => {\n    if (site == null) {\n      return page.fonts\n        .map(({ family, variants }) => {\n          return `${family.replace(/ /g, '+')}:${variants.join()}`\n        })\n        .join('|')\n    }\n\n    return site.googleFonts.edges\n      .filter((edge): edge is NonNullable<typeof edge> => edge != null)\n      .map(({ activeVariants, node: { family, variants } }) => {\n        const activeVariantSpecifiers = variants\n          .filter(variant =>\n            activeVariants.some(activeVariant => activeVariant.specifier === variant.specifier),\n          )\n          .map(variant => variant.specifier)\n          .join()\n\n        return `${family.replace(/ /g, '+')}:${activeVariantSpecifiers}`\n      })\n      .join('|')\n  }, [site, page])\n\n  const filteredSnippets = useMemo(\n    () => snippets.filter(snippet => (isInBuilder ? snippet.builderEnabled : snippet.liveEnabled)),\n    [snippets, isInBuilder],\n  )\n  const headSnippets = useMemo(\n    () => filteredSnippets.filter(snippet => snippet.location === SnippetLocation.Head),\n    [filteredSnippets],\n  )\n\n  const previousHeadSnippets = useRef<MakeswiftPageDocument['snippets'] | null>(null)\n  useEffect(() => {\n    const headSnippetsToCleanUp = (previousHeadSnippets.current ?? [])\n      .filter(previousSnippet => previousSnippet.cleanup != null)\n      .filter(previousSnippet => !headSnippets.some(snippet => previousSnippet.id === snippet.id))\n\n    headSnippetsToCleanUp.forEach(snippetToCleanUp => {\n      if (snippetToCleanUp.cleanup == null) return\n\n      const cleanUp = new Function(snippetToCleanUp.cleanup)\n\n      try {\n        cleanUp()\n      } catch {\n        // Ignore errors from user input.\n      }\n    })\n\n    previousHeadSnippets.current = headSnippets\n  }, [headSnippets])\n\n  const documentId = baseLocalizedPage?.elementTreeId ?? page.id\n\n  useRouterLocaleSync()\n\n  return (\n    <>\n      <Head>\n        <style>\n          {`\n            html {\n              font-family: sans-serif;\n            }\n            div#__next {\n              overflow: hidden;\n            }\n          `}\n        </style>\n\n        <link rel=\"icon\" type={favicon.mimetype} href={favicon.publicUrl} />\n\n        {canonicalUrl && <link rel=\"canonical\" href={canonicalUrl} />}\n\n        {isIndexingBlocked && <meta name=\"robots\" content=\"noindex\" />}\n\n        {title && (\n          <>\n            <title>{title}</title>\n            <meta property=\"og:title\" content={title} />\n            <meta name=\"twitter:title\" content={title} />\n            <meta itemProp=\"name\" content={title} />\n          </>\n        )}\n\n        {description && (\n          <>\n            <meta name=\"description\" content={description} />\n            <meta property=\"og:description\" content={description} />\n            <meta name=\"twitter:description\" content={description} />\n            <meta itemProp=\"description\" content={description} />\n          </>\n        )}\n\n        {keywords && <meta name=\"keywords\" content={keywords} />}\n\n        {socialImage && (\n          <>\n            <meta property=\"og:image\" content={socialImage.publicUrl} />\n            <meta property=\"og:image:type\" content={socialImage.mimetype} />\n            <meta name=\"twitter:image\" content={socialImage.publicUrl} />\n            <meta name=\"twitter:card\" content=\"summary_large_image\" />\n            <meta itemProp=\"image\" content={socialImage.publicUrl} />\n          </>\n        )}\n\n        {fontFamilyParamValue !== '' && (\n          <>\n            <link\n              rel=\"stylesheet\"\n              href={`https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`}\n            />\n          </>\n        )}\n\n        {headSnippets.map(snippetToElement).map(children =>\n          Children.map(children, child => {\n            if (typeof child === 'string') return child\n\n            if (VALID_HEAD_ELEMENT_TYPES.includes(child.type as string)) return child\n\n            return null\n          }),\n        )}\n      </Head>\n\n      <DocumentReference documentReference={createDocumentReference(documentId)} />\n\n      {filteredSnippets\n        .filter(snippet => snippet.location === SnippetLocation.Body)\n        .map(snippet => (\n          <BodySnippet key={snippet.id} code={snippet.code} cleanup={snippet.cleanup} />\n        ))}\n    </>\n  )\n}\n\nfunction useCachedPage(pageId: string | null): PageType | null {\n  const client = useMakeswiftHostApiClient()\n  const getSnapshot = () => (pageId == null ? null : client.readPage(pageId))\n\n  const page = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  return page\n}\n\nfunction useCachedSite(siteId: string | null): Site | null {\n  const client = useMakeswiftHostApiClient()\n  const getSnapshot = () => (siteId == null ? null : client.readSite(siteId))\n\n  const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  return site\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/page/index.js

@@ -0,0 +1,2 @@
+export * from "./Page";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/page/index.ts"],"sourcesContent":["export * from './Page'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/esm/components/shared/BackgroundsContainer/components/BackgroundVideo/index.js

@@ -0,0 +1,118 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { useState, useRef, forwardRef } from "react";
+import ReactPlayer from "react-player";
+import { useStyle } from "../../../../../runtimes/react/use-style";
+import { useIsomorphicLayoutEffect } from "../../../../hooks/useIsomorphicLayoutEffect";
+const Container = forwardRef(function Container2({ className, ...restOfProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restOfProps,
+      ref,
+      className: cx(
+        useStyle({
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          pointerEvents: "none",
+          overflow: "hidden"
+        }),
+        className
+      )
+    }
+  );
+});
+function Mask({
+  backgroundColor,
+  visible
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: useStyle({
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: backgroundColor,
+        opacity: visible ? 1 : 0,
+        transition: "opacity 1s"
+      })
+    }
+  );
+}
+const getScale = (element, aspectRatio, zoom) => {
+  const { offsetWidth: width, offsetHeight: height } = element;
+  const computedAspectRatio = width / height;
+  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom;
+};
+function BackgroundVideo({
+  url = "",
+  aspectRatio = 16 / 9,
+  zoom = 1,
+  maskColor,
+  opacity
+}) {
+  const [ready, setReady] = useState(false);
+  const [scale, setScale] = useState(1);
+  const container = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const { current: containerEl } = container;
+    if (!containerEl)
+      return void 0;
+    const { defaultView } = containerEl.ownerDocument;
+    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom));
+    handleResize();
+    defaultView.addEventListener("resize", handleResize);
+    return () => defaultView.removeEventListener("resize", handleResize);
+  }, [aspectRatio, zoom]);
+  if (!ReactPlayer.canPlay(url))
+    return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsxs(Container, { ref: container, children: [
+    container.current && /* @__PURE__ */ jsx(
+      ReactPlayer,
+      {
+        url,
+        config: {
+          vimeo: { playerOptions: { background: true } },
+          youtube: {
+            playerVars: {
+              origin: container.current.ownerDocument.defaultView?.location.origin
+            }
+          },
+          wistia: {
+            options: {
+              endVideoBehavior: "loop",
+              playbackRateControl: false,
+              playbar: false,
+              playButton: false,
+              volumeControl: false,
+              fullscreenButton: false,
+              muted: true
+            }
+          }
+        },
+        playing: true,
+        loop: true,
+        muted: true,
+        controls: false,
+        onReady: () => setReady(true),
+        style: {
+          transform: `scale3d(${scale}, ${scale}, 1)`,
+          opacity
+        },
+        width: "100%",
+        height: "100%"
+      }
+    ),
+    /* @__PURE__ */ jsx(Mask, { backgroundColor: maskColor, visible: !ready })
+  ] });
+}
+export {
+  BackgroundVideo as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/shared/BackgroundsContainer/components/BackgroundVideo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { useState, useRef, ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'\nimport ReactPlayer from 'react-player'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nconst Container = forwardRef(function Container(\n  { className, ...restOfProps }: ComponentPropsWithoutRef<'div'>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          pointerEvents: 'none',\n          overflow: 'hidden',\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nfunction Mask({\n  backgroundColor,\n  visible,\n}: {\n  backgroundColor: string | undefined\n  visible: boolean\n}) {\n  return (\n    <div\n      className={useStyle({\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: backgroundColor,\n        opacity: visible ? 1 : 0,\n        transition: 'opacity 1s',\n      })}\n    />\n  )\n}\n\nconst getScale = (element: HTMLElement, aspectRatio: number, zoom: number) => {\n  const { offsetWidth: width, offsetHeight: height } = element\n  const computedAspectRatio = width / height\n\n  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom\n}\n\ntype Props = {\n  url?: string\n  aspectRatio?: number\n  zoom?: number\n  opacity?: number\n  maskColor?: string\n}\n\nexport default function BackgroundVideo({\n  url = '',\n  aspectRatio = 16 / 9,\n  zoom = 1,\n  maskColor,\n  opacity,\n}: Props): JSX.Element {\n  const [ready, setReady] = useState(false)\n  const [scale, setScale] = useState(1)\n  const container = useRef<HTMLDivElement>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const { current: containerEl } = container\n\n    if (!containerEl) return undefined\n\n    const { defaultView } = containerEl.ownerDocument\n    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom))\n\n    handleResize()\n\n    defaultView!.addEventListener('resize', handleResize)\n\n    return () => defaultView!.removeEventListener('resize', handleResize)\n  }, [aspectRatio, zoom])\n\n  if (!ReactPlayer.canPlay(url)) return <></>\n\n  return (\n    <Container ref={container}>\n      {container.current && (\n        <ReactPlayer\n          url={url}\n          config={{\n            vimeo: { playerOptions: { background: true } },\n            youtube: {\n              playerVars: {\n                origin: container.current.ownerDocument.defaultView?.location.origin,\n              },\n            },\n            wistia: {\n              options: {\n                endVideoBehavior: 'loop',\n                playbackRateControl: false,\n                playbar: false,\n                playButton: false,\n                volumeControl: false,\n                fullscreenButton: false,\n                muted: true,\n              },\n            },\n          }}\n          playing\n          loop\n          muted\n          controls={false}\n          onReady={() => setReady(true)}\n          style={{\n            transform: `scale3d(${scale}, ${scale}, 1)`,\n            opacity,\n          }}\n          width=\"100%\"\n          height=\"100%\"\n        />\n      )}\n      <Mask backgroundColor={maskColor} visible={!ready} />\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Container"]}

package/dist/esm/components/shared/BackgroundsContainer/components/Backgrounds/index.js

@@ -0,0 +1,193 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import NextImage from "next/image";
+import { colorToString } from "../../../../utils/colorToString";
+import Parallax from "../Parallax";
+import BackgroundVideo from "../BackgroundVideo";
+import { useStyle } from "../../../../../runtimes/react/use-style";
+import { useResponsiveStyle } from "../../../../utils/responsive-style";
+import { major as nextMajorVersion } from "../../../../../next/next-version";
+const NextLegacyImage = NextImage;
+function getColor(color) {
+  if (color == null)
+    return "black";
+  if (color.swatch == null) {
+    return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } });
+  }
+  return colorToString(color);
+}
+const getStopsStyle = (stops) => stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(",");
+const absoluteFillStyle = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+const containerStyle = {
+  ...absoluteFillStyle,
+  borderRadius: "inherit"
+};
+function Backgrounds({ backgrounds }) {
+  if (backgrounds == null)
+    return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(Fragment, { children: backgrounds.map(({ value, deviceId }) => {
+    const visibility = backgrounds.map((v) => ({
+      deviceId: v.deviceId,
+      value: v.deviceId === deviceId
+    }));
+    return /* @__PURE__ */ jsx(BackgroundDeviceLayer, { layer: value, visibility }, deviceId);
+  }) });
+}
+function BackgroundDeviceLayer({ layer, visibility }) {
+  const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({
+    display: v === true ? "block" : "none"
+  }));
+  return /* @__PURE__ */ jsx("div", { className: useStyle({ ...containerStyle, ...visibilityStyle, overflow: "hidden" }), children: [...layer].reverse().map((bg) => {
+    if (bg.type === "color") {
+      return /* @__PURE__ */ jsx(ColorBackground, { color: getColor(bg.payload) }, bg.id);
+    }
+    if (bg.type === "image" && bg.payload) {
+      return /* @__PURE__ */ createElement(ImageBackground, { ...bg.payload, key: bg.id });
+    }
+    if (bg.type === "gradient" && bg.payload) {
+      return /* @__PURE__ */ createElement(
+        GradientBackground,
+        {
+          ...bg.payload,
+          key: bg.id,
+          gradient: getStopsStyle(bg.payload.stops)
+        }
+      );
+    }
+    if (bg.type === "video" && bg.payload) {
+      return /* @__PURE__ */ createElement(
+        VideoBackground,
+        {
+          ...bg.payload,
+          key: bg.id,
+          maskColor: getColor(bg.payload.maskColor)
+        }
+      );
+    }
+    return null;
+  }) });
+}
+function ColorBackground({ color }) {
+  return /* @__PURE__ */ jsx("div", { className: useStyle({ ...containerStyle, backgroundColor: color }) });
+}
+const ImageBackgroundRepeat = {
+  NoRepeat: "no-repeat",
+  RepeatX: "repeat-x",
+  RepeatY: "repeat-y",
+  Repeat: "repeat"
+};
+const ImageBackgroundSize = {
+  Cover: "cover",
+  Contain: "contain",
+  Auto: "auto"
+};
+function ImageBackground({
+  publicUrl,
+  position,
+  repeat = ImageBackgroundRepeat.NoRepeat,
+  size = ImageBackgroundSize.Cover,
+  opacity,
+  parallax,
+  priority
+}) {
+  const backgroundPosition = `${position.x}% ${position.y}%`;
+  const containerClassName = useStyle(containerStyle);
+  if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
+    return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx("div", { ...getParallaxProps({ style: { opacity, overflow: "hidden" } }), children: nextMajorVersion < 13 ? /* @__PURE__ */ jsx(
+      NextLegacyImage,
+      {
+        src: publicUrl,
+        layout: "fill",
+        objectPosition: backgroundPosition,
+        objectFit: size,
+        priority
+      }
+    ) : /* @__PURE__ */ jsx(
+      NextImage,
+      {
+        src: publicUrl,
+        alt: "",
+        fill: true,
+        sizes: "100vw",
+        style: {
+          objectPosition: backgroundPosition,
+          objectFit: size
+        },
+        priority
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClassName,
+      ...getParallaxProps({
+        style: {
+          backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
+          backgroundPosition,
+          backgroundRepeat: repeat,
+          backgroundSize: size,
+          opacity
+        }
+      })
+    }
+  ) });
+}
+function GradientBackground({
+  gradient,
+  isRadial = false,
+  angle = Math.PI
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: useStyle({
+        ...containerStyle,
+        background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
+      })
+    }
+  );
+}
+const BackgroundVideoAspectRatio = {
+  Wide: "wide",
+  Standard: "standard"
+};
+function getAspectRatio(aspectRatio) {
+  switch (aspectRatio) {
+    case "wide":
+      return 16 / 9;
+    case "standard":
+      return 4 / 3;
+    default:
+      return 16 / 9;
+  }
+}
+function VideoBackground({
+  url,
+  aspectRatio,
+  maskColor,
+  zoom,
+  opacity,
+  parallax
+}) {
+  return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx("div", { ...getParallaxProps({ className: useStyle(containerStyle) }), children: /* @__PURE__ */ jsx(
+    BackgroundVideo,
+    {
+      url,
+      zoom,
+      opacity,
+      aspectRatio: getAspectRatio(aspectRatio),
+      maskColor
+    }
+  ) }) });
+}
+export {
+  Backgrounds as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/shared/BackgroundsContainer/components/Backgrounds/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx"],"sourcesContent":["import NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport { BackgroundsPropControllerData, BackgroundsData } from '../../../../hooks'\nimport { ResponsiveValue } from '../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport BackgroundVideo from '../BackgroundVideo'\nimport { CSSObject } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { major as nextMajorVersion } from '../../../../../next/next-version'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\nfunction getColor(color: Color | null | undefined) {\n  if (color == null) return 'black'\n\n  if (color.swatch == null) {\n    return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } })\n  }\n\n  return colorToString(color)\n}\n\ntype GradientStop = { color: Color | null | undefined; location: number }\n\nconst getStopsStyle = (stops: GradientStop[]) =>\n  stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(',')\n\nconst absoluteFillStyle: CSSObject = {\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n}\n\nconst containerStyle: CSSObject = {\n  ...absoluteFillStyle,\n  borderRadius: 'inherit',\n}\n\ntype Props = { backgrounds: BackgroundsPropControllerData | null | undefined }\n\nexport default function Backgrounds({ backgrounds }: Props): JSX.Element {\n  if (backgrounds == null) return <></>\n\n  return (\n    <>\n      {backgrounds.map(({ value, deviceId }) => {\n        const visibility = backgrounds.map(v => ({\n          deviceId: v.deviceId,\n          value: v.deviceId === deviceId,\n        }))\n\n        return <BackgroundDeviceLayer key={deviceId} layer={value} visibility={visibility} />\n      })}\n    </>\n  )\n}\n\ntype BackgroundLayerProps = {\n  layer: BackgroundsData\n  visibility: ResponsiveValue<boolean>\n}\n\nfunction BackgroundDeviceLayer({ layer, visibility }: BackgroundLayerProps) {\n  const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({\n    display: v === true ? 'block' : 'none',\n  }))\n\n  return (\n    <div className={useStyle({ ...containerStyle, ...visibilityStyle, overflow: 'hidden' })}>\n      {[...layer].reverse().map(bg => {\n        if (bg.type === 'color') {\n          return <ColorBackground key={bg.id} color={getColor(bg.payload)} />\n        }\n\n        if (bg.type === 'image' && bg.payload) {\n          return <ImageBackground {...bg.payload} key={bg.id} />\n        }\n\n        if (bg.type === 'gradient' && bg.payload) {\n          return (\n            <GradientBackground\n              {...bg.payload}\n              key={bg.id}\n              gradient={getStopsStyle(bg.payload.stops)}\n            />\n          )\n        }\n\n        if (bg.type === 'video' && bg.payload) {\n          return (\n            <VideoBackground\n              {...bg.payload}\n              key={bg.id}\n              maskColor={getColor(bg.payload.maskColor)}\n            />\n          )\n        }\n\n        return null\n      })}\n    </div>\n  )\n}\n\ntype ColorBackgroundProps = { color: string }\n\nfunction ColorBackground({ color }: ColorBackgroundProps) {\n  return <div className={useStyle({ ...containerStyle, backgroundColor: color })} />\n}\n\nconst ImageBackgroundRepeat = {\n  NoRepeat: 'no-repeat',\n  RepeatX: 'repeat-x',\n  RepeatY: 'repeat-y',\n  Repeat: 'repeat',\n} as const\n\ntype ImageBackgroundRepeat = typeof ImageBackgroundRepeat[keyof typeof ImageBackgroundRepeat]\n\nconst ImageBackgroundSize = {\n  Cover: 'cover',\n  Contain: 'contain',\n  Auto: 'auto',\n} as const\n\ntype ImageBackgroundSize = typeof ImageBackgroundSize[keyof typeof ImageBackgroundSize]\n\ntype ImageBackgroundProps = {\n  publicUrl?: string\n  position: { x: number; y: number }\n  repeat?: ImageBackgroundRepeat\n  size?: ImageBackgroundSize\n  opacity?: number\n  parallax?: number\n  priority?: boolean\n}\n\nfunction ImageBackground({\n  publicUrl,\n  position,\n  repeat = ImageBackgroundRepeat.NoRepeat,\n  size = ImageBackgroundSize.Cover,\n  opacity,\n  parallax,\n  priority,\n}: ImageBackgroundProps) {\n  const backgroundPosition = `${position.x}% ${position.y}%`\n  const containerClassName = useStyle(containerStyle)\n\n  if (repeat === 'no-repeat' && size !== 'auto' && publicUrl != null) {\n    return (\n      <Parallax strength={parallax}>\n        {getParallaxProps => (\n          <div {...getParallaxProps({ style: { opacity, overflow: 'hidden' } })}>\n            {nextMajorVersion < 13 ? (\n              <NextLegacyImage\n                src={publicUrl}\n                layout=\"fill\"\n                objectPosition={backgroundPosition}\n                objectFit={size}\n                priority={priority}\n              />\n            ) : (\n              <NextImage\n                src={publicUrl}\n                alt={''}\n                fill\n                sizes=\"100vw\"\n                style={{\n                  objectPosition: backgroundPosition,\n                  objectFit: size,\n                }}\n                priority={priority}\n              />\n            )}\n          </div>\n        )}\n      </Parallax>\n    )\n  }\n\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <div\n          className={containerClassName}\n          {...getParallaxProps({\n            style: {\n              backgroundImage: publicUrl != null ? `url('${publicUrl}')` : undefined,\n              backgroundPosition,\n              backgroundRepeat: repeat,\n              backgroundSize: size,\n              opacity,\n            },\n          })}\n        />\n      )}\n    </Parallax>\n  )\n}\n\ntype GradientBackgroundProps = {\n  gradient: string\n  angle?: number\n  isRadial?: boolean\n}\n\nfunction GradientBackground({\n  gradient,\n  isRadial = false,\n  angle = Math.PI,\n}: GradientBackgroundProps) {\n  return (\n    <div\n      className={useStyle({\n        ...containerStyle,\n        background: isRadial\n          ? `radial-gradient(${gradient})`\n          : `linear-gradient(${angle}rad, ${gradient})`,\n      })}\n    />\n  )\n}\n\nconst BackgroundVideoAspectRatio = {\n  Wide: 'wide',\n  Standard: 'standard',\n} as const\n\ntype BackgroundVideoAspectRatio =\n  typeof BackgroundVideoAspectRatio[keyof typeof BackgroundVideoAspectRatio]\n\nfunction getAspectRatio(aspectRatio: BackgroundVideoAspectRatio | null | undefined): number {\n  switch (aspectRatio) {\n    case 'wide':\n      return 16 / 9\n\n    case 'standard':\n      return 4 / 3\n\n    default:\n      return 16 / 9\n  }\n}\n\ntype VideoBackgroundProps = {\n  url?: string\n  aspectRatio?: BackgroundVideoAspectRatio\n  maskColor: string\n  zoom?: number\n  opacity?: number\n  parallax?: number\n}\n\nfunction VideoBackground({\n  url,\n  aspectRatio,\n  maskColor,\n  zoom,\n  opacity,\n  parallax,\n}: VideoBackgroundProps) {\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <div {...getParallaxProps({ className: useStyle(containerStyle) })}>\n          <BackgroundVideo\n            url={url}\n            zoom={zoom}\n            opacity={opacity}\n            aspectRatio={getAspectRatio(aspectRatio)}\n            maskColor={maskColor}\n          />\n        </div>\n      )}\n    </Parallax>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/shared/BackgroundsContainer/components/Parallax/index.js

@@ -0,0 +1,84 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import clamp from "../../../../../utils/clamp";
+import { useIsomorphicLayoutEffect } from "../../../../hooks/useIsomorphicLayoutEffect";
+function isScrollable(element) {
+  const { overflow, overflowY, overflowX } = element.ownerDocument.defaultView.getComputedStyle(element);
+  return /(auto|scroll)/.test(overflow + overflowX + overflowY);
+}
+function getScrollParent(element) {
+  const { parentElement } = element;
+  if (!element || !parentElement)
+    return element;
+  if (isScrollable(element))
+    return element;
+  return getScrollParent(parentElement);
+}
+function Parallax({ strength, children, ...rest }) {
+  const container = useRef(null);
+  const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength);
+  const lastScrollParentScrollTop = useRef(0);
+  useIsomorphicLayoutEffect(() => {
+    if (!container.current || strength == null || strength === 0)
+      return void 0;
+    const containerDocument = container.current.ownerDocument;
+    const scrollParent = getScrollParent(container.current);
+    const eventTarget = containerDocument.documentElement === scrollParent ? containerDocument.defaultView : scrollParent;
+    lastScrollParentScrollTop.current = scrollParent.scrollTop;
+    setContainerScrollTop(strength);
+    function handleScroll() {
+      containerDocument.defaultView.requestAnimationFrame(() => {
+        if (!container.current)
+          return;
+        const { top: containerTop, bottom: containerBottom } = container.current.getBoundingClientRect();
+        const { top: scrollParentTop, bottom: scrollParentBottom } = scrollParent === containerDocument.documentElement ? { top: 0, bottom: containerDocument.defaultView.innerHeight } : scrollParent.getBoundingClientRect();
+        const { scrollTop: scrollParentScrollTop } = scrollParent === containerDocument.documentElement ? { scrollTop: containerDocument.defaultView.pageYOffset } : scrollParent;
+        const scrollParentHeight = scrollParentBottom - scrollParentTop;
+        const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current;
+        lastScrollParentScrollTop.current = scrollParentScrollTop;
+        setContainerScrollTop((scrollTop) => {
+          const isContainerVisible = containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop;
+          const containerScrollRemaining = scrollParentScrollDelta > 0 ? 2 * strength - scrollTop : scrollTop;
+          const scrollParentScrollRemaining = scrollParentScrollDelta > 0 ? scrollParentTop + containerBottom : scrollParentHeight - containerTop;
+          const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining;
+          const containerScrollDelta = isContainerVisible ? parallaxRatio * scrollParentScrollDelta : 0;
+          return clamp(0, scrollTop + containerScrollDelta, strength * 2);
+        });
+      });
+    }
+    eventTarget.addEventListener("scroll", handleScroll);
+    return () => eventTarget.removeEventListener("scroll", handleScroll);
+  }, [strength]);
+  const getProps = useCallback(
+    ({ style, ...restOfChildrenProps }) => ({
+      ...restOfChildrenProps,
+      style: {
+        ...style,
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        ...strength == null || strength === 0 ? {} : {
+          top: -strength,
+          bottom: -strength,
+          transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`
+        }
+      }
+    }),
+    [strength, containerScrollTop]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: container,
+      style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 },
+      children: children(getProps)
+    }
+  );
+}
+export {
+  Parallax as default
+};
+//# sourceMappingURL=index.js.map