$ show DJChanahCJD/otter-music
Otter Music is a cross-platform music player application that aggregates multiple music sources (NetEase, QQ Music, Kuwo, Kugou, Migu, Bilibili, etc.) into a unified interface. It features music search, playback, playlist/favorites management, lyrics display, sleep timer, offline downloading, and cross-device synchronization via Cloudflare KV. The architecture combines a React/Vite frontend with Zustand state management, a Cloudflare Workers/Hono backend for API proxying and sync, and Capacitor for native Android integration. Key entry points include src/main.tsx (frontend root), functions/app.ts (backend), and android/app/src/main/java/com/otterhub/music/MainActivity.java (native). Data flows involve unified music API calls to platform-specific providers, audio URL resolution with caching, encrypted IndexedDB persistence for user state, and sync via Cloudflare KV. External dependencies include numerous music APIs, Capacitor, React, Zustand, Tailwind CSS, and Radix UI primitives.
The LLM identified 10 files worth highlighting for reuse:
Handles normalization of music platform URLs to playable URLs, considering proxy settings and native/web differences. Isolated, reusable in any app needing to convert media URLs from various sources, demonstrates skill in handling cross-platform URL transformations and fallback mechanisms.
Provides a simple API to register and revoke blob URLs to prevent memory leaks. Self-contained, zero dependencies, easily extractable for any web app handling binary data (audio, images), shows non-obvious skill in managing blob URL lifecycle.
Implements a TTL-based cache with automatic cleanup under storage pressure using Cache API and IndexedDB fallback. Demonstrates advanced caching strategy beyond simple memoization, reusable for any data fetching layer requiring intelligent cache invalidation.
Wrapper around IndexedDB/localStorage that encrypts and decrypts values using Web Crypto AES-GCM. Isolated, secure, and reusable for storing sensitive client-side data (tokens, keys) in any web application, showcases proper client-side encryption practices.
Abstracts cross-platform download triggering (web anchor tag vs Capacitor Filesystem plugin). Handles file naming, MIME types, and platform differences, reusable in any hybrid web/native app needing to save files, demonstrates skill in bridging web and native APIs.
Defines the IMusicProvider interface (search, getUrl, getPic, getLyric) for music source abstraction. Combined with the factory pattern, enables pluggable music sources without modifying client code, demonstrating clean separation of concerns and extensibility.
Dynamically loads and instantiates music provider implementations based on source name. Isolated, depends only on the interface and provider modules, reusable for any plugin-based system, shows skill in dynamic dependency loading and loose coupling.
Thin wrapper around Radix UI Button with consistent Tailwind styling via cn utility. Part of a set of reusable UI primitives (input, switch, checkbox, etc.) that are framework-agnostic (only require Radix and Tailwind), exemplifies high-quality component encapsulation.
Standard debounce hook to delay function execution, preventing excessive calls (e.g., for search inputs). Simple, isolated, and reusable in any React project, represents a well-crafted utility hook.
Hook returning ref and mounted state to prevent state updates on unmounted components. Addresses a common React pitfall, minimal and reusable, demonstrates attention to React lifecycle edge cases.