wip

src/shared/notes/actions/zap.tsx

@@ -5,7 +5,6 @@ import { message } from '@tauri-apps/api/dialog';
 import { QRCodeSVG } from 'qrcode.react';
 import { useEffect, useRef, useState } from 'react';
 import CurrencyInput from 'react-currency-input-field';
-import TextareaAutosize from 'react-textarea-autosize';
 
 import { CancelIcon, ZapIcon } from '@shared/icons';
 
@@ -99,7 +98,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
           <ZapIcon className="h-5 w-5 text-white/80 group-hover:text-orange-400" />
         </button>
       </Dialog.Trigger>
-      <Dialog.Portal className="relative z-10">
+      <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
@@ -171,7 +170,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
                     </div>
                   </div>
                   <div className="mt-4 flex w-full flex-col gap-2">
-                    <TextareaAutosize
+                    <input
                       name="zapMessage"
                       value={zapMessage}
                       onChange={(e) => setZapMessage(e.target.value)}

src/shared/notes/kinds/file.tsx

@@ -1,5 +1,10 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { MediaPlayer, MediaProvider } from '@vidstack/react';
+import { MediaPlayer, MediaProvider, Poster } from '@vidstack/react';
+import {
+  DefaultAudioLayout,
+  DefaultVideoLayout,
+  defaultLayoutIcons,
+} from '@vidstack/react/player/layouts/default';
 import { Link } from 'react-router-dom';
 
 import { Image } from '@shared/image';
@@ -31,9 +36,27 @@ export function FileNote(props: { event?: NDKEvent }) {
           poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
           load="visible"
           aspectRatio="16/9"
+          muted={true}
           crossorigin=""
+          className="player"
         >
-          <MediaProvider />
+          <MediaProvider>
+            <Poster
+              className="vds-poster"
+              src="https://thumbnail.video/api/get?url=${url}&seconds=1"
+              alt={url}
+            />
+          </MediaProvider>
+          <DefaultAudioLayout
+            icons={defaultLayoutIcons}
+            smallLayoutWhen="(width < 500) or (height < 380)"
+            noModal={true}
+          />
+          <DefaultVideoLayout
+            icons={defaultLayoutIcons}
+            smallLayoutWhen="(width < 500) or (height < 380)"
+            noModal={true}
+          />
         </MediaPlayer>
       </div>
     );

src/shared/notes/mentions/hashtag.tsx

@@ -7,7 +7,7 @@ export function Hashtag({ tag }: { tag: string }) {
   const setWidget = useWidgets((state) => state.setWidget);
 
   return (
-    <span
+    <div
       role="button"
       tabIndex={0}
       onClick={() =>
@@ -24,9 +24,9 @@ export function Hashtag({ tag }: { tag: string }) {
           content: tag.replace('#', ''),
         })
       }
-      className="break-words text-fuchsia-400 hover:text-fuchsia-500"
+      className="break-all text-fuchsia-400 hover:text-fuchsia-500"
     >
       {tag}
-    </span>
+    </div>
   );
 }

src/shared/notes/preview/video.tsx

@@ -15,6 +15,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
           load="visible"
           aspectRatio="16/9"
           crossorigin=""
+          muted={true}
           className="player"
         >
           <MediaProvider>
@@ -24,8 +25,16 @@ export function VideoPreview({ urls }: { urls: string[] }) {
               alt={url}
             />
           </MediaProvider>
-          <DefaultAudioLayout icons={defaultLayoutIcons} />
-          <DefaultVideoLayout icons={defaultLayoutIcons} />
+          <DefaultAudioLayout
+            icons={defaultLayoutIcons}
+            smallLayoutWhen="(width < 500) or (height < 380)"
+            noModal={true}
+          />
+          <DefaultVideoLayout
+            icons={defaultLayoutIcons}
+            smallLayoutWhen="(width < 500) or (height < 380)"
+            noModal={true}
+          />
         </MediaPlayer>
       ))}
     </div>