amazon-ivs-react-native-player 1.0.0

package/lib/typescript/IVSPlayer.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import type { LogLevel, PlayerState } from './enums';
+import type { Quality, PlayerData, TextCue, TextMetadataCue, VideoData, IVSPlayerRef } from './types';
+declare type Props = {
+    style?: ViewStyle;
+    testID?: string;
+    paused?: boolean;
+    muted?: boolean;
+    autoplay?: boolean;
+    streamUrl?: string;
+    liveLowLatency?: boolean;
+    playbackRate?: number;
+    logLevel?: LogLevel;
+    progressInterval?: number;
+    volume?: number;
+    quality?: Quality | null;
+    autoMaxQuality?: Quality | null;
+    autoQualityMode?: boolean;
+    breakpoints?: number[];
+    maxBitrate?: number;
+    initialBufferDuration?: number;
+    onSeek?(position: number): void;
+    onData?(data: PlayerData): void;
+    onVideoStatistics?(data: VideoData): void;
+    onPlayerStateChange?(state: PlayerState): void;
+    onDurationChange?(duration: number | null): void;
+    onQualityChange?(quality: Quality | null): void;
+    onRebuffering?(): void;
+    onLoadStart?(): void;
+    onLoad?(duration: number | null): void;
+    onLiveLatencyChange?(liveLatency: number): void;
+    onTextCue?(textCue: TextCue): void;
+    onTextMetadataCue?(textMetadataCue: TextMetadataCue): void;
+    onProgress?(progress: number): void;
+    onError?(error: string): void;
+    onTimePoint?(position: number): void;
+    children?: React.ReactNode;
+};
+declare const IVSPlayerContainer: React.ForwardRefExoticComponent<Props & React.RefAttributes<IVSPlayerRef>>;
+export default IVSPlayerContainer;

package/lib/typescript/__tests__/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/enums.d.ts

@@ -0,0 +1,13 @@
+export declare enum LogLevel {
+    IVSLogLevelDebug = 0,
+    IVSLogLevelInfo = 1,
+    IVSLogLevelWarning = 2,
+    IVSLogLevelError = 3
+}
+export declare enum PlayerState {
+    Idle = "Idle",
+    Ready = "Ready",
+    Buffering = "Buffering",
+    Playing = "Playing",
+    Ended = "Ended"
+}

package/lib/typescript/index.d.ts

@@ -0,0 +1,4 @@
+export * from './enums';
+export * from './types';
+import IVSPlayer from './IVSPlayer';
+export default IVSPlayer;

package/lib/typescript/types.d.ts

@@ -0,0 +1,37 @@
+export declare type Quality = {
+    name: string;
+    codecs: string;
+    bitrate: number;
+    framerate: number;
+    width: number;
+    height: number;
+};
+export declare type PlayerData = {
+    qualities: Quality[];
+    version: string;
+    sessionId: string;
+};
+export declare type VideoData = {
+    bitrate: number;
+    duration: number | null;
+    framesDecoded: number | null;
+    framesDropped: number | null;
+};
+export declare type TextCue = {
+    type: string;
+    line: number;
+    size: number;
+    position: number;
+    text: string;
+    textAlignment: string;
+};
+export declare type TextMetadataCue = {
+    type: string;
+    text: string;
+    textDescription: string;
+};
+export declare type IVSPlayerRef = {
+    play: () => void;
+    pause: () => void;
+    seekTo: (position: number) => void;
+};

package/package.json

