payload-plugin-decks 1.0.0

package/README.md

@@ -0,0 +1,205 @@
+# payload-plugin-decks
+
+`payload-plugin-decks` adds reusable deck blocks to Payload collections. Today it ships a `decks` block: a slide-based, Remotion-powered deck with background images, headlines, subtext, text positioning, transitions, autoplay, looping, and optional playback controls.
+
+The plugin adds the editing fields to Payload. Your frontend decides where and how to render the saved deck blocks.
+
+## Requirements
+
+- Payload `^3.84.0`
+- React / Next.js frontend capable of rendering client components
+- A Payload upload collection with slug `media`
+
+The decks block's image field is currently configured with `relationTo: 'media'`, so your Payload app must define a `media` collection.
+
+## Install
+
+```sh
+pnpm add payload-plugin-decks
+```
+
+The package includes its Remotion runtime dependencies:
+
+- `@remotion/player`
+- `remotion`
+
+## Configure Payload
+
+Add `payloadDecks` to your Payload config and choose the collections that should receive the decks field.
+
+```ts
+import { buildConfig } from 'payload'
+import { payloadDecks } from 'payload-plugin-decks'
+
+export default buildConfig({
+  collections: [
+    {
+      slug: 'pages',
+      fields: [
+        // your fields
+      ],
+    },
+    {
+      slug: 'media',
+      upload: true,
+      fields: [],
+    },
+  ],
+  plugins: [
+    payloadDecks({
+      collections: {
+        pages: true,
+      },
+    }),
+  ],
+})
+```
+
+This adds a `decks` blocks field to the configured collection. Editors can add one or more `decks` blocks inside that field.
+
+## Options
+
+```ts
+type PayloadDecksConfig = {
+  collections?: Partial<Record<CollectionSlug, true>>
+  disabled?: boolean
+  fieldName?: string
+}
+```
+
+| Option        | Default     | Description                                                         |
+| ------------- | ----------- | ------------------------------------------------------------------- |
+| `collections` | `undefined` | Collections that should receive the decks blocks field.             |
+| `fieldName`   | `'decks'`   | Name of the blocks field added to each configured collection.       |
+| `disabled`    | `false`     | Leaves schema additions in place but skips runtime plugin behavior. |
+
+### Custom field name
+
+```ts
+payloadDecks({
+  collections: {
+    pages: true,
+    posts: true,
+  },
+  fieldName: 'heroDecks',
+})
+```
+
+## Alternative: add the block to an existing blocks field
+
+If your collection already has a `blocks` field (for example a page `layout` builder), you usually do **not** want the `payloadDecks()` plugin — it would add a second, separate `decks` field disconnected from your existing one. Instead, import the `DecksBlock` block config and add it to the field you already manage, alongside your other blocks:
+
+```ts
+import { DecksBlock } from 'payload-plugin-decks'
+
+export const Pages = {
+  slug: 'pages',
+  fields: [
+    {
+      name: 'layout',
+      type: 'blocks',
+      blocks: [
+        // ...your existing blocks
+        DecksBlock,
+      ],
+    },
+  ],
+}
+```
+
+Editors then pick **Decks** as one block among the others in that field, and you render it from the same array using the client renderer (see [Render Decks](#render-decks)).
+
+Use `payloadDecks()` when you want a brand-new, dedicated decks field added for you; use the `DecksBlock` config directly when decks should be one choice within a blocks field you already have.
+
+## Render Decks
+
+The plugin does not automatically render decks in your frontend. Render the blocks from the field you added, usually inside your existing page or post block renderer.
+
+```tsx
+import dynamic from 'next/dynamic'
+import type { DecksBlockProps } from 'payload-plugin-decks'
+
+const DecksBlock = dynamic(
+  () => import('payload-plugin-decks/client').then((mod) => mod.DecksBlock),
+  { ssr: false },
+)
+
+type DecksBlockData = DecksBlockProps & {
+  blockType: 'decks'
+  id?: string
+}
+
+type DeckBlock = DecksBlockData
+
+export function DecksRenderer({ decks = [] }: { decks?: DeckBlock[] }) {
+  return (
+    <>
+      {decks.map((deck, index) => {
+        switch (deck.blockType) {
+          case 'decks':
+            return <DecksBlock key={deck.id || index} {...deck} />
+          default:
+            return null
+        }
+      })}
+    </>
+  )
+}
+```
+
+If you generate Payload types, prefer using the generated collection type for your renderer props.
+
+## Decks Fields
+
+Each `decks` block supports:
+
+| Field                | Description                                           |
+| -------------------- | ----------------------------------------------------- |
+| `title`              | Optional internal reference for editors.              |
+| `fps`                | Video frame rate. Defaults to `30`.                   |
+| `durationPerSlide`   | Seconds each slide is displayed. Defaults to `3`.     |
+| `transitionDuration` | Fade transition duration in frames. Defaults to `15`. |
+| `backgroundColor`    | Composition background color. Defaults to `#000000`.  |
+| `autoPlay`           | Starts playback automatically. Defaults to `true`.    |
+| `loop`               | Loops playback. Defaults to `true`.                   |
+| `showControls`       | Shows Remotion player controls. Defaults to `false`.  |
+| `slides`             | Ordered slide array. Requires at least one slide.     |
+
+Each slide supports:
+
+| Field           | Description                                                                                                                            |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `image`         | Optional background image from the `media` collection.                                                                                 |
+| `headline`      | Optional headline text.                                                                                                                |
+| `subtext`       | Optional supporting text.                                                                                                              |
+| `textColor`     | Text color. Defaults to `#ffffff`.                                                                                                     |
+| `textPosition`  | One of `top-left`, `top-center`, `top-right`, `center-left`, `center`, `center-right`, `bottom-left`, `bottom-center`, `bottom-right`. |
+| `animationType` | One of `fadeIn`, `slideUp`, `slideDown`, `scaleIn`, `none`.                                                                            |
+| `imageZoom`     | Enables a slow Ken Burns-style image zoom. Defaults to `true`.                                                                         |
+
+## Exports
+
+```ts
+import { DecksBlock, payloadDecks } from 'payload-plugin-decks'
+import { DecksBlock as DecksRenderer } from 'payload-plugin-decks/client'
+```
+
+| Export                                          | Description                                                      |
+| ----------------------------------------------- | ---------------------------------------------------------------- |
+| `payloadDecks`                                  | Payload plugin factory.                                          |
+| `DecksBlock` from `payload-plugin-decks`        | Payload block config for advanced composition.                   |
+| `DecksBlock` from `payload-plugin-decks/client` | Client renderer for saved decks block data.                      |
+| `DecksBlockProps`                               | Renderer prop type.                                              |
+| `DecksSlide`                                    | Slide prop type.                                                 |
+| `normalizeDecksBlock`                           | Normalizes saved Payload block data into the renderer interface. |
+
+## Development
+
+```sh
+pnpm install
+pnpm build
+pnpm test:int
+pnpm lint
+```
+
+The integration test uses `mongodb-memory-server`, so it needs permission to bind a local port in sandboxed environments.

package/dist/blocks/decks/config.d.ts

@@ -0,0 +1,2 @@
+import type { Block } from 'payload';
+export declare const DecksBlock: Block;

package/dist/blocks/decks/config.js

@@ -0,0 +1,148 @@
+import { DECKS_DEFAULTS, decksAnimationOptions, decksTextPositionOptions } from '../../decks/schema.js';
+export const DecksBlock = {
+    slug: 'decks',
+    fields: [
+        {
+            name: 'title',
+            type: 'text',
+            admin: {
+                description: 'Optional title for internal reference'
+            },
+            label: 'Title (internal reference)',
+            required: false
+        },
+        {
+            name: 'fps',
+            type: 'number',
+            admin: {
+                description: 'Video frame rate (default: 30 FPS)'
+            },
+            defaultValue: DECKS_DEFAULTS.fps,
+            label: 'Frames per Second',
+            max: 60,
+            min: 1
+        },
+        {
+            name: 'durationPerSlide',
+            type: 'number',
+            admin: {
+                description: 'How long each slide is displayed'
+            },
+            defaultValue: DECKS_DEFAULTS.durationPerSlide,
+            label: 'Duration per Slide (seconds)',
+            max: 30,
+            min: 1
+        },
+        {
+            name: 'transitionDuration',
+            type: 'number',
+            admin: {
+                description: 'Duration of fade transition between slides'
+            },
+            defaultValue: DECKS_DEFAULTS.transitionDuration,
+            label: 'Transition Duration (frames)',
+            max: 60,
+            min: 0
+        },
+        {
+            name: 'backgroundColor',
+            type: 'text',
+            admin: {
+                description: 'Background color in hex format (e.g., #000000)'
+            },
+            defaultValue: DECKS_DEFAULTS.backgroundColor,
+            label: 'Background Color'
+        },
+        {
+            name: 'autoPlay',
+            type: 'checkbox',
+            defaultValue: DECKS_DEFAULTS.autoPlay,
+            label: 'Auto Play'
+        },
+        {
+            name: 'loop',
+            type: 'checkbox',
+            defaultValue: DECKS_DEFAULTS.loop,
+            label: 'Loop Video'
+        },
+        {
+            name: 'showControls',
+            type: 'checkbox',
+            defaultValue: DECKS_DEFAULTS.showControls,
+            label: 'Show Playback Controls'
+        },
+        {
+            name: 'slides',
+            type: 'array',
+            fields: [
+                {
+                    name: 'image',
+                    type: 'upload',
+                    filterOptions: {
+                        mimeType: {
+                            contains: 'image'
+                        }
+                    },
+                    label: 'Background Image',
+                    relationTo: 'media',
+                    required: false
+                },
+                {
+                    name: 'headline',
+                    type: 'text',
+                    label: 'Headline',
+                    maxLength: 100
+                },
+                {
+                    name: 'subtext',
+                    type: 'textarea',
+                    label: 'Subtext',
+                    maxLength: 300
+                },
+                {
+                    name: 'textColor',
+                    type: 'text',
+                    admin: {
+                        description: 'Text color in hex format (e.g., #ffffff)'
+                    },
+                    defaultValue: DECKS_DEFAULTS.textColor,
+                    label: 'Text Color'
+                },
+                {
+                    name: 'textPosition',
+                    type: 'select',
+                    defaultValue: DECKS_DEFAULTS.textPosition,
+                    label: 'Text Position',
+                    options: [
+                        ...decksTextPositionOptions
+                    ]
+                },
+                {
+                    name: 'animationType',
+                    type: 'select',
+                    defaultValue: DECKS_DEFAULTS.animationType,
+                    label: 'Text Animation',
+                    options: [
+                        ...decksAnimationOptions
+                    ]
+                },
+                {
+                    name: 'imageZoom',
+                    type: 'checkbox',
+                    defaultValue: DECKS_DEFAULTS.imageZoom,
+                    label: 'Enable Ken Burns Effect (slow zoom)'
+                }
+            ],
+            label: 'Slides',
+            minRows: 1,
+            required: true
+        }
+    ],
+    interfaceName: 'DecksBlock',
+    labels: {
+        plural: 'Decks',
+        singular: 'Decks'
+    }
+};
+
+//# sourceMappingURL=config.js.map

package/dist/blocks/decks/config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/decks/config.ts"],"sourcesContent":["import type { Block } from 'payload'\n\nimport {\n  DECKS_DEFAULTS,\n  decksAnimationOptions,\n  decksTextPositionOptions,\n} from '../../decks/schema.js'\n\nexport const DecksBlock: Block = {\n  slug: 'decks',\n  fields: [\n    {\n      name: 'title',\n      type: 'text',\n      admin: {\n        description: 'Optional title for internal reference',\n      },\n      label: 'Title (internal reference)',\n      required: false,\n    },\n    {\n      name: 'fps',\n      type: 'number',\n      admin: {\n        description: 'Video frame rate (default: 30 FPS)',\n      },\n      defaultValue: DECKS_DEFAULTS.fps,\n      label: 'Frames per Second',\n      max: 60,\n      min: 1,\n    },\n    {\n      name: 'durationPerSlide',\n      type: 'number',\n      admin: {\n        description: 'How long each slide is displayed',\n      },\n      defaultValue: DECKS_DEFAULTS.durationPerSlide,\n      label: 'Duration per Slide (seconds)',\n      max: 30,\n      min: 1,\n    },\n    {\n      name: 'transitionDuration',\n      type: 'number',\n      admin: {\n        description: 'Duration of fade transition between slides',\n      },\n      defaultValue: DECKS_DEFAULTS.transitionDuration,\n      label: 'Transition Duration (frames)',\n      max: 60,\n      min: 0,\n    },\n    {\n      name: 'backgroundColor',\n      type: 'text',\n      admin: {\n        description: 'Background color in hex format (e.g., #000000)',\n      },\n      defaultValue: DECKS_DEFAULTS.backgroundColor,\n      label: 'Background Color',\n    },\n    {\n      name: 'autoPlay',\n      type: 'checkbox',\n      defaultValue: DECKS_DEFAULTS.autoPlay,\n      label: 'Auto Play',\n    },\n    {\n      name: 'loop',\n      type: 'checkbox',\n      defaultValue: DECKS_DEFAULTS.loop,\n      label: 'Loop Video',\n    },\n    {\n      name: 'showControls',\n      type: 'checkbox',\n      defaultValue: DECKS_DEFAULTS.showControls,\n      label: 'Show Playback Controls',\n    },\n    {\n      name: 'slides',\n      type: 'array',\n      fields: [\n        {\n          name: 'image',\n          type: 'upload',\n          filterOptions: {\n            mimeType: { contains: 'image' },\n          },\n          label: 'Background Image',\n          relationTo: 'media',\n          required: false,\n        },\n        {\n          name: 'headline',\n          type: 'text',\n          label: 'Headline',\n          maxLength: 100,\n        },\n        {\n          name: 'subtext',\n          type: 'textarea',\n          label: 'Subtext',\n          maxLength: 300,\n        },\n        {\n          name: 'textColor',\n          type: 'text',\n          admin: {\n            description: 'Text color in hex format (e.g., #ffffff)',\n          },\n          defaultValue: DECKS_DEFAULTS.textColor,\n          label: 'Text Color',\n        },\n        {\n          name: 'textPosition',\n          type: 'select',\n          defaultValue: DECKS_DEFAULTS.textPosition,\n          label: 'Text Position',\n          options: [...decksTextPositionOptions],\n        },\n        {\n          name: 'animationType',\n          type: 'select',\n          defaultValue: DECKS_DEFAULTS.animationType,\n          label: 'Text Animation',\n          options: [...decksAnimationOptions],\n        },\n        {\n          name: 'imageZoom',\n          type: 'checkbox',\n          defaultValue: DECKS_DEFAULTS.imageZoom,\n          label: 'Enable Ken Burns Effect (slow zoom)',\n        },\n      ],\n      label: 'Slides',\n      minRows: 1,\n      required: true,\n    },\n  ],\n  interfaceName: 'DecksBlock',\n  labels: {\n    plural: 'Decks',\n    singular: 'Decks',\n  },\n}\n"],"names":["DECKS_DEFAULTS","decksAnimationOptions","decksTextPositionOptions","DecksBlock","slug","fields","name","type","admin","description","label","required","defaultValue","fps","max","min","durationPerSlide","transitionDuration","backgroundColor","autoPlay","loop","showControls","filterOptions","mimeType","contains","relationTo","maxLength","textColor","textPosition","options","animationType","imageZoom","minRows","interfaceName","labels","plural","singular"],"mappings":"AAEA,SACEA,cAAc,EACdC,qBAAqB,EACrBC,wBAAwB,QACnB,wBAAuB;AAE9B,OAAO,MAAMC,aAAoB;IAC/BC,MAAM;IACNC,QAAQ;QACN;YACEC,MAAM;YACNC,MAAM;YACNC,OAAO;gBACLC,aAAa;YACf;YACAC,OAAO;YACPC,UAAU;QACZ;QACA;YACEL,MAAM;YACNC,MAAM;YACNC,OAAO;gBACLC,aAAa;YACf;YACAG,cAAcZ,eAAea,GAAG;YAChCH,OAAO;YACPI,KAAK;YACLC,KAAK;QACP;QACA;YACET,MAAM;YACNC,MAAM;YACNC,OAAO;gBACLC,aAAa;YACf;YACAG,cAAcZ,eAAegB,gBAAgB;YAC7CN,OAAO;YACPI,KAAK;YACLC,KAAK;QACP;QACA;YACET,MAAM;YACNC,MAAM;YACNC,OAAO;gBACLC,aAAa;YACf;YACAG,cAAcZ,eAAeiB,kBAAkB;YAC/CP,OAAO;YACPI,KAAK;YACLC,KAAK;QACP;QACA;YACET,MAAM;YACNC,MAAM;YACNC,OAAO;gBACLC,aAAa;YACf;YACAG,cAAcZ,eAAekB,eAAe;YAC5CR,OAAO;QACT;QACA;YACEJ,MAAM;YACNC,MAAM;YACNK,cAAcZ,eAAemB,QAAQ;YACrCT,OAAO;QACT;QACA;YACEJ,MAAM;YACNC,MAAM;YACNK,cAAcZ,eAAeoB,IAAI;YACjCV,OAAO;QACT;QACA;YACEJ,MAAM;YACNC,MAAM;YACNK,cAAcZ,eAAeqB,YAAY;YACzCX,OAAO;QACT;QACA;YACEJ,MAAM;YACNC,MAAM;YACNF,QAAQ;gBACN;oBACEC,MAAM;oBACNC,MAAM;oBACNe,eAAe;wBACbC,UAAU;4BAAEC,UAAU;wBAAQ;oBAChC;oBACAd,OAAO;oBACPe,YAAY;oBACZd,UAAU;gBACZ;gBACA;oBACEL,MAAM;oBACNC,MAAM;oBACNG,OAAO;oBACPgB,WAAW;gBACb;gBACA;oBACEpB,MAAM;oBACNC,MAAM;oBACNG,OAAO;oBACPgB,WAAW;gBACb;gBACA;oBACEpB,MAAM;oBACNC,MAAM;oBACNC,OAAO;wBACLC,aAAa;oBACf;oBACAG,cAAcZ,eAAe2B,SAAS;oBACtCjB,OAAO;gBACT;gBACA;oBACEJ,MAAM;oBACNC,MAAM;oBACNK,cAAcZ,eAAe4B,YAAY;oBACzClB,OAAO;oBACPmB,SAAS;2BAAI3B;qBAAyB;gBACxC;gBACA;oBACEI,MAAM;oBACNC,MAAM;oBACNK,cAAcZ,eAAe8B,aAAa;oBAC1CpB,OAAO;oBACPmB,SAAS;2BAAI5B;qBAAsB;gBACrC;gBACA;oBACEK,MAAM;oBACNC,MAAM;oBACNK,cAAcZ,eAAe+B,SAAS;oBACtCrB,OAAO;gBACT;aACD;YACDA,OAAO;YACPsB,SAAS;YACTrB,UAAU;QACZ;KACD;IACDsB,eAAe;IACfC,QAAQ;QACNC,QAAQ;QACRC,UAAU;IACZ;AACF,EAAC"}

package/dist/blocks/decks/index.d.ts

@@ -0,0 +1,4 @@
+export { DecksBlock as DecksBlockComponent, type DecksBlockProps, type DecksSlide, } from '../../components/decks/DecksBlock.js';
+export { DecksComposition, type DecksCompositionProps, } from '../../components/decks/DecksComposition.js';
+export { type NormalizedDecksBlock, type NormalizedDecksSlide, normalizeDecksBlock, } from '../../decks/model.js';
+export { DecksBlock } from './config.js';

package/dist/blocks/decks/index.js

@@ -0,0 +1,6 @@
+export { DecksBlock as DecksBlockComponent } from '../../components/decks/DecksBlock.js';
+export { DecksComposition } from '../../components/decks/DecksComposition.js';
+export { normalizeDecksBlock } from '../../decks/model.js';
+export { DecksBlock } from './config.js';
+
+//# sourceMappingURL=index.js.map

package/dist/blocks/decks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/decks/index.ts"],"sourcesContent":["export {\n  DecksBlock as DecksBlockComponent,\n  type DecksBlockProps,\n  type DecksSlide,\n} from '../../components/decks/DecksBlock.js'\nexport {\n  DecksComposition,\n  type DecksCompositionProps,\n} from '../../components/decks/DecksComposition.js'\nexport {\n  type NormalizedDecksBlock,\n  type NormalizedDecksSlide,\n  normalizeDecksBlock,\n} from '../../decks/model.js'\nexport { DecksBlock } from './config.js'\n"],"names":["DecksBlock","DecksBlockComponent","DecksComposition","normalizeDecksBlock"],"mappings":"AAAA,SACEA,cAAcC,mBAAmB,QAG5B,uCAAsC;AAC7C,SACEC,gBAAgB,QAEX,6CAA4C;AACnD,SAGEC,mBAAmB,QACd,uBAAsB;AAC7B,SAASH,UAAU,QAAQ,cAAa"}

package/dist/components/decks/DecksBlock.d.ts

@@ -0,0 +1,5 @@
+import type { DecksBlockProps } from '../../decks/model.js';
+import './styles.css';
+export type { DecksBlockProps, DecksSlide } from '../../decks/model.js';
+export declare const DecksBlock: (props: DecksBlockProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DecksBlock;

package/dist/components/decks/DecksBlock.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Player } from '@remotion/player';
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
+import { normalizeDecksBlock } from '../../decks/model.js';
+import { getSlideDurationFrames } from '../../decks/timeline.js';
+import { DecksComposition } from './DecksComposition.js';
+import { SnapContainer } from './SnapContainer.js';
+import './styles.css';
+const emptySubscribe = ()=>()=>{};
+export const DecksBlock = (props)=>{
+    const isClient = useSyncExternalStore(emptySubscribe, ()=>true, ()=>false);
+    const deck = useMemo(()=>normalizeDecksBlock(props), [
+        props
+    ]);
+    const totalDurationInFrames = useMemo(()=>{
+        return deck.slides.length * getSlideDurationFrames({
+            durationPerSlide: deck.durationPerSlide,
+            fps: deck.fps
+        });
+    }, [
+        deck.durationPerSlide,
+        deck.fps,
+        deck.slides.length
+    ]);
+    const inputProps = useMemo(()=>({
+            backgroundColor: deck.backgroundColor,
+            durationPerSlide: deck.durationPerSlide,
+            slides: deck.slides,
+            transitionDuration: deck.transitionDuration
+        }), [
+        deck.backgroundColor,
+        deck.durationPerSlide,
+        deck.slides,
+        deck.transitionDuration
+    ]);
+    const renderLoading = useCallback(()=>{
+        return /*#__PURE__*/ _jsx("div", {
+            className: "decks-loading",
+            children: /*#__PURE__*/ _jsx("div", {
+                className: "decks-spinner"
+            })
+        });
+    }, []);
+    const errorFallback = useCallback(({ error })=>{
+        return /*#__PURE__*/ _jsx("div", {
+            className: "decks-error",
+            children: /*#__PURE__*/ _jsxs("p", {
+                children: [
+                    "Failed to load video: ",
+                    error.message
+                ]
+            })
+        });
+    }, []);
+    if (!isClient) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "decks-wrapper",
+            children: /*#__PURE__*/ _jsx("div", {
+                className: "decks-container",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "decks-loading",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "decks-spinner"
+                    })
+                })
+            })
+        });
+    }
+    if (deck.slides.length === 0) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(SnapContainer, {
+        children: /*#__PURE__*/ _jsx(Player, {
+            autoPlay: deck.autoPlay,
+            clickToPlay: !deck.autoPlay,
+            component: DecksComposition,
+            compositionHeight: 1080,
+            compositionWidth: 1920,
+            controls: deck.showControls,
+            doubleClickToFullscreen: true,
+            durationInFrames: totalDurationInFrames,
+            errorFallback: errorFallback,
+            fps: deck.fps,
+            // Deck compositions have no audio. Muting plus opting out of Remotion's
+            // shared audio tags stops the Player from creating a gated AudioContext,
+            // which strict browsers (e.g. Brave) block until a user gesture — that
+            // block stalls the playback clock so autoPlay never advances (black /
+            // frozen on the first frame until you pause-play or refocus the tab).
+            initiallyMuted: true,
+            inputProps: inputProps,
+            loop: deck.loop,
+            numberOfSharedAudioTags: 0,
+            renderLoading: renderLoading,
+            style: {
+                height: '100%',
+                width: '100%'
+            }
+        })
+    });
+};
+export default DecksBlock;
+
+//# sourceMappingURL=DecksBlock.js.map

