Skip to content

1 Overview

Jump to bottom
ankrypht edited this page Jul 16, 2025 · 1 revision

Page: Overview

Overview

Relevant source files

The following files were used as context for generating this wiki page:

Purpose and Scope

This document provides a high-level introduction to AudioScape, a React Native mobile application for streaming music from YouTube Music on Android devices. This overview covers the application's core purpose, key features, technology stack, and system architecture.

For detailed information about specific subsystems, see:

What is AudioScape

AudioScape is an Android music streaming application built with React Native and Expo that provides access to YouTube Music content through a custom API integration. The application offers a native mobile experience for discovering, playing, and managing music from YouTube Music's catalog without requiring a YouTube Music subscription.

The app operates as a standalone client that communicates with YouTube Music's backend services through a custom proxy API, enabling features like background playback, offline downloads, playlist management, and synchronized lyrics display.

Sources: README.md:5, package.json:1-4

Key Features

AudioScape provides the following core functionality:

Feature Description
Music Streaming Play songs directly from YouTube Music catalog
Background Playback Continue playback when app is minimized or screen is off
Offline Downloads Download songs for offline listening
Playlist Management Create and manage custom playlists
Favorites System Save favorite tracks for quick access
Synchronized Lyrics Display time-synced lyrics during playback
Search Functionality Search for songs, artists, and albums
Dynamic Themes Adaptive UI colors based on album artwork
Auto Updates Automatic checking and installation of app updates

Sources: README.md:47-57

Technology Stack

The following diagram shows the core technologies and dependencies that power AudioScape:

graph TD
    subgraph "Frontend Framework"
        expo["expo ~52.0.47"]
        rn["react-native 0.76.9"]
        router["expo-router ~4.0.21"]
    end
    
    subgraph "Audio Engine"
        trackplayer["react-native-track-player ^4.1.1"]
        reanimated["react-native-reanimated ^3.16.7"]
    end
    
    subgraph "State Management"
        redux["@reduxjs/toolkit ^2.8.2"]
        mmkv["react-native-mmkv ^2.12.2"]
        reactredux["react-redux ^9.2.0"]
    end
    
    subgraph "External Services"
        firebase["firebase ^11.10.0"]
        youtubejs["youtubei.js (custom fork)"]
        lrclib["lrclib-api ^2.0.0"]
    end
    
    subgraph "UI Components"
        paper["react-native-paper ^5.14.5"]
        fastimage["@d11/react-native-fast-image ^8.10.0"]
        slider["react-native-awesome-slider ^3.1.0"]
    end
    
    subgraph "Device Integration"
        filesystem["expo-file-system ~18.0.12"]
        medialibrary["expo-media-library ~17.0.6"]
        notifications["expo-notifications ~0.29.14"]
        netinfo["@react-native-community/netinfo 11.4.1"]
    end
    
    expo --> rn
    expo --> router
    rn --> trackplayer
    rn --> reanimated
    redux --> reactredux
    redux --> mmkv
    
    trackplayer --> filesystem
    firebase --> notifications
    youtubejs --> netinfo
Loading

Sources: package.json:17-62

System Architecture

AudioScape follows a layered architecture pattern with clear separation between the presentation layer, business logic, and data access:

graph TB
    subgraph "Presentation Layer"
        navigation["expo-router Navigation System"]
        screens["Screen Components"]
        modals["Modal Components"]
        floating["FloatingPlayer Component"]
    end
    
    subgraph "State Management Layer"
        musiccontext["MusicPlayerContext"]
        reduxstore["Redux Store"]
        lyricscontext["LyricsProvider"]
    end
    
    subgraph "Business Logic Layer"
        playbackservice["Playback Service"]
        downloadservice["Download Service"]
        searchservice["Search Service"]
        updateservice["Update Service"]
    end
    
    subgraph "Data Access Layer"
        trackplayer["react-native-track-player"]
        mmkvstorage["MMKV Storage"]
        filesystem["File System"]
        customapi["YouTube 'po token' API"]
        lrclibapi["LrcLib API"]
        firebaseapi["Firebase Services"]
    end
    
    subgraph "External Systems"
        youtubemusic["YouTube Music Backend"]
        githubapi["GitHub Releases API"]
        renderhost["Render.com Hosting"]
    end
    
    navigation --> musiccontext
    screens --> reduxstore
    modals --> lyricscontext
    floating --> musiccontext
    
    musiccontext --> playbackservice
    reduxstore --> downloadservice
    lyricscontext --> searchservice
    
    playbackservice --> trackplayer
    downloadservice --> filesystem
    searchservice --> customapi
    updateservice --> githubapi
    
    trackplayer --> mmkvstorage
    customapi --> youtubemusic
    lrclibapi --> youtubemusic
    firebaseapi --> renderhost
    
    customapi -.->|"Hosted on"| renderhost
Loading

The architecture enables:

  • Separation of Concerns: UI components are decoupled from business logic and data access
  • Scalability: Modular design allows for easy addition of new features
  • Testability: Clear boundaries between layers facilitate unit and integration testing
  • Maintainability: Well-defined interfaces between components reduce coupling

Sources: README.md:65-75, package.json:17-62

Related Documentation

This overview provides the foundation for understanding AudioScape's structure. For implementation details of specific subsystems, refer to the following documentation pages:

Clone this wiki locally