@seshuk/payload-media-preview 1.0.0

package/dist/components/Modal/Modal.js

@@ -0,0 +1,277 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, useModal, useTranslation } from "@payloadcms/ui";
+import { XIcon } from "@payloadcms/ui/icons/X";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { MediaPreviewViewer } from "../Viewer/Viewer.js";
+import { AUDIO_DIMENSIONS, POPUP_DIMENSIONS, SPACING } from "./Modal.constants.js";
+import "./Modal.scss";
+export const MediaPreviewModal = ({ customViewer, media, mode, onClose, rowId, show, triggerRef })=>{
+    const { documentViewerUrl, height, mimeType, url, width } = media;
+    const [position, setPosition] = useState('bottom');
+    const [popupStyle, setPopupStyle] = useState({});
+    const popupRef = useRef(null);
+    const previousModalOpenRef = useRef(false);
+    const { closeModal, isModalOpen, openModal } = useModal();
+    const { t } = useTranslation();
+    const modalSlug = useMemo(()=>`media-preview-${rowId || 'field'}`, [
+        rowId
+    ]);
+    const isAudio = useMemo(()=>mimeType?.startsWith('audio/'), [
+        mimeType
+    ]);
+    const isVideo = useMemo(()=>mimeType?.startsWith('video/'), [
+        mimeType
+    ]);
+    const isImage = useMemo(()=>mimeType?.startsWith('image/'), [
+        mimeType
+    ]);
+    const getPopupDimensions = useCallback(()=>{
+        if (isImage && width && height) {
+            const aspectRatio = width / height;
+            let popupHeight = POPUP_DIMENSIONS.MAX_HEIGHT;
+            let popupWidth = popupHeight * aspectRatio;
+            if (popupWidth > POPUP_DIMENSIONS.MAX_WIDTH) {
+                popupWidth = POPUP_DIMENSIONS.MAX_WIDTH;
+                popupHeight = popupWidth / aspectRatio;
+            }
+            return {
+                height: Math.max(POPUP_DIMENSIONS.MIN_HEIGHT, popupHeight),
+                width: Math.max(POPUP_DIMENSIONS.MIN_WIDTH, popupWidth)
+            };
+        }
+        if (isAudio) {
+            return {
+                height: AUDIO_DIMENSIONS.HEIGHT,
+                width: AUDIO_DIMENSIONS.WIDTH
+            };
+        }
+        return {
+            height: POPUP_DIMENSIONS.MAX_HEIGHT,
+            width: POPUP_DIMENSIONS.MAX_WIDTH
+        };
+    }, [
+        isImage,
+        width,
+        height,
+        isAudio
+    ]);
+    const calculatePopupPosition = useCallback(()=>{
+        if (!triggerRef?.current || mode !== 'popup') {
+            return;
+        }
+        const rect = triggerRef.current.getBoundingClientRect();
+        const { height: popupHeight, width: popupWidth } = getPopupDimensions();
+        const spacingTop = SPACING.CARET_SIZE + SPACING.TOP;
+        const spacingBottom = SPACING.CARET_SIZE + SPACING.BOTTOM;
+        const viewportWidth = document.documentElement.clientWidth;
+        const viewportHeight = document.documentElement.clientHeight;
+        let top;
+        let selectedPosition;
+        let left = rect.left + rect.width / 2 - popupWidth / 2;
+        const buttonCenterX = rect.left + rect.width / 2;
+        if (left + popupWidth > viewportWidth - SPACING.VIEWPORT_MARGIN) {
+            left = viewportWidth - popupWidth - SPACING.VIEWPORT_MARGIN;
+        }
+        if (left < SPACING.VIEWPORT_MARGIN) {
+            left = SPACING.VIEWPORT_MARGIN;
+        }
+        const caretLeft = buttonCenterX - left;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        if (spaceBelow >= popupHeight + spacingBottom) {
+            selectedPosition = 'bottom';
+            top = rect.bottom + spacingBottom;
+        } else if (spaceAbove >= popupHeight + spacingTop) {
+            selectedPosition = 'top';
+            top = rect.top - popupHeight - spacingTop;
+        } else {
+            if (spaceAbove > spaceBelow) {
+                selectedPosition = 'top';
+                top = rect.top - popupHeight - spacingTop;
+            } else {
+                selectedPosition = 'bottom';
+                top = rect.bottom + spacingBottom;
+            }
+        }
+        setPosition(selectedPosition);
+        setPopupStyle({
+            '--caret-left': `${caretLeft}px`,
+            '--popup-height': `${popupHeight}px`,
+            '--popup-width': `${popupWidth}px`,
+            left: `${left}px`,
+            top: `${top}px`
+        });
+    }, [
+        triggerRef,
+        mode,
+        getPopupDimensions
+    ]);
+    useEffect(()=>{
+        if (mode === 'fullscreen') {
+            if (show && !isModalOpen(modalSlug)) {
+                openModal(modalSlug);
+            }
+        }
+    }, [
+        show,
+        mode,
+        modalSlug,
+        isModalOpen,
+        openModal
+    ]);
+    useEffect(()=>{
+        if (mode === 'fullscreen' && !show && isModalOpen(modalSlug)) {
+            closeModal(modalSlug);
+        }
+    }, [
+        show,
+        mode,
+        modalSlug,
+        isModalOpen,
+        closeModal
+    ]);
+    useEffect(()=>{
+        if (mode === 'fullscreen') {
+            const currentModalOpen = isModalOpen(modalSlug);
+            if (previousModalOpenRef.current && !currentModalOpen && show) {
+                onClose?.();
+            }
+            previousModalOpenRef.current = currentModalOpen;
+        }
+    }, [
+        isModalOpen,
+        modalSlug,
+        mode,
+        show,
+        onClose
+    ]);
+    useEffect(()=>{
+        if (show && mode === 'popup') {
+            calculatePopupPosition();
+            window.addEventListener('resize', calculatePopupPosition);
+            window.addEventListener('scroll', calculatePopupPosition, true);
+            return ()=>{
+                window.removeEventListener('resize', calculatePopupPosition);
+                window.removeEventListener('scroll', calculatePopupPosition, true);
+            };
+        }
+    }, [
+        show,
+        mode,
+        calculatePopupPosition
+    ]);
+    const handleClickOutside = useCallback((event)=>{
+        if (popupRef.current && !popupRef.current.contains(event.target) && triggerRef?.current && !triggerRef.current.contains(event.target)) {
+            onClose?.();
+        }
+    }, [
+        onClose,
+        triggerRef
+    ]);
+    useEffect(()=>{
+        if (!show || mode !== 'popup') {
+            return;
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return ()=>{
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [
+        show,
+        mode,
+        handleClickOutside
+    ]);
+    const handleModalClose = useCallback(()=>{
+        closeModal(modalSlug);
+        onClose?.();
+    }, [
+        closeModal,
+        modalSlug,
+        onClose
+    ]);
+    const handleBackdropClick = useCallback((e)=>{
+        if ('key' in e && e.key !== 'Enter' && e.key !== ' ') {
+            return;
+        }
+        const target = e.target;
+        if (target.tagName === 'IMG' || target.tagName === 'VIDEO' || target.tagName === 'AUDIO' || target.tagName === 'IFRAME' || target.classList.contains('media-preview-modal__close') || target.closest('.media-preview-modal__close')) {
+            return;
+        }
+        handleModalClose();
+    }, [
+        handleModalClose
+    ]);
+    const viewerContent = useMemo(()=>{
+        if (customViewer) {
+            return customViewer;
+        }
+        return /*#__PURE__*/ _jsx(MediaPreviewViewer, {
+            className: documentViewerUrl ? 'media-preview-modal__iframe' : isVideo ? 'media-preview-modal__video' : isAudio ? 'media-preview-modal__audio' : 'media-preview-modal__image',
+            media: {
+                documentViewerUrl,
+                mimeType,
+                url
+            },
+            title: isVideo ? t('@seshuk/payload-media-preview:titleVideo') : isImage ? t('@seshuk/payload-media-preview:titleImage') : isAudio ? t('@seshuk/payload-media-preview:titleAudio') : t('@seshuk/payload-media-preview:titleDocument')
+        });
+    }, [
+        customViewer,
+        documentViewerUrl,
+        isVideo,
+        isAudio,
+        isImage,
+        mimeType,
+        url,
+        t
+    ]);
+    if (mode === 'popup') {
+        if (!show) {
+            return null;
+        }
+        return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx("div", {
+            className: `media-preview-modal media-preview-modal--popup media-preview-modal--show media-preview-modal--position-${position}`,
+            ref: popupRef,
+            style: popupStyle,
+            children: /*#__PURE__*/ _jsx("div", {
+                className: "media-preview-modal__body",
+                children: viewerContent
+            })
+        }), document.body);
+    }
+    if (!isModalOpen(modalSlug)) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(Modal, {
+        className: "media-preview-modal media-preview-modal--fullscreen",
+        onClick: handleBackdropClick,
+        slug: modalSlug,
+        children: /*#__PURE__*/ _jsxs("div", {
+            "aria-label": t('@seshuk/payload-media-preview:close'),
+            className: "media-preview-modal__wrapper",
+            onClick: handleBackdropClick,
+            onKeyDown: handleBackdropClick,
+            role: "button",
+            tabIndex: -1,
+            children: [
+                /*#__PURE__*/ _jsx("button", {
+                    "aria-label": t('@seshuk/payload-media-preview:close'),
+                    className: "drawer-close-button media-preview-modal__close",
+                    onClick: handleModalClose,
+                    type: "button",
+                    children: /*#__PURE__*/ _jsx(XIcon, {})
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "media-preview-modal__content",
+                    role: "dialog",
+                    tabIndex: -1,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "media-preview-modal__body",
+                        children: viewerContent
+                    })
+                })
+            ]
+        })
+    });
+};

