wip

2023-10-10 15:49:23 +07:00
parent bc4c3b9803
commit 770a63de63
18 changed files with 137 additions and 201 deletions
--- a/src/shared/notes/kinds/article.tsx
+++ b/src/shared/notes/kinds/article.tsx
@@ -29,7 +29,7 @@ export function ArticleNote(props: { event?: NDKEvent }) {

  return (
    <Link to={`/notes/article/${props.event.id}`} preventScrollReset={true}>
-      <div className="mb-2 mt-2 flex flex-col rounded-lg">
+      <div className="my-2 overflow-hidden rounded-lg">
        {metadata.image && (
          <Image
            src={metadata.image}
@@ -37,16 +37,16 @@ export function ArticleNote(props: { event?: NDKEvent }) {
            className="h-44 w-full rounded-t-lg object-cover"
          />
        )}
-        <div className="flex flex-col gap-2 rounded-b-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
-          <h5 className="line-clamp-1 text-base font-medium text-white">
+        <div className="flex flex-col gap-1 rounded-b-lg bg-neutral-200 px-3 py-3 dark:bg-neutral-800">
+          <h5 className="line-clamp-1 font-semibold text-neutral-900 dark:text-neutral-100">
            {metadata.title}
          </h5>
          {metadata.summary ? (
-            <p className="line-clamp-3 break-all text-sm text-white/70">
+            <p className="line-clamp-3 break-all text-sm text-neutral-600 dark:text-neutral-400">
              {metadata.summary}
            </p>
          ) : null}
-          <span className="mt-2.5 text-sm text-white/70">
+          <span className="mt-2.5 text-sm text-neutral-500 dark:text-neutral-400">
            {metadata.publishedAt.toString()}
          </span>
        </div>
--- a/src/shared/notes/kinds/file.tsx
+++ b/src/shared/notes/kinds/file.tsx
@@ -1,10 +1,15 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { MediaPlayer, MediaProvider, Poster } from '@vidstack/react';
 import {
-  DefaultAudioLayout,
-  DefaultVideoLayout,
-  defaultLayoutIcons,
-} from '@vidstack/react/player/layouts/default';
+  MediaControlBar,
+  MediaController,
+  MediaMuteButton,
+  MediaPlayButton,
+  MediaSeekBackwardButton,
+  MediaSeekForwardButton,
+  MediaTimeDisplay,
+  MediaTimeRange,
+  MediaVolumeRange,
+} from 'media-chrome/dist/react';
 import { memo } from 'react';
 import { Link } from 'react-router-dom';

@@ -31,34 +36,25 @@ export function FileNote(props: { event?: NDKEvent }) {
  if (type === 'video') {
    return (
      <div className="mb-2 mt-3">
-        <MediaPlayer
-          key={url}
-          src={url}
-          poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
-          load="idle"
-          aspectRatio="16/9"
-          muted={true}
-          crossorigin=""
-          className="player"
-        >
-          <MediaProvider>
-            <Poster
-              className="vds-poster"
-              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
-              alt="poster"
-            />
-          </MediaProvider>
-          <DefaultAudioLayout
-            icons={defaultLayoutIcons}
-            smallLayoutWhen="(width < 500) or (height < 380)"
-            noModal={true}
+        <MediaController key={url} className="aspect-video">
+          <video
+            slot="media"
+            src={url}
+            poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
+            preload="auto"
+            muted
+            crossOrigin=""
          />
-          <DefaultVideoLayout
-            icons={defaultLayoutIcons}
-            smallLayoutWhen="(width < 500) or (height < 380)"
-            noModal={true}
-          />
-        </MediaPlayer>
+          <MediaControlBar>
+            <MediaPlayButton></MediaPlayButton>
+            <MediaSeekBackwardButton></MediaSeekBackwardButton>
+            <MediaSeekForwardButton></MediaSeekForwardButton>
+            <MediaTimeRange></MediaTimeRange>
+            <MediaTimeDisplay showDuration></MediaTimeDisplay>
+            <MediaMuteButton></MediaMuteButton>
+            <MediaVolumeRange></MediaVolumeRange>
+          </MediaControlBar>
+        </MediaController>
      </div>
    );
  }
--- a/src/shared/notes/kinds/text.tsx
+++ b/src/shared/notes/kinds/text.tsx
@@ -23,7 +23,7 @@ export function TextNote(props: { content?: string }) {
    return (
      <div>
        <ReactMarkdown
-          className="prose prose-neutral max-w-none select-text leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
+          className="prose prose-neutral max-w-none select-text leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
          remarkPlugins={[remarkGfm]}
          disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
          unwrapDisallowed={true}
@@ -38,14 +38,14 @@ export function TextNote(props: { content?: string }) {
  return (
    <div>
      <ReactMarkdown
-        className="prose prose-neutral max-w-none select-text leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
+        className="prose prose-neutral max-w-none select-text leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
        remarkPlugins={[remarkGfm]}
        components={{
          a: ({ href }) => {
            const cleanURL = new URL(href);
            cleanURL.search = '';
            return (
-              <Link to={href} target="_blank" className="line-clamp-1 w-full break-all">
+              <Link to={href} target="_blank" className="w-max break-all hover:underline">
                {cleanURL.hostname + cleanURL.pathname}
              </Link>
            );
@@ -73,13 +73,11 @@ export function TextNote(props: { content?: string }) {
      >
        {richContent.parsed}
      </ReactMarkdown>
-      <div>
-        {richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
-        {richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
-        {richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
-        {richContent.notes.length > 0 &&
-          richContent.notes.map((note: string) => <MentionNote key={note} id={note} />)}
-      </div>
+      {richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
+      {richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
+      {richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
+      {richContent.notes.length > 0 &&
+        richContent.notes.map((note: string) => <MentionNote key={note} id={note} />)}
    </div>
  );
 }