fix(hooks): useProgress & usePlayback hooks (#1723)

* fix(js): fix useProgress & usePlayback hooks

- (breaking) fix: usePlaybackState was incorrectly returning State.None by default. Now it returns undefined while it is waiting on the async call to TrackPlayer to resolve. This also fixes the following issue where duration was incorrectly being reported as `0`: #1709
- optimization: avoid unnecessarily reevaluating the useEffect on every player state change by moving the `playerState === State.None` outside of the effect and including it as a dependency instead

* chore(js): make hooks fix non-breaking

src/hooks.ts

@@ -3,9 +3,8 @@ import { useEffect, useRef, useState } from 'react';
 import { Event, EventsPayloadByEvent, Progress, State } from './interfaces';
 import TrackPlayer from './trackPlayer';
 
-/** Get current playback state and subsequent updates  */
-export const usePlaybackState = () => {
-  const [state, setState] = useState(State.None);
+const usePlaybackStateWithoutInitialValue = () => {
+  const [state, setState] = useState<State | undefined>(undefined);
   useEffect(() => {
     let mounted = true;
 
@@ -35,6 +34,12 @@ export const usePlaybackState = () => {
   return state;
 };
 
+/** Get current playback state and subsequent updates  */
+export const usePlaybackState = () => {
+  const state = usePlaybackStateWithoutInitialValue();
+  return state ?? State.None;
+};
+
 /**
  * Attaches a handler to the given TrackPlayer events and performs cleanup on unmount
  * @param events - TrackPlayer events to subscribe to
@@ -88,11 +93,11 @@ export function useProgress(updateInterval = 1000) {
     duration: 0,
     buffered: 0,
   });
-  const playerState = usePlaybackState();
-
+  const playerState = usePlaybackStateWithoutInitialValue();
+  const isNone = playerState === State.None;
   useEffect(() => {
     let mounted = true;
-    if (playerState === State.None) {
+    if (isNone) {
       setState({ position: 0, duration: 0, buffered: 0 });
       return;
     }
@@ -131,7 +136,7 @@ export function useProgress(updateInterval = 1000) {
     return () => {
       mounted = false;
     };
-  }, [playerState, updateInterval]);
+  }, [isNone, updateInterval]);
 
   return state;
 }