@seshuk/payload-media-preview 1.0.0

package/dist/components/Cell/Cell.scss

@@ -0,0 +1,43 @@
+@import '~@payloadcms/ui/scss';
+
+td.cell-mediaPreview {
+  position: static !important;
+  z-index: auto !important;
+
+  &:has(.media-preview-cell) {
+    vertical-align: middle !important;
+  }
+}
+
+.media-preview-cell {
+  &__button-wrapper {
+    all: unset;
+    cursor: pointer;
+    display: inline-block;
+  }
+
+  &__pill {
+    color: var(--theme-elevation-800);
+    box-shadow: 0 0 0 1px var(--theme-elevation-150);
+    cursor: pointer;
+    gap: calc(var(--base) * 0.3) !important;
+    padding-inline: calc(var(--base) * 0.4) !important;
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+
+    &:hover,
+    &--active {
+      background-color: var(--theme-elevation-100);
+    }
+  }
+
+  &__icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+
+    .stroke {
+      stroke-width: 1;
+    }
+  }
+}

package/dist/components/Cell/Cell.server.d.ts

@@ -0,0 +1,11 @@
+import type { MediaPreviewContentMode, MediaPreviewMode } from '@/types.js';
+import type { DefaultServerCellComponentProps } from 'payload';
+import React from 'react';
+import './Cell.scss';
+type Props = {
+    adapterNames?: string[];
+    contentMode?: Partial<MediaPreviewContentMode>;
+    mode?: MediaPreviewMode;
+} & DefaultServerCellComponentProps;
+export declare const MediaPreviewCell: React.FC<Props>;
+export {};

package/dist/components/Cell/Cell.server.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { resolveAdapter, resolveAdapterViewer } from "../adapterResolver.js";
+import { MediaPreviewCellClient } from "./Cell.client.js";
+import "./Cell.scss";
+export const MediaPreviewCell = ({ adapterNames, contentMode, mode = 'auto', payload: payloadInstance, rowData })=>{
+    const fileSize = rowData?.filesize;
+    const height = rowData?.height;
+    const mimeType = rowData?.mimeType;
+    const url = rowData?.url;
+    const width = rowData?.width;
+    const adapterMatch = resolveAdapter(payloadInstance, adapterNames, {
+        doc: rowData || {},
+        mimeType,
+        url
+    });
+    const customViewer = resolveAdapterViewer(payloadInstance, adapterMatch);
+    const adapterNewTabUrl = adapterMatch?.result.mode === 'newTab' ? adapterMatch.result.url : undefined;
+    return /*#__PURE__*/ _jsx(MediaPreviewCellClient, {
+        adapterNewTabUrl: adapterNewTabUrl,
+        contentMode: contentMode,
+        customViewer: customViewer,
+        media: {
+            fileSize,
+            height,
+            mimeType,
+            url,
+            width
+        },
+        mode: mode,
+        rowId: rowData?.id
+    });
+};

package/dist/components/ExternalLinkIcon/ExternalLinkIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './ExternalLinkIcon.scss';
+export declare const ExternalLinkIcon: React.FC<{
+    className?: string;
+}>;

package/dist/components/ExternalLinkIcon/ExternalLinkIcon.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import "./ExternalLinkIcon.scss";
+export const ExternalLinkIcon = ({ className })=>/*#__PURE__*/ _jsx("svg", {
+        className: [
+            className,
+            'icon icon--external-link'
+        ].filter(Boolean).join(' '),
+        fill: "none",
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ _jsx("path", {
+            className: "stroke",
+            d: "M6 2H2C1.44772 2 1 2.44772 1 3V14C1 14.5523 1.44772 15 2 15H13C13.5523 15 14 14.5523 14 14V10M10 1H15M15 1V6M15 1L6 10",
+            strokeLinecap: "square"
+        })
+    });

package/dist/components/ExternalLinkIcon/ExternalLinkIcon.scss

@@ -0,0 +1,19 @@
+@import '~@payloadcms/ui/scss';
+
+.icon--external-link {
+  height: $baseline;
+  width: $baseline;
+  shape-rendering: auto;
+  vector-effect: non-scaling-stroke;
+  transform: scale(0.9);
+
+  .stroke {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 0.75;
+  }
+
+  .fill {
+    fill: currentColor;
+  }
+}

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,18 @@
+import type { MediaPreviewContentMode, MediaPreviewMode } from '@/types.js';
+import React from 'react';
+import './Field.scss';
+type Props = {
+    adapterNewTabUrl?: string;
+    contentMode?: Partial<MediaPreviewContentMode>;
+    customViewer?: React.ReactNode;
+    media: {
+        fileSize?: number;
+        height?: number;
+        mimeType?: string;
+        url?: string;
+        width?: number;
+    };
+    mode?: MediaPreviewMode;
+};
+export declare const MediaPreviewFieldClient: React.FC<Props>;
+export {};