package/dist/components/decks/DecksBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/decks/DecksBlock.tsx"],"sourcesContent":["'use client'\n\nimport { Player } from '@remotion/player'\nimport { useCallback, useMemo, useSyncExternalStore } from 'react'\n\nimport type { DecksBlockProps } from '../../decks/model.js'\n\nimport { normalizeDecksBlock } from '../../decks/model.js'\nimport { getSlideDurationFrames } from '../../decks/timeline.js'\nimport { DecksComposition } from './DecksComposition.js'\nimport { SnapContainer } from './SnapContainer.js'\nimport './styles.css'\n\nexport type { DecksBlockProps, DecksSlide } from '../../decks/model.js'\n\nconst emptySubscribe = () => () => {}\n\nexport const DecksBlock = (props: DecksBlockProps) => {\n  const isClient = useSyncExternalStore(\n    emptySubscribe,\n    () => true,\n    () => false,\n  )\n  const deck = useMemo(() => normalizeDecksBlock(props), [props])\n\n  const totalDurationInFrames = useMemo(() => {\n    return (\n      deck.slides.length *\n      getSlideDurationFrames({\n        durationPerSlide: deck.durationPerSlide,\n        fps: deck.fps,\n      })\n    )\n  }, [deck.durationPerSlide, deck.fps, deck.slides.length])\n\n  const inputProps = useMemo(\n    () => ({\n      backgroundColor: deck.backgroundColor,\n      durationPerSlide: deck.durationPerSlide,\n      slides: deck.slides,\n      transitionDuration: deck.transitionDuration,\n    }),\n    [deck.backgroundColor, deck.durationPerSlide, deck.slides, deck.transitionDuration],\n  )\n\n  const renderLoading = useCallback(() => {\n    return (\n      <div className=\"decks-loading\">\n        <div className=\"decks-spinner\" />\n      </div>\n    )\n  }, [])\n\n  const errorFallback = useCallback(({ error }: { error: Error }) => {\n    return (\n      <div className=\"decks-error\">\n        <p>Failed to load video: {error.message}</p>\n      </div>\n    )\n  }, [])\n\n  if (!isClient) {\n    return (\n      <div className=\"decks-wrapper\">\n        <div className=\"decks-container\">\n          <div className=\"decks-loading\">\n            <div className=\"decks-spinner\" />\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (deck.slides.length === 0) {\n    return null\n  }\n\n  return (\n    <SnapContainer>\n      <Player\n        autoPlay={deck.autoPlay}\n        clickToPlay={!deck.autoPlay}\n        component={DecksComposition}\n        compositionHeight={1080}\n        compositionWidth={1920}\n        controls={deck.showControls}\n        doubleClickToFullscreen\n        durationInFrames={totalDurationInFrames}\n        errorFallback={errorFallback}\n        fps={deck.fps}\n        // Deck compositions have no audio. Muting plus opting out of Remotion's\n        // shared audio tags stops the Player from creating a gated AudioContext,\n        // which strict browsers (e.g. Brave) block until a user gesture — that\n        // block stalls the playback clock so autoPlay never advances (black /\n        // frozen on the first frame until you pause-play or refocus the tab).\n        initiallyMuted\n        inputProps={inputProps}\n        loop={deck.loop}\n        numberOfSharedAudioTags={0}\n        renderLoading={renderLoading}\n        style={{\n          height: '100%',\n          width: '100%',\n        }}\n      />\n    </SnapContainer>\n  )\n}\n\nexport default DecksBlock\n"],"names":["Player","useCallback","useMemo","useSyncExternalStore","normalizeDecksBlock","getSlideDurationFrames","DecksComposition","SnapContainer","emptySubscribe","DecksBlock","props","isClient","deck","totalDurationInFrames","slides","length","durationPerSlide","fps","inputProps","backgroundColor","transitionDuration","renderLoading","div","className","errorFallback","error","p","message","autoPlay","clickToPlay","component","compositionHeight","compositionWidth","controls","showControls","doubleClickToFullscreen","durationInFrames","initiallyMuted","loop","numberOfSharedAudioTags","style","height","width"],"mappings":"AAAA;;AAEA,SAASA,MAAM,QAAQ,mBAAkB;AACzC,SAASC,WAAW,EAAEC,OAAO,EAAEC,oBAAoB,QAAQ,QAAO;AAIlE,SAASC,mBAAmB,QAAQ,uBAAsB;AAC1D,SAASC,sBAAsB,QAAQ,0BAAyB;AAChE,SAASC,gBAAgB,QAAQ,wBAAuB;AACxD,SAASC,aAAa,QAAQ,qBAAoB;AAClD,OAAO,eAAc;AAIrB,MAAMC,iBAAiB,IAAM,KAAO;AAEpC,OAAO,MAAMC,aAAa,CAACC;IACzB,MAAMC,WAAWR,qBACfK,gBACA,IAAM,MACN,IAAM;IAER,MAAMI,OAAOV,QAAQ,IAAME,oBAAoBM,QAAQ;QAACA;KAAM;IAE9D,MAAMG,wBAAwBX,QAAQ;QACpC,OACEU,KAAKE,MAAM,CAACC,MAAM,GAClBV,uBAAuB;YACrBW,kBAAkBJ,KAAKI,gBAAgB;YACvCC,KAAKL,KAAKK,GAAG;QACf;IAEJ,GAAG;QAACL,KAAKI,gBAAgB;QAAEJ,KAAKK,GAAG;QAAEL,KAAKE,MAAM,CAACC,MAAM;KAAC;IAExD,MAAMG,aAAahB,QACjB,IAAO,CAAA;YACLiB,iBAAiBP,KAAKO,eAAe;YACrCH,kBAAkBJ,KAAKI,gBAAgB;YACvCF,QAAQF,KAAKE,MAAM;YACnBM,oBAAoBR,KAAKQ,kBAAkB;QAC7C,CAAA,GACA;QAACR,KAAKO,eAAe;QAAEP,KAAKI,gBAAgB;QAAEJ,KAAKE,MAAM;QAAEF,KAAKQ,kBAAkB;KAAC;IAGrF,MAAMC,gBAAgBpB,YAAY;QAChC,qBACE,KAACqB;YAAIC,WAAU;sBACb,cAAA,KAACD;gBAAIC,WAAU;;;IAGrB,GAAG,EAAE;IAEL,MAAMC,gBAAgBvB,YAAY,CAAC,EAAEwB,KAAK,EAAoB;QAC5D,qBACE,KAACH;YAAIC,WAAU;sBACb,cAAA,MAACG;;oBAAE;oBAAuBD,MAAME,OAAO;;;;IAG7C,GAAG,EAAE;IAEL,IAAI,CAAChB,UAAU;QACb,qBACE,KAACW;YAAIC,WAAU;sBACb,cAAA,KAACD;gBAAIC,WAAU;0BACb,cAAA,KAACD;oBAAIC,WAAU;8BACb,cAAA,KAACD;wBAAIC,WAAU;;;;;IAKzB;IAEA,IAAIX,KAAKE,MAAM,CAACC,MAAM,KAAK,GAAG;QAC5B,OAAO;IACT;IAEA,qBACE,KAACR;kBACC,cAAA,KAACP;YACC4B,UAAUhB,KAAKgB,QAAQ;YACvBC,aAAa,CAACjB,KAAKgB,QAAQ;YAC3BE,WAAWxB;YACXyB,mBAAmB;YACnBC,kBAAkB;YAClBC,UAAUrB,KAAKsB,YAAY;YAC3BC,uBAAuB;YACvBC,kBAAkBvB;YAClBW,eAAeA;YACfP,KAAKL,KAAKK,GAAG;YACb,wEAAwE;YACxE,yEAAyE;YACzE,uEAAuE;YACvE,sEAAsE;YACtE,sEAAsE;YACtEoB,cAAc;YACdnB,YAAYA;YACZoB,MAAM1B,KAAK0B,IAAI;YACfC,yBAAyB;YACzBlB,eAAeA;YACfmB,OAAO;gBACLC,QAAQ;gBACRC,OAAO;YACT;;;AAIR,EAAC;AAED,eAAejC,WAAU"}

package/dist/components/decks/DecksComposition.d.ts

@@ -0,0 +1,9 @@
+import type { NormalizedDecksBlock } from '../../decks/model.js';
+export interface DecksCompositionProps {
+    backgroundColor: NormalizedDecksBlock['backgroundColor'];
+    durationPerSlide: NormalizedDecksBlock['durationPerSlide'];
+    slides: NormalizedDecksBlock['slides'];
+    transitionDuration: NormalizedDecksBlock['transitionDuration'];
+}
+export declare const DecksComposition: ({ backgroundColor, durationPerSlide, slides, transitionDuration, }: DecksCompositionProps) => import("react/jsx-runtime").JSX.Element;
+export default DecksComposition;

package/dist/components/decks/DecksComposition.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbsoluteFill, Img, Sequence, useCurrentFrame, useVideoConfig } from 'remotion';
+import { getSlideDurationFrames, getSlideStyles } from '../../decks/timeline.js';
+const Slide = ({ slide, slideDuration, transitionDuration })=>{
+    const frame = useCurrentFrame();
+    const { imageScale, opacity, position: positionStyles, textAnimation: textAnimationStyles } = getSlideStyles({
+        animationType: slide.animationType,
+        frame,
+        imageZoom: slide.imageZoom,
+        slideDuration,
+        textPosition: slide.textPosition,
+        transitionDuration
+    });
+    return /*#__PURE__*/ _jsxs(AbsoluteFill, {
+        style: {
+            opacity
+        },
+        children: [
+            slide.image?.url && /*#__PURE__*/ _jsx(AbsoluteFill, {
+                children: /*#__PURE__*/ _jsx(Img, {
+                    alt: slide.image.alt || '',
+                    src: slide.image.url,
+                    style: {
+                        height: '100%',
+                        objectFit: 'cover',
+                        transform: `scale(${imageScale})`,
+                        width: '100%'
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsx(AbsoluteFill, {
+                style: {
+                    backgroundColor: 'rgba(0, 0, 0, 0.3)'
+                }
+            }),
+            (slide.headline || slide.subtext) && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    ...positionStyles,
+                    ...textAnimationStyles
+                },
+                children: [
+                    slide.headline && /*#__PURE__*/ _jsx("h1", {
+                        style: {
+                            color: slide.textColor,
+                            fontSize: '3.5rem',
+                            fontWeight: 700,
+                            lineHeight: 1.2,
+                            margin: 0,
+                            marginBottom: slide.subtext ? '1rem' : 0,
+                            textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)'
+                        },
+                        children: slide.headline
+                    }),
+                    slide.subtext && /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            color: slide.textColor,
+                            fontSize: '1.5rem',
+                            fontWeight: 400,
+                            lineHeight: 1.5,
+                            margin: 0,
+                            textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)'
+                        },
+                        children: slide.subtext
+                    })
+                ]
+            })
+        ]
+    });
+};
+export const DecksComposition = ({ backgroundColor, durationPerSlide, slides, transitionDuration })=>{
+    const { fps } = useVideoConfig();
+    const slideDurationFrames = getSlideDurationFrames({
+        durationPerSlide,
+        fps
+    });
+    return /*#__PURE__*/ _jsx(AbsoluteFill, {
+        style: {
+            backgroundColor
+        },
+        children: slides.map((slide, index)=>/*#__PURE__*/ _jsx(Sequence, {
+                durationInFrames: slideDurationFrames,
+                from: index * slideDurationFrames,
+                children: /*#__PURE__*/ _jsx(Slide, {
+                    slide: slide,
+                    slideDuration: slideDurationFrames,
+                    transitionDuration: transitionDuration
+                })
+            }, index))
+    });
+};
+export default DecksComposition;
+
+//# sourceMappingURL=DecksComposition.js.map

