mediago-dev--mediago
caorushizi
62331e5c7b
Go Core already broadcast a `download-create` SSE event whenever
`/api/downloads` POST lands (UI, browser extension, Docker clients —
any route). The UI listened, but only to bump the sidebar badge via
`useDownloadStore.increase()`. The SWR list fetched by `useTasks`
stayed stale until the user refreshed manually, so tasks imported
through the extension's desktop-http / docker-http modes never
appeared without a page reload.
Fan the same SSE event through the existing `dispatchDownload`
pipeline so `useTasks` can mutate its SWR cache alongside the other
lifecycle events (success / failed / stopped).
- `packages/shared/common/src/types/index.ts`: new
`DownloadCreatedEvent` (`type: "created"`, carries `{ ids, count }`).
- `apps/ui/src/api/events.ts`: existing `download-create` handler now
additionally calls `dispatchDownload({ type: "created", ... })`
after its badge-increment side effect. Parses `ids` from the
payload for downstream filtering if anyone needs it later.
- `apps/ui/src/hooks/use-tasks.ts`: adds `isCreatedEvent` type guard
and calls `mutate()` on hit, same pattern as the other events.
Internal task creation (UI form submit) is untouched — it still
refreshes via its own local mutate. The SSE path only matters for
tasks that show up out-of-band.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Frontend
The React-based frontend application that provides the user interface for MediaGo, used in both Electron desktop app and standalone web application.
Overview
This package contains the React frontend that:
- Provides the main user interface for video downloading
- Handles video URL input and processing
- Displays download progress and history
- Manages application settings and preferences
- Communicates with backend services via Socket.io
- Works in both Electron renderer and standalone web contexts
Key Features
- Video Download Interface: Clean UI for adding and managing downloads
- Real-time Updates: Live progress tracking via Socket.io
- Responsive Design: Works on desktop and mobile devices
- Theme Support: Light/dark mode capabilities
- Multi-platform: Shared UI for Electron desktop and web versions
- Settings Management: User preferences and configuration
Technologies
- React 18: Modern React with hooks and concurrent features
- Vite: Fast build tool and dev server
- Ant Design: UI component library
- TailwindCSS: Utility-first CSS framework
- Shadcn/ui: Modern component library
- Zustand: Lightweight state management
- Socket.io Client: Real-time communication
- TypeScript: Type-safe development
Development
# Start development mode (with Electron)
pnpm dev
# Start web-only development
pnpm dev:web
# Build frontend
pnpm build:web
pnpm build:renderer
# Type checking
pnpm types:renderer
Architecture
The frontend is designed to work in two contexts:
- Electron Renderer: Loaded in Electron's BrowserWindow
- Standalone Web: Served by the webapi backend for browser access
It communicates with the backend services through Socket.io for real-time updates and HTTP APIs for data operations.