package/dist/components/Field/Field.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, useTranslation } from "@payloadcms/ui";
+import { EyeIcon } from "@payloadcms/ui/icons/Eye";
+import React, { useCallback, useMemo, useState } from "react";
+import { ExternalLinkIcon } from "../ExternalLinkIcon/ExternalLinkIcon.js";
+import { canPreviewDocument, getDocumentViewerType, getGoogleViewerUrl, getMicrosoftViewerUrl, getPreviewType } from "../MediaPreview.utils.js";
+import { MediaPreviewModal } from "../Modal/Modal.js";
+import "./Field.scss";
+export const MediaPreviewFieldClient = ({ adapterNewTabUrl, contentMode, customViewer, media, mode: _mode = 'auto' })=>{
+    const { fileSize, height, mimeType, url, width } = media;
+    const [showModal, setShowModal] = useState(false);
+    const { t } = useTranslation();
+    const audioViewerMode = contentMode?.audio ?? 'inline';
+    const documentViewerMode = contentMode?.document ?? 'inline';
+    const imageViewerMode = contentMode?.image ?? 'inline';
+    const videoViewerMode = contentMode?.video ?? 'inline';
+    const previewType = useMemo(()=>getPreviewType(mimeType), [
+        mimeType
+    ]);
+    const isAudioFile = previewType === 'audio';
+    const isDocumentFile = previewType === 'document';
+    const isImageFile = previewType === 'image';
+    const isVideoFile = previewType === 'video';
+    const canPreview = !isDocumentFile || canPreviewDocument(fileSize);
+    const documentViewerUrl = useMemo(()=>{
+        if (isDocumentFile && url && mimeType) {
+            const viewerType = getDocumentViewerType(mimeType);
+            return viewerType === 'microsoft' ? getMicrosoftViewerUrl(url) : getGoogleViewerUrl(url);
+        }
+        return null;
+    }, [
+        isDocumentFile,
+        url,
+        mimeType
+    ]);
+    const handleToggleModal = useCallback(()=>{
+        setShowModal((prev)=>!prev);
+    }, []);
+    const renderNewTabButton = useCallback((href)=>/*#__PURE__*/ _jsx("div", {
+            className: "media-preview__button-wrapper",
+            children: /*#__PURE__*/ _jsx(Button, {
+                buttonStyle: "secondary",
+                el: "anchor",
+                icon: /*#__PURE__*/ _jsx(ExternalLinkIcon, {}),
+                iconPosition: "left",
+                newTab: true,
+                size: "medium",
+                url: href,
+                children: t('@seshuk/payload-media-preview:open')
+            })
+        }), [
+        t
+    ]);
+    if (previewType === 'unsupported' || !url || !canPreview) {
+        if (!customViewer) {
+            return null;
+        }
+    }
+    if (adapterNewTabUrl) {
+        return renderNewTabButton(adapterNewTabUrl);
+    }
+    if (!customViewer) {
+        if (isVideoFile && videoViewerMode === 'newTab' && url) {
+            return renderNewTabButton(url);
+        }
+        if (isAudioFile && audioViewerMode === 'newTab' && url) {
+            return renderNewTabButton(url);
+        }
+        if (isImageFile && imageViewerMode === 'newTab' && url) {
+            return renderNewTabButton(url);
+        }
+        if (isDocumentFile && documentViewerMode === 'newTab' && documentViewerUrl) {
+            return renderNewTabButton(documentViewerUrl);
+        }
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "media-preview__button-wrapper",
+                children: /*#__PURE__*/ _jsx(Button, {
+                    buttonStyle: "secondary",
+                    icon: /*#__PURE__*/ _jsx(EyeIcon, {
+                        active: false
+                    }),
+                    iconPosition: "left",
+                    onClick: handleToggleModal,
+                    size: "medium",
+                    children: t('@seshuk/payload-media-preview:open')
+                })
+            }),
+            /*#__PURE__*/ _jsx(MediaPreviewModal, {
+                customViewer: customViewer,
+                media: {
+                    documentViewerUrl,
+                    height,
+                    mimeType,
+                    url,
+                    width
+                },
+                mode: "fullscreen",
+                onClose: ()=>setShowModal(false),
+                show: showModal
+            })
+        ]
+    });
+};

