✨ Video Player

src/components/posts/Video.tsx

@@ -0,0 +1,41 @@
+import { useState, Fragment } from "react";
+
+export default function Video({
+  sources,
+}: {
+  sources: { caption: string; url: string }[];
+}) {
+  const [focus, setFocus] = useState<boolean[]>(
+    sources.map((_, idx) => idx === 0)
+  );
+
+  function changeFocus(idx: number) {
+    setFocus(focus.map((_, idx) => idx === idx));
+  }
+
+  return (
+    <div role="tablist" className="tabs tabs-lifted">
+      {sources.map((item, idx) => (
+        <Fragment key={idx}>
+          <input
+            type="radio"
+            name={item.caption}
+            role="tab"
+            className="tab"
+            aria-label={item.caption}
+            checked={focus[idx]}
+            onChange={() => changeFocus(idx)}
+          />
+          <div
+            role="tabpanel"
+            className="tab-content bg-base-100 border-base-300 rounded-box"
+          >
+            <video className="mb-0 block w-full h-[360px]" controls>
+                <source src={item.url} />
+            </video>
+          </div>
+        </Fragment>
+      ))}
+    </div>
+  );
+}

src/pages/posts/[slug].astro

@@ -1,5 +1,6 @@
 ---
 import PageLayout from "../../layouts/PageLayout.astro";
+import Video from "../../components/posts/Video.tsx";
 
 import { POST_TYPES } from "../../scripts/consts";
 import { client } from "../../../tina/__generated__/client";
@@ -9,6 +10,10 @@ export const prerender = false;
 
 const { slug } = Astro.params;
 
+const components = {
+  Video,
+}
+
 const { data } = await client.queries.post({
   relativePath: (slug ?? "index") + ".mdx",
 });
@@ -30,7 +35,7 @@ const { data } = await client.queries.post({
         <div class="divider"></div>
 
         <div class="prose max-w-none">
-          <TinaMarkdown content={data.post._body} />
+          <TinaMarkdown content={data.post._body} components={components} />
         </div>
       </div>
     </div>

tina/collection/post.ts

@@ -68,7 +68,32 @@ const Post: Collection = {
       type: "rich-text",
       label: "Body",
       name: "_body",
-      templates: [],
+      templates: [
+        {
+          name: "Video",
+          label: "Video",
+          fields: [
+            {
+              name: "sources",
+              label: "Sources",
+              type: "object",
+              fields: [
+                {
+                  name: "caption",
+                  label: "Caption",
+                  type: "string",
+                },
+                {
+                  name: "url",
+                  label: "URL",
+                  type: "string",
+                },
+              ],
+              list: true,
+            },
+          ],
+        },
+      ],
       isBody: true,
     },
   ],