diff --git a/js/desktop/package.json b/js/desktop/package.json index b14bf13..5099676 100644 --- a/js/desktop/package.json +++ b/js/desktop/package.json @@ -14,7 +14,10 @@ "publish:mac": "echo '\n⚠️ Have you bumped the version in package.json? (current: '$(node -p \"require('./package.json').version\")') [y/N]' && read -r answer && [ \"$answer\" = \"y\" ] && APP_ENV=prod electron-forge publish --arch=arm64 && APP_ENV=prod electron-forge publish --arch=x64", "invalidate-gcs-cache": "gsutil setmeta -h 'Cache-Control:no-cache, no-store, must-revalidate' gs://flowy-releases/llink/darwin/arm64/RELEASES.json && gsutil setmeta -h 'Cache-Control:no-cache, no-store, must-revalidate' gs://flowy-releases/llink/darwin/x64/RELEASES.json && gsutil setmeta -h 'Cache-Control:no-cache, no-store, must-revalidate' gs://flowy-releases/llink/win32/x64/RELEASES", "lint": "eslint --ext .ts,.tsx .", - "compile": "npx tsc --noEmit 2>&1 | grep '^src/'" + "compile": "npx tsc --noEmit 2>&1 | grep '^src/'", + "web:dev": "cross-env APP_ENV=dev vite --config vite.web.config.mts", + "web:build": "cross-env APP_ENV=prod vite build --config vite.web.config.mts", + "web:preview": "vite preview --config vite.web.config.mts" }, "keywords": [], "author": { @@ -43,6 +46,7 @@ "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", "@vitejs/plugin-react": "^5.1.4", + "cross-env": "^10.1.0", "electron": "40.6.0", "eslint": "^8.57.1", "eslint-plugin-import": "^2.32.0", @@ -54,6 +58,7 @@ "@livekit/components-react": "^2.9.20", "@livekit/components-styles": "^1.2.0", "@sentry/electron": "^7.11.0", + "@sentry/react": "^10.54.0", "@tanstack/react-query": "^5.90.21", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/js/desktop/src/App.tsx b/js/desktop/src/App.tsx index 7c131b1..aca5249 100644 --- a/js/desktop/src/App.tsx +++ b/js/desktop/src/App.tsx @@ -1,5 +1,6 @@ import { useEffect } from "react"; -import { HashRouter, Routes, Route, useNavigate } from "react-router-dom"; +import { Routes, Route, useNavigate } from "react-router-dom"; +import { RouterShell } from "@/lib/router-shell"; import { TooltipProvider } from "@/components/ui/tooltip"; import { useAuthStore } from "@/stores/auth-store"; import { LoginPage } from "@/features/auth/login-page"; @@ -19,6 +20,8 @@ import { TopLevelErrorBoundary, } from "@/components/app-error-boundary"; import { SoundEffectsProvider } from "@/lib/sound-effects/sound-effects-provider"; +import { platform } from "@/lib/platform"; +import { InAppAutoplayCard } from "@/components/in-app-autoplay-card"; const queryClient = createQueryClient(); @@ -53,7 +56,7 @@ function AutoplayNavigationListener() { const navigate = useNavigate(); useEffect(() => { - return window.electronAutoplay.onNavigate((data) => { + return platform.autoplay.onNavigate((data) => { navigate(`/${data.networkId}/${data.streamId}`); }); }, [navigate]); @@ -63,8 +66,9 @@ function AutoplayNavigationListener() { function AuthenticatedApp() { return ( - + + } /> @@ -80,7 +84,7 @@ function AuthenticatedApp() { - + ); } diff --git a/js/desktop/src/api/client.ts b/js/desktop/src/api/client.ts index 27ef599..08d5835 100644 --- a/js/desktop/src/api/client.ts +++ b/js/desktop/src/api/client.ts @@ -27,6 +27,7 @@ import type { RevokeInvitationRequest, SignInRequest, } from "./types"; +import type { LinkMetadata } from "@/lib/link-metadata"; interface ApiClientConfig { baseUrl: string; @@ -256,6 +257,16 @@ class ApiClient { `/networks/${networkId}/usage`, ); } + + // --- Link metadata --- + + async getLinkMetadata(url: string): Promise { + const response = await this.fetch( + "GET", + `/metadata?url=${encodeURIComponent(url)}`, + ); + return (await response.json()) as LinkMetadata | null; + } } export const apiClient = new ApiClient({ diff --git a/js/desktop/src/autoplay_window/AutoplayApp.tsx b/js/desktop/src/autoplay_window/AutoplayApp.tsx index c2326d8..b6240ca 100644 --- a/js/desktop/src/autoplay_window/AutoplayApp.tsx +++ b/js/desktop/src/autoplay_window/AutoplayApp.tsx @@ -1,102 +1,43 @@ -import { useCallback, useEffect, useRef, useState } from 'react'; -import { X } from 'lucide-react'; -import type { AutoplayPayload } from '@/lib/autoplay-ipc'; +import { useCallback, useEffect, useState } from "react"; +import type { AutoplayPayload } from "@/lib/autoplay-ipc"; +import { AutoplayCardContent } from "@/components/autoplay-card-content"; export function AutoplayApp() { const [payload, setPayload] = useState(null); - const mediaRef = useRef(null); useEffect(() => { return window.electronAutoplay.onPlay((p) => setPayload(p)); }, []); useEffect(() => { - return window.electronAutoplay.onStop(() => { - mediaRef.current?.pause(); - setPayload(null); - }); + return window.electronAutoplay.onStop(() => setPayload(null)); }, []); - const stop = useCallback(() => { - mediaRef.current?.pause(); + const handleDismiss = useCallback(() => { setPayload(null); window.electronAutoplay.dismiss(); }, []); + const handleNavigate = useCallback(() => { + if (!payload) return; + window.electronAutoplay.navigate({ + networkId: payload.networkId, + streamId: payload.streamId, + }); + }, [payload]); + if (!payload) { return
; } - const isVideo = payload.mimeType.startsWith('video/'); - - const handleClick = () => { - mediaRef.current?.pause(); - window.electronAutoplay.navigate({ - networkId: payload.networkId, - streamId: payload.streamId, - }); - }; - - const handleClose = (e: React.MouseEvent) => { - e.stopPropagation(); - stop(); - }; - return ( -
- {isVideo ? ( - <> -