package/dist/components/Modal/Modal.scss

@@ -0,0 +1,173 @@
+@import '~@payloadcms/ui/scss';
+
+.media-preview-modal {
+  &--popup {
+    --popup-caret-size: 10px;
+    --popup-padding: calc(var(--base) * 0.5);
+    --popup-width: 480px;
+    --popup-height: 290px;
+
+    position: fixed;
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    background: var(--theme-elevation-0);
+    border-radius: 4px;
+    padding: var(--popup-padding);
+    pointer-events: auto;
+    transition: opacity 0.2s ease-in-out;
+    will-change: opacity, transform;
+    max-height: 100vh;
+    overflow: visible;
+
+    html[data-theme='dark'] & {
+      background: var(--theme-elevation-100);
+    }
+
+    &.media-preview-modal--show {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      border: var(--popup-caret-size) solid transparent;
+    }
+
+    &.media-preview-modal--position-top {
+      @include shadow-lg;
+
+      &::after {
+        top: calc(100% - 1px);
+        left: var(--caret-left, 50%);
+        transform: translateX(-50%);
+        border-top-color: var(--theme-elevation-0);
+
+        html[data-theme='dark'] & {
+          border-top-color: var(--theme-elevation-100);
+        }
+      }
+    }
+
+    &.media-preview-modal--position-bottom {
+      @include shadow-lg-top;
+
+      &::after {
+        bottom: calc(100% - 1px);
+        left: var(--caret-left, 50%);
+        transform: translateX(-50%);
+        border-bottom-color: var(--theme-elevation-0);
+
+        html[data-theme='dark'] & {
+          border-bottom-color: var(--theme-elevation-100);
+        }
+      }
+    }
+  }
+
+  &--fullscreen {
+    @include blur-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  &__body {
+    position: relative;
+  }
+
+  &--popup &__body {
+    width: var(--popup-width);
+    height: var(--popup-height);
+    max-width: 90vw;
+    max-height: calc(100vh - 2rem);
+    overflow: auto;
+  }
+
+  &--fullscreen &__body {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border-radius-m);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+  }
+
+  &__wrapper {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+    cursor: pointer;
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+    max-width: min(90vw, calc(100vh * 1.6));
+    max-height: 90vh;
+    width: 100%;
+    height: 100%;
+    cursor: default;
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__close {
+    position: absolute;
+    top: calc(var(--base) * 0.5);
+    right: calc(var(--base) * 0.5);
+    z-index: 10;
+    pointer-events: auto;
+  }
+
+  &--popup &__body &__iframe,
+  &--popup &__body &__video,
+  &--popup &__body &__image,
+  &--popup &__body &__audio {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: var(--border-radius-s);
+    object-fit: contain;
+  }
+
+  &--fullscreen &__body &__iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: var(--border-radius-s);
+    object-fit: contain;
+    min-height: 60vh;
+  }
+
+  &--fullscreen &__body &__video {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: var(--border-radius-s);
+  }
+
+  &--fullscreen &__body &__image {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--border-radius-s);
+  }
+
+  @media (max-width: 768px) {
+    &--popup &__body {
+      width: min(400px, calc(100vw - 64px));
+    }
+  }
+}

