@fibery/ui-kit 1.39.1 → 1.40.0

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

@@ -1,24 +1,26 @@
-import {ReactNode, useCallback, useEffect, useMemo, useReducer, useRef, useState} from "react";
-import _ from "lodash";
-import {createContext} from "@fibery/react/src/create-context";
-import {useIsPhone} from "../use-is-phone";
-import {safeAreaInsetBottomVar} from "../mobile-styles";
-import {buttonGroup, ButtonGroup} from "../button/button-group";
-import {IconButton} from "../button/icon-button";
-import ArrowRight from "../icons/react/ArrowRight";
-import ArrowLeft from "../icons/react/ArrowLeft";
+/* eslint-disable max-lines */
+import PhotoSwipeLightbox, {type PhotoSwipeEventsMap, type PhotoSwipeOptions} from "photoswipe/lightbox";
+import "photoswipe/style.css";
+import {PropsWithChildren, useCallback, useEffect, useMemo, useReducer, useRef, useState} from "react";
 import {css} from "@linaria/core";
-import cx from "classnames";
+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, {zoomed: boolean; setZoomed: (zoomed: boolean) => void; src: string}>;
+import _ from "lodash";
+import {createContext} from "@fibery/react/src/create-context";
 
 const [ImagesGalleryRegistryProvider, useImagesGalleryRegistry] = createContext(
   "ImagesGalleryRegistryContext",
   new Map()
 );
 
-export {ImagesGalleryRegistryProvider, useImagesGalleryRegistry};
-
 type Methods = {
   setVisible: (visible: boolean) => void;
   setActivated: (activated: boolean) => void;
@@ -26,6 +28,9 @@ type Methods = {
   nextImage: () => void;
   prevImage: () => void;
 };
+
+export {ImagesGalleryRegistryProvider, useImagesGalleryRegistry};
+
 const [ImagesGalleryMethodsProvider, useImagesGalleryMethods] = createContext<Methods>("ImagesGalleryMethodsProvider", {
   setVisible: _.noop,
   setActivated: _.noop,
@@ -46,10 +51,154 @@ export {
   ImagesGalleryStateContext,
 };
 
+type Registry = Map<
+  string,
+  {
+    src: string;
+    label?: string;
+    type: "image" | "video" | "iframe";
+    contentType?: string;
+    actions?: React.ReactNode;
+    zoomed: boolean;
+    setZoomed: (zoomed: boolean) => void;
+  }
+>;
+
+export 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 ImagesGalleryProvider({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 Actions = {type: "set-visible"; payload: boolean} | {type: "set-activated"; payload: boolean} | {type: "inc"};
 
 function initialState(): State {
-  return {version: "1", visible: false, activated: false, _inc: 0};
+  return {version: "2", visible: false, activated: false, _inc: 0};
 }
 
 function imagesGalleryReducer(state: State, action: Actions) {
@@ -65,193 +214,383 @@ function imagesGalleryReducer(state: State, action: Actions) {
   return state;
 }
 
-const controlsGroupStyle = css`
-  &.${buttonGroup} {
-    display: none;
-  }
-`;
+type GalleryEntry = {
+  type: string;
+  src: string;
+  contentType: string | null;
+  zoomed: boolean;
+  setZoomed: (value: boolean) => void;
+  state: "none" | "loading" | "error" | "loaded";
+  width?: number;
+  height?: number;
+};
 
-export function Controls() {
-  const imagesRegistry = useImagesGalleryRegistry();
-  const {visible} = useImagesGalleryState();
-  const isPhone = useIsPhone();
-  const {prevImage, nextImage, setVisible} = useImagesGalleryMethods();
-  // Determine if there is a zoomed image and its position in the registry
-  let activeNext = true;
-  let activePrev = true;
-  let i = 0;
-  for (const image of imagesRegistry.values()) {
-    if (image.zoomed) {
-      if (i === 0) {
-        activePrev = false;
-      }
-      if (i === imagesRegistry.size - 1) {
-        activeNext = false;
-      }
-      break;
+function attachCustomControls(
+  lightbox: PhotoSwipeLightbox,
+  items: {
+    src: string;
+    label?: string;
+    type: "image" | "video" | "iframe";
+    contentType?: string;
+    actions?: React.ReactNode;
+    zoomed: boolean;
+    setZoomed: (zoomed: boolean) => void;
+  }[],
+  toastQueue: ToastQueue,
+  themeMode: ThemeMode
+) {
+  const HIDE_UI_TIMEOUT_MS = 3000;
+  let forceShowUI = false;
+  let hideTimeout: ReturnType<typeof setTimeout>;
+  let isHidden = false;
+
+  function hideUI() {
+    if (forceShowUI) {
+      return;
     }
-    i++;
+    lightbox.pswp?.element?.classList.remove("pswp--ui-visible");
+    lightbox.pswp?.element?.classList.add("pswp--hide-cursor");
+    isHidden = true;
   }
-  const visibleState = visible || isPhone;
-  if (imagesRegistry.size > 1) {
-    const size = isPhone ? "xLarge" : "small";
-    return (
-      <div
-        className={css`
-          position: fixed;
-          bottom: max(var(${safeAreaInsetBottomVar}), 12px);
-          left: 0;
-          right: 0;
-          display: grid;
-          align-items: center;
-          justify-content: center;
-          &:hover .${controlsGroupStyle}.${buttonGroup} {
-            display: flex;
-          }
-        `}
-      >
-        <ButtonGroup
-          className={cx(
-            controlsGroupStyle,
-            visibleState &&
-              css`
-                &.${controlsGroupStyle}.${buttonGroup} {
-                  display: flex;
-                }
-              `
-          )}
-        >
-          <IconButton
-            variant={"outline"}
-            size={size}
-            onClick={() => {
-              prevImage();
-              setVisible(true);
-            }}
-            disabled={!activePrev}
-          >
-            <ArrowLeft />
-          </IconButton>
-          <IconButton
-            variant={"outline"}
-            size={size}
-            onClick={() => {
-              nextImage();
-              setVisible(true);
-            }}
-            disabled={!activeNext}
-          >
-            <ArrowRight />
-          </IconButton>
-        </ButtonGroup>
-      </div>
-    );
+
+  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);
   }
-  return null;
+
+  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}
+          />
+        );
+      },
+    });
+  });
 }
 
-export function ImagesGalleryProvider({children}: {children: ReactNode}) {
-  const [imagesRegistry] = useState<Registry>(() => new Map());
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
-  const [galleryState, dispatchState] = useReducer(imagesGalleryReducer, [], initialState);
-  const setVisible = useCallback((visible: boolean) => dispatchState({type: "set-visible", payload: visible}), []);
-  const setActivated = useCallback(
-    (activated: boolean) => dispatchState({type: "set-activated", payload: activated}),
-    []
+export function createPhotoSwipeLightbox(
+  {
+    dataSource,
+    ...rest
+  }: Partial<Omit<PhotoSwipeOptions, "dataSource">> & {
+    dataSource: {src: string; label?: string; width: number; height: number; alt?: string}[];
+  },
+  {themeMode, toastQueue}: {themeMode: ThemeMode; toastQueue: ToastQueue}
+) {
+  const photoSwipeLightbox = new PhotoSwipeLightbox({
+    dataSource: dataSource,
+    mainClass: galleryMainClass,
+    pswpModule: () => import("photoswipe"),
+    preloaderDelay: 1,
+    arrowPrev: false,
+    arrowNext: false,
+    close: false,
+    zoom: false,
+    loop: false,
+    ...rest,
+  });
+  attachCustomControls(
+    photoSwipeLightbox,
+    dataSource.map(() => {
+      return {src: "", type: "image", zoomed: false, setZoomed: () => {}};
+    }),
+    toastQueue,
+    themeMode
   );
-  const update = useCallback(() => dispatchState({type: "inc"}), []);
-  const {visible} = galleryState;
-  const timeout = 3000;
-  useEffect(() => {
-    if (visible) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => {
-        setVisible(false);
-      }, timeout);
+  return photoSwipeLightbox;
+}
+
+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;
     }
-    return () => {
-      clearTimeout(timeoutRef.current);
-    };
-  }, [setVisible, visible]);
-  const nextImage = useCallback(() => {
-    let i = 0;
-    for (const image of imagesRegistry.values()) {
-      if (image.zoomed) {
-        if (i === imagesRegistry.size - 1) {
+
+    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;
         }
-        image.setZoomed(false);
-        const nextImage = Array.from(imagesRegistry.values())[i + 1];
-        nextImage.setZoomed(true);
-        break;
-      }
-      i++;
-    }
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setVisible(false);
-    }, timeout);
-  }, [imagesRegistry, setVisible]);
-
-  const prevImage = useCallback(() => {
-    let i = 0;
-    for (const image of imagesRegistry.values()) {
-      if (image.zoomed) {
-        if (i === 0) {
+        case "video": {
+          onVideoContentLoad(eventArgs);
+          break;
+        }
+        case "iframe": {
+          onIframeContentLoad(eventArgs);
           break;
         }
-        image.setZoomed(false);
-        const prevImage = Array.from(imagesRegistry.values())[i - 1];
-        prevImage.setZoomed(true);
-        break;
+        default: {
+          throw new Error(`unexpected slide type: ${item.type}`);
+        }
       }
-      i++;
+    } else if (item.state === "error") {
+      e.preventDefault();
+      e.content.onError();
     }
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setVisible(false);
-    }, timeout);
-  }, [imagesRegistry, setVisible]);
-
-  const methods = useMemo(
-    () => ({setVisible, setActivated, update, nextImage, prevImage}),
-    [setVisible, setActivated, update, nextImage, prevImage]
-  );
+  });
 
