feat(web): add a web implementation (#1886)

* chore(example): update example to include a web version

* feat(web): add a web implementation

* feat(web): prevent exceptions during SSR due to inability to import shaka player

* fix(example): update tsconfig extension path

* chore(example): update the web build to work with the upgraded example code

* chore(example): update react-native-windows dependency to prevent runtime error

* fix(web): have setupPlayer throw an exception on duplicate calls

* fix(web): don't add track to queue on skip

* fix(web): silence eslint errors

* fix(web): fix skip method

* fix(web): fix the HLS stream example for web by retranscoding the whip.mp3

* fix(web): fix various issues causing failure states due to player errors

* refactor(web): refactor _most_ state changes into generic method

* chore(example): update appname for example web

Co-authored-by: David Chavez <[email protected]>

* revert(web): move shaka-player to an optional peer dependency and document its installation

* chore(src, example): clean up linting, formatting, and type errors

---------

Co-authored-by: Pavel Shut <[email protected]>
Co-authored-by: David Chavez <[email protected]>

Author: 3 people

.editorconfig

@@ -1,6 +1,6 @@
 root = true
 
-[{src,scripts}/**.{ts,json,js}]
+[{src,web,scripts}/**.{ts,json,js}]
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

README.md

@@ -2,53 +2,39 @@
 #EXT-X-VERSION:3
 #EXT-X-MEDIA-SEQUENCE:0
 #EXT-X-ALLOW-CACHE:YES
-#EXT-X-TARGETDURATION:8
-#EXTINF:7.012433,
-file0.m4a
-#EXTINF:6.989200,
-file1.m4a
-#EXTINF:7.012433,
-file2.m4a
-#EXTINF:6.989200,
-file3.m4a
-#EXTINF:7.012433,
-file4.m4a
-#EXTINF:6.989211,
-file5.m4a
-#EXTINF:7.012433,
-file6.m4a
-#EXTINF:6.989211,
-file7.m4a
-#EXTINF:7.012433,
-file8.m4a
-#EXTINF:6.989211,
-file9.m4a
-#EXTINF:7.012422,
-file10.m4a
-#EXTINF:6.989211,
-file11.m4a
-#EXTINF:7.012422,
-file12.m4a
-#EXTINF:6.989211,
-file13.m4a
-#EXTINF:6.989211,
-file14.m4a
-#EXTINF:7.012433,
-file15.m4a
-#EXTINF:6.989200,
-file16.m4a
-#EXTINF:7.012433,
-file17.m4a
-#EXTINF:6.989200,
-file18.m4a
-#EXTINF:7.012433,
-file19.m4a
-#EXTINF:6.989200,
-file20.m4a
-#EXTINF:7.012433,
-file21.m4a
-#EXTINF:6.989200,
-file22.m4a
-#EXTINF:3.300133,
-file23.m4a
+#EXT-X-TARGETDURATION:11
+#EXTINF:10.007800,
+playlist-00000.ts
+#EXTINF:10.007800,
+playlist-00001.ts
+#EXTINF:9.984589,
+playlist-00002.ts
+#EXTINF:10.007800,
+playlist-00003.ts
+#EXTINF:10.007800,
+playlist-00004.ts
+#EXTINF:9.984578,
+playlist-00005.ts
+#EXTINF:10.007800,
+playlist-00006.ts
+#EXTINF:10.007800,
+playlist-00007.ts
+#EXTINF:9.984578,
+playlist-00008.ts
+#EXTINF:10.007800,
+playlist-00009.ts
+#EXTINF:10.007800,
+playlist-00010.ts
+#EXTINF:9.984589,
+playlist-00011.ts
+#EXTINF:10.007800,
+playlist-00012.ts
+#EXTINF:10.007800,
+playlist-00013.ts
+#EXTINF:9.984578,
+playlist-00014.ts
+#EXTINF:10.007800,
+playlist-00015.ts
+#EXTINF:4.298589,
+playlist-00016.ts
 #EXT-X-ENDLIST

docs/static/example/hls/whip/file0.m4a

@@ -0,0 +1,66 @@
+const path = require('path');
+const {CracoAliasPlugin} = require('react-app-alias-ex');
+const babelInclude = require('@dealmore/craco-plugin-babel-include');
+const webpack = require('webpack');
+const { loaderByName, addBeforeLoader } = require('@craco/craco');
+
+
+module.exports = {
+  webpack: {
+    alias: {
+      'react-native$': 'react-native-web',
+      'react-native-track-player': path.resolve(__dirname, '../'),
+      // make sure we don't include multiple versions of react
+      'react': path.resolve(__dirname, './node_modules/react'),
+    },
+    plugins: {
+      add: [
+        new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }),
+        new webpack.DefinePlugin({
+          process: { env: {} },
+          __DEV__: true,
+        })
+      ],
+    },
+    configure: (config) => {
+      // BEGIN: resolve react-native-vector-icons font files
+      config.resolve.extensions.push('.ttf');
+      addBeforeLoader(
+        config,
+        loaderByName('url-loader'),
+        {
+          test: /\.ttf$/,
+          loader: 'url-loader', // or directly file-loader
+          include: path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
+        },
+      );
+      // END: resolve react-native-vector-icons font files
+
+      return config;
+    },
+  },
+  babel: {
+    presets: [
+      '@babel/preset-react',
+      '@babel/preset-typescript',
+    ],
+    plugins: [
+      '@babel/plugin-proposal-export-namespace-from',
+      'react-native-reanimated/plugin',
+    ],
+  },
+  plugins: [
+    {
+        plugin: CracoAliasPlugin,
+        options: {}
+    },
+    {
+      plugin: babelInclude,
+      options: {
+        include: [
+          path.resolve(__dirname, '../'),
+        ],
+      },
+    },
+  ],
+};

docs/static/example/hls/whip/file1.m4a

@@ -12,6 +12,8 @@
     "ios": "react-native run-ios",
     "ios:sim": "react-native run-ios --simulator=\"iPhone\"",
     "ios:ide": "open ios/*.xcworkspace/",
+    "web:start": "craco start",
+    "web:build": "craco build",
     "windows": "react-native run-windows",
     "start": "react-native start",
     "test": "jest",
@@ -25,23 +27,33 @@
     "@gorhom/bottom-sheet": "^4",
     "@react-native-community/slider": "^4.4.2",
     "@react-native-segmented-control/segmented-control": "^2.4.2",
+    "mux.js": "^7.0.0",
     "react": "18.2.0",
+    "react-dom": "^18.0.2",
     "react-native": "0.71.12",
-    "react-native-gesture-handler": "^2.12.1",
-    "react-native-reanimated": "^3.4.1",
+    "react-native-gesture-handler": "2.12.1",
+    "react-native-reanimated": "3.3.0",
     "react-native-track-player": "link:../",
     "react-native-vector-icons": "^10.0.0",
-    "react-native-windows": "^0.65.0-0"
+    "react-native-web": "^0.18.10",
+    "react-native-windows": "0.71.12",
+    "react-scripts": "5.0.1",
+    "shaka-player": "^4.7.9"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
+    "@craco/craco": "^7.0.0",
+    "@dealmore/craco-plugin-babel-include": "^1.0.0",
     "@react-native-community/eslint-config": "^3.2.0",
     "@tsconfig/react-native": "^2.0.2",
     "@types/jest": "^29.2.1",
     "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.2.0",
     "@types/react-native": "^0.64.5",
+    "@types/react-native-vector-icons": "^6.4.14",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.36.0",
     "@typescript-eslint/parser": "^5.36.0",
@@ -53,6 +65,7 @@
     "jest": "^29.2.1",
     "metro-react-native-babel-preset": "0.73.9",
     "prettier": "^2.4.1",
+    "react-app-alias-ex": "^2.1.0",
     "react-native-clean-project": "^4.0.1",
     "react-test-renderer": "18.2.0",
     "rimraf": "^3.0.2",
@@ -74,5 +87,17 @@
     "dependencies": {
       "classic.yarnpkg.com": "^1"
     }
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

docs/static/example/hls/whip/file10.m4a

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <link rel="icon" type="image/png" href="/icon.png">
+    <title>RNTP Example App</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

docs/static/example/hls/whip/file11.m4a

@@ -12,6 +12,7 @@ import {
   StatusBar,
   StyleSheet,
   View,
+  Platform,
 } from 'react-native';
 import TrackPlayer, { useActiveTrack } from 'react-native-track-player';
 
@@ -124,6 +125,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#212121',
     alignItems: 'center',
     justifyContent: 'center',
+    minHeight: Platform.OS === 'web' ? '100vh' : '100%',
   },
   contentContainer: {
     flex: 1,

docs/static/example/hls/whip/file12.m4a

@@ -1,6 +1,5 @@
 import React from 'react';
-import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
-import { StyleSheet } from 'react-native';
+import { ScrollView } from 'react-native';
 import { Spacer } from './Spacer';
 import { Button } from './Button';
 import TrackPlayer from 'react-native-track-player';
@@ -31,7 +30,7 @@ const onReset = async () => {
 
 export const ActionSheet: React.FC = () => {
   return (
-    <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
+    <ScrollView>
       <Spacer />
       <Button
         title={'Update Notification Metadata Randomly'}
@@ -44,19 +43,6 @@ export const ActionSheet: React.FC = () => {
         type={'primary'}
       />
       <Button title={'Reset'} onPress={onReset} type={'primary'} />
-    </BottomSheetScrollView>
+    </ScrollView>
   );
 };
-
-const styles = StyleSheet.create({
-  contentContainer: {
-    flex: 1,
-    marginTop: '4%',
-    marginHorizontal: 16,
-  },
-  optionRowLabel: {
-    color: 'white',
-    fontSize: 20,
-    fontWeight: '600',
-  },
-});

docs/static/example/hls/whip/file13.m4a

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
-import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import { Platform, StyleSheet, ScrollView, Text, View } from 'react-native';
 import SegmentedControl from '@react-native-segmented-control/segmented-control';
 import TrackPlayer, {
   AppKilledPlaybackBehavior,
@@ -34,7 +33,7 @@ export const OptionSheet: React.FC = () => {
     useState(audioServiceBehaviourToIndex(DefaultAudioServiceBehaviour));
 
   return (
-    <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
+    <ScrollView>
       <OptionStack vertical={true}>
         <Text style={styles.optionRowLabel}>Repeat Mode</Text>
         <Spacer />
@@ -94,7 +93,7 @@ export const OptionSheet: React.FC = () => {
           />
         </OptionStack>
       )}
-    </BottomSheetScrollView>
+    </ScrollView>
   );
 };
 

docs/static/example/hls/whip/file14.m4a

@@ -12,10 +12,10 @@ export const Progress: React.FC<{ live?: boolean }> = ({ live }) => {
 
   return (
     <View style={styles.container}>
-      {live ? (
+      {live || duration === Infinity ? (
         <Text style={styles.liveText}>Live Stream</Text>
       ) : (
-        <>
+        <View>
           <Slider
             style={{ ...styles.slider, width: progressBarWidth }}
             value={position}
@@ -33,7 +33,7 @@ export const Progress: React.FC<{ live?: boolean }> = ({ live }) => {
               {formatSeconds(Math.max(0, duration - position))}
             </Text>
           </View>
-        </>
+        </View>
       )}
     </View>
   );