feat: full screen image preview

2023-05-04 11:36:21 +01:00
parent 805ce1d96e
commit 5089cd63eb
7 changed files with 103 additions and 78 deletions
--- a/packages/app/src/Element/MediaElement.tsx
+++ b/packages/app/src/Element/MediaElement.tsx
@ -0,0 +1,82 @@
+import { ProxyImg } from "Element/ProxyImg";
+import React, { MouseEvent, useState } from "react";
+
+import "./MediaElement.css";
+import Modal from "Element/Modal";
+import Icon from "Icons/Icon";
+
+/*
+[
+  "imeta",
+  "url https://nostr.build/i/148e3e8cbe29ae268b0d6aad0065a086319d3c3b1fdf8b89f1e2327d973d2d05.jpg",
+  "blurhash e6A0%UE2t6D*R%?u?a9G?aM|~pM|%LR*RjR-%2NG%2t7_2R*%1IVWB",
+  "dim 3024x4032"
+],
+*/
+interface MediaElementProps {
+  mime: string;
+  url: string;
+  magnet?: string;
+  sha256?: string;
+  blurHash?: string;
+}
+
+export function MediaElement(props: MediaElementProps) {
+  if (props.mime.startsWith("image/")) {
+    return (
+      <SpotlightMedia>
+        <ProxyImg key={props.url} src={props.url} />
+      </SpotlightMedia>
+    );
+  } else if (props.mime.startsWith("audio/")) {
+    return <audio key={props.url} src={props.url} controls />;
+  } else if (props.mime.startsWith("video/")) {
+    return (
+      <SpotlightMedia>
+        <video key={props.url} src={props.url} controls />
+      </SpotlightMedia>
+    );
+  } else {
+    return (
+      <a
+        key={props.url}
+        href={props.url}
+        onClick={e => e.stopPropagation()}
+        target="_blank"
+        rel="noreferrer"
+        className="ext">
+        {props.url}
+      </a>
+    );
+  }
+}
+
+export function SpotlightMedia({ children }: { children: React.ReactNode }) {
+  const [showModal, setShowModal] = useState(false);
+
+  function onClick(e: MouseEvent<HTMLDivElement>) {
+    e.stopPropagation();
+    e.preventDefault();
+    setShowModal(s => !s);
+  }
+
+  function onClose(e: MouseEvent<HTMLDivElement>) {
+    e.stopPropagation();
+    e.preventDefault();
+    setShowModal(false);
+  }
+
+  return (
+    <>
+      {showModal && (
+        <Modal onClose={onClose} className="spotlight">
+          <div className="close" onClick={onClose}>
+            <Icon name="close" />
+          </div>
+          {children}
+        </Modal>
+      )}
+      <div onClick={onClick}>{children}</div>
+    </>
+  );
+}