Skip to content

vscript.md

Latest commit

 

History

History
102 lines (77 loc) · 5.36 KB

vscript.md

File metadata and controls

102 lines (77 loc) · 5.36 KB
Raw

VScript: The Creator’s Studio

VScript is a professional-grade web application tailored for content creators, combining a high-fidelity Video Recorder, a synchronized Teleprompter, and a Session Management system into a seamless mobile-first experience.

For Android Developers: This README includes a dedicated section on extending/cloning this architecture to a native Kotlin/Android environment.

🚀 Core Features

1. 📹 Studio & Recording

The heart of the application (Record.tsx, VideoRecorder.tsx).

  • Instagram-Style Workflow: Hold-to-record or tap-to-record logic with a circular progress indicator.
  • Multi-Clip Sessions: Record multiple segments (takes) within a single session. The app manages these clips in a playlist.
  • Duration Control: Preset durations (15s, 30s, 60s) that auto-stop recording.
  • Device Management: Real-time switching between available cameras (front/back) and microphones (AudioRecorder.tsx).
  • Visual Feedback: Audio visualization bars and countdown timers.

2. 📜 Intelligent Teleprompter

Overlay capability for reading while recording (Teleprompter.tsx, TeleprompterOverlay.tsx).

  • Smart Scrolling: Auto-scroll with adjustable speed (WPM).
  • Customization: Dynamic font size and text opacity control.
  • Draggable Overlay: Position the script anywhere on the viewport (usually near the lens for eye contact).

3. 💾 Session & Data Management

Robust state handling using Redux Toolkit (recorderSlice, gallerySlice).

  • Session Gallery: browse past recordings with metadata (Date, Duration, Clip count).
  • Cloud Sync:
    • Firestore: Stores session metadata (JSON).
    • Firebase Storage: Stores raw video clips (.webm/.mp4) and thumbnails.
  • Persistence: Sessions are locally cached and synced to the cloud.

4. 🎨 UI/UX & Theming

  • "Sketchy" Anime Aesthetic: Distinctive visual style.
  • Global Dialog System: A custom Redux-driven dialog manager (dialogSlice, GlobalDialog.tsx) replacing native alerts for a consistent, non-blocking user experience.
  • Dark/Light Mode: System-aware theming using Material UI and Tailwind CSS.
  • Responsive Design: Mobile-first approach, ensuring usability on phone browsers (PWA-ready).

5. 🔐 Authentication & Profile

  • Firebase Auth: Secure login/signup.
  • User Stats: Tracking total recording time and session counts.
  • Profile Management: Avatar customization and settings.

🛠️ Tech Stack (Web)

  • Frontend: React 19, TypeScript, Vite 7
  • State: Redux Toolkit (Slices: script, gallery, settings, dialog, recorder)
  • UI Frameworks: Material UI (MUI) v7, Tailwind CSS v4
  • Backend Services: Firebase (Auth, Firestore, Storage)
  • Routing: React Router DOM v7

🤖 Android (Kotlin) Implementation Guide

If you are building a clone of this application in Kotlin (Android App), follow these architectural recommendations to replicate the functionality:

Recommended Android Stack

  • UI: Jetpack Compose (Material 3).
  • Architecture: MVVM with Clean Architecture.
  • Dependency Injection: Hilt.
  • Async: Coroutines & Kotlin Flows.
  • Navigation: Jetpack Navigation Compose.

Feature Mapping

Web Component Android Equivalent Implementation Notes
Video Recorder CameraX Use ProcessCameraProvider. Implement VideoCapture use case. For the "Reel" style progress, use a custom Canvas drawing over the PreviewView.
Teleprompter LazyColumn Overlay a transparent LazyColumn on top of the Camera Preview. Use LaunchedEffect to programmatically scroll based on a timer/speed variable.
Global State ViewModel + StateFlow Create a SessionViewModel to hold the list of generic "Clips" (URI, duration) during a recording session.
Data Storage Room + DataStore Use Room for local session metadata. Use DataStore for user preferences (scroll speed, font size).
Cloud Sync Firebase SDK Android Native SDKs for Auth, Firestore, and Storage are more robust than the web equivalents. Use WorkManager for background uploads of large video files.
Global Dialogs Compose Dialogs Implement a central Scaffold or Box that observes a DialogState flow to show overlays on top of any screen.

Key Challenges to Solve in Android

  1. Camera Overlay: Ensure the Teleprompter text does not interfere with the camera's focus or exposure tap targets. Use a Box layout with zIndex.
  2. Audio Focus: Managing microphone access when switching between the app and other background audio.
  3. Memory Management: Handling multiple high-res video clips in memory before merging. Consider writing temp files to Context.cacheDir immediately.

📂 Project Structure (Reference)

src/
├── components/       # Reusable UI (GlobalDialog, VideoRecorder, etc.)
├── pages/            # Main Screens (Record, Sessions, Profile, Login)
├── store/            # Redux Slices (State Management)
├── services/         # Firebase & Logic Adapters
├── context/          # React Context (Theme, Auth)
└── assets/           # Static media

🚦 Getting Started (Web Dev)

  1. Install: npm install
  2. Dev Server: npm run dev (Requires HTTPS for camera permissions)
  3. Build: npm run build