-  useEffect(() => {
-    const listener = (evt: KeyboardEvent) => {
-      const hasActive = Array.from(imagesRegistry.values()).some((image) => image.zoomed);
-      if (!hasActive) {
-        return;
-      }
-      if (evt.key === "Escape") {
-        for (const image of imagesRegistry.values()) {
-          if (image.zoomed) {
-            image.setZoomed(false);
-            break;
-          }
-        }
-      }
-      if (evt.key === "ArrowRight") {
-        nextImage();
-      }
-      if (evt.key === "ArrowLeft") {
-        prevImage();
-      }
+  attachCustomControls(lightbox, items, toastQueue, themeMode);
+
+  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,
+      });
     };
-    document.addEventListener("keydown", listener, {capture: true});
-    return () => {
-      document.removeEventListener("keydown", listener, {capture: true});
+
+    const img = new Image();
+    img.src = item.src;
+    if (img.complete) {
+      onLoad();
+    }
+    img.onload = () => onLoad();
+    img.onerror = () => {
+      reject("error");
     };
-  }, [imagesRegistry, nextImage, prevImage]);
+  });
 
-  return (
-    <>
-      <ImagesGalleryRegistryProvider value={imagesRegistry}>
-        <ImagesGalleryMethodsProvider value={methods}>
-          <ImagesGalleryStateProvider value={galleryState}>{children}</ImagesGalleryStateProvider>
-        </ImagesGalleryMethodsProvider>
-      </ImagesGalleryRegistryProvider>
-    </>
-  );
+  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);
 }