feat: re-enable docs corner overlay for video promotion

src/components/pages/doc/modal/data.js

@@ -1,17 +1,17 @@
 // pagesToShow - array of page titles and sections where the modal should be shown
 // 'Neon Docs' - show modal on the introduction page
 const MODALS = [
-  // Example modal configuration:
-  // {
-  //   id: 'slack',
-  //   pagesToShow: ['Neon Docs'],
-  //   title: 'Manage Neon in Slack',
-  //   description: 'Get alerts, track usage, and manage your team right from Slack',
-  //   link: {
-  //     title: 'Get the Neon App for Slack',
-  //     url: '/docs/manage/slack-app',
-  //   },
-  // },
+  {
+    id: 'branching-video',
+    pagesToShow: ['Neon Docs'],
+    embedId: 'UuHnFlg66Io',
+    title: 'Watch: Git for databases',
+    description: 'See how Neon branching works in practice.',
+    link: {
+      title: 'Watch the video',
+      url: '/docs/introduction/branching',
+    },
+  },
 ];
 
 export default MODALS;

src/components/pages/doc/modal/modal.jsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { AnimatePresence, LazyMotion, domAnimation, m } from 'framer-motion';
+import Image from 'next/image';
 import { PropTypes } from 'prop-types';
 import { useState, useEffect } from 'react';
 
@@ -9,6 +10,7 @@ import useLocalStorage from 'hooks/use-local-storage';
 import CloseIcon from 'icons/close-small.inline.svg';
 // import SlackIcon from 'icons/docs/modal/slack.inline.svg';
 import SupportIcon from 'icons/docs/modal/support.inline.svg';
+import PlayIcon from 'icons/play.inline.svg';
 import { cn } from 'utils/cn';
 import sendGtagEvent from 'utils/send-gtag-event';
 
@@ -17,7 +19,7 @@ const icons = {
   // slack: SlackIcon,
 };
 
-const Modal = ({ id, title, description, link }) => {
+const Modal = ({ id, title, description, link, embedId }) => {
   const [closedModals, setClosedModals] = useLocalStorage('closedModals', []);
   const [isMounted, setIsMounted] = useState(false);
 
@@ -38,7 +40,8 @@ const Modal = ({ id, title, description, link }) => {
         {isMounted && !isClosed && (
           <m.div
             className={cn(
-              'fixed right-4 bottom-4 z-[100] flex w-80 flex-col rounded-lg border p-5 pt-[18px] xs:inset-x-3 xs:bottom-3 xs:w-auto',
+              'fixed right-4 bottom-4 z-[100] flex w-80 flex-col rounded-lg border p-5 xs:inset-x-3 xs:bottom-3 xs:w-auto',
+              embedId ? 'pt-9' : 'pt-[18px]',
               'border-gray-new-90 bg-gray-new-98 bg-[radial-gradient(73%_69%_at_100%_100%,rgba(217,238,242,0.5),rgba(217,238,242,0.1))]',
               'shadow-[0px_4px_10px_0px_rgba(0,0,0,.08),0px_4px_30px_0px_rgba(0,0,0,.06)]',
               'dark:border-[#1D1E20] dark:bg-[#101013] dark:bg-[radial-gradient(89%_63%_at_100%_100%,#1D2930,transparent)]',
@@ -48,7 +51,35 @@ const Modal = ({ id, title, description, link }) => {
             animate={{ opacity: 1, transition: { delay: 3 } }}
             exit={{ opacity: 0, transition: { duration: 0.1 } }}
           >
-            {Icon && <Icon className="mb-2.5 h-5 w-5 text-secondary-8 dark:text-green-45" />}
+            {embedId ? (
+              <a
+                className="group relative mb-3 block aspect-video overflow-hidden rounded-md"
+                href={link.url}
+                aria-label={`Watch: ${title}`}
+                onClick={() => {
+                  sendGtagEvent('click_docs_modal_link', {
+                    modal: id,
+                    link: 'thumbnail',
+                  });
+                }}
+              >
+                <Image
+                  className="h-full w-full object-cover"
+                  src={`https://i.ytimg.com/vi/${embedId}/mqdefault.jpg`}
+                  alt=""
+                  width={320}
+                  height={180}
+                  unoptimized
+                />
+                <span className="absolute inset-0 flex items-center justify-center bg-black/20 transition-colors duration-200 group-hover:bg-black/30">
+                  <span className="flex h-12 w-12 items-center justify-center rounded-full bg-black/70">
+                    <PlayIcon className="h-5 w-5 pl-0.5 text-white" />
+                  </span>
+                </span>
+              </a>
+            ) : (
+              Icon && <Icon className="mb-2.5 h-5 w-5 text-secondary-8 dark:text-green-45" />
+            )}
             <p className="leading-snug font-medium tracking-extra-tight text-black-new dark:text-white">
               {title}
             </p>
@@ -93,6 +124,7 @@ Modal.propTypes = {
     title: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
   }).isRequired,
+  embedId: PropTypes.string,
 };
 
 export default Modal;