Preview audio & video urls (fixes issue #46)

2022-05-03 15:09:19 +01:00
parent 3b0a5b80e7
commit 635a97b133
3 changed files with 109 additions and 0 deletions
@@ -0,0 +1,42 @@
+import { useRef } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { Body } from "~/components/Primitives/Body";
+import { PreviewBox } from "../PreviewBox";
+
+export function PreviewAudioUri({
+  src,
+  contentType,
+}: {
+  src: string;
+  contentType: string;
+}) {
+  const mediaRef = useRef<HTMLMediaElement>(null);
+
+  useHotkeys(
+    "space",
+    (e) => {
+      e.preventDefault();
+
+      if (mediaRef.current) {
+        if (mediaRef.current.paused) {
+          mediaRef.current.play();
+        } else {
+          mediaRef.current.pause();
+        }
+      }
+    },
+    [mediaRef]
+  );
+
+  return (
+    <div>
+      <PreviewBox>
+        <Body>
+          <audio controls src={src} ref={mediaRef}>
+            Sorry, your browser doesn't support embedded audio.
+          </audio>
+        </Body>
+      </PreviewBox>
+    </div>
+  );
+}
@@ -6,9 +6,11 @@ import {
 import Color from "color";
 import { CodeViewer } from "~/components/CodeViewer";
 import { PreviewBox } from "../PreviewBox";
+import { PreviewAudioUri } from "./PreviewAudioUri";
 import { PreviewDate } from "./PreviewDate";
 import { PreviewImageUri } from "./PreviewImageUri";
 import { PreviewUri } from "./PreviewUri";
+import { PreviewVideoUri } from "./PreviewVideoUri";

 export function PreviewString({ info }: { info: JSONStringType }) {
  if (info.format == null) {
@@ -30,6 +32,28 @@ export function PreviewString({ info }: { info: JSONStringType }) {
            contentType={info.format.contentType}
          />
        );
+      } else if (
+        info.format.contentType === "video/mp4" ||
+        info.format.contentType === "video/webm" ||
+        info.format.contentType === "video/ogg"
+      ) {
+        return (
+          <PreviewVideoUri
+            src={info.value}
+            contentType={info.format.contentType}
+          />
+        );
+      } else if (
+        info.format.contentType === "audio/mpeg" ||
+        info.format.contentType === "audio/ogg" ||
+        info.format.contentType === "audio/wav"
+      ) {
+        return (
+          <PreviewAudioUri
+            src={info.value}
+            contentType={info.format.contentType}
+          />
+        );
      } else {
        return <PreviewUri value={info.value} type={info} />;
      }
@@ -0,0 +1,43 @@
+import { useRef } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { Body } from "~/components/Primitives/Body";
+import { PreviewBox } from "../PreviewBox";
+
+export function PreviewVideoUri({
+  src,
+  contentType,
+}: {
+  src: string;
+  contentType: string;
+}) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useHotkeys(
+    "space",
+    (e) => {
+      e.preventDefault();
+
+      if (videoRef.current) {
+        if (videoRef.current.paused) {
+          videoRef.current.play();
+        } else {
+          videoRef.current.pause();
+        }
+      }
+    },
+    [videoRef]
+  );
+
+  return (
+    <div>
+      <PreviewBox>
+        <Body>
+          <video controls ref={videoRef}>
+            <source src={src} type={contentType} />
+            Sorry, your browser doesn't support embedded videos.
+          </video>
+        </Body>
+      </PreviewBox>
+    </div>
+  );
+}