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 ( +