@javascriptcommon/react-native-track-player 1.2.9

package/lib/hooks.js

@@ -0,0 +1,160 @@
+import { useEffect, useState, useDebugValue, useRef } from 'react';
+import * as TrackPlayer from './index';
+import TrackPlayerEvents from './eventTypes';
+
+/**
+ * @description
+ *   Get current playback state and subsequent updatates
+ */
+const usePlaybackState = () => {
+    const [state, setState] = useState(TrackPlayer.STATE_NONE)
+
+    useEffect(() => {
+        async function setPlayerState() {
+            const playerState = await TrackPlayer.getState()
+            setState(playerState)
+        }
+
+        setPlayerState()
+        
+        const sub = TrackPlayer.addEventListener(TrackPlayer.TrackPlayerEvents.PLAYBACK_STATE, data => {
+            setState(data.state)
+        })
+
+        return () => {
+            sub.remove()
+        }
+    }, [])
+
+    return state
+}
+
+/**
+ * @description
+ *   Attaches a handler to the given TrackPlayer events and performs cleanup on unmount
+ * @param {Array<string>} events - TrackPlayer events to subscribe to
+ * @param {(payload: any) => void} handler - callback invoked when the event fires
+ */
+const useTrackPlayerEvents = (events, handler) => {
+    const savedHandler = useRef();
+
+    useEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+
+    useEffect(
+        () => {
+            if (__DEV__) {
+                const allowedTypes = Object.values(TrackPlayerEvents);
+                const invalidTypes = events.filter(type => !allowedTypes.includes(type));
+                if (invalidTypes.length) {
+                    console.warn(
+                        'One or more of the events provided to useTrackPlayerEvents is ' +
+                        `not a valid TrackPlayer event: ${invalidTypes.join('\', \'')}. ` +
+                        'A list of available events can be found at ' +
+                        'https://react-native-kit.github.io/react-native-track-player/documentation/#events'
+                    )
+                }
+            }
+
+            const subs = events.map(event =>
+                TrackPlayer.addEventListener(event,
+                    (payload) => savedHandler.current({ ...payload, type: event })
+                )
+            );
+
+            return () => {
+                subs.forEach(sub => sub.remove());
+            }
+        },
+        events
+    );
+}
+
+const useInterval = (callback, delay) => {
+    const savedCallback = useRef();
+
+    useEffect(() => {
+        savedCallback.current = callback;
+    })
+
+    useEffect(() => {
+        if (!delay) return;
+        const id = setInterval(savedCallback.current, delay);
+        return () => clearInterval(id);
+    }, [delay]);
+}
+
+const useWhenPlaybackStateChanges = callback => {
+    useTrackPlayerEvents(
+        [TrackPlayerEvents.PLAYBACK_STATE],
+        ({ state }) => {
+            callback(state);
+        }
+    );
+    useEffect(() => {
+        let didCancel = false;
+        const fetchPlaybackState = async () => {
+            const playbackState = await TrackPlayer.getState();
+            if (!didCancel) {
+                callback(playbackState);
+            }
+        }
+        fetchPlaybackState();
+        return () => { didCancel = true };
+    }, []);
+}
+
+const usePlaybackStateIs = (...states) => {
+    const [is, setIs] = useState();
+    useWhenPlaybackStateChanges(state => {
+        setIs(states.includes(state));
+    });
+
+    return is;
+}
+
+/**
+ * @description
+ *   Poll for track progress for the given interval (in miliseconds)
+ * @param {number} interval - ms interval
+ * @returns {[
+ *   {
+ *      progress: number,
+ *      bufferedPosition: number,
+ *      duration: number
+ *   },
+ *   (interval: number) => void
+ * ]}
+ */
+const useTrackPlayerProgress = (interval = 1000) => {
+    const initialState = {
+        position: 0,
+        bufferedPosition: 0,
+        duration: 0
+    };
+
+    const [state, setState] = useState(initialState);
+
+    const getProgress = async () => {
+        const [position, bufferedPosition, duration] = await Promise.all([
+            TrackPlayer.getPosition(),
+            TrackPlayer.getBufferedPosition(),
+            TrackPlayer.getDuration()
+        ])
+        setState({ position, bufferedPosition, duration });
+    }
+
+    const needsPoll = usePlaybackStateIs(
+        TrackPlayer.STATE_PLAYING,
+        TrackPlayer.STATE_BUFFERING
+    );
+    useInterval(getProgress, needsPoll ? interval : null);
+    return state;
+}
+
+
+// Exports
+module.exports.usePlaybackState = usePlaybackState
+module.exports.useTrackPlayerEvents = useTrackPlayerEvents
+module.exports.useTrackPlayerProgress = useTrackPlayerProgress

package/lib/index.js

