From 770a63de630f8c221982418a7f1f6363b393753e Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Tue, 10 Oct 2023 15:49:23 +0700 Subject: [PATCH] wip --- index.html | 2 +- package.json | 3 +- pnpm-lock.yaml | 44 ++++++---------------- src/app.css | 9 ----- src/app.tsx | 1 - src/app/splash.tsx | 18 ++++----- src/shared/notes/actions.tsx | 55 +++++++++++++-------------- src/shared/notes/actions/more.tsx | 21 ++--------- src/shared/notes/child.tsx | 2 +- src/shared/notes/index.ts | 1 + src/shared/notes/kinds/article.tsx | 10 ++--- src/shared/notes/kinds/file.tsx | 60 ++++++++++++++---------------- src/shared/notes/kinds/text.tsx | 18 ++++----- src/shared/notes/preview/image.tsx | 10 ++--- src/shared/notes/preview/link.tsx | 9 ++--- src/shared/notes/preview/video.tsx | 57 ++++++++++++---------------- src/shared/user.tsx | 16 +++++--- vite.config.ts | 2 +- 18 files changed, 137 insertions(+), 201 deletions(-) diff --git a/index.html b/index.html index 7e1a22db..6941671a 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Lume - +
diff --git a/package.json b/package.json index bdd58343..c43afefb 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ }, "dependencies": { "@evilmartians/harmony": "^1.1.0", - "@fontsource-variable/inter": "^5.0.13", "@getalby/sdk": "^2.4.0", "@nostr-dev-kit/ndk": "^1.3.2", "@nostr-dev-kit/ndk-cache-dexie": "^1.3.2", @@ -55,12 +54,12 @@ "@tiptap/react": "^2.1.11", "@tiptap/starter-kit": "^2.1.11", "@tiptap/suggestion": "^2.1.11", - "@vidstack/react": "^1.1.9", "dayjs": "^1.11.10", "destr": "^2.0.1", "html-to-text": "^9.0.5", "light-bolt11-decoder": "^3.0.0", "lru-cache": "^10.0.1", + "media-chrome": "^1.4.3", "million": "^2.6.4", "minidenticons": "^4.2.0", "nostr-fetch": "^0.13.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea7e9bb1..6f97835e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,6 @@ dependencies: '@evilmartians/harmony': specifier: ^1.1.0 version: 1.1.0 - '@fontsource-variable/inter': - specifier: ^5.0.13 - version: 5.0.13 '@getalby/sdk': specifier: ^2.4.0 version: 2.4.0 @@ -116,9 +113,6 @@ dependencies: '@tiptap/suggestion': specifier: ^2.1.11 version: 2.1.11(@tiptap/core@2.1.11)(@tiptap/pm@2.1.11) - '@vidstack/react': - specifier: ^1.1.9 - version: 1.1.9(@types/react@18.2.27)(react@18.2.0) dayjs: specifier: ^1.11.10 version: 1.11.10 @@ -134,6 +128,9 @@ dependencies: lru-cache: specifier: ^10.0.1 version: 10.0.1 + media-chrome: + specifier: ^1.4.3 + version: 1.4.3 million: specifier: ^2.6.4 version: 2.6.4 @@ -824,10 +821,6 @@ packages: resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==} dev: false - /@fontsource-variable/inter@5.0.13: - resolution: {integrity: sha512-mb2WyZ2rHeqIG8aqGJIvLBOmo4sg2x7SHlsE6PUhwxbOicVzO59EZwSGtzNO3FmchuDPFVAxzcXYcR5B6jE6Qw==} - dev: false - /@getalby/sdk@2.4.0: resolution: {integrity: sha512-aIGNwLRF9coj6koxfq7P4GtFZbFjQbnIheix39x9176PwFw4dXOdGXHPXnqioJTmeq80y+vX1yd+u/f03YGoeg==} engines: {node: '>=14'} @@ -2917,18 +2910,6 @@ packages: eslint-visitor-keys: 3.4.3 dev: true - /@vidstack/react@1.1.9(@types/react@18.2.27)(react@18.2.0): - resolution: {integrity: sha512-CYXhr0Hk/xTcYDVKy39J6VUIcJMCLzbfNe9upBQ096lnCpk3yEncsAUl73jTE3GzJ8yOPEQcdloFoJXbA4ekeg==} - engines: {node: '>=18'} - peerDependencies: - '@types/react': ^18.0.0 - react: ^18.0.0 - dependencies: - '@types/react': 18.2.27 - media-captions: 1.0.0 - react: 18.2.0 - dev: false - /@vitejs/plugin-react-swc@3.4.0(vite@4.4.11): resolution: {integrity: sha512-m7UaA4Uvz82N/0EOVpZL4XsFIakRqrFKeSNxa1FBLSXGvWrWRBwmZb4qxk+ZIVAZcW3c3dn5YosomDgx62XWcQ==} peerDependencies: @@ -3110,7 +3091,7 @@ packages: postcss: ^8.1.0 dependencies: browserslist: 4.22.1 - caniuse-lite: 1.0.30001546 + caniuse-lite: 1.0.30001547 fraction.js: 4.3.6 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -3162,8 +3143,8 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001546 - electron-to-chromium: 1.4.546 + caniuse-lite: 1.0.30001547 + electron-to-chromium: 1.4.548 node-releases: 2.0.13 update-browserslist-db: 1.0.13(browserslist@4.22.1) @@ -3191,8 +3172,8 @@ packages: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} - /caniuse-lite@1.0.30001546: - resolution: {integrity: sha512-zvtSJwuQFpewSyRrI3AsftF6rM0X80mZkChIt1spBGEvRglCrjTniXvinc8JKRoqTwXAgvqTImaN9igfSMtUBw==} + /caniuse-lite@1.0.30001547: + resolution: {integrity: sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==} /case-anything@2.1.13: resolution: {integrity: sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==} @@ -3565,8 +3546,8 @@ packages: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} dev: true - /electron-to-chromium@1.4.546: - resolution: {integrity: sha512-cz9bBM26ZqoEmGHkdHXU3LP7OofVyEzRoMqfALQ9Au9WlB4rogAHzqj/NkNvw2JJjy4xuxS1me+pP2lbCD5Mfw==} + /electron-to-chromium@1.4.548: + resolution: {integrity: sha512-R77KD6mXv37DOyKLN/eW1rGS61N6yHOfapNSX9w+y9DdPG83l9Gkuv7qkCFZ4Ta4JPhrjgQfYbv4Y3TnM1Hi2Q==} /emoji-regex@9.2.2: resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} @@ -4863,9 +4844,8 @@ packages: resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==} dev: false - /media-captions@1.0.0: - resolution: {integrity: sha512-605d9sXW+DtJBNzzfL4N6NpOIjigN+kpzS+V1QaCiNNPB7G015/peyw6wfv9iCp8GAP6R5NPyAICZKeuqWPAQQ==} - engines: {node: '>=16'} + /media-chrome@1.4.3: + resolution: {integrity: sha512-VpFqCOu2FLULW6TX4sluo44AolJXryHxr85UBdO+IuOltgYPuf7Lgp1F3OqJeRIeO8874d5mri/6xmI22CO9yA==} dev: false /merge-stream@2.0.0: diff --git a/src/app.css b/src/app.css index b0da9527..f52ee2e8 100644 --- a/src/app.css +++ b/src/app.css @@ -1,7 +1,4 @@ @import 'reactflow/dist/style.css'; -@import '@vidstack/react/player/styles/default/theme.css'; -@import '@vidstack/react/player/styles/default/layouts/audio.css'; -@import '@vidstack/react/player/styles/default/layouts/video.css'; @tailwind base; @tailwind components; @@ -9,12 +6,6 @@ html { font-size: 14px; - /* Smoothing */ - text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - font-smoothing: antialiased; - -webkit-font-smoothing: antialiased; - text-shadow: rgba(0, 0, 0, .01) 0 0 1px; } a { diff --git a/src/app.tsx b/src/app.tsx index 023242a9..df2e8f7f 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,4 +1,3 @@ -import '@fontsource-variable/inter/slnt.css'; import { message } from '@tauri-apps/plugin-dialog'; import { fetch } from '@tauri-apps/plugin-http'; import { RouterProvider, createBrowserRouter, defer, redirect } from 'react-router-dom'; diff --git a/src/app/splash.tsx b/src/app/splash.tsx index 44be8182..df9ed2de 100644 --- a/src/app/splash.tsx +++ b/src/app/splash.tsx @@ -50,15 +50,15 @@ export function SplashScreen() { }, [ndk, db.account]); return ( -
-
-
-
- -

- {!ndk ? 'Connecting...' : 'Syncing...'} -

-
+
+
+ +

+ {!ndk ? 'Connecting...' : 'Syncing...'} +

); diff --git a/src/shared/notes/actions.tsx b/src/shared/notes/actions.tsx index b46d3404..cb9ea5b5 100644 --- a/src/shared/notes/actions.tsx +++ b/src/shared/notes/actions.tsx @@ -28,41 +28,38 @@ export function NoteActions({ return ( -
-
+
+
{extraButtons && ( -
-
- - - - - - - Open thread - - - - - -
+
+ + + + + + + Open thread + + + +
)}
diff --git a/src/shared/notes/actions/more.tsx b/src/shared/notes/actions/more.tsx index 5f634112..5a0bc894 100644 --- a/src/shared/notes/actions/more.tsx +++ b/src/shared/notes/actions/more.tsx @@ -25,24 +25,9 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) { return ( - - - - - - - - - More - - - - + + + diff --git a/src/shared/notes/child.tsx b/src/shared/notes/child.tsx index b9d1d267..ab1084eb 100644 --- a/src/shared/notes/child.tsx +++ b/src/shared/notes/child.tsx @@ -79,7 +79,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) { return ( <>
-
+
diff --git a/src/shared/notes/index.ts b/src/shared/notes/index.ts index 872479f6..e1cc2dd7 100644 --- a/src/shared/notes/index.ts +++ b/src/shared/notes/index.ts @@ -26,3 +26,4 @@ export * from './mentions/boost'; export * from './mentions/invoice'; export * from './stats'; export * from './wrapper'; +export * from './actions/more'; diff --git a/src/shared/notes/kinds/article.tsx b/src/shared/notes/kinds/article.tsx index 379062cb..4dc94cc5 100644 --- 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 ( -
+
{metadata.image && ( )} -
-
+
+
{metadata.title}
{metadata.summary ? ( -

+

{metadata.summary}

) : null} - + {metadata.publishedAt.toString()}
diff --git a/src/shared/notes/kinds/file.tsx b/src/shared/notes/kinds/file.tsx index 928727e7..56f30894 100644 --- 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 (
- - - - - + + + + + + + + + + +
); } diff --git a/src/shared/notes/kinds/text.tsx b/src/shared/notes/kinds/text.tsx index 2b1adc1b..1a5c5a8a 100644 --- 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 (
{ const cleanURL = new URL(href); cleanURL.search = ''; return ( - + {cleanURL.hostname + cleanURL.pathname} ); @@ -73,13 +73,11 @@ export function TextNote(props: { content?: string }) { > {richContent.parsed} -
- {richContent.images.length > 0 && } - {richContent.videos.length > 0 && } - {richContent.links.length > 0 && } - {richContent.notes.length > 0 && - richContent.notes.map((note: string) => )} -
+ {richContent.images.length > 0 && } + {richContent.videos.length > 0 && } + {richContent.links.length > 0 && } + {richContent.notes.length > 0 && + richContent.notes.map((note: string) => )}
); } diff --git a/src/shared/notes/preview/image.tsx b/src/shared/notes/preview/image.tsx index 7db4acd0..7c75a4c1 100644 --- a/src/shared/notes/preview/image.tsx +++ b/src/shared/notes/preview/image.tsx @@ -3,7 +3,7 @@ import { download } from '@tauri-apps/plugin-upload'; import { DownloadIcon } from '@shared/icons'; -export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: boolean }) { +export function ImagePreview({ urls }: { urls: string[] }) { const downloadImage = async (url: string) => { const downloadDirPath = await downloadDir(); const filename = url.substring(url.lastIndexOf('/') + 1); @@ -11,15 +11,13 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo }; return ( -
+
{urls.map((url) => ( -
+
image