@mux/mux-data-react-native-video 0.5.7

package/README.md

@@ -0,0 +1,96 @@
+<p align="center">
+  <a href="https://mux.com/">
+    <img src="https://avatars.githubusercontent.com/u/16199997?s=200&v=4" alt="Mux Logo">
+  </a>
+</p>
+
+# Mux Data SDK for monitoring react-native-video
+
+![npm (tag)](https://img.shields.io/npm/v/@mux/mux-data-react-native-video/latest)
+![npm bundle size](https://img.shields.io/bundlephobia/min/@mux/mux-data-react-native-video)
+![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@mux/mux-data-react-native-video)
+![npm](https://img.shields.io/npm/dm/@mux/mux-data-react-native-video)
+![npm](https://img.shields.io/npm/dt/@mux/mux-data-react-native-video)
+
+Mux Data gives you insight into video engagement and Quality of Experience using client-side SDKs for your player.
+
+This SDK monitors [react-native-video](https://github.com/react-native-video/react-native-video), [see all supported players here](https://docs.mux.com/guides/data).
+
+View the DemoApp/ directory to see a demo application that implements this library.
+
+## Documentation
+
+Visit our [documentation](https://docs.mux.com/guides/data/monitor-react-native-video) to get started.
+
+## Requirements
+
+1. A functioning react-native application that uses react-native-video.
+1. react-native ~> 16.9
+1. react-native-video ~> 5.0.2
+
+## Installation
+
+Install from github in your package.json (when this is officially released then it will be availble on npm).
+
+```
+yarn add "https://github.com/muxinc/mux-stats-sdk-react-native-video#v0.2.0"
+```
+
+OR
+
+```
+npm install "https://github.com/muxinc/mux-stats-sdk-react-native-video#v0.2.0" --save
+```
+
+## Usage
+
+This package works by wrapping your `Video` component in a higher order component.
+
+For more information about what keys can be passed into the `data` key in the `muxOptions` prop see
+[the javascript docs](https://docs.mux.com/docs/web-integration-guide#section-5-add-metadata).
+
+```jsx
+import app from './package.json' // this is your application's package.json
+import Video from 'react-native-video'; // import Video from react-native-video like you normally would
+import muxReactNativeVideo from 'mux-react-native-video-sdk';
+
+// wrap the `Video` component with Mux functionality
+const MuxVideo = muxReactNativeVideo(Video);
+
+// Pass the same props to `MuxVideo` that you would pass to the
+// `Video` element. All of these props will be passed through to your underlying react-native-video component
+// Include a new prop for `muxOptions`
+<MuxVideo
+  style={styles.video}
+  source={{
+    uri:
+      'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
+  }}
+  controls
+  muted
+  muxOptions={{
+    application_name: app.name,            // (required) the name of your application
+    application_version: app.version,      // the version of your application (optional, but encouraged)
+    data: {
+      env_key: 'YOUR_ENVIRONMENT_KEY',     // (required)
+      player_software_version: '5.0.2'     // (optional, but encouraged) the version of react-native-video that you are using
+      player_name: 'React Native Player',  // See metadata docs for available metadata fields https://docs.mux.com/docs/web-integration-guide#section-5-add-metadata
+      video_id: 'My Video Id',
+      video_title: 'My awesome video',
+    },
+  }}
+/>
+```
+
+## Known Issues
+
+1. The `paused` property does not behave as expected on Android when using the default player controls. (the `onProgress` event, which is something the Mux SDK needs to hook into does not fire): https://github.com/react-native-community/react-native-video/issues/1979. If you are using the `paused` property it will work on iOS with the default controls but if you need to use it on Android you will have to implement your own controls and set/unset the `paused` property yourself.
+1. The `player_is_fullscreen` property is not reported as expected on iOS. The react-native-video callbacks for fullscreen status `onFullscreenPlayerDidPresent` and `onFullscreenPlayerDidDismiss` do not get called when entering fullscreen using the native controls: https://github.com/react-native-video/react-native-video/issues/552
+
+## Caveats
+
+1. Upscale and downscale % metrics are not calculated because we are unable to get player width and player height measurments from react-native-video.
+1. Even if we could get player width and height, we still wouldn't be able to calculate upscale and downscale % metrics for HLS sources is because of this open issue related to getting the video source width & height: https://github.com/react-native-community/react-native-video/issues/1194.
+1. This library is intended for use with react-native-video when targeting iOS and Android platforms. For targeting web platforms we have other SDKs that will work better for monitiring the HTML5 `video` element.
+1. If you are overriding react-native-video's default of 250ms for `progressUpdateInterval` this library will: (1) ignore your setting and revert back to 250ms (2) log a warning. This library depends on a progressUpdateInterval of 250ms in order to correctly calculate rebuffering
+1. 'Seeking' events are not tracked by this SDK because of inconsistent `onSeek` callback behavior between iOS and Android: https://github.com/react-native-community/react-native-video/issues/1977

package/README_INTERNAL.md

@@ -0,0 +1,11 @@
+# Release
+
+1. Update version in package.json
+1. Update tag version in `yarn add` and `npm i` commands in the README
+1. Open PR
+1. Get PR merged
+1. Pull master, tag master with your new version `git tag v0.1.0-beta.1`
+1. Push tags `git push origin --tags`
+
+For now, usere can install from Github. When this gets further along
+and closer to non-beta release then we will release to NPM

package/mux-react-native-video-sdk.podspec

@@ -0,0 +1,19 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = package['name']
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.license      = package['license']
+
+  s.authors      = package['author']
+  s.homepage     = package['homepage']
+  s.platforms    = { :ios => "9.0", :osx => "10.13" }
+
+  s.source       = { :git => "https://github.com/muxinc/mux-stats-sdk-react-native-video.git", :tag => "v#{s.version}" }
+  s.source_files  = "apple/**/*.{h,m}"
+
+  s.dependency 'React-Core'
+end

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@mux/mux-data-react-native-video",
+  "version": "0.5.7",
+  "author": "Mux, Inc.",
+  "description": "Mux analytics plugin for react-native-video",
+  "homepage": "https://github.com/muxinc/mux-stats-sdk-react-native-video",
+  "license": "MIT",
+  "main": "src/index.js",
+  "scripts": {
+    "lint": "eslint 'src/*.js' --quiet"
+  },
+  "devDependencies": {
+    "eslint": "^6.8.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1"
+  },
+  "peerDependencies": {
+    "react": "^16.9",
+    "react-native-video": "^5.0"
+  },
+  "dependencies": {
+    "mux-embed": "4.12.1"
+  }
+}

package/src/index.js

@@ -0,0 +1,258 @@
+import mux from 'mux-embed';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import { Platform } from 'react-native';
+import lib from '../package.json';
+const secondsToMs = mux.utils.secondsToMs;
+const assign = mux.utils.assign;
+
+const MIN_REBUFFER_DURATION = 300; // this should be more than 250 because getPlayheadTime will only update every 250ms
+
+const noop = function () { };
+
+export default (WrappedComponent) => {
+  return React.forwardRef(({
+    onProgress = noop,
+    onEnd = noop,
+    onSeek = noop,
+    onLoad = noop,
+    onPlaybackRateChange = noop,
+    onFullscreenPlayerDidPresent = noop,
+    onFullscreenPlayerDidDismiss = noop,
+    muxOptions,
+    progressUpdateInterval,
+    source,
+    ...otherProps
+  }, ref) => {
+    const videoRef = useRef();
+    const options = Object.assign({}, muxOptions);
+
+    if (!options.application_name) {
+      console.error('[mux-react-native-video] missing muxOptions.application_name - this value is required');
+    }
+    if (progressUpdateInterval && progressUpdateInterval !== 250) {
+      console.log(`[mux-react-native-video] found progressUpdateInterval value of ${progressUpdateInterval} - overriding to 250. This is required for the mux-react-native-video to correctly track rebuffering`);
+      progressUpdateInterval = 250;
+    }
+
+    const didStartPaused = otherProps.paused;
+
+    const stateRef = React.useRef({ playerID: mux.utils.generateShortID() });
+    const saveStateForPlayer = (key, value) => {
+      stateRef.current[key] = value;
+    };
+
+    const getStateForPlayer = (key) => {
+      return stateRef.current[key];
+    };
+
+    const emit = (eventType, data) => {
+      mux.emit(stateRef.current.playerID, eventType, data);
+    };
+
+    const emitPlay = () => {
+      setPlayerStatus('play');
+      emit('play');
+    };
+
+    const setPlayerStatus = (status) => saveStateForPlayer('currentStatus', status);
+    const getPlayerStatus = () => getStateForPlayer('currentStatus');
+
+    useImperativeHandle(ref, () => Object.assign(videoRef.current, { mux: { emit } }));
+
+    const _onProgress = evt => {
+      saveStateForPlayer('currentTime', secondsToMs(evt.currentTime));
+      if (getPlayerStatus() === 'paused') {
+        return;
+      }
+
+      if (getPlayerStatus() === 'play') {
+        setPlayerStatus('playing');
+        emit('playing');
+      }
+      emit('timeupdate', { player_playhead_time: secondsToMs(evt.currentTime) });
+      onProgress(evt);
+    };
+
+    const _onEnd = evt => {
+      emit('ended');
+      onEnd(evt);
+    };
+
+    const _onSeek = evt => {
+      emit('seeked');
+      onSeek(evt);
+    };
+
+    const _onLoad = evt => {
+      if (evt.duration) {
+        saveStateForPlayer('duration', secondsToMs(evt.duration));
+      }
+      if (evt.naturalSize) {
+        //
+        // You may be wondering why we're comparing this value to the string 'undefined' instead
+        // of the value 'undefined'. Glad you asked. This is not a typeo, it turns out that sometimes,
+        // infact the value is the string 'undefined'
+        //
+        // https://github.com/react-native-community/react-native-video/issues/1194
+        //
+        if (evt.naturalSize.width && evt.naturalSize.width !== 'undefined') {
+          saveStateForPlayer('sourceWidth', evt.naturalSize.width);
+        }
+        if (evt.naturalSize.height && evt.naturalSize.height !== 'undefined') {
+          saveStateForPlayer('sourceHeight', evt.naturalSize.height);
+        }
+      }
+      onLoad(evt);
+    };
+
+    const _onPlaybackRateChange = evt => {
+      const lastRate = getStateForPlayer('lastRateChange');
+      const newRate = evt.playbackRate;
+      const isFirstPlayAttempt = (didStartPaused && lastRate === undefined && newRate);
+      const isUnPausing = (lastRate === 0 && newRate);
+
+      saveStateForPlayer('lastRateChange', evt.playbackRate);
+
+      if (lastRate === newRate) {
+        onPlaybackRateChange(evt);
+        return;
+      }
+
+      if (isFirstPlayAttempt || isUnPausing) {
+        emitPlay();
+        onPlaybackRateChange(evt);
+        return;
+      }
+
+      if (newRate === 0) {
+        emit('pause');
+        setPlayerStatus('paused');
+        onPlaybackRateChange(evt);
+      }
+    };
+
+    const _onFullscreenPlayerDidPresent = evt => {
+      saveStateForPlayer('isFullscreen', true);
+      onFullscreenPlayerDidPresent(evt);
+    };
+
+    const _onFullscreenPlayerDidDismiss = evt => {
+      saveStateForPlayer('isFullscreen', false);
+      onFullscreenPlayerDidDismiss(evt);
+    };
+
+    useEffect(() => {
+      options.getPlayheadTime = () => {
+        return getStateForPlayer('currentTime');
+      };
+
+      options.minimumRebufferDuration = MIN_REBUFFER_DURATION;
+      const platformName = options.application_name;
+
+      delete options.application_name;
+
+      const platformVersion = options.application_version;
+
+      delete options.application_version;
+
+      options.data = assign(
+        {
+          player_software_name: 'React native video',
+          player_is_paused: getStateForPlayer('isPaused'),
+          // player_software_version: player.constructor.version, // TODO
+          player_mux_plugin_name: 'react-native-video-mux',
+          player_mux_plugin_version: lib.version
+        },
+        options.data
+      );
+
+      options.getStateData = function () {
+        return {
+          // Required properties - these must be provided every time this is called
+          // You _should_ only provide these values if they are defined (i.e. not 'undefined')
+          player_is_paused: getStateForPlayer('isPaused'),
+          // player_width: getStateForPlayer('playerWidth'),
+          // player_height: getStateForPlayer('playerHeight'),
+          video_source_height: getStateForPlayer('sourceWidth'),
+          video_source_width: getStateForPlayer('sourceHeight'),
+
+          // Preferred properties - these should be provided in this callback if possible
+          // If any are missing, that is okay, but this will be a lack of data for the customer at a later time
+          player_is_fullscreen: getStateForPlayer('isFullscreen'),
+          player_autoplay_on: !otherProps.paused,
+          // player_preload_on: isPreload(),
+          video_source_url: source && source.uri,
+          // video_source_mime_type: getMimeType(),
+          video_source_duration: getStateForPlayer('duration'),
+
+          // Optional properties - if you have them, send them, but if not, no big deal
+          video_poster_url: otherProps.poster
+          // player_language_code: getVideoElementProp('lang') // Return the language code (e.g. `en`, `en-us`)
+        };
+      };
+
+      options.platform = {
+        //         layout:
+        //         product:
+        //         manufacturer:
+        os: {
+          family: Platform.OS,
+          version: Platform.Version
+        }
+      };
+      if (platformName) {
+        options.platform.name = platformName;
+      }
+      if (platformVersion) {
+        options.platform.version = platformVersion;
+      }
+
+      mux.init(stateRef.current.playerID, options);
+      if (!didStartPaused) {
+        emitPlay();
+      }
+
+      return () => {
+        emit('destroy');
+      };
+    }, []);
+
+    const sourceUri = source && source.uri;
+
+    useEffect(() => {
+      if (!sourceUri) return;
+
+      if (!getStateForPlayer('sourceUri')) {
+        // do not send a videochange event for the first source
+        saveStateForPlayer('sourceUri', sourceUri);
+        return;
+      }
+
+      saveStateForPlayer('sourceUri', sourceUri);
+      emit('videochange', {
+        video_id: options.data.video_id,
+        video_title: options.data.video_title,
+        video_series: options.data.video_series,
+        video_duration: options.data.video_duration,
+        video_stream_type: options.data.video_stream_type,
+        video_encoding_variant: options.data.video_encoding_variant
+      });
+    }, [sourceUri]);
+
+    return (
+      <WrappedComponent
+        onProgress={_onProgress}
+        onEnd={_onEnd}
+        onSeek={_onSeek}
+        onLoad={_onLoad}
+        onPlaybackRateChange={_onPlaybackRateChange}
+        progressUpdateInterval={progressUpdateInterval}
+        onFullscreenPlayerDidPresent={_onFullscreenPlayerDidPresent}
+        onFullscreenPlayerDidDismiss={_onFullscreenPlayerDidDismiss}
+        source={source}
+        ref={videoRef}
+        {...otherProps}
+      />
+    );
+  });
+};