Update compilation of module, and usage with typescript

Author: devcshort

.eslintrc

@@ -31,6 +31,7 @@
     "react/prefer-stateless-function": "off",
     "react/prop-types": 0,
     "react-hooks/exhaustive-deps": "warn",
+    "jsx-a11y/media-has-caption": "off",
     "prettier/prettier": [
       "error",
       {

README.md

@@ -5,12 +5,6 @@
 ![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/react-hls-player)
 ![npm bundle size](https://img.shields.io/bundlephobia/min/react-hls-player)
 
-## Overview
-
-V2 is now out and includes better TypeScript support. I had to make a large jump from the previous V1 as this new version included a couple small breaking changes, primarily to the way props are named. One big difference, is that the component now accepts all video element props in the formatting you would expect them with (previously autoPlay was passed as autoplay, and various other props weren't being handled properly). We're also using `src` instead of `url` to provide the source to the underlying video player.
-
-As always, PRs, issues and recommendations are always welcome.
-
 ## Introduction
 
 `react-hls-player` is a simple HLS live stream player.

example/App/App.tsx

@@ -65,7 +65,7 @@ function App() {
           loop={true}
           width="100%"
           height="auto"
-          autoPlay={true}
+          autoPlay
           playerRef={playerRef}
           src={hlsUrl}
         />

package.json

@@ -2,7 +2,7 @@
   "name": "react-hls-player",
   "version": "3.0.0",
   "description": "A simple and easy to use react component for playing an hls live stream",
-  "main": "./dist/react-hls-player.js",
+  "main": "./dist/index.js",
   "types": "./dist",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

src/index.tsx

@@ -37,7 +37,13 @@ function ReactHlsPlayer({
 
         newHls.on(Hls.Events.MANIFEST_PARSED, () => {
           if (autoPlay) {
-            playerRef?.current?.play();
+            playerRef?.current
+              ?.play()
+              .catch(() =>
+                console.log(
+                  'Unable to autoplay prior to user interaction with the dom.'
+                )
+              );
           }
         });
       });
@@ -61,7 +67,10 @@ function ReactHlsPlayer({
       hls = newHls;
     }
 
-    _initPlayer();
+    // Check for Media Source support
+    if (Hls.isSupported()) {
+      _initPlayer();
+    }
 
     return () => {
       if (hls != null) {
@@ -70,7 +79,11 @@ function ReactHlsPlayer({
     };
   }, [autoPlay, hlsConfig, playerRef, src]);
 
-  return <video ref={playerRef} {...props} />;
+  // If Media Source is supported, use HLS.js to play video
+  if (Hls.isSupported()) return <video ref={playerRef} {...props} />;
+
+  // Fallback to using a regular video player if HLS is supported by default in the user's browser
+  return <video ref={playerRef} src={src} autoPlay={autoPlay} {...props} />;
 }
 
 export default ReactHlsPlayer;

typings/index.d.ts

@@ -12,6 +12,8 @@ module.exports = merge(config, {
     open: true,
     historyApiFallback: true,
     contentBase: 'public',
+    host: '0.0.0.0',
+    public: 'localhost:8000',
   },
   plugins: [
     new HtmlWebpackPlugin({