feat: prefetch support for test plan

aws · Feb 22, 2024 · 318c0ff · 318c0ff
1 parent 1f765a5
commit 318c0ff
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 33 deletions.
diff --git a/e2e/refApi.e2e.ts b/e2e/refApi.e2e.ts
@@ -0,0 +1,40 @@
+/* eslint-env detox/detox, jest/globals */
+import {
+  afterAllTestPlan,
+  beforeAllTestPlan,
+  waitForClearLogs,
+  waitForTestPlan,
+  waitForLogLabel,
+  waitForTap,
+} from './testPlan';
+
+describe('Ref Api', () => {
+  beforeAll(beforeAllTestPlan);
+  afterAll(afterAllTestPlan);
+
+  /*
+    - https://3d26876b73d7.us-west-2.playback.live-video.net/api/video/v1/us-west-2.913157848533.channel.rkCBS9iD1eyd.m3u8
+    - https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8
+    - https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.XFAcAcypUxQm.m3u8
+    - https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.YtnrVcQbttF0.m3u8
+    - https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8
+    - https://46074450f652.us-west-2.playback.live-video.net/api/video/v1/us-west-2.385480771703.channel.ajs2EabyQ9fO.m3u8
+    - https://d6hwdeiig07o4.cloudfront.net/ivs/956482054022/cTo5UpKS07do/2020-07-13T22-54-42.188Z/OgRXMLtq8M11/media/hls/master.m3u8
+  */
+
+  it('preload multiple sources to play', async () => {
+    await waitForTestPlan(`
+      prefetch:
+      - https://3d26876b73d7.us-west-2.playback.live-video.net/api/video/v1/us-west-2.913157848533.channel.rkCBS9iD1eyd.m3u8
+      - https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8
+      events:
+      - onPlayerStateChange
+      `);
+    await waitForClearLogs();
+    await waitForTap(by.id('prefetch:0'));
+    await waitForLogLabel('onPlayerStateChange ::: Playing');
+    await waitForClearLogs();
+    await waitForTap(by.id('prefetch:1'));
+    await waitForLogLabel('onPlayerStateChange ::: Playing');
+  });
+});
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1,5 +1,5 @@
 PODS:
-  - amazon-ivs-react-native-player (1.4.1):
+  - amazon-ivs-react-native-player (1.5.1-rc.1):
     - AmazonIVSPlayer (~> 1.25.0-rc.2.1)
     - React-Core
   - AmazonIVSPlayer (1.25.0-rc.2.1)