package/dist/components/decks/DecksComposition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/decks/DecksComposition.tsx"],"sourcesContent":["'use client'\n\nimport { AbsoluteFill, Img, Sequence, useCurrentFrame, useVideoConfig } from 'remotion'\n\nimport type {\n  NormalizedDecksBlock,\n  NormalizedDecksSlide,\n} from '../../decks/model.js'\n\nimport {\n  getSlideDurationFrames,\n  getSlideStyles,\n} from '../../decks/timeline.js'\n\nexport interface DecksCompositionProps {\n  backgroundColor: NormalizedDecksBlock['backgroundColor']\n  durationPerSlide: NormalizedDecksBlock['durationPerSlide']\n  slides: NormalizedDecksBlock['slides']\n  transitionDuration: NormalizedDecksBlock['transitionDuration']\n}\n\ninterface SlideProps {\n  slide: NormalizedDecksSlide\n  slideDuration: number\n  transitionDuration: number\n}\n\nconst Slide = ({ slide, slideDuration, transitionDuration }: SlideProps) => {\n  const frame = useCurrentFrame()\n\n  const { imageScale, opacity, position: positionStyles, textAnimation: textAnimationStyles } = getSlideStyles({\n    animationType: slide.animationType,\n    frame,\n    imageZoom: slide.imageZoom,\n    slideDuration,\n    textPosition: slide.textPosition,\n    transitionDuration,\n  })\n\n  return (\n    <AbsoluteFill style={{ opacity }}>\n      {slide.image?.url && (\n        <AbsoluteFill>\n          <Img\n            alt={slide.image.alt || ''}\n            src={slide.image.url}\n            style={{\n              height: '100%',\n              objectFit: 'cover',\n              transform: `scale(${imageScale})`,\n              width: '100%',\n            }}\n          />\n        </AbsoluteFill>\n      )}\n\n      <AbsoluteFill\n        style={{\n          backgroundColor: 'rgba(0, 0, 0, 0.3)',\n        }}\n      />\n\n      {(slide.headline || slide.subtext) && (\n        <div style={{ ...positionStyles, ...textAnimationStyles }}>\n          {slide.headline && (\n            <h1\n              style={{\n                color: slide.textColor,\n                fontSize: '3.5rem',\n                fontWeight: 700,\n                lineHeight: 1.2,\n                margin: 0,\n                marginBottom: slide.subtext ? '1rem' : 0,\n                textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)',\n              }}\n            >\n              {slide.headline}\n            </h1>\n          )}\n          {slide.subtext && (\n            <p\n              style={{\n                color: slide.textColor,\n                fontSize: '1.5rem',\n                fontWeight: 400,\n                lineHeight: 1.5,\n                margin: 0,\n                textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',\n              }}\n            >\n              {slide.subtext}\n            </p>\n          )}\n        </div>\n      )}\n    </AbsoluteFill>\n  )\n}\n\nexport const DecksComposition = ({\n  backgroundColor,\n  durationPerSlide,\n  slides,\n  transitionDuration,\n}: DecksCompositionProps) => {\n  const { fps } = useVideoConfig()\n  const slideDurationFrames = getSlideDurationFrames({ durationPerSlide, fps })\n\n  return (\n    <AbsoluteFill style={{ backgroundColor }}>\n      {slides.map((slide, index) => (\n        <Sequence\n          durationInFrames={slideDurationFrames}\n          from={index * slideDurationFrames}\n          key={index}\n        >\n          <Slide\n            slide={slide}\n            slideDuration={slideDurationFrames}\n            transitionDuration={transitionDuration}\n          />\n        </Sequence>\n      ))}\n    </AbsoluteFill>\n  )\n}\n\nexport default DecksComposition\n"],"names":["AbsoluteFill","Img","Sequence","useCurrentFrame","useVideoConfig","getSlideDurationFrames","getSlideStyles","Slide","slide","slideDuration","transitionDuration","frame","imageScale","opacity","position","positionStyles","textAnimation","textAnimationStyles","animationType","imageZoom","textPosition","style","image","url","alt","src","height","objectFit","transform","width","backgroundColor","headline","subtext","div","h1","color","textColor","fontSize","fontWeight","lineHeight","margin","marginBottom","textShadow","p","DecksComposition","durationPerSlide","slides","fps","slideDurationFrames","map","index","durationInFrames","from"],"mappings":"AAAA;;AAEA,SAASA,YAAY,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,QAAQ,WAAU;AAOvF,SACEC,sBAAsB,EACtBC,cAAc,QACT,0BAAyB;AAehC,MAAMC,QAAQ,CAAC,EAAEC,KAAK,EAAEC,aAAa,EAAEC,kBAAkB,EAAc;IACrE,MAAMC,QAAQR;IAEd,MAAM,EAAES,UAAU,EAAEC,OAAO,EAAEC,UAAUC,cAAc,EAAEC,eAAeC,mBAAmB,EAAE,GAAGX,eAAe;QAC3GY,eAAeV,MAAMU,aAAa;QAClCP;QACAQ,WAAWX,MAAMW,SAAS;QAC1BV;QACAW,cAAcZ,MAAMY,YAAY;QAChCV;IACF;IAEA,qBACE,MAACV;QAAaqB,OAAO;YAAER;QAAQ;;YAC5BL,MAAMc,KAAK,EAAEC,qBACZ,KAACvB;0BACC,cAAA,KAACC;oBACCuB,KAAKhB,MAAMc,KAAK,CAACE,GAAG,IAAI;oBACxBC,KAAKjB,MAAMc,KAAK,CAACC,GAAG;oBACpBF,OAAO;wBACLK,QAAQ;wBACRC,WAAW;wBACXC,WAAW,CAAC,MAAM,EAAEhB,WAAW,CAAC,CAAC;wBACjCiB,OAAO;oBACT;;;0BAKN,KAAC7B;gBACCqB,OAAO;oBACLS,iBAAiB;gBACnB;;YAGAtB,CAAAA,MAAMuB,QAAQ,IAAIvB,MAAMwB,OAAO,AAAD,mBAC9B,MAACC;gBAAIZ,OAAO;oBAAE,GAAGN,cAAc;oBAAE,GAAGE,mBAAmB;gBAAC;;oBACrDT,MAAMuB,QAAQ,kBACb,KAACG;wBACCb,OAAO;4BACLc,OAAO3B,MAAM4B,SAAS;4BACtBC,UAAU;4BACVC,YAAY;4BACZC,YAAY;4BACZC,QAAQ;4BACRC,cAAcjC,MAAMwB,OAAO,GAAG,SAAS;4BACvCU,YAAY;wBACd;kCAEClC,MAAMuB,QAAQ;;oBAGlBvB,MAAMwB,OAAO,kBACZ,KAACW;wBACCtB,OAAO;4BACLc,OAAO3B,MAAM4B,SAAS;4BACtBC,UAAU;4BACVC,YAAY;4BACZC,YAAY;4BACZC,QAAQ;4BACRE,YAAY;wBACd;kCAEClC,MAAMwB,OAAO;;;;;;AAO5B;AAEA,OAAO,MAAMY,mBAAmB,CAAC,EAC/Bd,eAAe,EACfe,gBAAgB,EAChBC,MAAM,EACNpC,kBAAkB,EACI;IACtB,MAAM,EAAEqC,GAAG,EAAE,GAAG3C;IAChB,MAAM4C,sBAAsB3C,uBAAuB;QAAEwC;QAAkBE;IAAI;IAE3E,qBACE,KAAC/C;QAAaqB,OAAO;YAAES;QAAgB;kBACpCgB,OAAOG,GAAG,CAAC,CAACzC,OAAO0C,sBAClB,KAAChD;gBACCiD,kBAAkBH;gBAClBI,MAAMF,QAAQF;0BAGd,cAAA,KAACzC;oBACCC,OAAOA;oBACPC,eAAeuC;oBACftC,oBAAoBA;;eALjBwC;;AAWf,EAAC;AAED,eAAeN,iBAAgB"}

package/dist/components/decks/SnapContainer.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import './styles.css';
+export interface SnapContainerProps {
+    children: ReactNode;
+}
+export declare const SnapContainer: ({ children }: SnapContainerProps) => import("react/jsx-runtime").JSX.Element;