@@ -0,0 +1,149 @@
+{
+  "name": "amazon-ivs-react-native-player",
+  "version": "1.0.0",
+  "description": "amazon-ivs-react-native-player",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "amazon-ivs-react-native-player.podspec"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "example": "yarn --cwd example",
+    "pods": "cd example && pod-install --quiet",
+    "bootstrap": "yarn example && yarn && yarn pods",
+    "e2e:build:android": "detox build --configuration android",
+    "e2e:build:ios": "detox build --configuration ios",
+    "e2e:test:android": "yarn get:testbutler && detox test --configuration android --take-screenshots failing --loglevel verbose",
+    "e2e:test:ios": "detox test --configuration ios --take-screenshots failing --loglevel verbose",
+    "e2e:build:android:release": "detox build --configuration android.emu.release",
+    "e2e:build:ios:release": "detox build --configuration ios.sim.release",
+    "e2e:test:android:release": "yarn get:testbutler && detox test --configuration android.emu.release --headless --take-screenshots failing",
+    "e2e:test:ios:release": "detox test --configuration ios.sim.release --take-screenshots failing",
+    "get:testbutler": "curl -f -o ./test-butler-app.apk https://repo1.maven.org/maven2/com/linkedin/testbutler/test-butler-app/2.2.1/test-butler-app-2.2.1.apk"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/aws/amazon-ivs-react-native-player",
+  "author": "AWS",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/aws/amazon-ivs-react-native-player/issues"
+  },
+  "homepage": "https://github.com/aws/amazon-ivs-react-native-player#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@callstack/eslint-config": "^11.0.0",
+    "@commitlint/config-conventional": "^13.1.0",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@testing-library/jest-native": "^4.0.1",
+    "@testing-library/react-native": "^7.2.0",
+    "@types/jest": "^26.0.0",
+    "@types/react": "^16.9.19",
+    "@types/react-native": "0.62.13",
+    "commitlint": "^13.1.0",
+    "detox": "^18.23.1 ",
+    "eslint": "^7.18.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-detox": "^1.0.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "husky": "^4.2.5",
+    "jest": "^27.2.1",
+    "jest-circus": "^27.2.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "17.0.1",
+    "react-native": "0.64.2",
+    "react-native-builder-bob": "^0.18.1",
+    "react-test-renderer": "17.0.1",
+    "typescript": "^4.1.3",
+    "@babel/runtime": "^7.12.5"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "jest": {
+    "preset": "react-native",
+    "setupFilesAfterEnv": [
+      "@testing-library/jest-native/extend-expect"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "yarn lint && yarn typescript"
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": "@callstack/eslint-config/react",
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ],
+      "import/no-unresolved": "off",
+      "import/no-extraneous-dependencies": "off"
+    },
+    "plugins": [
+      "detox"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/IVSPlayer.js.flow

@@ -0,0 +1,53 @@
+/**
+ * Flowtype definitions for IVSPlayer
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.13.0
+ * @flow
+ */
+
+import * as React from 'react';
+import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
+import typeof { LogLevel } from './enums';
+import type {
+  Quality,
+  PlayerData,
+  TextCue,
+  TextMetadataCue,
+  VideoData,
+  IVSPlayerRef,
+} from './types';
+
+declare type Props = {|
+  style?: ViewStyleProp,
+  paused?: boolean,
+  muted?: boolean,
+  autoplay?: boolean,
+  streamUrl?: string,
+  liveLowLatency?: boolean,
+  playbackRate?: number,
+  logLevel?: LogLevel,
+  progressInterval?: number,
+  volume?: number,
+  quality?: Quality | null,
+  autoMaxQuality?: Quality | null,
+  autoQualityMode?: boolean,
+  breakpoints?: number[],
+  maxBitrate?: number,
+  onSeek?: (position: number) => void,
+  onData?: (data: PlayerData) => void,
+  onVideoStatistics?: (data: VideoData) => void,
+  onPlayerStateChange?: (state: number) => void,
+  onDurationChange?: (duration: number | null) => void,
+  onQualityChange?: (quality: Quality | null) => void,
+  onRebuffering?: () => void,
+  onLoadStart?: () => void,
+  onLoad?: (duration: number | null) => void,
+  onLiveLatencyChange?: (liveLatency: number) => void,
+  onTextCue?: (textCue: TextCue) => void,
+  onTextMetadataCue?: (textMetadataCue: TextMetadataCue) => void,
+  onProgress?: (progress: number) => void,
+  onError?: (error: string) => void,
+  onTimePoint?: (position: number) => void,
+|};
+declare var IVSPlayerContainer: React.AbstractComponent<Props, IVSPlayerRef>;
+declare export default typeof IVSPlayerContainer;

package/src/IVSPlayer.tsx

@@ -0,0 +1,366 @@
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import {
+  requireNativeComponent,
+  ViewStyle,
+  StyleSheet,
+  UIManager,
+  findNodeHandle,
+  View,
+  NativeSyntheticEvent,
+} from 'react-native';
+import type { LogLevel, PlayerState } from './enums';
+import type {
+  Quality,
+  PlayerData,
+  TextCue,
+  TextMetadataCue,
+  VideoData,
+  IVSPlayerRef,
+} from './types';
+
+type IVSPlayerProps = {
+  style?: ViewStyle;
+  testID?: string;
+  ref: any;
+  muted?: boolean;
+  liveLowLatency?: boolean;
+  playbackRate?: number;
+  streamUrl?: string;
+  logLevel?: LogLevel;
+  progressInterval?: number;
+  volume?: number;
+  quality?: Quality | null;
+  autoMaxQuality?: Quality | null;
+  autoQualityMode?: boolean;
+  breakpoints?: number[];
+  maxBitrate?: number;
+  initialBufferDuration?: number;
+  onSeek?(event: NativeSyntheticEvent<{ position: number }>): void;
+  onData?(event: NativeSyntheticEvent<{ playerData: PlayerData }>): void;
+  onVideoStatistics?(
+    event: NativeSyntheticEvent<{ videoData: VideoData }>
+  ): void;
+  onPlayerStateChange?(
+    event: NativeSyntheticEvent<{ state: PlayerState }>
+  ): void;
+  onDurationChange?(
+    event: NativeSyntheticEvent<{ duration: number | null }>
+  ): void;
+  onQualityChange?(event: NativeSyntheticEvent<{ quality: Quality }>): void;
+  onRebuffering?(): void;
+  onLoadStart?(): void;
+  onLoad?(event: NativeSyntheticEvent<{ duration: number | null }>): void;
+  onLiveLatencyChange?(
+    event: NativeSyntheticEvent<{ liveLatency: number }>
+  ): void;
+  onTextCue?(event: NativeSyntheticEvent<{ textCue: TextCue }>): void;
+  onTextMetadataCue?(
+    event: NativeSyntheticEvent<{ textMetadataCue: TextMetadataCue }>
+  ): void;
+  onProgress?(event: NativeSyntheticEvent<{ position: number }>): void;
+  onError?(event: NativeSyntheticEvent<{ error: string }>): void;
+  onTimePoint?(event: NativeSyntheticEvent<{ position: number }>): void;
+};
+
+const VIEW_NAME = 'AmazonIvs';
+
+const IVSPlayer = requireNativeComponent<IVSPlayerProps>(VIEW_NAME);
+
+type Props = {
+  style?: ViewStyle;
+  testID?: string;
+  paused?: boolean;
+  muted?: boolean;
+  autoplay?: boolean;
+  streamUrl?: string;
+  liveLowLatency?: boolean;
+  playbackRate?: number;
+  logLevel?: LogLevel;
+  progressInterval?: number;
+  volume?: number;
+  quality?: Quality | null;
+  autoMaxQuality?: Quality | null;
+  autoQualityMode?: boolean;
+  breakpoints?: number[];
+  maxBitrate?: number;
+  initialBufferDuration?: number;
+  onSeek?(position: number): void;
+  onData?(data: PlayerData): void;
+  onVideoStatistics?(data: VideoData): void;
+  onPlayerStateChange?(state: PlayerState): void;
+  onDurationChange?(duration: number | null): void;
+  onQualityChange?(quality: Quality | null): void;
+  onRebuffering?(): void;
+  onLoadStart?(): void;
+  onLoad?(duration: number | null): void;
+  onLiveLatencyChange?(liveLatency: number): void;
+  onTextCue?(textCue: TextCue): void;
+  onTextMetadataCue?(textMetadataCue: TextMetadataCue): void;
+  onProgress?(progress: number): void;
+  onError?(error: string): void;
+  onTimePoint?(position: number): void;
+  children?: React.ReactNode;
+};
+
+function parseDuration(duration: number | null) {
+  if (duration == null) {
+    return duration;
+  }
+  return duration > 0 ? duration : Infinity;
+}
+
+const IVSPlayerContainer = React.forwardRef<IVSPlayerRef, Props>(
+  (
+    {
+      style,
+      streamUrl,
+      paused,
+      muted,
+      autoplay = true,
+      liveLowLatency,
+      playbackRate,
+      logLevel,
+      progressInterval,
+      volume,
+      quality,
+      autoMaxQuality,
+      autoQualityMode,
+      breakpoints = [],
+      maxBitrate,
+      initialBufferDuration,
+      onSeek,
+      onData,
+      onVideoStatistics,
+      onPlayerStateChange,
+      onDurationChange,
+      onQualityChange,
+      onRebuffering,
+      onLoadStart,
+      onLoad,
+      onLiveLatencyChange,
+      onTextCue,
+      onTextMetadataCue,
+      onProgress,
+      onError,
+      onTimePoint,
+      children,
+    },
+    ref
+  ) => {
+    const mediaPlayerRef = useRef(null);
+    const initialized = useRef(false);
+
+    const play = useCallback(() => {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(mediaPlayerRef.current),
+        UIManager.getViewManagerConfig(VIEW_NAME).Commands.play,
+        []
+      );
+    }, []);
+
+    const pause = useCallback(() => {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(mediaPlayerRef.current),
+        UIManager.getViewManagerConfig(VIEW_NAME).Commands.pause,
+        []
+      );
+    }, []);
+
+    const seekTo = useCallback((value) => {
+      UIManager.dispatchViewManagerCommand(
+        findNodeHandle(mediaPlayerRef.current),
+
+        UIManager.getViewManagerConfig(VIEW_NAME).Commands.seekTo,
+        [value]
+      );
+    }, []);
+
+    useEffect(() => {
+      if (initialized.current || autoplay) {
+        if (paused) {
+          pause();
+        } else {
+          play();
+        }
+      }
+      initialized.current = true;
+    }, [pause, paused, play, autoplay]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        play,
+        pause,
+        seekTo,
+      }),
+      [play, pause, seekTo]
+    );
+
+    const onSeekHandler = (
+      event: NativeSyntheticEvent<{ position: number }>
+    ) => {
+      const { position } = event.nativeEvent;
+      onSeek?.(position);
+    };
+
+    const onPlayerStateChangeHandler = (
+      event: NativeSyntheticEvent<{ state: PlayerState }>
+    ) => {
+      const { state } = event.nativeEvent;
+      onPlayerStateChange?.(state);
+    };
+
+    const onDurationChangeHandler = (
+      event: NativeSyntheticEvent<{ duration: number | null }>
+    ) => {
+      const { duration } = event.nativeEvent;
+
+      onDurationChange?.(parseDuration(duration));
+    };
+
+    const onQualityChangeHandler = (
+      event: NativeSyntheticEvent<{ quality: Quality }>
+    ) => {
+      const { quality: newQuality } = event.nativeEvent;
+      onQualityChange?.(newQuality);
+    };
+
+    const onLoadHandler = (
+      event: NativeSyntheticEvent<{
+        duration: number | null;
+      }>
+    ) => {
+      if (!paused) {
+        play();
+      } else {
+        pause();
+      }
+
+      const { duration } = event.nativeEvent;
+
+      onLoad?.(parseDuration(duration));
+    };
+
+    const onLiveLatencyChangeHandler = (
+      event: NativeSyntheticEvent<{ liveLatency: number }>
+    ) => {
+      const { liveLatency } = event.nativeEvent;
+      onLiveLatencyChange?.(liveLatency);
+    };
+
+    const onDataHandler = (
+      event: NativeSyntheticEvent<{ playerData: PlayerData }>
+    ) => {
+      const { playerData } = event.nativeEvent;
+      onData?.(playerData);
+    };
+
+    const onTextCueHandler = (
+      event: NativeSyntheticEvent<{ textCue: TextCue }>
+    ) => {
+      const { textCue } = event.nativeEvent;
+      onTextCue?.(textCue);
+    };
+
+    const onVideoStatisticsHandler = (
+      event: NativeSyntheticEvent<{ videoData: VideoData }>
+    ) => {
+      const { videoData } = event.nativeEvent;
+      const statistics: VideoData = {
+        ...videoData,
+        duration: parseDuration(videoData.duration),
+      };
+      onVideoStatistics?.(statistics);
+    };
+
+    const onTextMetadataCueHandler = (
+      event: NativeSyntheticEvent<{ textMetadataCue: TextMetadataCue }>
+    ) => {
+      const { textMetadataCue } = event.nativeEvent;
+      onTextMetadataCue?.(textMetadataCue);
+    };
+
+    const onProgressHandler = (
+      event: NativeSyntheticEvent<{ position: number }>
+    ) => {
+      const { position } = event.nativeEvent;
+      onProgress?.(position);
+    };
+
+    const onErrorHandler = (event: NativeSyntheticEvent<{ error: string }>) => {
+      const { error } = event.nativeEvent;
+      onError?.(error);
+    };
+
+    const onTimePointHandler = (
+      event: NativeSyntheticEvent<{ position: number }>
+    ) => {
+      const { position } = event.nativeEvent;
+      onTimePoint?.(position);
+    };
+
+    return (
+      <View style={[styles.container, style]} ref={ref as any}>
+        <IVSPlayer
+          testID="IVSPlayer"
+          muted={muted}
+          liveLowLatency={liveLowLatency}
+          style={styles.mediaPlayer}
+          ref={mediaPlayerRef}
+          playbackRate={playbackRate}
+          streamUrl={streamUrl}
+          logLevel={logLevel}
+          progressInterval={progressInterval}
+          volume={volume}
+          quality={quality}
+          initialBufferDuration={initialBufferDuration}
+          autoMaxQuality={autoMaxQuality}
+          autoQualityMode={autoQualityMode}
+          breakpoints={breakpoints}
+          maxBitrate={maxBitrate}
+          onVideoStatistics={
+            onVideoStatistics ? onVideoStatisticsHandler : undefined
+          }
+          onData={onDataHandler}
+          onSeek={onSeekHandler}
+          onQualityChange={onQualityChangeHandler}
+          onPlayerStateChange={onPlayerStateChangeHandler}
+          onDurationChange={onDurationChangeHandler}
+          onRebuffering={onRebuffering}
+          onLoadStart={onLoadStart}
+          onLoad={onLoadHandler}
+          onTextCue={onTextCueHandler}
+          onTextMetadataCue={onTextMetadataCueHandler}
+          onProgress={onProgressHandler}
+          onLiveLatencyChange={
+            onLiveLatencyChange ? onLiveLatencyChangeHandler : undefined
+          }
+          onError={onErrorHandler}
+          onTimePoint={onTimePointHandler}
+        />
+        <View style={styles.children}>{children}</View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  mediaPlayer: {
+    flex: 1,
+  },
+  children: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export default IVSPlayerContainer;