@@ -579,7 +579,7 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  amazon-ivs-react-native-player: 8d77be2a79382c8a23bf0650fff90bf2f1597600
+  amazon-ivs-react-native-player: 3f8642ea6594f30de276391cdd06345cf87be4d2
   AmazonIVSPlayer: eac627800d289abd3d004bc34223137047ec8b5e
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
@@ -640,4 +640,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 10b965f81e7d51bcd1f3d840c000ea2ebdaf2ec6
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.11.3
diff --git a/example/src/screens/TestPlan.tsx b/example/src/screens/TestPlan.tsx
@@ -5,6 +5,7 @@ import IVSPlayer, {
   IVSPlayerRef,
   LogLevel,
   Quality,
+  Source,
 } from 'amazon-ivs-react-native-player';
 import { StyleSheet, View } from 'react-native';
 import {
@@ -14,6 +15,7 @@ import {
   Subheading,
   Text,
   ToggleButton,
+  IconButton,
 } from 'react-native-paper';
 import { ScrollView } from 'react-native-gesture-handler';
 import { proxy, useSnapshot } from 'valtio';
@@ -36,6 +38,7 @@ type PlanInputOption = {
 enum PlanInputActionArg {
   Number,
   String,
+  Prefetch,
 }
 
 type PlanInput = {
@@ -100,6 +103,11 @@ const InputTemplates: Record<string, PlanInput> = {
     type: PlanInputType.Action,
     icon: 'picture-in-picture-top-right-outline',
   },
+  loadSource: {
+    type: PlanInputType.Action,
+    icon: 'web',
+    args: [PlanInputActionArg.Prefetch],
+  },
 };
 
 const defaultUrl = `https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8`;
@@ -116,13 +124,17 @@ const planState = proxy<{
   inputs: PlanInput[];
   actions: Record<string, PlanProps>;
   qualities: Quality[];
+  prefetchurls: string[];
+  prefetchsources: Record<string, Source | undefined>;
 }>({
   url: '',
   props: {},
   events: new Set(),
   inputs: [],
   actions: {},
   qualities: [],
+  prefetchurls: [],
+  prefetchsources: {},
 });
 
 function qualitymatch(a: Quality | undefined, b: Quality | undefined) {
@@ -232,7 +244,7 @@ function Player({ playerRef, ...props }: PlayerProps) {
         )}
         {logs.map((log, index) => (
           <Text
-            key={index}
+            key={`${index}${log[1]}`}
             style={styles.log}
             testID={log[0]}
             accessibilityLabel={log[1]}
@@ -261,6 +273,8 @@ export function TestPlan() {
       planState.inputs = [];
       planState.actions = {};
       planState.qualities = [];
+      planState.prefetchurls = [];
+      planState.prefetchsources = {};
     };
   }, []);
 
@@ -320,6 +334,30 @@ export function TestPlan() {
             // throw error with example input
           }
           break;
+        case 'prefetch':
+          if (Array.isArray(value)) {
+            const newPrefetchurls: string[] = [];
+            value.forEach((input) => {
+              if (typeof input === 'string') {
+                newPrefetchurls.push(input);
+                planState.prefetchsources[input] =
+                  playerRef.current?.preload(input);
+              } else {
+                // throw error with example input
+              }
+            });
+
+            planState.prefetchurls = newPrefetchurls;
+            planState.inputs.push({
+              name: 'prefetch',
+              type: PlanInputType.Action,
+              icon: 'web',
+              args: [PlanInputActionArg.Prefetch],
+            });
+          } else {
+            // throw error with example input
+          }
+          break;
         default:
           console.info(lname, plandata[name]);
           break;
@@ -456,38 +494,70 @@ export function TestPlan() {
                         }}
                       />
                     );
+                  case PlanInputActionArg.Prefetch:
+                    return (
+                      <View style={styles.col}>
+                        {snapshot.prefetchurls.map((url, index) => {
+                          return (
+                            <View key={url} style={styles.row}>
+                              <IconButton
+                                testID={`${name}:${index}`}
+                                icon={
+                                  snapshot.prefetchsources[url] !== undefined
+                                    ? 'web'
+                                    : 'warning'
+                                }
+                                onPress={() => {
+                                  const maybesource =
+                                    snapshot.prefetchsources[url];
+                                  if (
+                                    maybesource !== undefined &&
+                                    playerRef.current
+                                  ) {
+                                    playerRef.current.loadSource(maybesource);
+                                  }
+                                }}
+                              />
+                              <Text>{url}</Text>
+                            </View>
+                          );
+                        })}
+                      </View>
+                    );
                   default:
                     return null;
                 }
               })}
-              <ToggleButton
-                // @ts-expect-error docs say this prop exists?
-                testID={name}
-                icon={input.icon ?? ''}
-                status="checked"
-                onPress={() => {
-                  if (!playerRef.current) {
-                    return;
-                  }
-                  switch (name) {
-                    case 'play':
-                      playerRef.current.play();
-                      break;
-                    case 'pause':
-                      playerRef.current.pause();
-                      break;
-                    case 'seekTo':
-                      playerRef.current.seekTo(snapshot.actions[name][0]);
-                      break;
-                    case 'setOrigin':
-                      playerRef.current.setOrigin(snapshot.actions[name][0]);
-                      break;
-                    case 'togglePip':
-                      playerRef.current.togglePip();
-                      break;
-                  }
-                }}
-              />
+              {name !== 'prefetch' && (
+                <ToggleButton
+                  // @ts-expect-error docs say this prop exists?
+                  testID={name}
+                  icon={input.icon ?? ''}
+                  status="checked"
+                  onPress={() => {
+                    if (!playerRef.current) {
+                      return;
+                    }
+                    switch (name) {
+                      case 'play':
+                        playerRef.current.play();
+                        break;
+                      case 'pause':
+                        playerRef.current.pause();
+                        break;
+                      case 'seekTo':
+                        playerRef.current.seekTo(snapshot.actions[name][0]);
+                        break;
+                      case 'setOrigin':
+                        playerRef.current.setOrigin(snapshot.actions[name][0]);
+                        break;
+                      case 'togglePip':
+                        playerRef.current.togglePip();
+                        break;
+                    }
+                  }}
+                />
+              )}
             </View>
           </>
         );
@@ -498,7 +568,7 @@ export function TestPlan() {
     <ScrollView style={styles.container}>
       <View style={styles.player} testID="player">
         <Player
-          streamUrl={snapshot.url}
+          streamUrl={snapshot.prefetchurls.length ? '' : snapshot.url}
           playerRef={playerRef}
           {...snapshot.props}
         />
@@ -556,9 +626,15 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
   },
   row: {
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
+    paddingBottom: 8,
+  },
+  col: {
+    flex: 1,
+    flexDirection: 'column',
   },
   rowInput: {
     flex: 1,