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

neondatabase · Dec 17, 2024 · a6526e5 · a6526e5
1 parent 658daa0
commit a6526e5
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 1 deletion.
diff --git a/content/use-cases/database-per-tenant.md b/content/use-cases/database-per-tenant.md
@@ -8,6 +8,7 @@ image: '/images/social-previews/use-cases/db-per-tenant.jpg'
 
 <UseCaseContext />
 
+<Video name="db-per-user" width={1536} height={864}/>
 <Admonition type="note" title="TL;DR">
 Companies are managing fleets of thousands of Neon databases with very small teams and budgets. This is why:
 

diff --git a/public/videos/pages/doc/db-per-user.mp4 b/public/videos/pages/doc/db-per-user.mp4
diff --git a/public/videos/pages/doc/db-per-user.webm b/public/videos/pages/doc/db-per-user.webm
diff --git a/src/components/pages/doc/video/index.js b/src/components/pages/doc/video/index.js
@@ -0,0 +1,3 @@
+import Video from './video';
+
+export default Video;
diff --git a/src/components/pages/doc/video/video.jsx b/src/components/pages/doc/video/video.jsx
@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+
+import PauseableVideo from 'components/shared/pauseable-video';
+
+const Video = ({ name, width, height }) => (
+  /* 
+    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
+  */
+  <PauseableVideo
+    className="mb-14 lg:mb-12 md:mb-10 sm:mb-8"
+    videoClassName="!m-0 !rounded-none"
+    width={width}
+    height={height}
+  >
+    <source src={`/videos/pages/doc/${name}.mp4`} type="video/mp4" />
+    <source src={`/videos/pages/doc/${name}.webm`} type="video/webm" />
+  </PauseableVideo>
+);
+
+Video.propTypes = {
+  name: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+};
+
+export default Video;
diff --git a/src/components/pages/use-case/use-case-context/use-case-context.jsx b/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();
 

diff --git a/src/components/shared/content/content.jsx b/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,
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Video from './video';

		export default Video;