Video Player

This commit is contained in:
LittleSheep 2024-01-21 18:20:36 +08:00
parent 2bd6b8758b
commit f0063afffa
4 changed files with 74 additions and 3 deletions

View File

@ -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>
);
}

View File

@ -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>

View File

@ -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,
},
],

File diff suppressed because one or more lines are too long