WIP add Mux

dmno-dev · Aug 30, 2024 · 73ee5fb · 73ee5fb
1 parent 7af659f
commit 73ee5fb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/packages/docs-site/src/components/VideoBlock.astro b/packages/docs-site/src/components/VideoBlock.astro
@@ -1,11 +1,16 @@
 ---
-const { url } = Astro.props;
+const { muxId } = Astro.props;
 ---
 
 <div class="video-container">
-  <iframe src={ url } width="640" height="480" allow="autoplay"></iframe>
+  <mux-player
+    playback-id={muxId}
+    autoplay
+    loop
+    muted
+  ></mux-player>
 </div>
-
+<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
 
 
 <style>
@@ -16,10 +21,11 @@ const { url } = Astro.props;
     justify-content: center;
   }
   @media (min-width: 640px) {
-    iframe {
+    mux-player {
       border: none;
       margin: 0 auto;
       width: 90%;
+      aspect-ratio: 16/10;
     }
   }
 </style>
diff --git a/packages/docs-site/src/pages/index.astro b/packages/docs-site/src/pages/index.astro
@@ -10,6 +10,8 @@ import importedCode from '/.dmno/config.mts?raw';
 import intellisenseImg from '@/assets/docs-images/platform-intellisense-example.png';
 import leakImg from '@/assets/docs-images/security-demo.png';
 import screenshotImg from '@/assets/blog/screenshot-with-comments.png';
+
+const muxId = "dTb7Y3p00ajAOcSF4x00DZN7lkXGU00i2nfW3puCWVfyos";
 ---
 <LandingPage
   title="DMNO"
@@ -25,8 +27,9 @@ import screenshotImg from '@/assets/blog/screenshot-with-comments.png';
     <InitCTA 
       command="npx dmno init"
     />
-    <img src={screenshotImg.src} alt="an annotated screenshot showing DMNO's various features">
-    <!-- <VideoBlock url="https://drive.google.com/file/d/1NP3jE0UVeEbBvVczVnevvcDtAZOFo9tJ/preview"/> -->
+    <!-- <img src={screenshotImg.src} alt="an annotated screenshot showing DMNO's various features"> -->
+    <VideoBlock muxId={muxId}/>
+
     <h2>Configuration as Code</h2>
     <Code
       code={`
@@ -103,6 +106,6 @@ export default defineDmnoService({
     margin-top: 2rem;
   }
   h2 {
-    margin: 3rem;
+    margin: 2rem 1rem;
   }
 </style>