From f0d0e79e3d99178fb791e24bbc97635267f45bbe Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 24 Apr 2023 17:54:12 +0700
Subject: [PATCH] update preview components
---
package.json | 7 +-
pnpm-lock.yaml | 141 ++++++++++++++++++------
src/components/navigation.tsx | 92 ++++++++++++++++
src/components/navigation/channels.tsx | 32 ------
src/components/navigation/chats.tsx | 28 -----
src/components/navigation/index.tsx | 16 ---
src/components/navigation/newsfeed.tsx | 43 --------
src/components/note/preview/image.tsx | 8 +-
src/components/note/preview/video.tsx | 18 +--
src/components/note/preview/youtube.tsx | 16 +++
src/renderer/_default.page.client.tsx | 1 +
src/utils/parser.tsx | 13 ++-
tsconfig.json | 6 +-
13 files changed, 237 insertions(+), 184 deletions(-)
create mode 100644 src/components/navigation.tsx
delete mode 100644 src/components/navigation/channels.tsx
delete mode 100644 src/components/navigation/chats.tsx
delete mode 100644 src/components/navigation/index.tsx
delete mode 100644 src/components/navigation/newsfeed.tsx
create mode 100644 src/components/note/preview/youtube.tsx
diff --git a/package.json b/package.json
index 3da60bff..de5c20ee 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"@headlessui/react": "^1.7.14",
"@supabase/supabase-js": "^2.21.0",
"@tauri-apps/api": "^1.2.0",
+ "@vidstack/react": "^0.4.5",
"dayjs": "^1.11.7",
"destr": "^1.2.2",
"iconoir-react": "^6.6.0",
@@ -27,12 +28,13 @@
"react-dom": "^18.2.0",
"react-hook-form": "^7.43.9",
"react-loading-skeleton": "^3.2.1",
- "react-player": "^2.12.0",
"react-string-replace": "^1.1.0",
"react-virtuoso": "^4.3.1",
+ "react-youtube": "^10.1.0",
"swr": "^2.1.4",
"tailwind-merge": "^1.12.0",
- "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql"
+ "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql",
+ "vidstack": "^0.4.5"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.9",
@@ -41,6 +43,7 @@
"@types/node": "^18.16.0",
"@types/react": "^18.0.38",
"@types/react-dom": "^18.0.11",
+ "@types/youtube-player": "^5.5.7",
"@typescript-eslint/eslint-plugin": "^5.59.0",
"@typescript-eslint/parser": "^5.59.0",
"@vitejs/plugin-react-swc": "^3.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c27efa2a..f9978d2e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,9 @@ dependencies:
'@tauri-apps/api':
specifier: ^1.2.0
version: 1.2.0
+ '@vidstack/react':
+ specifier: ^0.4.5
+ version: 0.4.5(@types/react@18.0.38)(maverick.js@0.33.1)(media-icons@0.4.2)(react@18.2.0)(vidstack@0.4.5)
dayjs:
specifier: ^1.11.7
version: 1.11.7
@@ -40,15 +43,15 @@ dependencies:
react-loading-skeleton:
specifier: ^3.2.1
version: 3.2.1(react@18.2.0)
- react-player:
- specifier: ^2.12.0
- version: 2.12.0(react@18.2.0)
react-string-replace:
specifier: ^1.1.0
version: 1.1.0
react-virtuoso:
specifier: ^4.3.1
version: 4.3.1(react-dom@18.2.0)(react@18.2.0)
+ react-youtube:
+ specifier: ^10.1.0
+ version: 10.1.0(react@18.2.0)
swr:
specifier: ^2.1.4
version: 2.1.4(react@18.2.0)
@@ -58,6 +61,9 @@ dependencies:
tauri-plugin-sql-api:
specifier: github:tauri-apps/tauri-plugin-sql
version: github.com/tauri-apps/tauri-plugin-sql/62b21ef24303d80e9905f57b2b6d27efc8677c23
+ vidstack:
+ specifier: ^0.4.5
+ version: 0.4.5
devDependencies:
'@tailwindcss/typography':
@@ -78,6 +84,9 @@ devDependencies:
'@types/react-dom':
specifier: ^18.0.11
version: 18.0.11
+ '@types/youtube-player':
+ specifier: ^5.5.7
+ version: 5.5.7
'@typescript-eslint/eslint-plugin':
specifier: ^5.59.0
version: 5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@4.9.5)
@@ -644,6 +653,11 @@ packages:
'@jridgewell/resolve-uri': 3.1.0
'@jridgewell/sourcemap-codec': 1.4.14
+ /@maverick-js/signals@5.9.3:
+ resolution:
+ { integrity: sha512-rqaaetjcqQQXbloejGYyHqN6i+cf2Lp88nw8qx2s86CD0X+1Tl/dq+I53wFM6VK6cvm925fQLszGG24AMSWAaw== }
+ dev: false
+
/@noble/hashes@1.2.0:
resolution:
{ integrity: sha512-FZfhjEDbT5GRswV3C6uvLPHMiVD6lQBmpoX5+eSiPaMTXte/IKqI5dykDxzZB/WBeK/CDuQRBWarPdi3FNY2zQ== }
@@ -1065,7 +1079,6 @@ packages:
/@types/prop-types@15.7.5:
resolution:
{ integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== }
- dev: true
/@types/react-dom@18.0.11:
resolution:
@@ -1081,12 +1094,10 @@ packages:
'@types/prop-types': 15.7.5
'@types/scheduler': 0.16.3
csstype: 3.1.2
- dev: true
/@types/scheduler@0.16.3:
resolution:
{ integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ== }
- dev: true
/@types/semver@7.3.13:
resolution:
@@ -1100,6 +1111,11 @@ packages:
'@types/node': 18.16.0
dev: false
+ /@types/youtube-player@5.5.7:
+ resolution:
+ { integrity: sha512-W8F4eoTIvzXeNrT3JroQPimZLXnlJA8smYygHZUKFPVoYwgs/OhJkA1VBhL3iSs57OQkuINqHlY4SmMT5wtnJg== }
+ dev: true
+
/@typescript-eslint/eslint-plugin@5.59.0(@typescript-eslint/parser@5.59.0)(eslint@8.39.0)(typescript@4.9.5):
resolution:
{ integrity: sha512-p0QgrEyrxAWBecR56gyn3wkG15TJdI//eetInP3zYRewDh0XS+DhB3VUAd3QqvziFsfaQIoIuZMxZRB7vXYaYw== }
@@ -1238,6 +1254,24 @@ packages:
eslint-visitor-keys: 3.4.0
dev: true
+ /@vidstack/react@0.4.5(@types/react@18.0.38)(maverick.js@0.33.1)(media-icons@0.4.2)(react@18.2.0)(vidstack@0.4.5):
+ resolution:
+ { integrity: sha512-spcim3+p1fMzkhHRKn5PS54YQjfThW5M3F2+R8tCT+wpsxbbCDa/TGdLBoIy2oC0LNziPkn0vlBWIZko9F5iig== }
+ engines: { node: '>=16' }
+ peerDependencies:
+ '@types/react': ^18.0.0
+ maverick.js: 0.33.1
+ media-icons: ^0.4.2
+ react: ^18.0.0
+ vidstack: 0.4.5
+ dependencies:
+ '@types/react': 18.0.38
+ maverick.js: 0.33.1
+ media-icons: 0.4.2
+ react: 18.2.0
+ vidstack: 0.4.5
+ dev: false
+
/@vitejs/plugin-react-swc@3.3.0(vite@4.3.1):
resolution:
{ integrity: sha512-Ycg+n2eyCOTpn/wRy+evVo859+hw7qCj9iaX5CMny6x1fx1Uoq0xBG+a98lFtwLNGfGEnpI0F26YigRuxCRkwg== }
@@ -1669,7 +1703,6 @@ packages:
/csstype@3.1.2:
resolution:
{ integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== }
- dev: true
/d@1.0.1:
resolution:
@@ -1714,12 +1747,6 @@ packages:
{ integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== }
dev: true
- /deepmerge@4.3.1:
- resolution:
- { integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== }
- engines: { node: '>=0.10.0' }
- dev: false
-
/define-properties@1.2.0:
resolution:
{ integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA== }
@@ -2142,7 +2169,6 @@ packages:
/fast-deep-equal@3.1.3:
resolution:
{ integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== }
- dev: true
/fast-glob@3.2.12:
resolution:
@@ -2883,9 +2909,25 @@ packages:
yallist: 4.0.0
dev: true
- /memoize-one@5.2.1:
+ /maverick.js@0.33.1:
resolution:
- { integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== }
+ { integrity: sha512-p8L5V62CV6TmHAngmRAopp231oJKeH77mJja5SsKOfvzrPRoThT/Jo9U0jMRB5iMykqkvyg2J5V5Agn6FPXDWQ== }
+ engines: { node: '>=16' }
+ dependencies:
+ '@maverick-js/signals': 5.9.3
+ type-fest: 3.8.0
+ dev: false
+
+ /media-captions@0.0.8:
+ resolution:
+ { integrity: sha512-gX6ozU5smrAb90FwI+wd1VnqkwcAQ2NF8l72KZ67k+o3Vr0wYBAsTFRfdOePqde9IBhfBZbZsYEA5509npwtZA== }
+ engines: { node: '>=16' }
+ dev: false
+
+ /media-icons@0.4.2:
+ resolution:
+ { integrity: sha512-jrxoQzxsZFyzt6P3CoGZWa6FVKoR/Ii1plbVjtyTSyQGpeVWkJ++0oBAwGOv/F9mWRxmGkaQ04uEIKTFouRG1w== }
+ engines: { node: '>=16' }
dev: false
/merge-stream@2.0.0:
@@ -3438,11 +3480,6 @@ packages:
scheduler: 0.23.0
dev: false
- /react-fast-compare@3.2.1:
- resolution:
- { integrity: sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg== }
- dev: false
-
/react-hook-form@7.43.9(react@18.2.0):
resolution:
{ integrity: sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ== }
@@ -3466,20 +3503,6 @@ packages:
react: 18.2.0
dev: false
- /react-player@2.12.0(react@18.2.0):
- resolution:
- { integrity: sha512-rymLRz/2GJJD+Wc01S7S+i9pGMFYnNmQibR2gVE3KmHJCBNN8BhPAlOPTGZtn1uKpJ6p4RPLlzPQ1OLreXd8gw== }
- peerDependencies:
- react: '>=16.6.0'
- dependencies:
- deepmerge: 4.3.1
- load-script: 1.0.0
- memoize-one: 5.2.1
- prop-types: 15.8.1
- react: 18.2.0
- react-fast-compare: 3.2.1
- dev: false
-
/react-string-replace@1.1.0:
resolution:
{ integrity: sha512-N6RalSDFGbOHs0IJi1H611WbZsvk3ZT47Jl2JEXFbiS3kTwsdCYij70Keo/tWtLy7sfhDsYm7CwNM/WmjXIaMw== }
@@ -3498,6 +3521,21 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
+ /react-youtube@10.1.0(react@18.2.0):
+ resolution:
+ { integrity: sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg== }
+ engines: { node: '>= 14.x' }
+ peerDependencies:
+ react: '>=0.14.1'
+ dependencies:
+ fast-deep-equal: 3.1.3
+ prop-types: 15.8.1
+ react: 18.2.0
+ youtube-player: 5.5.2
+ transitivePeerDependencies:
+ - supports-color
+ dev: false
+
/react@18.2.0:
resolution:
{ integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== }
@@ -3687,6 +3725,11 @@ packages:
totalist: 3.0.1
dev: true
+ /sister@3.0.2:
+ resolution:
+ { integrity: sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA== }
+ dev: false
+
/slash@3.0.0:
resolution:
{ integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== }
@@ -4028,6 +4071,12 @@ packages:
engines: { node: '>=10' }
dev: true
+ /type-fest@3.8.0:
+ resolution:
+ { integrity: sha512-FVNSzGQz9Th+/9R6Lvv7WIAkstylfHN2/JYxkyhhmKFYh9At2DST8t6L6Lref9eYO8PXFTfG9Sg1Agg0K3vq3Q== }
+ engines: { node: '>=14.16' }
+ dev: false
+
/type@1.2.0:
resolution:
{ integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg== }
@@ -4119,6 +4168,17 @@ packages:
hasBin: true
dev: true
+ /vidstack@0.4.5:
+ resolution:
+ { integrity: sha512-6CFkWRSvDQAd91WQ6PZ/ovwbGFDI8pLuIA0swcDLLAOM6MiKWFd/gFjJ/x7+DAcCf0hqOngO34MJhG3zTZQtcQ== }
+ engines: { node: '>=16' }
+ dependencies:
+ maverick.js: 0.33.1
+ media-captions: 0.0.8
+ media-icons: 0.4.2
+ type-fest: 3.8.0
+ dev: false
+
/vite-plugin-ssr@0.4.116(vite@4.3.1):
resolution:
{ integrity: sha512-GtXvlUtwnLdrnfuodJhcs+kV1BXyoUhECjqdoC1pSU+7dRKyU7A9V6NmkT7yPbHu1s8bWSgqC/EP91F4DSt4rA== }
@@ -4345,6 +4405,17 @@ packages:
engines: { node: '>=10' }
dev: true
+ /youtube-player@5.5.2:
+ resolution:
+ { integrity: sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ== }
+ dependencies:
+ debug: 2.6.9
+ load-script: 1.0.0
+ sister: 3.0.2
+ transitivePeerDependencies:
+ - supports-color
+ dev: false
+
github.com/tauri-apps/tauri-plugin-sql/62b21ef24303d80e9905f57b2b6d27efc8677c23:
resolution:
{
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
new file mode 100644
index 00000000..c60ed5ba
--- /dev/null
+++ b/src/components/navigation.tsx
@@ -0,0 +1,92 @@
+import { ActiveLink } from '@components/activeLink';
+import ChannelList from '@components/channels/channelList';
+import ChatList from '@components/chats/chatList';
+
+import { Disclosure } from '@headlessui/react';
+import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
+import { Suspense } from 'react';
+import Skeleton from 'react-loading-skeleton';
+
+export default function Navigation() {
+ return (
+
+ {/* Newsfeed */}
+
+ {({ open }) => (
+
+
+
+
+
+ Newsfeed
+
+
+
+
+ Following
+
+
+
+ Circle
+
+
+
+ {/* Channels */}
+
+ {({ open }) => (
+
+
+
+
+
+ Channels
+
+
+ }>
+
+
+
+
+ {/* Chats */}
+
+ {({ open }) => (
+
+
+
+
+
+ Chats
+
+
+
+
+
+
-
-
-
-
- Channels
-
-
- }>
-
-
-
-
-
-
-
-
- Chats
-
-
-
-
-
- {/* Newsfeed */}
-
- {/* Channels */}
-
- {/* Chats */}
-
-
- );
-}
diff --git a/src/components/navigation/newsfeed.tsx b/src/components/navigation/newsfeed.tsx
deleted file mode 100644
index 360de58b..00000000
--- a/src/components/navigation/newsfeed.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ActiveLink } from '@components/activeLink';
-
-import { Disclosure } from '@headlessui/react';
-import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
-
-export default function Newsfeed() {
- return (
-
- {({ open }) => (
-
-
-
-
-
- Newsfeed
-
-
-
-
- Following
-
-
-
- Circle
-
-
-
-
+
e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
-
+
+
+
);
-});
+};
diff --git a/src/components/note/preview/youtube.tsx b/src/components/note/preview/youtube.tsx
new file mode 100644
index 00000000..053d85c6
--- /dev/null
+++ b/src/components/note/preview/youtube.tsx
@@ -0,0 +1,16 @@
+import YouTube from 'react-youtube';
+
+function getVideoId(url: string) {
+ const regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/gm;
+ return regex.exec(url)[3];
+}
+
+export const YoutubePreview = ({ url }: { url: string }) => {
+ const id = getVideoId(url);
+
+ return (
+ e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
+
+
+ );
+};
diff --git a/src/renderer/_default.page.client.tsx b/src/renderer/_default.page.client.tsx
index daaefcef..160dc559 100644
--- a/src/renderer/_default.page.client.tsx
+++ b/src/renderer/_default.page.client.tsx
@@ -3,6 +3,7 @@ import { Shell } from '@renderer/shell';
import { PageContextClient } from '@renderer/types';
import { Root, createRoot, hydrateRoot } from 'react-dom/client';
+import 'vidstack/styles/defaults.css';
export const clientRouting = true;
let root: Root;
diff --git a/src/utils/parser.tsx b/src/utils/parser.tsx
index 87b00e36..a163448d 100644
--- a/src/utils/parser.tsx
+++ b/src/utils/parser.tsx
@@ -1,12 +1,13 @@
import { ImagePreview } from '@components/note/preview/image';
import { VideoPreview } from '@components/note/preview/video';
+import { YoutubePreview } from '@components/note/preview/youtube';
import { NoteQuote } from '@components/note/quote';
import { UserMention } from '@components/user/mention';
import destr from 'destr';
import reactStringReplace from 'react-string-replace';
-export const contentParser = (noteContent, noteTags) => {
+export const contentParser = (noteContent: any, noteTags: any) => {
let parsedContent = noteContent.trim();
// get data tags
@@ -16,9 +17,9 @@ export const contentParser = (noteContent, noteTags) => {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return ;
- } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+ } else if (match.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
// youtube
- return ;
+ return ;
} else if (match.match(/\.(mp4|webm)$/i)) {
// video
return ;
@@ -54,7 +55,7 @@ export const contentParser = (noteContent, noteTags) => {
return parsedContent;
};
-export const messageParser = (noteContent) => {
+export const messageParser = (noteContent: any) => {
let parsedContent = noteContent.trim();
// handle urls
@@ -62,9 +63,9 @@ export const messageParser = (noteContent) => {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return ;
- } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+ } else if (match.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
// youtube
- return ;
+ return ;
} else if (match.match(/\.(mp4|webm)$/i)) {
// video
return ;
diff --git a/tsconfig.json b/tsconfig.json
index 85c31670..df23f89d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
"@assets/*": ["src/assets/*"],
"@renderer/*": ["src/renderer/*"]
},
+ "types": ["vidstack/globals"],
"target": "es2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
@@ -23,11 +24,6 @@
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
- "plugins": [
- {
- "name": "next"
- }
- ],
"strictNullChecks": false
},
"include": ["global.d.ts", "**/*.ts", "**/*.tsx"],