package/dist/components/Viewer/AudioViewer.d.ts

@@ -0,0 +1,3 @@
+import type { AudioViewerProps } from '@/types.js';
+import React from 'react';
+export declare const AudioViewer: React.FC<AudioViewerProps>;

package/dist/components/Viewer/AudioViewer.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+export const AudioViewer = ({ autoPlay = true, className, controls = true, loop = false, mimeType, muted = false, preload = 'metadata', src, title })=>{
+    return(// eslint-disable-next-line jsx-a11y/control-has-associated-label
+    /*#__PURE__*/ _jsxs("audio", {
+        autoPlay: autoPlay,
+        className: className,
+        controls: controls,
+        loop: loop,
+        muted: muted,
+        preload: preload,
+        title: title,
+        children: [
+            /*#__PURE__*/ _jsx("source", {
+                src: src,
+                type: mimeType
+            }),
+            /*#__PURE__*/ _jsx("track", {
+                kind: "captions"
+            })
+        ]
+    }));
+};

package/dist/components/Viewer/IframeViewer.d.ts

@@ -0,0 +1,3 @@
+import type { IframeViewerProps } from '@/types.js';
+import React from 'react';
+export declare const IframeViewer: React.FC<IframeViewerProps>;

package/dist/components/Viewer/IframeViewer.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+export const IframeViewer = ({ allow = 'accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;', allowFullScreen = true, className, loading = 'lazy', src, title })=>{
+    return(// eslint-disable-next-line @eslint-react/dom/no-missing-iframe-sandbox
+    /*#__PURE__*/ _jsx("iframe", {
+        allow: allow,
+        allowFullScreen: allowFullScreen,
+        className: className,
+        loading: loading,
+        src: src,
+        title: title
+    }));
+};

