feat: add video to database-per-tenant use case

content/use-cases/database-per-tenant.md

@@ -6,7 +6,20 @@ updatedOn: '2024-08-23T09:00:00.000Z'
 image: '/images/social-previews/use-cases/db-per-tenant.jpg'
 ---
 
-<UseCaseContext />
+<Video
+sources={[
+{
+src: "/videos/pages/doc/db-per-user.mp4",
+type: "video/mp4",
+},
+{
+src: "/videos/pages/doc/db-per-user.webm",
+type: "video/webm",
+}
+]}
+width={768}
+height={432}
+/>
 
 <Admonition type="note" title="TL;DR">
 Companies are managing fleets of thousands of Neon databases with very small teams and budgets. This is why:

src/components/pages/cli/try/try.jsx

@@ -29,7 +29,7 @@ const Try = () => (
         </div>
         <div className="w-1/2 md:w-full">
           {/* 
-            Video omtimization parameters:
+            Recommended video omtimization parameters:
             mp4: -pix_fmt yuv420p -vf scale=1152:-2 -movflags faststart -vcodec libx264 -crf 20
             webm: -c:v libvpx-vp9 -crf 20 -vf scale=1152:-2 -deadline best -an
           */}

src/components/pages/doc/video/index.js

@@ -0,0 +1,3 @@
+import Video from './video';
+
+export default Video;

src/components/pages/doc/video/video.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+
+import PauseableVideo from 'components/shared/pauseable-video';
+
+/* 
+  Recommended video omtimization parameters:
+  mp4: -pix_fmt yuv420p -vf scale={width}:-2 -movflags faststart -vcodec libx264 -crf 20
+  webm: -c:v libvpx-vp9 -crf 20 -vf scale={width}:-2 -deadline best -an
+*/
+const Video = ({ sources, width, height }) => (
+  <PauseableVideo width={width} height={height}>
+    {sources.map(({ src, type }) => (
+      <source key={src} src={src} type={type} />
+    ))}
+  </PauseableVideo>
+);
+
+Video.propTypes = {
+  sources: PropTypes.arrayOf(
+    PropTypes.shape({
+      src: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+};
+
+export default Video;

src/components/pages/use-case/use-case-context/use-case-context.jsx

@@ -6,7 +6,7 @@ import { useHomepageVisit } from 'app/homepage-visit-context';
 import Link from 'components/shared/link';
 import LINKS from 'constants/links';
 
-const UseCaseContext = ({}) => {
+const UseCaseContext = () => {
   const [showContext, setShowContext] = useState(false);
   const hasVisitedHomepage = useHomepageVisit();
 

src/components/shared/content/content.jsx

@@ -17,6 +17,7 @@ import LinkPreview from 'components/pages/doc/link-preview';
 import Tabs from 'components/pages/doc/tabs';
 import TabItem from 'components/pages/doc/tabs/tab-item';
 import TechnologyNavigation from 'components/pages/doc/technology-navigation';
+import Video from 'components/pages/doc/video';
 import YoutubeIframe from 'components/pages/doc/youtube-iframe';
 import SubscriptionForm from 'components/pages/use-case/subscription-form';
 import Testimonial from 'components/pages/use-case/testimonial';
@@ -175,6 +176,7 @@ const getComponents = (withoutAnchorHeading, isReleaseNote, isPostgres, isUseCas
   UseCaseContext,
   ComputeCalculator,
   SubscriptionForm,
+  Video,
   ...sharedComponents,
 });