@fibery/ui-kit 1.38.0 → 1.38.2

package/src/images-gallery-2/images-gallery-2.tsx

@@ -0,0 +1,522 @@
+/* eslint-disable max-lines */
+import PhotoSwipeLightbox, {type PhotoSwipeEventsMap} from "photoswipe/lightbox";
+import "photoswipe/style.css";
+import {
+  ImagesGalleryMethodsProvider,
+  ImagesGalleryRegistryProvider,
+  ImagesGalleryStateProvider,
+} from "../images-gallery/images-gallery";
+import {PropsWithChildren, useCallback, useEffect, useMemo, useReducer, useRef, useState} from "react";
+import {css} from "@linaria/core";
+import {createRoot} from "react-dom/client";
+import {space, themeVars} from "../design-system";
+import {safeAreaInsetLeftVar, safeAreaInsetRightVar, safeAreaInsetTopVar} from "../mobile-styles";
+import {useToast} from "../toast/toast-provider";
+import {ToastQueue} from "../toast/toast-queue";
+import {useThemeMode} from "../theme-provider";
+import {ThemeMode} from "../theme-settings";
+import {SlideButtons} from "./slide-buttons";
+import {useIsPhone} from "../use-is-phone";
+
+type Registry = Map<
+  string,
+  {
+    src: string;
+    type: "image" | "video" | "iframe";
+    contentType?: string;
+    actions?: React.ReactNode;
+    zoomed: boolean;
+    setZoomed: (zoomed: boolean) => void;
+  }
+>;
+
+type Methods = {
+  setVisible: (visible: boolean) => void;
+  setActivated: (activated: boolean) => void;
+  update: () => void;
+  nextImage: () => void;
+  prevImage: () => void;
+};
+
+const galleryMainClass = css`
+  z-index: 1000;
+  & .pswp__button--arrow--prev {
+    left: calc(${space.s20}px + var(${safeAreaInsetLeftVar}));
+    height: ${space.s28}px;
+    width: ${space.s28}px;
+    margin-top: -${space.s14}px;
+  }
+  & .pswp__button--arrow--next {
+    right: calc(${space.s20}px + var(${safeAreaInsetRightVar}));
+    height: ${space.s28}px;
+    width: ${space.s28}px;
+    margin-top: -${space.s14}px;
+  }
+
+  & .pswp__button--zoom {
+    top: ${space.s20}px;
+    height: ${space.s28}px;
+    width: ${space.s28}px;
+  }
+
+  & .pswp__counter {
+    margin-top: ${space.s20}px;
+    margin-inline-start: ${space.s24}px;
+  }
+
+  & .pswp__video-container {
+    padding: ${space.s60}px;
+  }
+
+  & .pswp__video-container video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+    background-color: black;
+  }
+
+  & .pswp__iframe-container {
+    padding: ${space.s60}px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  & .pswp__iframe-container iframe {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+    color: ${themeVars.textColor};
+    background-color: ${themeVars.colorBgPopup};
+    border: none;
+  }
+
+  & .pswp__top-bar {
+    top: var(${safeAreaInsetTopVar});
+    left: var(${safeAreaInsetLeftVar});
+  }
+`;
+
+export function ImagesGalleryProvider2({children}: PropsWithChildren) {
+  const [imagesRegistry] = useState<Registry>(() => new Map());
+  const [galleryState, dispatchState] = useReducer(imagesGalleryReducer, [], initialState);
+
+  const lightbox = useRef<PhotoSwipeLightbox | null>(null);
+  const markAllNotZoomed = useCallback(() => {
+    for (const node of imagesRegistry.values()) {
+      if (node.zoomed) {
+        node.setZoomed(false);
+      }
+    }
+  }, [imagesRegistry]);
+
+  useEffect(() => {
+    return () => {
+      lightbox.current?.destroy();
+      lightbox.current = null;
+      markAllNotZoomed();
+    };
+  }, [markAllNotZoomed]);
+
+  const methods: Methods = useMemo(() => {
+    return {
+      setVisible: () => {},
+      setActivated: (activated: boolean) => {
+        dispatchState({type: "set-activated", payload: activated});
+      },
+      update: () => {
+        dispatchState({type: "inc"});
+      },
+      nextImage: () => {
+        lightbox.current?.pswp?.next();
+      },
+      prevImage: () => {
+        lightbox.current?.pswp?.prev();
+      },
+    };
+  }, []);
+
+  const toast = useToast();
+  const themeMode = useThemeMode();
+  const isPhone = useIsPhone();
+
+  useEffect(() => {
+    if (galleryState.activated) {
+      const value = initGallery(imagesRegistry, {toastQueue: toast, isPhone, themeMode});
+      value.on("close", () => {
+        dispatchState({type: "set-activated", payload: false});
+        markAllNotZoomed();
+        value.destroy();
+      });
+
+      lightbox.current = value;
+    }
+
+    return () => {
+      lightbox.current?.destroy();
+      lightbox.current = null;
+    };
+  }, [galleryState.activated, imagesRegistry, markAllNotZoomed, toast, themeMode, isPhone]);
+
+  return (
+    <ImagesGalleryRegistryProvider value={imagesRegistry}>
+      <ImagesGalleryMethodsProvider value={methods}>
+        <ImagesGalleryStateProvider value={galleryState}>{children}</ImagesGalleryStateProvider>
+      </ImagesGalleryMethodsProvider>
+    </ImagesGalleryRegistryProvider>
+  );
+}
+
+type State = {version: "1" | "2"; visible: boolean; activated: boolean; _inc: number};
+type Actions = {type: "set-visible"; payload: boolean} | {type: "set-activated"; payload: boolean} | {type: "inc"};
+
+function initialState(): State {
+  return {version: "2", visible: false, activated: false, _inc: 0};
+}
+
+function imagesGalleryReducer(state: State, action: Actions) {
+  if (action.type === "set-visible") {
+    return {...state, visible: action.payload};
+  }
+  if (action.type === "set-activated") {
+    return {...state, activated: action.payload};
+  }
+  if (action.type === "inc") {
+    return {...state, _inc: state._inc + 1};
+  }
+  return state;
+}
+
+type GalleryEntry = {
+  type: string;
+  src: string;
+  contentType: string | null;
+  zoomed: boolean;
+  setZoomed: (value: boolean) => void;
+  state: "none" | "loading" | "error" | "loaded";
+  width?: number;
+  height?: number;
+};
+
+function initGallery(
+  imagesRegistry: Registry,
+  {toastQueue, themeMode, isPhone}: {toastQueue: ToastQueue; themeMode: ThemeMode; isPhone: boolean}
+) {
+  const items = [...imagesRegistry.values()];
+  const dataSource: GalleryEntry[] = items.map((item) => ({
+    ...item,
+    state: "none",
+    contentType: item.contentType ?? null,
+  }));
+
+  const zoomedIndex = dataSource.findIndex((item) => item.zoomed);
+
+  const lightbox = new PhotoSwipeLightbox({
+    dataSource,
+    mainClass: galleryMainClass,
+    pswpModule: () => import("photoswipe"),
+    preloaderDelay: 1,
+    arrowPrev: false,
+    arrowNext: false,
+    close: false,
+    zoom: false,
+    loop: false,
+  });
+
+  lightbox.addFilter("numItems", (_numItems) => {
+    return dataSource.length;
+  });
+
+  lightbox.addFilter("itemData", (_itemData, index) => {
+    const item = dataSource[index];
+
+    if (item.type === "video" || item.type === "iframe") {
+      return item;
+    }
+
+    if (item.state === "loaded" || item.state === "error") {
+      return item;
+    }
+
+    return {};
+  });
+
+  lightbox.addFilter("isContentLoading", (_isContentLoading, content) => {
+    const item = dataSource[content.index];
+    if (item.type === "video" || item.type === "iframe") {
+      return false;
+    }
+    const complete = item.state === "loaded" || item.state === "error";
+    return !complete;
+  });
+
+  lightbox.addFilter("useContentPlaceholder", () => false);
+
+  lightbox.init();
+
+  lightbox.on("contentActivate", (e) => {
+    dataSource[e.content.index].setZoomed(true);
+    lightbox.pswp?.element?.focus();
+  });
+
+  lightbox.on("contentDeactivate", (e) => {
+    dataSource[e.content.index].setZoomed(false);
+    e.content.element?.querySelector("video")?.pause();
+  });
+
+  function refreshSlide(index: number) {
+    lightbox.pswp?.refreshSlideContent(index);
+    if (lightbox.pswp?.currIndex === index) {
+      lightbox.pswp?.updateSize(true);
+    }
+  }
+
+  const contentAppendTimeouts = [] as ReturnType<typeof setTimeout>[];
+  lightbox.on("contentAppend", (e) => {
+    // sometimes lightbox's slide is loaded with stale (empty) data
+    if (e.content.data !== dataSource[e.content.index]) {
+      contentAppendTimeouts.push(
+        setTimeout(() => {
+          refreshSlide(e.content.index);
+        }, 0)
+      );
+    }
+  });
+
+  lightbox.on("contentRemove", (e) => {
+    const item = dataSource[e.content.index];
+
+    if (item.type === "video" || item.type === "iframe") {
+      item.state = "none";
+    }
+  });
+
+  lightbox.on("contentLoad", (e) => {
+    const item = dataSource[e.content.index];
+
+    if (item.state === "loading") {
+      return;
+    }
+
+    if (item.state === "none") {
+      e.preventDefault();
+      const eventArgs = {
+        e,
+        item,
+        refreshSlide,
+        getPswp: () => lightbox.pswp,
+        isPhone,
+      };
+
+      switch (item.type) {
+        case "image": {
+          onImageContentLoad(eventArgs);
+          break;
+        }
+        case "video": {
+          onVideoContentLoad(eventArgs);
+          break;
+        }
+        case "iframe": {
+          onIframeContentLoad(eventArgs);
+          break;
+        }
+        default: {
+          throw new Error(`unexpected slide type: ${item.type}`);
+        }
+      }
+    } else if (item.state === "error") {
+      e.preventDefault();
+      e.content.onError();
+    }
+  });
+
+  const HIDE_UI_TIMEOUT_MS = 3000;
+  let forceShowUI = false;
+  let hideTimeout: ReturnType<typeof setTimeout>;
+  let isHidden = false;
+
+  function hideUI() {
+    if (forceShowUI) {
+      return;
+    }
+    lightbox.pswp?.element?.classList.remove("pswp--ui-visible");
+    lightbox.pswp?.element?.classList.add("pswp--hide-cursor");
+    isHidden = true;
+  }
+
+  function showUI() {
+    if (isHidden) {
+      lightbox.pswp?.element?.classList.add("pswp--ui-visible");
+      lightbox.pswp?.element?.classList.remove("pswp--hide-cursor");
+      isHidden = false;
+    }
+    clearTimeout(hideTimeout);
+    hideTimeout = setTimeout(hideUI, HIDE_UI_TIMEOUT_MS);
+  }
+
+  lightbox.on("afterInit", () => {
+    const pswp = lightbox.pswp;
+
+    if (!pswp) {
+      return;
+    }
+
+    pswp.element?.addEventListener("mousemove", showUI);
+    pswp.element?.addEventListener("touchstart", showUI);
+
+    hideTimeout = setTimeout(hideUI, HIDE_UI_TIMEOUT_MS);
+  });
+
+  const uiHandlers = {
+    showUI,
+    setForceShowUI: (value: boolean) => {
+      forceShowUI = value;
+      // resets timer
+      if (!forceShowUI) {
+        showUI();
+      }
+    },
+  };
+
+  lightbox.on("uiRegister", () => {
+    lightbox.pswp?.ui?.registerElement({
+      name: "custom-nav",
+      order: 8,
+      isButton: false,
+      appendTo: "wrapper",
+      onInit: (el, pswp) => {
+        createRoot(el).render(
+          <SlideButtons
+            items={items}
+            pswp={pswp}
+            toastQueue={toastQueue}
+            themeMode={themeMode}
+            uiHandlers={uiHandlers}
+          />
+        );
+      },
+    });
+  });
+
+  lightbox.on("destroy", () => {
+    contentAppendTimeouts.forEach((timeoutId) => {
+      clearTimeout(timeoutId);
+    });
+  });
+
+  lightbox.loadAndOpen(zoomedIndex === -1 ? 0 : zoomedIndex);
+
+  return lightbox;
+}
+
+type ContentLoadArg = {
+  e: PhotoSwipeEventsMap["contentLoad"];
+  item: GalleryEntry;
+  refreshSlide: (index: number) => void;
+  getPswp: () => PhotoSwipeLightbox["pswp"];
+  isPhone: boolean;
+};
+
+function onImageContentLoad({e, item, refreshSlide}: ContentLoadArg) {
+  item.state = "loading";
+  // we ok if content type request fails
+  const contentTypePromise = item.contentType
+    ? Promise.resolve(item.contentType)
+    : fetch(item.src, {method: "HEAD"})
+        .then((response) => response.headers.get("content-type"))
+        .catch();
+
+  const contentPromise = new Promise<{width: number; height: number}>((resolve, reject) => {
+    const onLoad = () => {
+      resolve({
+        width: img.naturalWidth,
+        height: img.naturalHeight,
+      });
+    };
+
+    const img = new Image();
+    img.src = item.src;
+    if (img.complete) {
+      onLoad();
+    }
+    img.onload = () => onLoad();
+    img.onerror = () => {
+      reject("error");
+    };
+  });
+
+  Promise.allSettled([contentTypePromise, contentPromise]).then(([contentTypeResult, contentResult]) => {
+    if (contentResult.status === "rejected") {
+      item.state = "error";
+      refreshSlide(e.content.index);
+      e.content.onError();
+      return;
+    }
+
+    item.state = "loaded";
+    item.width = contentResult.value.width;
+    item.height = contentResult.value.height;
+
+    // normalize
+    if (contentTypeResult.status === "fulfilled" && contentTypeResult.value?.startsWith("image/svg")) {
+      const scale = Math.min(3000 / item.width!, 3000 / item.height!);
+      item.width = Math.ceil(scale * item.width!);
+      item.height = Math.ceil(scale * item.height!);
+    }
+
+    refreshSlide(e.content.index);
+    e.content.onLoaded();
+  });
+}
+
+function onVideoContentLoad({e, item, refreshSlide, getPswp, isPhone}: ContentLoadArg) {
+  item.state = "loaded";
+
+  e.content.element = document.createElement("div");
+  e.content.element.className = "pswp__video-container";
+  e.content.element.onclick = () => {
+    getPswp()?.close();
+  };
+
+  const video = document.createElement("video");
+  video.controls = true;
+  video.src = item.src;
+  video.onerror = () => {
+    item.state = "error";
+    refreshSlide(e.content.index);
+    e.content.onError();
+  };
+  video.onclick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isPhone) {
+      return;
+    }
+    if (video.paused) {
+      video.play().catch();
+    } else {
+      video.pause();
+    }
+  };
+
+  e.content.element.appendChild(video);
+}
+
+function onIframeContentLoad({e, item, getPswp}: ContentLoadArg) {
+  item.state = "loaded";
+
+  e.content.element = document.createElement("div");
+  e.content.element.className = "pswp__iframe-container";
+
+  e.content.element.onclick = () => {
+    getPswp()?.close();
+  };
+
+  const iframe = document.createElement("iframe");
+  iframe.src = item.src;
+  iframe.setAttribute("allowfullscreen", "");
+  e.content.element.appendChild(iframe);
+}