package/dist/components/Viewer/ImageViewer.d.ts

@@ -0,0 +1,3 @@
+import type { ImageViewerProps } from '@/types.js';
+import React from 'react';
+export declare const ImageViewer: React.FC<ImageViewerProps>;

package/dist/components/Viewer/ImageViewer.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+export const ImageViewer = ({ alt = 'Image preview', className, src })=>{
+    return /*#__PURE__*/ _jsx("img", {
+        alt: alt,
+        className: className,
+        src: src
+    });
+};

package/dist/components/Viewer/VideoViewer.d.ts

@@ -0,0 +1,3 @@
+import type { VideoViewerProps } from '@/types.js';
+import React from 'react';
+export declare const VideoViewer: React.FC<VideoViewerProps>;

package/dist/components/Viewer/VideoViewer.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+export const VideoViewer = ({ autoPlay = true, className, controls = true, loop = false, mimeType, muted = false, preload = 'metadata', src, title })=>{
+    return(// eslint-disable-next-line jsx-a11y/control-has-associated-label
+    /*#__PURE__*/ _jsxs("video", {
+        autoPlay: autoPlay,
+        className: className,
+        controls: controls,
+        loop: loop,
+        muted: muted,
+        playsInline: autoPlay,
+        preload: preload,
+        title: title,
+        children: [
+            /*#__PURE__*/ _jsx("source", {
+                src: src,
+                type: mimeType
+            }),
+            /*#__PURE__*/ _jsx("track", {
+                kind: "captions"
+            })
+        ]
+    }));
+};

package/dist/components/Viewer/Viewer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type ViewerProps = {
+    className?: string;
+    media: {
+        documentViewerUrl?: null | string;
+        mimeType?: string;
+        url?: string;
+    };
+    title?: string;
+};
+export declare const MediaPreviewViewer: React.FC<ViewerProps>;
+export {};

