Added videos in Markdawn

src/components/Markdown/Markdawn.tsx

@@ -17,6 +17,8 @@ import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
 import { Link } from "components/Inputs/Link";
 import { useFormat } from "hooks/useFormat";
+import { VideoPlayer } from "components/Player";
+import { getVideoFile } from "helpers/videos";
 
 /*
  *                                        ╭─────────────╮
@@ -144,6 +146,16 @@ export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Eleme
             },
           },
 
+          Video: {
+            component: (comProps) => (
+              <VideoPlayer
+                src={getVideoFile(comProps.id)}
+                title={comProps.title}
+                className="my-8"
+              />
+            ),
+          },
+
           InsetBox: {
             component: (compProps) => <InsetBox className="my-12">{compProps.children}</InsetBox>,
           },

src/components/Player.tsx

@@ -251,14 +251,18 @@ const PlayerControls = ({
       />
       <div className="grid w-full place-items-start">
         {isDefinedAndNotEmpty(title) && (
-          <p className="line-clamp-1 text-left text-xs text-dark">{title}</p>
+          <p className="!my-0 line-clamp-1 text-left text-xs text-dark">{title}</p>
         )}
         <div
           className={cJoin(
             "flex w-full place-content-between place-items-center",
             cIf(isContentPanelAtLeastMd, "gap-5", "gap-3")
           )}>
-          <p className={cJoin("font-mono", cIf(isContentPanelAtLeastMd, "h-5", "h-3 text-xs"))}>
+          <p
+            className={cJoin(
+              "!my-0 font-mono",
+              cIf(isContentPanelAtLeastMd, "h-5", "h-3 text-xs")
+            )}>
             {prettyDuration(currentTime)}
           </p>
           <Slider
@@ -276,7 +280,11 @@ const PlayerControls = ({
             max={duration * STEP_MULTIPLIER}
           />
           {!isContentPanelAtLeastXl && type === "video" && <p>/</p>}
-          <p className={cJoin("font-mono", cIf(isContentPanelAtLeastMd, "h-5", "h-3 text-xs"))}>
+          <p
+            className={cJoin(
+              "!my-0 font-mono",
+              cIf(isContentPanelAtLeastMd, "h-5", "h-3 text-xs")
+            )}>
             {prettyDuration(duration)}
           </p>
         </div>

src/pages/dev/editor.tsx

@@ -444,6 +444,27 @@ const Editor = (props: Props): JSX.Element => {
           <Button icon="dashboard" />
         </ToolTip>
 
+        <ToolTip
+          placement="bottom"
+          content={
+            <>
+              <h3 className="text-lg">Videos</h3>
+              <div className="grid gap-2">
+                <Button
+                  onClick={() => insert(`<Video id="XXXXXXXXX" />`)}
+                  icon="movie"
+                  text="Video"
+                />
+                <Button
+                  onClick={() => insert(`<Video id="XXXXXXXXX" title="My Title" />`)}
+                  icon="movie"
+                  text="Video + title"
+                />
+              </div>
+            </>
+          }>
+          <Button icon="movie" />
+        </ToolTip>
         <ToolTip placement="bottom" content={<h3 className="text-lg">Scene break</h3>}>
           <Button onClick={() => insert("\n* * *\n")} icon="more_horiz" />
         </ToolTip>