package/dist/components/Field/Field.scss

@@ -0,0 +1,14 @@
+.media-preview__button-wrapper {
+  .btn {
+    margin-block: 0;
+
+    &__icon {
+      width: var(--base);
+      height: var(--base);
+
+      .stroke {
+        stroke-width: 1;
+      }
+    }
+  }
+}

package/dist/components/MediaPreview.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const FIELD_BASE_CLASS = "field-type";
+export declare const GOOGLE_VIEWER_MAX_SIZE: number;
+export declare const MICROSOFT_OFFICE_TYPES: string[];
+export declare const GOOGLE_VIEWER_TYPES: string[];

package/dist/components/MediaPreview.constants.js

@@ -0,0 +1,28 @@
+export const FIELD_BASE_CLASS = 'field-type';
+export const GOOGLE_VIEWER_MAX_SIZE = 25 * 1024 * 1024;
+export const MICROSOFT_OFFICE_TYPES = [
+    'application/msword',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'application/vnd.ms-excel',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'application/vnd.ms-powerpoint',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+];
+export const GOOGLE_VIEWER_TYPES = [
+    'application/pdf',
+    'text/plain',
+    'text/css',
+    'text/html',
+    'text/php',
+    'text/javascript',
+    'application/x-javascript',
+    'text/x-c',
+    'text/x-c++',
+    'application/vnd.apple.pages',
+    'application/postscript',
+    'image/vnd.adobe.photoshop',
+    'image/vnd.dxf',
+    'application/dxf',
+    'image/svg+xml',
+    'application/vnd.ms-xpsdocument'
+];

package/dist/components/MediaPreview.d.ts

@@ -0,0 +1,10 @@
+import type { MediaPreviewContentMode, MediaPreviewMode } from '@/types.js';
+import type { UIFieldServerProps } from 'payload';
+import React from 'react';
+type MediaPreviewProps = {
+    adapterNames?: string[];
+    contentMode?: Partial<MediaPreviewContentMode>;
+    mode?: MediaPreviewMode;
+} & UIFieldServerProps;
+export declare const MediaPreview: React.FC<MediaPreviewProps>;
+export {};

package/dist/components/MediaPreview.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from "@payloadcms/translations";
+import { FieldLabel } from "@payloadcms/ui";
+import React from "react";
+import { resolveAdapter, resolveAdapterViewer } from "./adapterResolver.js";
+import { MediaPreviewFieldClient } from "./Field/Field.js";
+import { FIELD_BASE_CLASS } from "./MediaPreview.constants.js";
+import { getPreviewType } from "./MediaPreview.utils.js";
+export const MediaPreview = (props)=>{
+    const { adapterNames, clientField: { label }, contentMode, data, mode = 'auto', path, req } = props;
+    const reqT = req.t;
+    const fileSize = data?.filesize;
+    const height = data?.height;
+    const mimeType = data?.mimeType;
+    const url = data?.url;
+    const width = data?.width;
+    const adapterMatch = resolveAdapter(req.payload, adapterNames, {
+        doc: data || {},
+        mimeType,
+        url
+    });
+    const previewType = getPreviewType(mimeType);
+    if (previewType === 'unsupported' && !adapterMatch) {
+        return null;
+    }
+    const customViewer = resolveAdapterViewer(req.payload, adapterMatch);
+    const adapterNewTabUrl = adapterMatch?.result.mode === 'newTab' ? adapterMatch.result.url : undefined;
+    let fieldLabel;
+    if (label === '@seshuk/payload-media-preview:label') {
+        fieldLabel = reqT('@seshuk/payload-media-preview:label');
+    } else if (label) {
+        const translatedLabel = getTranslation(label, req.i18n);
+        fieldLabel = translatedLabel && translatedLabel !== '' ? translatedLabel : undefined;
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `${FIELD_BASE_CLASS} media-preview`,
+        children: [
+            fieldLabel && /*#__PURE__*/ _jsx(FieldLabel, {
+                htmlFor: path,
+                label: fieldLabel
+            }),
+            /*#__PURE__*/ _jsx(MediaPreviewFieldClient, {
+                adapterNewTabUrl: adapterNewTabUrl,
+                contentMode: contentMode,
+                customViewer: customViewer,
+                media: {
+                    fileSize,
+                    height,
+                    mimeType,
+                    url,
+                    width
+                },
+                mode: mode
+            })
+        ]
+    });
+};

