wip

2023-09-30 15:12:33 +07:00
parent 09b3eeda99
commit a2e3247432
27 changed files with 414 additions and 199 deletions
--- a/src/shared/icons/handArrowDown.tsx
+++ b/src/shared/icons/handArrowDown.tsx
@@ -0,0 +1,29 @@
+import { SVGProps } from 'react';
+
+export function HandArrowDownIcon(
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="130"
+      height="130"
+      fill="none"
+      viewBox="0 0 130 130"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M59.95 53.86c.109.564.326 1.126.543 1.687.976 3.028 2.062 6.56 4.015 9.168 2.604 3.419 5.534 4.74 8.463 4.711 4.123-.044 8.355-3.086 10.959-7.254 2.604-4.13 3.69-9.301 2.062-13.466-1.085-2.855-3.472-5.291-7.596-6.62-4.665-1.532-9.114-.278-13.02 2.422-1.52 1.014-2.821 2.233-4.123 3.577-.326-1.768-.652-3.553-.977-5.363-.869-5.925-1.086-12.154-.76-18.127.325-7.901 1.954-15.46 4.992-22.763.217-.674-.109-1.447-.76-1.725-.651-.276-1.41.045-1.736.72-3.146 7.59-4.883 15.446-5.209 23.658-.217 6.146-.107 12.555.87 18.653.433 2.526.867 5.005 1.41 7.457-2.496 3.216-4.45 6.789-5.643 9.827-7.596 20.325 2.278 47.693 12.044 66.11a1.26 1.26 0 001.737.549c.65-.342.867-1.141.542-1.786-9.44-17.825-19.206-44.269-11.828-63.94.868-2.313 2.28-4.968 4.015-7.494zm2.062-2.63c.217 1.161.542 2.315.976 3.465.977 2.776 1.845 6.037 3.58 8.426 1.954 2.581 4.125 3.684 6.295 3.663 3.472-.036 6.727-2.651 8.789-6.022 2.17-3.409 3.255-7.656 1.845-11.094-.868-2.214-2.713-4.04-5.86-5.07-3.906-1.261-7.595-.142-10.742 2.084-1.844 1.238-3.472 2.816-4.883 4.548z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M66.784 126.734c-.542-.384-1.085-.956-1.628-1.53-1.085-1.104-2.061-2.274-2.93-2.89-5.208-3.796-11.501-8.282-17.686-10.272-.65-.225-1.41.156-1.627.85-.217.694.108 1.439.867 1.664 5.86 1.909 11.828 6.255 16.928 9.898.868.666 2.061 2.077 3.146 3.207.977.959 1.954 1.724 2.93 2.002.543.196 1.52-.021 2.17-1.243.868-1.732 1.629-6.541 1.737-7.007 1.085-4.715 2.17-8.865 6.293-11.842.543-.429.651-1.257.326-1.846-.434-.589-1.303-.719-1.845-.289-4.666 3.394-6.185 8.041-7.379 13.416 0 .343-.434 3.218-1.085 5.215-.108.216-.108.454-.217.667z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
--- a/src/shared/icons/index.ts
+++ b/src/shared/icons/index.ts
@@ -66,3 +66,4 @@ export * from './stars';
 export * from './nwc';
 export * from './timeline';
 export * from './dots';
+export * from './handArrowDown';
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -90,7 +90,7 @@ export function Navigation() {
            Home
          </NavLink>
          <NavLink
-            to="/browse/"
+            to="/relays"
            preventScrollReset={true}
            className={({ isActive }) =>
              twMerge(
@@ -104,7 +104,24 @@ export function Navigation() {
            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
              <WorldIcon className="h-4 w-4 text-white" />
            </span>
-            Browse
+            Relays
+          </NavLink>
+          <NavLink
+            to="/explore"
+            preventScrollReset={true}
+            className={({ isActive }) =>
+              twMerge(
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
+                isActive
+                  ? 'border-fuchsia-500 bg-white/5 text-white'
+                  : 'border-transparent text-white/70'
+              )
+            }
+          >
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+              <WorldIcon className="h-4 w-4 text-white" />
+            </span>
+            Explore
          </NavLink>
          <NavLink
            to="/notifications"
--- a/src/shared/notes/kinds/file.tsx
+++ b/src/shared/notes/kinds/file.tsx
@@ -1,5 +1,5 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import ReactPlayer from 'react-player';
+import { MediaPlayer, MediaProvider } from '@vidstack/react';
 import { Link } from 'react-router-dom';

 import { Image } from '@shared/image';
@@ -25,15 +25,16 @@ export function FileNote(props: { event?: NDKEvent }) {
  if (type === 'video') {
    return (
      <div className="mb-2 mt-3">
-        <ReactPlayer
+        <MediaPlayer
          key={url}
-          url={url}
-          width="100%"
-          height="auto"
-          className="!h-auto overflow-hidden rounded-lg object-fill"
-          controls={true}
-          pip={true}
-        />
+          src={url}
+          poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
+          load="visible"
+          aspectRatio="16/9"
+          crossorigin=""
+        >
+          <MediaProvider />
+        </MediaPlayer>
      </div>
    );
  }
--- a/src/shared/notes/preview/image.tsx
+++ b/src/shared/notes/preview/image.tsx
@@ -2,7 +2,6 @@ import { downloadDir } from '@tauri-apps/api/path';
 import { download } from 'tauri-plugin-upload-api';

 import { DownloadIcon } from '@shared/icons';
-import { Image } from '@shared/image';

 export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: boolean }) {
  const downloadImage = async (url: string) => {
@@ -16,12 +15,15 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
      <div className="flex flex-col gap-2">
        {urls.map((url) => (
          <div key={url} className="group relative min-w-0 shrink-0 grow-0 basis-full">
-            <Image
+            <img
              src={url}
              alt={url}
              className={`${
                truncate ? 'h-auto max-h-[300px]' : 'h-auto'
              } w-full rounded-lg border border-white/10 object-cover`}
+              loading="lazy"
+              decoding="async"
+              style={{ contentVisibility: 'auto' }}
            />
            <button
              type="button"
--- a/src/shared/notes/preview/video.tsx
+++ b/src/shared/notes/preview/video.tsx
@@ -1,28 +1,19 @@
-import ReactPlayer from 'react-player/es6';
+import { MediaPlayer, MediaProvider } from '@vidstack/react';

 export function VideoPreview({ urls }: { urls: string[] }) {
  return (
    <div className="relative mt-3 flex w-full flex-col gap-2">
      {urls.map((url) => (
-        <ReactPlayer
+        <MediaPlayer
          key={url}
-          url={url}
-          width="100%"
-          height="auto"
-          className="!h-auto overflow-hidden rounded-lg object-fill"
-          controls={true}
-          pip={true}
-          light={
-            <img
-              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
-              alt={url}
-              className="aspect-video h-full w-full bg-white object-cover"
-              loading="lazy"
-              decoding="async"
-              style={{ contentVisibility: 'auto' }}
-            />
-          }
-        />
+          src={url}
+          poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
+          load="visible"
+          aspectRatio="16/9"
+          crossorigin=""
+        >
+          <MediaProvider />
+        </MediaPlayer>
      ))}
    </div>
  );
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -29,7 +29,8 @@ export const User = memo(function User({
    | 'chat'
    | 'large'
    | 'thread'
-    | 'avatar';
+    | 'avatar'
+    | 'stacked';
  embedProfile?: string;
 }) {
  const { status, user } = useProfile(pubkey, embedProfile);
@@ -186,6 +187,28 @@ export const User = memo(function User({
    );
  }

+  if (variant === 'stacked') {
+    return (
+      <Avatar.Root>
+        <Avatar.Image
+          src={user?.picture || user?.image}
+          alt={pubkey}
+          loading="lazy"
+          decoding="async"
+          style={{ contentVisibility: 'auto' }}
+          className="inline-block h-8 w-8 rounded-full ring-1 ring-black"
+        />
+        <Avatar.Fallback delayMs={300}>
+          <img
+            src={svgURI}
+            alt={pubkey}
+            className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-black"
+          />
+        </Avatar.Fallback>
+      </Avatar.Root>
+    );
+  }
+
  if (variant === 'repost') {
    return (
      <div className="flex gap-3">
--- a/src/shared/widgets/eventLoader.tsx
+++ b/src/shared/widgets/eventLoader.tsx
@@ -19,7 +19,7 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
  useEffect(() => {
    async function getEvents() {
      const events = await getAllEventsSinceLastLogin();
-      console.log('total event found: ', events.data.length);
+      console.log('total new events has found: ', events.data.length);

      const promises = await Promise.all(
        events.data.map(async (event) => await db.createEvent(event))