How attajak/noutube works
NouTube wraps YouTube and YouTube Music in a cross-platform app, augmenting playback with injected page code and native controls. The main mobile workflow accepts a URL or shared link, opens it in the app’s page experience, and runs the content script to modify the YouTube page. Library, feeds, settings, and sync are important supporting capabilities; desktop and browser-extension entry points are also present. Edges are limited to relationships shown in excerpts or the README; unsampled subsystem links are omitted or marked unverified.
Main entry points: main.ts Content bootstrap · webview-container.native.tsx YouTube webview · index.tsx App entry · MainPage.tsx Main page
Components 21
App experience
- App entry
app/index.tsx - Main page
components/page/MainPage.tsx - YouTube webview
components/page/webview-container.native.tsx - Desktop renderer
desktop/src/renderer/App.tsx - Extension UI
extension/entrypoints/options/App.tsx
YouTube enhancements
- Content bootstrap
content/main.ts - Request interception
content/intercept.ts - Page player hooks
content/player.ts - Playback controls
content/fullscreen-controls.ts - Content filters
content/blocklist.ts - CSS customization
content/css.ts
Playback runtime
- Native view module
modules/nou-tube-view/src/NouTubeView.tsx - Media service
modules/nou-tube-view/android/src/main/java/expo/modules/noutubeview/NouService.kt - Video downloads
desktop/src/main/ipc/main.ts
Library and sync
- Settings state
states/settings.ts - Bookmark state
states/bookmarks.ts - Channel feeds
lib/feed-management.ts - Account sync
lib/supabase/sync/account.ts
Other components
- User
- YouTube sites
- Supabase
Connections 19
- User → App entry: opens app
app/index.tsx - App entry → Main page: renders
app/index.tsx - Main page → YouTube webview: hosts page
- YouTube webview → YouTube sites: wraps sites
README.md - YouTube webview → Content bootstrap: injects code
README.md - Content bootstrap → Request interception: installs
content/main.ts - Content bootstrap → Page player hooks: binds player
content/main.ts - Content bootstrap → Playback controls: installs
content/main.ts - Content bootstrap → Content filters: installs
content/main.ts - Content bootstrap → CSS customization: injects styles
content/main.ts - Media service → Page player hooks: controls playback
modules/nou-tube-view/android/src/main/java/expo/modules/noutubeview/NouService.kt - User → Desktop renderer: uses desktop
README.md - User → Extension UI: uses extension
README.md - Extension UI → Settings state: edits settings
- User → Bookmark state: manages library
- User → Channel feeds: reads feeds
- User → Video downloads: downloads video
- Settings state → Account sync: syncs settings
- Account sync → Supabase: syncs remotely