@@ -0,0 +1,177 @@
+import { Platform, AppRegistry, DeviceEventEmitter, NativeEventEmitter, NativeModules } from 'react-native';
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+
+const { TrackPlayerModule: TrackPlayer } = NativeModules;
+const emitter = Platform.OS !== 'android' ? new NativeEventEmitter(TrackPlayer) : DeviceEventEmitter;
+
+let registeredHeadlessTask = false;
+
+function resolveAsset(uri) {
+    if(!uri) return undefined;
+    return resolveAssetSource(uri);
+}
+
+function resolveUrl(url) {
+    if(!url) return undefined;
+    return resolveAssetSource(url) || url;
+}
+
+function setupPlayer(options) {
+    return TrackPlayer.setupPlayer(options || {});
+}
+
+function updateOptions(data) {
+    // Clone the object before modifying it, so we don't run into problems with immutable objects
+    data = Object.assign({}, data);
+
+    // Resolve the asset for each icon
+    data.icon = resolveAsset(data.icon);
+    data.playIcon = resolveAsset(data.playIcon);
+    data.pauseIcon = resolveAsset(data.pauseIcon);
+    data.stopIcon = resolveAsset(data.stopIcon);
+    data.previousIcon = resolveAsset(data.previousIcon);
+    data.nextIcon = resolveAsset(data.nextIcon);
+    data.rewindIcon = resolveAsset(data.rewindIcon);
+    data.forwardIcon = resolveAsset(data.forwardIcon);
+
+    data.placeholderImage = resolveAsset(data.placeholderImage);
+
+    return TrackPlayer.updateOptions(data);
+}
+
+function setNowPlaying(track) {
+
+    // Resolve the URL
+    track.artwork = resolveUrl(track.artwork);
+
+    return TrackPlayer.setNowPlaying(track);
+}
+
+function remove(tracks) {
+    if(!Array.isArray(tracks)) {
+        tracks = [tracks];
+    }
+
+    return TrackPlayer.remove(tracks);
+}
+
+function registerPlaybackService(serviceFactory) {
+    if (Platform.OS === 'android' && !registeredHeadlessTask) {
+        // Registers the headless task
+        registeredHeadlessTask = true;
+        AppRegistry.registerHeadlessTask('TrackPlayer', serviceFactory);
+    } else {
+        // Initializes and runs the service in the next tick
+        setImmediate(serviceFactory());
+    }
+}
+
+function addEventListener(event, listener) {
+    return emitter.addListener(event, listener);
+}
+
+function warpEventResponse(handler, event, payload) {
+    // transform into the old format and return to handler
+    const additionalKeys = payload || {};
+    handler({ type: event, ...additionalKeys });
+}
+
+/**
+ * @deprecated since version 1.0.1. Use addEventListener instead.
+ */
+function registerEventHandler(handler) {
+    let events = [
+        'playback-state',
+        'playback-error',
+        'playback-queue-ended',
+        'playback-track-changed',
+
+        'remote-play',
+        'remote-pause',
+        'remote-stop',
+        'remote-next',
+        'remote-previous',
+        'remote-jump-forward',
+        'remote-jump-backward',
+        'remote-seek',
+        'remote-duck'
+    ];
+
+    if (Platform.OS === 'android') {
+        events.push('remote-skip', 'remote-set-rating', 'remote-play-id', 'remote-play-search');
+    }
+    else if(Platform.OS === 'ios'){
+      events.push('remote-play-pause')
+    }
+
+    registerPlaybackService(() => {
+        return async function() {
+            for (let i = 0; i < events.length; i++) {
+                addEventListener(events[i], warpEventResponse.bind(null, handler, events[i]));
+            }
+        };
+    });
+}
+
+// We'll declare each one of the constants and functions manually so IDEs can show a list of them
+// We should also add documentation here, but I'll leave this task to another day
+
+// States
+module.exports.STATE_NONE = TrackPlayer.STATE_NONE;
+module.exports.STATE_READY = TrackPlayer.STATE_READY;
+module.exports.STATE_PLAYING = TrackPlayer.STATE_PLAYING;
+module.exports.STATE_PAUSED = TrackPlayer.STATE_PAUSED;
+module.exports.STATE_STOPPED = TrackPlayer.STATE_STOPPED;
+module.exports.STATE_BUFFERING = TrackPlayer.STATE_BUFFERING;
+module.exports.STATE_CONNECTING = TrackPlayer.STATE_CONNECTING;
+
+// Capabilities
+module.exports.CAPABILITY_PLAY = TrackPlayer.CAPABILITY_PLAY;
+module.exports.CAPABILITY_PLAY_FROM_ID = TrackPlayer.CAPABILITY_PLAY_FROM_ID;
+module.exports.CAPABILITY_PLAY_FROM_SEARCH = TrackPlayer.CAPABILITY_PLAY_FROM_SEARCH;
+module.exports.CAPABILITY_PAUSE = TrackPlayer.CAPABILITY_PAUSE;
+module.exports.CAPABILITY_STOP = TrackPlayer.CAPABILITY_STOP;
+module.exports.CAPABILITY_SEEK_TO = TrackPlayer.CAPABILITY_SEEK_TO;
+module.exports.CAPABILITY_SKIP = TrackPlayer.CAPABILITY_SKIP;
+module.exports.CAPABILITY_SKIP_TO_NEXT = TrackPlayer.CAPABILITY_SKIP_TO_NEXT;
+module.exports.CAPABILITY_SKIP_TO_PREVIOUS = TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS;
+module.exports.CAPABILITY_JUMP_FORWARD = TrackPlayer.CAPABILITY_JUMP_FORWARD;
+module.exports.CAPABILITY_JUMP_BACKWARD = TrackPlayer.CAPABILITY_JUMP_BACKWARD;
+module.exports.CAPABILITY_SET_RATING = TrackPlayer.CAPABILITY_SET_RATING;
+module.exports.CAPABILITY_LIKE = TrackPlayer.CAPABILITY_LIKE;
+module.exports.CAPABILITY_DISLIKE = TrackPlayer.CAPABILITY_DISLIKE;
+module.exports.CAPABILITY_BOOKMARK = TrackPlayer.CAPABILITY_BOOKMARK;
+
+// Rating Types
+module.exports.RATING_HEART = TrackPlayer.RATING_HEART;
+module.exports.RATING_THUMBS_UP_DOWN = TrackPlayer.RATING_THUMBS_UP_DOWN;
+module.exports.RATING_3_STARS = TrackPlayer.RATING_3_STARS;
+module.exports.RATING_4_STARS = TrackPlayer.RATING_4_STARS;
+module.exports.RATING_5_STARS = TrackPlayer.RATING_5_STARS;
+module.exports.RATING_PERCENTAGE = TrackPlayer.RATING_PERCENTAGE;
+
+// General
+module.exports.setupPlayer = setupPlayer;
+module.exports.destroy = TrackPlayer.destroy;
+module.exports.updateOptions = updateOptions;
+module.exports.registerEventHandler = registerEventHandler;
+module.exports.registerBackendService = registerPlaybackService;
+module.exports.registerPlaybackService = registerPlaybackService;
+module.exports.addEventListener = addEventListener;
+
+// Player Queue Commands
+module.exports.setNowPlaying = setNowPlaying;
+module.exports.updateMetadataForTrack = TrackPlayer.updateMetadataForTrack;
+module.exports.updatePlayback = TrackPlayer.updatePlayback;
+module.exports.reset = TrackPlayer.reset;
+
+// Player Event Types
+module.exports.TrackPlayerEvents = require('./eventTypes');
+
+// Components
+module.exports.ProgressComponent = require('./ProgressComponent');
+
+// React Hooks (Requires React v16.8+ and React Native v0.59+)
+module.exports.useTrackPlayerEvents = require('./hooks').useTrackPlayerEvents;
+module.exports.useTrackPlayerProgress = require('./hooks').useTrackPlayerProgress;
+module.exports.usePlaybackState = require('./hooks').usePlaybackState;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@javascriptcommon/react-native-track-player",
+  "version": "1.2.9",
+  "description": "A fully fledged audio module created for music apps",
+  "contributors": [
+    {
+      "name": "David Chavez",
+      "email": "david@dcvz.io",
+      "url": "http://dcvz.io"
+    },
+    {
+      "name": "Guilherme Chaguri",
+      "email": "guichaguri@gmail.com",
+      "url": "http://guichaguri.com"
+    }
+  ],
+  "keywords": [
+    "react",
+    "react-native",
+    "track-player",
+    "audio-player",
+    "audio",
+    "player",
+    "music",
+    "controls",
+    "chromecast",
+    "android",
+    "ios",
+    "windows",
+    "hooks"
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/doublesymmetry/react-native-track-player.git"
+  },
+  "bugs": {
+    "url": "https://github.com/doublesymmetry/react-native-track-player/issues"
+  },
+  "scripts": {
+    "prepublishOnly": "git submodule update --init --recursive"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.6",
+    "react-native": ">=0.60.0-rc.2"
+  }
+}

package/react-native-track-player.podspec

@@ -0,0 +1,22 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-track-player"
+  s.version      = package["version"]
+  s.summary      = package['description']
+  s.license      = package['license']
+
+  s.author       = "David Chavez"
+  s.homepage     = package['repository']['url']
+  s.platform     = { :ios => "11.0", :tvos => "11.0" }
+
+  s.ios.deployment_target = "11.0"
+  s.tvos.deployment_target = "11.0"
+
+  s.source       = { :git => package['repository']['url'], :tag => "v#{s.version}" }
+  s.source_files  = "ios/**/*.{h,m,swift}"
+
+  s.dependency "React-Core"
+end