package/dist/components/MediaPreview.types.d.ts

@@ -0,0 +1,2 @@
+export type PreviewType = 'audio' | 'document' | 'image' | 'unsupported' | 'video';
+export type DocumentViewerType = 'google' | 'microsoft';

package/dist/components/MediaPreview.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/MediaPreview.utils.d.ts

@@ -0,0 +1,6 @@
+import type { DocumentViewerType, PreviewType } from './MediaPreview.types.js';
+export declare const getPreviewType: (mimeType?: string) => PreviewType;
+export declare const getDocumentViewerType: (mimeType: string) => DocumentViewerType;
+export declare const canPreviewDocument: (fileSize?: number) => boolean;
+export declare const getMicrosoftViewerUrl: (fileUrl: string) => string;
+export declare const getGoogleViewerUrl: (fileUrl: string) => string;

package/dist/components/MediaPreview.utils.js

@@ -0,0 +1,38 @@
+import { formatAbsoluteURL } from "@payloadcms/ui/utilities/formatAbsoluteURL";
+import { GOOGLE_VIEWER_MAX_SIZE, GOOGLE_VIEWER_TYPES, MICROSOFT_OFFICE_TYPES } from "./MediaPreview.constants.js";
+export const getPreviewType = (mimeType)=>{
+    if (!mimeType) {
+        return 'unsupported';
+    }
+    if (mimeType.startsWith('video/')) {
+        return 'video';
+    }
+    if (mimeType.startsWith('audio/')) {
+        return 'audio';
+    }
+    if (mimeType.startsWith('image/')) {
+        return 'image';
+    }
+    if (MICROSOFT_OFFICE_TYPES.includes(mimeType) || GOOGLE_VIEWER_TYPES.includes(mimeType)) {
+        return 'document';
+    }
+    return 'unsupported';
+};
+export const getDocumentViewerType = (mimeType)=>{
+    if (MICROSOFT_OFFICE_TYPES.includes(mimeType)) {
+        return 'microsoft';
+    }
+    return 'google';
+};
+export const canPreviewDocument = (fileSize)=>{
+    if (!fileSize) {
+        return true;
+    }
+    return fileSize <= GOOGLE_VIEWER_MAX_SIZE;
+};
+export const getMicrosoftViewerUrl = (fileUrl)=>{
+    return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(formatAbsoluteURL(fileUrl))}`;
+};
+export const getGoogleViewerUrl = (fileUrl)=>{
+    return `https://docs.google.com/viewer?url=${encodeURIComponent(formatAbsoluteURL(fileUrl))}&embedded=true`;
+};

package/dist/components/Modal/Modal.constants.d.ts

@@ -0,0 +1,16 @@
+export declare const POPUP_DIMENSIONS: {
+    readonly MAX_HEIGHT: 290;
+    readonly MAX_WIDTH: 480;
+    readonly MIN_HEIGHT: 200;
+    readonly MIN_WIDTH: 200;
+};
+export declare const AUDIO_DIMENSIONS: {
+    readonly HEIGHT: 40;
+    readonly WIDTH: 300;
+};
+export declare const SPACING: {
+    readonly BOTTOM: 4;
+    readonly CARET_SIZE: 10;
+    readonly TOP: 24;
+    readonly VIEWPORT_MARGIN: 16;
+};

package/dist/components/Modal/Modal.constants.js

@@ -0,0 +1,16 @@
+export const POPUP_DIMENSIONS = {
+    MAX_HEIGHT: 290,
+    MAX_WIDTH: 480,
+    MIN_HEIGHT: 200,
+    MIN_WIDTH: 200
+};
+export const AUDIO_DIMENSIONS = {
+    HEIGHT: 40,
+    WIDTH: 300
+};
+export const SPACING = {
+    BOTTOM: 4,
+    CARET_SIZE: 10,
+    TOP: 24,
+    VIEWPORT_MARGIN: 16
+};

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './Modal.scss';
+type MediaPreviewModalProps = {
+    customViewer?: React.ReactNode;
+    media: {
+        documentViewerUrl?: null | string;
+        height?: number;
+        mimeType?: string;
+        url?: string;
+        width?: number;
+    };
+    mode: 'fullscreen' | 'popup';
+    onClose?: () => void;
+    rowId?: number | string;
+    show: boolean;
+    triggerRef?: React.RefObject<HTMLButtonElement | HTMLElement | null>;
+};
+export declare const MediaPreviewModal: React.FC<MediaPreviewModalProps>;
+export {};