docs: ios installation & queue

README.md

@@ -16,7 +16,7 @@ It is written in TypeScript so types will always be up-to-date.
 
 ## Documentation
 
-https://react-native-google-cast.github.io/docs
+https://react-native-google-cast.github.io/docs/getting-started/installation
 
 ## Example
 

docs/getting-started/installation.md

@@ -4,11 +4,11 @@ title: Installation
 sidebar_label: Installation
 ---
 
-`$ npm install react-native-google-cast --save`
+`$ npm install react-native-google-cast@next --save`
 
 or
 
-`$ yarn add react-native-google-cast`
+`$ yarn add react-native-google-cast@next`
 
 ## Link package (React Native >=0.60)
 

docs/getting-started/setup.md

@@ -6,9 +6,7 @@ sidebar_label: Setup
 
 ## iOS
 
-1. ⚠️ If developing using Xcode 10+ and targeting iOS devices running iOS 12+, enable the [**Access WiFi Information** capability](https://developers.google.com/cast/docs/ios_sender/#xcode_10). Note that "Wireless Accessory Configuration" is unrelated.
-
-2. In `AppDelegate.m` add
+1. In `AppDelegate.m` add
 
    ```obj-c
    #import <GoogleCast/GoogleCast.h>
@@ -24,21 +22,9 @@ sidebar_label: Setup
 
    If using a custom receiver, replace `kGCKDefaultMediaReceiverApplicationID` with your receiver app id.
 
-3. If using iOS 13+ and you need [guest mode support](https://developers.google.com/cast/docs/ios_sender/ios_permissions_changes#need_to_keep_guest_mode_support), add
-
-   ```xml
-   <key>NSBluetoothAlwaysUsageDescription</key>
-   <string>${PRODUCT_NAME} uses Bluetooth to discover nearby Cast devices.</string>
-   <key>NSBluetoothPeripheralUsageDescription</key>
-   <string>${PRODUCT_NAME} uses Bluetooth to discover nearby Cast devices.</string>
-   <key>NSMicrophoneUsageDescription</key>
-   <string>${PRODUCT_NAME} uses microphone access to listen for ultrasonic tokens
-   when pairing with nearby Cast devices.</string>
-   ```
-
-   The [official Guest Mode documentation](https://developers.google.com/cast/docs/guest_mode) explains how guest mode works. Note that most use cases work fine without guest mode so you may decide you don't need it if it's not worth asking for the extra privacy permissions.
+2. In Xcode, go to `Signing & Capabilities`, click `+ Capability` and select `Access WiFi Information`. (This is required since [iOS 12](https://developers.google.com/cast/docs/ios_sender/#ios_12).) Note that "Wireless Accessory Configuration" is unrelated.
 
-4. For iOS 14+, you also need to add [local network permissions](https://developers.google.com/cast/docs/ios_sender/ios_permissions_changes#updating_your_app_on_ios_14) to `Info.plist`:
+3. For iOS 14+, you need to add [local network permissions](https://developers.google.com/cast/docs/ios_sender/ios_permissions_changes#updating_your_app_on_ios_14) to `Info.plist`:
 
    ```xml
    <key>NSBonjourServices</key>
@@ -61,6 +47,20 @@ sidebar_label: Setup
    # insert before [GCKCastContext setSharedInstanceWithOptions:options];
    ```
 
+4. If using iOS 13+ and you need [guest mode support](https://developers.google.com/cast/docs/ios_sender/ios_permissions_changes#ios_13), add
+
+   ```xml
+   <key>NSBluetoothAlwaysUsageDescription</key>
+   <string>${PRODUCT_NAME} uses Bluetooth to discover nearby Cast devices.</string>
+   <key>NSBluetoothPeripheralUsageDescription</key>
+   <string>${PRODUCT_NAME} uses Bluetooth to discover nearby Cast devices.</string>
+   <key>NSMicrophoneUsageDescription</key>
+   <string>${PRODUCT_NAME} uses microphone access to listen for ultrasonic tokens
+   when pairing with nearby Cast devices.</string>
+   ```
+
+   The [official Guest Mode documentation](https://developers.google.com/cast/docs/guest_mode) explains how guest mode works. Note that most use cases work fine without guest mode so you may decide you don't need it if it's not worth asking for the extra privacy permissions.
+
 ## Android
 
 1. Make sure the device you're using (also applies to emulators) has Google Play Services installed.

docs/getting-started/usage.md

@@ -22,6 +22,7 @@ To stream media to the connected cast device, you first need to get the current
   import { useRemoteMediaClient } from 'react-native-google-cast'
 
   function MyComponent() {
+    // this will automatically rerender when client is connected
     const client = useRemoteMediaClient()
 
     if (client) {
@@ -33,13 +34,36 @@ To stream media to the connected cast device, you first need to get the current
 - or using classes:
 
   ```ts
-  import GoogleCast from 'react-native-google-cast'
+  import { SessionManager } from 'react-native-google-cast'
 
   class MyComponent extends React.Component {
-    render() {
-      const client = await GoogleCast.getClient()
+    manager = new SessionManager()
+    state = {}
+
+    // note that unlike hooks, you'll need to use events to monitor when the client is connected
+    componentDidMount() {
+      this.startedListener = manager.onSessionStarted((session) =>
+        this.setState({ client: session.client })
+      )
+      this.resumedListener = manager.onSessionResumed((session) =>
+        this.setState({ client: session.client })
+      )
+      this.suspendedListener = manager.onSessionSuspended((session) =>
+        this.setState({ client: undefined })
+      )
+      this.endingListener = manager.onSessionEnding((session) =>
+        this.setState({ client: undefined })
+      )
+    }
+    componentWillUnmount() {
+      if (this.startedListener) this.startedListener.remove()
+      if (this.resumedListener) this.resumedListener.remove()
+      if (this.suspendedListener) this.suspendedListener.remove()
+      if (this.endingListener) this.endingListener.remove()
+    }
 
-      if (client) {
+    render() {
+      if (this.state.client) {
         // ...
       }
     }

docs/guides/hooks.md

@@ -6,7 +6,7 @@ sidebar_label: Hooks
 
 If you're using functional components, the library provides a number of hooks that help you manage its state.
 
-## Cast State Hooks
+## Cast State Hook
 
 Receive the current [CastState](../api/enums/caststate).
 
@@ -16,7 +16,7 @@ import { useCastState } from 'react-native-google-cast'
 const castState = useCastState()
 ```
 
-## Session Hooks
+## Session Hook
 
 Receive the current [CastSession](../api/classes/castsession).
 
@@ -26,21 +26,12 @@ import { useCastSession } from 'react-native-google-cast'
 const castSession = useCastSession()
 ```
 
-## Client Hooks
+## Client Hook
 
-[RemoteMediaClient](../api/classes/remotemediaclient) controls media playback on a Cast receiver.
+Receive the current [RemoteMediaClient](../api/classes/remotemediaclient).
 
 ```js
-// Status of the media has changed. The `mediaStatus` object contains the new status.
-client.onMediaStatusUpdated((mediaStatus) => {})
-```
-
-For convenience, the following events are triggered in addition to `onMediaStatusUpdated` in these special cases (they're called after `onMediaStatusUpdated`, if you're subscribed to both).
-
-```js
-// Media started playing
-client.onMediaPlaybackStarted((mediaStatus) => {})
+import { useClient } from 'react-native-google-cast'
 
-// Media finished playing
-client.onMediaPlaybackEnded((mediaStatus) => {})
+const client = useClient()
 ```

docs/guides/queueing.md

@@ -26,7 +26,37 @@ const mediaQueueItem = {
 }
 ```
 
-Load an array of media queue items in the queue by using the appropriate method of the [RemoteMediaClient](../api/classes/remotemediaclient) class.
+Load an array of media queue items in the queue by using the appropriate method on the client:
+
+- [loadMedia](../api/classes/remotemediaclient#loadMedia) - Replace current item or queue.
+- [queueInsertAndPlayItem](../api/classes/remotemediaclient#queueinsertandplayitem) - Insert an item into current queue and start playing it.
+- [queueInsertItem](../api/classes/remotemediaclient#queueinsertitem) - Insert item into current queue without changing what's currently playing.
+- [queueInsertItems](../api/classes/remotemediaclient#queueinsertitems) - Insert multiple items.
+
+For example:
+
+```js
+client.loadMedia({
+  queueData: {
+    items: [
+      {
+        mediaInfo: {
+          contentUrl: 'https://...',
+        },
+      },
+    ],
+  },
+})
+```
+
+## Interact with the queue
+
+- [play](../api/classes/remotemediaclient#play) - Play current item.
+- [pause](../api/classes/remotemediaclient#pause) - Pause current item.
+- [seek](../api/classes/remotemediaclient#seek) - Jump to a different position in the current item.
+- [queueNext](../api/classes/remotemediaclient#queuenext) - Play the next item.
+- [queuePrev](../api/classes/remotemediaclient#queueprev) - Play the previous item.
+- [stop](../api/classes/remotemediaclient#stop) - Stop playing and remove the queue.
 
 ## Receive media queue status update
 
@@ -41,6 +71,6 @@ When the receiver loads a media queue item, it assigns a unique ID to the item w
 
 > Note: To provide the best user experience, the sender app must show the next autoplay item in the queue in the sender UI.
 
-## Edit the queue
+<!-- ## Edit the queue
 
-To work with the items in the queue, use the queue methods of [RemoteMediaClient](../api/classes/remotemediaclient). These let you load an array of items into a new queue, insert items into an existing queue, update the properties of items in the queue, make an item jump forward or backward in the queue, set the properties of the queue itself (for example, change the `repeatMode` that selects the next item), remove items from the queue, and reorder the items in the queue.
+To work with the items in the queue, use the queue methods of [RemoteMediaClient](../api/classes/remotemediaclient). These let you load an array of items into a new queue, insert items into an existing queue, update the properties of items in the queue, make an item jump forward or backward in the queue, set the properties of the queue itself (for example, change the `repeatMode` that selects the next item), remove items from the queue, and reorder the items in the queue. -->

ios/RNGoogleCast/api/RNGCRemoteMediaClient.m

@@ -97,7 +97,7 @@ - (void)withClientPromisifyResolve:(RCTPromiseResolveBlock)resolve
 RCT_REMAP_METHOD(getMediaStatus,
                  getMediaStatusResolver: (RCTPromiseResolveBlock) resolve
                  rejecter: (RCTPromiseRejectBlock) reject) {
-  
+
   [self withClientResolve:resolve reject:reject perform:^GCKRequest *(GCKRemoteMediaClient *client) {
     GCKMediaStatus *status = [client mediaStatus];
     return status != nil ? [RCTConvert fromGCKMediaStatus:status] : [NSNull null];
@@ -160,7 +160,7 @@ - (void)withClientPromisifyResolve:(RCTPromiseResolveBlock)resolve
                   rejecter: (RCTPromiseRejectBlock) reject) {
 
   [self withClientPromisifyResolve:resolve reject:reject perform:^GCKRequest *(GCKRemoteMediaClient *client) {
-    return [client queueNextItem:customData];
+    return [client queueNextItem];
   }];
 }
 
@@ -169,7 +169,7 @@ - (void)withClientPromisifyResolve:(RCTPromiseResolveBlock)resolve
                   rejecter: (RCTPromiseRejectBlock) reject) {
 
   [self withClientPromisifyResolve:resolve reject:reject perform:^GCKRequest *(GCKRemoteMediaClient *client) {
-    return [client queuePrevItem:customData];
+    return [client queuePreviousItem];
   }];
 }
 

src/api/RemoteMediaClient.ts

@@ -118,7 +118,7 @@ export default class RemoteMediaClient {
   /**
    * Moves to the next item in the queue.
    *
-   * @param customData Custom application-specific data to pass along with the request.
+   * @param customData Custom application-specific data to pass along with the request. (Currently Android only. On iOS `customData` will be ignored.)
    */
   queueNext(customData?: object): Promise<void> {
     return Native.queueNext(customData)
@@ -127,7 +127,7 @@ export default class RemoteMediaClient {
   /**
    * Moves to the previous item in the queue.
    *
-   * @param customData Custom application-specific data to pass along with the request.
+   * @param customData Custom application-specific data to pass along with the request. (Currently Android only. On iOS `customData` will be ignored.)
    */
   queuePrev(customData?: object): Promise<void> {
     return Native.queuePrev(customData)