package/dist/components/Viewer/Viewer.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { AudioViewer } from "./AudioViewer.js";
+import { IframeViewer } from "./IframeViewer.js";
+import { ImageViewer } from "./ImageViewer.js";
+import { VideoViewer } from "./VideoViewer.js";
+export const MediaPreviewViewer = ({ className, media, title })=>{
+    const { documentViewerUrl, mimeType, url } = media;
+    const isAudio = useMemo(()=>mimeType?.startsWith('audio/'), [
+        mimeType
+    ]);
+    const isVideo = useMemo(()=>mimeType?.startsWith('video/'), [
+        mimeType
+    ]);
+    const isImage = useMemo(()=>mimeType?.startsWith('image/'), [
+        mimeType
+    ]);
+    if (isAudio && url) {
+        return /*#__PURE__*/ _jsx(AudioViewer, {
+            className: className,
+            mimeType: mimeType,
+            src: url,
+            title: title
+        });
+    }
+    if (isVideo && url) {
+        return /*#__PURE__*/ _jsx(VideoViewer, {
+            className: className,
+            mimeType: mimeType,
+            src: url,
+            title: title
+        });
+    }
+    if (isImage && url) {
+        return /*#__PURE__*/ _jsx(ImageViewer, {
+            alt: title || 'Image preview',
+            className: className,
+            src: url
+        });
+    }
+    if (documentViewerUrl) {
+        return /*#__PURE__*/ _jsx(IframeViewer, {
+            className: className,
+            src: documentViewerUrl,
+            title: title || 'Document preview'
+        });
+    }
+    return null;
+};

package/dist/components/adapterResolver.d.ts

@@ -0,0 +1,13 @@
+import type { MediaPreviewAdapterInlineResult, MediaPreviewAdapterNewTabResult, MediaPreviewAdapterResolveArgs } from '@/types.js';
+import type { ImportMap, SanitizedConfig } from 'payload';
+type PayloadLike = {
+    config: SanitizedConfig;
+    importMap: ImportMap;
+};
+export type AdapterMatch = {
+    adapterName: string;
+    result: MediaPreviewAdapterInlineResult | MediaPreviewAdapterNewTabResult;
+};
+export declare const resolveAdapter: (payloadLike: PayloadLike, adapterNames: string[] | undefined, args: MediaPreviewAdapterResolveArgs) => AdapterMatch | null;
+export declare const resolveAdapterViewer: (payloadLike: PayloadLike, match: AdapterMatch | null) => null | React.ReactNode;
+export {};

package/dist/components/adapterResolver.js

@@ -0,0 +1,43 @@
+import { RenderServerComponent } from "@payloadcms/ui/elements/RenderServerComponent";
+const getAdapters = (config)=>{
+    const pluginData = config.custom?.['@seshuk/payload-media-preview'];
+    return pluginData?.adapters ?? [];
+};
+const filterAdapters = (allAdapters, adapterNames)=>{
+    if (!adapterNames) {
+        return allAdapters;
+    }
+    return allAdapters.filter((a)=>adapterNames.includes(a.name));
+};
+export const resolveAdapter = (payloadLike, adapterNames, args)=>{
+    const allAdapters = getAdapters(payloadLike.config);
+    if (allAdapters.length === 0) {
+        return null;
+    }
+    const adapters = filterAdapters(allAdapters, adapterNames);
+    for (const adapter of adapters){
+        const result = adapter.resolve(args);
+        if (result) {
+            return {
+                adapterName: adapter.name,
+                result
+            };
+        }
+    }
+    return null;
+};
+export const resolveAdapterViewer = (payloadLike, match)=>{
+    if (!match || match.result.mode !== 'inline') {
+        return null;
+    }
+    const depKey = `media-preview-viewer-${match.adapterName}`;
+    const dep = payloadLike.config.admin?.dependencies?.[depKey];
+    if (!dep) {
+        return null;
+    }
+    return RenderServerComponent({
+        clientProps: match.result.props,
+        Component: dep,
+        importMap: payloadLike.importMap
+    });
+};

package/dist/exports/client.d.ts

@@ -0,0 +1,5 @@
+export { MediaPreviewFieldClient } from '@/components/Field/Field.js';
+export { AudioViewer } from '@/components/Viewer/AudioViewer.js';
+export { IframeViewer } from '@/components/Viewer/IframeViewer.js';
+export { ImageViewer } from '@/components/Viewer/ImageViewer.js';
+export { VideoViewer } from '@/components/Viewer/VideoViewer.js';

package/dist/exports/client.js

@@ -0,0 +1,5 @@
+export { MediaPreviewFieldClient } from "../components/Field/Field.js";
+export { AudioViewer } from "../components/Viewer/AudioViewer.js";
+export { IframeViewer } from "../components/Viewer/IframeViewer.js";
+export { ImageViewer } from "../components/Viewer/ImageViewer.js";
+export { VideoViewer } from "../components/Viewer/VideoViewer.js";

package/dist/exports/rsc.d.ts

@@ -0,0 +1,2 @@
+export { MediaPreviewCell } from '@/components/Cell/Cell.server.js';
+export { MediaPreview } from '@/components/MediaPreview.js';