expo-gliph-player 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 react-native-gliph-player contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,348 @@
+# 🎵 expo-gliph-player
+
+[![npm version](https://shields.io)](https://npmjs.com)
+[![License: MIT](https://shields.io)](https://opensource.org)
+
+**Fixed version of react-native-gliph-player with full Expo compatibility.** All iOS bridge fixes, Swift/Objective-C issues, and Android `autoSkipOnError` patches are pre-applied.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install expo-gliph-player
+# or
+yarn add expo-gliph-player
+```
+
+### From GitHub (Alternative):
+
+```bash
+yarn add https://github.com
+```
+
+---
+
+## 🚀 Setup & Configuration
+
+### 1. Configure `app.json`
+
+Since this package contains native code, you must add the config plugin and configure background capabilities for iOS and Android:
+
+```json
+{
+  "expo": {
+    "plugins": ["expo-gliph-player"],
+    "ios": {
+      "infoPlist": {
+        "UIBackgroundModes": ["audio"]
+      }
+    },
+    "android": {
+      "permissions": ["android.permission.FOREGROUND_SERVICE"]
+    }
+  }
+}
+```
+
+### 2. Build the App
+
+This package uses native code. Run prebuild before launching the project:
+
+```bash
+npx expo prebuild
+# then run on device/emulator
+npx expo run:ios
+# or
+npx expo run:android
+```
+
+---
+
+## 💻 Reactive State
+
+Instead of manually fetching state, Gliph Player ships with powerful React Hooks. These hooks automatically re-render your components whenever the audio state changes.
+
+### Play/Pause State:
+
+```tsx
+import { useIsPlaying } from 'expo-gliph-player';
+
+const { playing } = useIsPlaying(); // Returns true or false
+```
+
+### Progress & Duration (in seconds):
+
+```tsx
+import { useProgress } from 'expo-gliph-player';
+
+const { position, duration } = useProgress(500); // Updates every 500ms
+```
+
+### "Now Playing" Track Metadata:
+
+```tsx
+import { useActiveTrack } from 'expo-gliph-player';
+
+const track = useActiveTrack(); // Contains url, title, artist, artwork
+```
+
+---
+
+## 🎛️ Playback & Queue Controls
+
+### Basic Controls
+
+```tsx
+await GliphPlayer.play();
+await GliphPlayer.pause();
+await GliphPlayer.stop();
+```
+
+### Navigation & Seeking
+
+```tsx
+await GliphPlayer.skipToNext();
+await GliphPlayer.skipToPrevious();
+await GliphPlayer.seekTo(60); // Jump to exactly 1 minute (in seconds)
+await GliphPlayer.seekBy(15); // Jump forward 15 seconds (great for podcasts)
+```
+
+### Managing the Queue
+
+You can dynamically add, remove, or reorder tracks while the audio is playing.
+
+```tsx
+// Add a track to the end of the queue
+await GliphPlayer.add({
+  id: 'new-song',
+  url: 'https://example.com',
+  title: 'Just Added',
+  artist: 'User'
+});
+
+// Remove a specific track by ID
+await GliphPlayer.remove('track-1');
+
+// Stop playback and empty the queue entirely
+await GliphPlayer.reset();
+```
+
+---
+
+## 🔒 Lock Screen & Background Events
+
+To ensure your lock screen and notification panel controls actually respond to user input, you must connect native remote events to the player engine.
+
+### Inside Components (`useTrackPlayerEvents`)
+
+```tsx
+import { useTrackPlayerEvents, Event } from 'expo-gliph-player';
+import GliphPlayer from 'expo-gliph-player';
+
+export function PlaybackObserver() {
+  useTrackPlayerEvents([
+    Event.RemotePlay, 
+    Event.RemotePause, 
+    Event.RemoteNext, 
+    Event.RemotePrevious
+  ], (event) => {
+    if (event.type === Event.RemotePlay) GliphPlayer.play();
+    if (event.type === Event.RemotePause) GliphPlayer.pause();
+    if (event.type === Event.RemoteNext) GliphPlayer.skipToNext();
+    if (event.type === Event.RemotePrevious) GliphPlayer.skipToPrevious();
+  });
+
+  return null; // Headless component, acts as a layout listener
+}
+```
+
+### Global Listeners (`GliphPlayer.addEventListener`)
+
+To handle audio events even when your React UI components are unmounted, register global listeners inside your app root (`index.js` or `App.tsx` outside the component lifecycle):
+
+```tsx
+import GliphPlayer, { Event } from 'expo-gliph-player';
+
+GliphPlayer.addEventListener(Event.RemotePlay, () => {
+  GliphPlayer.play();
+});
+
+GliphPlayer.addEventListener(Event.RemotePause, () => {
+  GliphPlayer.pause();
+});
+```
+
+---
+
+## 🚀 Full Implementation Example
+
+Here is a production-ready, complete example split into the main entry file (`App.tsx`) and the user interface component (`MusicPlayer.tsx`).
+
+### 1. App.tsx (Main Entry & Background Engine Setup)
+
+```tsx
+import React, { useEffect } from 'react';
+import { View, Platform, PermissionsAndroid } from 'react-native';
+import GliphPlayer, { Capability, AppKilledPlaybackBehavior } from 'expo-gliph-player';
+import { MusicPlayer } from './components/MusicPlayer';
+
+const tracks = [
+  {
+    id: '1',
+    url: 'https://example.com',
+    title: 'Gliph Journey',
+    artist: 'Gliph Labs',
+    artwork: 'https://example.com',
+  },
+];
+
+export default function App() {
+  useEffect(() => {
+    const setup = async () => {
+      // 1. Android Notification Permission (API 33+)
+      if (Platform.OS === 'android' && Platform.Version >= 33) {
+        await PermissionsAndroid.request('android.permission.POST_NOTIFICATIONS' as any);
+      }
+
+      // 2. Setup the engine
+      await GliphPlayer.setupPlayer({
+        playBuffer: 0.5, // 0.5s buffer for zero-lag seeking
+        android: {
+          appKilledPlaybackBehavior: AppKilledPlaybackBehavior.ContinuePlayback,
+        },
+      });
+
+      // 3. Define Lock Screen / Notification Controls
+      await GliphPlayer.updateOptions({
+        capabilities: [
+          Capability.Play, Capability.Pause,
+          Capability.SkipToNext, Capability.SkipToPrevious,
+          Capability.SeekTo,
+        ],
+      });
+
+      // 4. Add tracks to queue
+      await GliphPlayer.add(tracks);
+    };
+
+    setup();
+  }, []);
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#121212' }}>
+      <MusicPlayer />
+    </View>
+  );
+}
+```
+
+### 2. MusicPlayer.tsx (UI Component)
+
+```tsx
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
+import Slider from '@react-native-community/slider';
+import GliphPlayer, { useIsPlaying, useProgress, useActiveTrack, RepeatMode } from 'expo-gliph-player';
+
+export const MusicPlayer = () => {
+  const { playing } = useIsPlaying();
+  const { position, duration } = useProgress(500);
+  const track = useActiveTrack();
+  const [repeatMode, setRepeatMode] = useState('off');
+
+  const togglePlayback = async () => {
+    if (playing) {
+      await GliphPlayer.pause();
+    } else {
+      await GliphPlayer.play();
+    }
+  };
+
+  const cycleRepeat = async () => {
+    const next = repeatMode === 'off' ? 'one' : repeatMode === 'one' ? 'all' : 'off';
+    setRepeatMode(next);
+    await GliphPlayer.setRepeatMode(
+      next === 'one' ? RepeatMode.Track : next === 'all' ? RepeatMode.Queue : RepeatMode.Off
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Image source={{ uri: track?.artwork }} style={styles.artwork} />
+      <Text style={styles.title}>{track?.title || 'No Track'}</Text>
+      
+      <Slider
+        style={{ width: '100%', height: 40 }}
+        value={position}
+        maximumValue={duration || 1}
+        onSlidingComplete={(val) => GliphPlayer.seekTo(val)}
+        minimumTrackTintColor="#1DB954"
+      />
+
+      <View style={styles.controls}>
+        <TouchableOpacity onPress={() => GliphPlayer.skipToPrevious()}>
+          <Text style={styles.btn}>Prev</Text>
+        </TouchableOpacity>
+        
+        <TouchableOpacity onPress={togglePlayback} style={styles.playBtn}>
+          <Text style={{ color: '#fff' }}>{playing ? 'PAUSE' : 'PLAY'}</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={() => GliphPlayer.skipToNext()}>
+          <Text style={styles.btn}>Next</Text>
+        </TouchableOpacity>
+      </View>
+
+      <TouchableOpacity onPress={cycleRepeat} style={{ marginTop: 20 }}>
+        <Text style={{ color: '#1DB954' }}>Repeat: {repeatMode.toUpperCase()}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { padding: 20, alignItems: 'center', justifyContent: 'center', flex: 1 },
+  artwork: { width: 300, height: 300, borderRadius: 10 },
+  title: { color: '#fff', fontSize: 24, marginVertical: 20 },
+  controls: { flexDirection: 'row', alignItems: 'center', gap: 40, marginTop: 20 },
+  playBtn: { width: 80, height: 80, borderRadius: 40, backgroundColor: '#333', justifyContent: 'center', alignItems: 'center' },
+  btn: { color: '#fff', fontSize: 18 }
+});
+```
+
+---
+
+## 🔧 What's Fixed
+
+### iOS:
+- ✅ Fixed Swift/Objective-C bridging with `GliphAudioPlayer.h`.
+- ✅ Removed ReactCodegen dependency (no more build errors).
+- ✅ Fixed `use_frameworks!` compatibility.
+- ✅ Correct Swift module generation.
+
+### Android:
+- ✅ Fixed `autoSkipOnError` crash (`NoSuchKeyException`).
+- ✅ Proper foreground service registration.
+- ✅ `MainApplication.kt` autolinking.
+
+---
+
+## 📋 Requirements
+
+- **Expo SDK:** 50+
+- **React Native:** 0.71+
+- **iOS:** 14.0+
+- **Android:** API 21+
+
+---
+
+## 📄 License
+
+MIT
+
+---
+
+## 🙏 Credits
+
+Based on [react-native-gliph-player](https://github.com) by Gliph Labs.

package/android/build.gradle

@@ -0,0 +1,82 @@
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.1.0"
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.9.0"
+  }
+}
+
+// ─── Fix #1: Apply the React Native Gradle plugin FIRST ──────────────────────
+// This is required for Codegen to run and generate the TurboModule C++/Java
+// bindings. Without it, JSI linking fails silently on New Architecture.
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+apply plugin: 'com.facebook.react'
+
+android {
+  compileSdkVersion 36
+  namespace "com.gliphplayer"
+
+  defaultConfig {
+    minSdkVersion 24
+    targetSdkVersion 36
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  kotlinOptions {
+    jvmTarget = "17"
+  }
+
+  sourceSets {
+    main {
+      if (!isNewArchitectureEnabled()) {
+        // Old Architecture: use the hand-written spec that does NOT implement TurboModule
+        java.srcDirs += ["src/oldarch"]
+      }
+    }
+  }
+}
+
+repositories {
+  google()
+  mavenCentral()
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:2.1.20"
+  implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3"
+  implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3"
+
+  // ExoPlayer (Media3)
+  implementation "androidx.media3:media3-exoplayer:1.3.1"
+  implementation "androidx.media3:media3-exoplayer-hls:1.3.1"
+  implementation "androidx.media3:media3-exoplayer-dash:1.3.1"
+  implementation "androidx.media3:media3-exoplayer-smoothstreaming:1.3.1"
+  implementation "androidx.media3:media3-session:1.3.1"
+  implementation "androidx.media3:media3-ui:1.3.1"
+  implementation "androidx.media3:media3-datasource-okhttp:1.3.1"
+
+  // OkHttp for custom headers
+  implementation "com.squareup.okhttp3:okhttp:4.12.0"
+
+  // AndroidX
+  implementation "androidx.core:core-ktx:1.12.0"
+  implementation "androidx.media:media:1.7.0"
+}
+
+def isNewArchitectureEnabled() {
+  return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+  <!-- Required permissions -->
+  <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+  <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />
+  <uses-permission android:name="android.permission.WAKE_LOCK" />
+  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
+  <uses-permission android:name="android.permission.INTERNET" />
+  <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
+
+  <application>
+    <!-- Background playback service -->
+    <service
+      android:name=".GliphPlayerService"
+      android:exported="true"
+      android:foregroundServiceType="mediaPlayback"
+      android:stopWithTask="false">
+      <intent-filter>
+        <action android:name="androidx.media3.session.MediaLibraryService" />
+        <action android:name="android.media.browse.MediaBrowserService" />
+      </intent-filter>
+    </service>
+
+    <!-- Android Auto support -->
+    <meta-data
+      android:name="com.google.android.gms.car.application"
+      android:resource="@xml/automotive_app_desc" />
+  </application>
+
+</manifest>

package/android/src/main/java/com/gliphplayer/DeviceInfoModule.kt

@@ -0,0 +1,48 @@
+package com.gliphplayer
+
+import android.content.Context
+import android.media.AudioDeviceInfo
+import android.media.AudioManager
+import android.os.Build
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+
+class DeviceInfoModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
+
+    override fun getName(): String {
+        return "DeviceInfoModule"
+    }
+
+    @ReactMethod
+    fun getActiveAudioDeviceName(promise: Promise) {
+        try {
+            val audioManager = reactApplicationContext.getSystemService(Context.AUDIO_SERVICE) as AudioManager
+            
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+                val devices = audioManager.getDevices(AudioManager.GET_DEVICES_OUTPUTS)
+                
+                var bluetoothDeviceName: String? = null
+                
+                for (device in devices) {
+                    if (device.type == AudioDeviceInfo.TYPE_BLUETOOTH_A2DP || 
+                        device.type == AudioDeviceInfo.TYPE_BLUETOOTH_SCO) {
+                        bluetoothDeviceName = device.productName.toString()
+                        break
+                    }
+                }
+                
+                if (bluetoothDeviceName != null) {
+                    promise.resolve(bluetoothDeviceName)
+                } else {
+                    promise.resolve(null)
+                }
+            } else {
+                promise.resolve(null)
+            }
+        } catch (e: Exception) {
+            promise.reject("ERROR", e.message)
+        }
+    }
+}

package/android/src/main/java/com/gliphplayer/DeviceInfoPackage.kt

@@ -0,0 +1,16 @@
+package com.gliphplayer
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class DeviceInfoPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return listOf(DeviceInfoModule(reactContext))
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return emptyList()
+    }
+}