fix: add back missing VideoDrawer block

Author: AlessioGr

src/collections/Docs/blocks/VideoDrawer/index.ts

@@ -0,0 +1,41 @@
+import type { Block } from 'payload'
+
+export const VideoDrawerBlock: Block = {
+  slug: 'VideoDrawer',
+  fields: [
+    {
+      name: 'id',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'label',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'drawerTitle',
+      type: 'text',
+      required: true,
+    },
+  ],
+  interfaceName: 'VideoDrawerBlock',
+  jsx: {
+    export: ({ fields }) => {
+      return {
+        props: {
+          id: fields.id,
+          drawerTitle: fields.drawerTitle,
+          label: fields.label,
+        },
+      }
+    },
+    import: ({ props }) => {
+      return {
+        id: props.id,
+        drawerTitle: props.drawerTitle,
+        label: props.label,
+      }
+    },
+  },
+}

src/collections/Docs/index.ts

@@ -22,6 +22,7 @@ import { LightDarkImageBlock } from './blocks/lightDarkImage'
 import { RestExamplesBlock } from './blocks/restExamples'
 import { TableWithDrawersBlock } from './blocks/tableWithDrawers'
 import { UploadBlock } from './blocks/upload'
+import { VideoDrawerBlock } from './blocks/VideoDrawer'
 import { YoutubeBlock } from './blocks/youtube'
 import { lexicalToMDX } from './mdxToLexical'
 
@@ -38,6 +39,7 @@ export const contentLexicalEditorFeatures: FeatureProviderServer[] = [
       UploadBlock,
       RestExamplesBlock,
       TableWithDrawersBlock,
+      VideoDrawerBlock,
     ],
   }),
 ]

src/components/RichText/VideoDrawer/index.module.scss

@@ -0,0 +1,72 @@
+@use '@scss/common' as *;
+.videoDrawerToggler {
+  @include btnReset;
+  width: 100%;
+  margin: 0.5rem 0 1.5rem 0;
+  background: var(--theme-elevation-150);
+  transition: all 200ms ease-in-out;
+  border-bottom: 2px solid var(--theme-elevation-700);
+  &:hover {
+    background: var(--theme-elevation-200);
+    cursor: pointer;
+    .playIcon {
+      transform: translate(-50%, -50%) scale(1.1);
+    }
+  }
+  .wrap {
+    display: flex;
+  }
+  .thumbnail {
+    position: relative;
+    flex-shrink: 0;
+    height: auto;
+    width: 6rem;
+  }
+  .playIcon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: all 200ms ease-in-out;
+  }
+  .arrow {
+    margin-left: 1rem;
+  }
+  .labelWrap {
+    width: 100%;
+    padding: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: left;
+  }
+  @include large-break {
+    .labelWrap {
+      padding: 1rem;
+    }
+  }
+  @include mid-break {
+    .thumbnail {
+      width: 4rem;
+    }
+  }
+  @include extra-small-break {
+    .labelWrap {
+      display: inline-block;
+    }
+    .arrow {
+      margin-left: 0.5rem;
+      width: 0.5rem;
+      height: 0.5rem;
+    }
+  }
+}
+html[data-theme='light'] {
+  .videoDrawerToggler {
+    background: var(--theme-elevation-100);
+    border-bottom: 2px solid var(--theme-elevation-400);
+    &:hover {
+      background: var(--theme-elevation-150);
+    }
+  }
+}

src/components/RichText/VideoDrawer/index.tsx

@@ -0,0 +1,40 @@
+import { Drawer, DrawerToggler } from '@components/Drawer/index.js'
+import YouTube from '@components/YouTube/index.js'
+import { ArrowIcon } from '@root/icons/ArrowIcon/index.js'
+import { PlayIcon } from '@root/icons/PlayIcon/index.js'
+import Image from 'next/image'
+import React from 'react'
+
+import classes from './index.module.scss'
+type Props = {
+  drawerTitle?: string
+  id: string
+  label?: string
+}
+export const VideoDrawer: React.FC<Props> = ({ id, drawerTitle, label }) => {
+  const drawerSlug = `video-drawer-${id}`
+  return (
+    <>
+      <DrawerToggler className={classes.videoDrawerToggler} slug={drawerSlug}>
+        <div className={classes.wrap}>
+          <div className={classes.thumbnail}>
+            <Image
+              alt={drawerTitle || label || 'Video Thumbnail'}
+              fill
+              src={`https://img.youtube.com/vi/${id}/mqdefault.jpg`}
+              style={{ objectFit: 'cover', objectPosition: 'left', opacity: 0.85 }}
+            />
+            <PlayIcon className={classes.playIcon} size="large" />
+          </div>
+          <div className={classes.labelWrap}>
+            <strong>{label}</strong>
+            <ArrowIcon className={classes.arrow} />
+          </div>
+        </div>
+      </DrawerToggler>
+      <Drawer size="m" slug={drawerSlug} title={drawerTitle}>
+        <YouTube id={`${id}?autoplay=1`} title={drawerTitle || ''} />
+      </Drawer>
+    </>
+  )
+}

src/components/RichText/index.tsx

@@ -18,6 +18,7 @@ import type {
   TemplateCardsBlock,
   UploadBlock,
   VideoBlock,
+  VideoDrawerBlock,
   YoutubeBlock,
 } from '@types'
 
@@ -52,6 +53,7 @@ import { RestExamples } from './RestExamples'
 import { CustomTableJSXConverters } from './Table/index.js'
 import { TableWithDrawers } from './TableWithDrawers'
 import { UploadBlockImage } from './UploadBlock/index.js'
+import { VideoDrawer } from './VideoDrawer'
 
 type Props = {
   className?: string
@@ -72,6 +74,7 @@ export type NodeTypes =
       | TemplateCardsBlock
       | UploadBlock
       | VideoBlock
+      | VideoDrawerBlock
       | YoutubeBlock
     >
   | SerializedLabelNode
@@ -165,6 +168,15 @@ export const jsxConverters: (args: { toc?: boolean }) => JSXConvertersFunction<N
 
           return null
         },
+        VideoDrawer: ({ node }) => {
+          return (
+            <VideoDrawer
+              drawerTitle={node.fields.drawerTitle}
+              id={node.fields.id}
+              label={node.fields.label}
+            />
+          )
+        },
         YouTube: ({ node }) => {
           return <YouTube id={node.fields.id} title={node.fields.title ?? ''} />
         },

src/payload-types.ts

@@ -13679,6 +13679,17 @@ export interface BrBlock {
   blockName?: string | null;
   blockType: 'br';
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "VideoDrawerBlock".
+ */
+export interface VideoDrawerBlock {
+  id: string | null;
+  label: string;
+  drawerTitle: string;
+  blockName?: string | null;
+  blockType: 'VideoDrawer';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "CommandLineBlock".

src/payload.config.ts

@@ -27,6 +27,7 @@ import { CommunityHelp } from './collections/CommunityHelp'
 import { Docs } from './collections/Docs'
 import { BannerBlock } from './collections/Docs/blocks/banner'
 import { CodeBlock } from './collections/Docs/blocks/code'
+import { VideoDrawerBlock } from './collections/Docs/blocks/VideoDrawer'
 import { Media } from './collections/Media'
 import { Pages } from './collections/Pages'
 import { Budgets, Industries, Regions, Specialties } from './collections/PartnerFilters'
@@ -173,6 +174,7 @@ export default buildConfig({
 
             interfaceName: 'BrBlock',
           },
+          VideoDrawerBlock,
           {
             slug: 'commandLine',
             fields: [