Added HLS Instance accessibility support

devcshort · Jul 22, 2022 · 18c81f8 · 18c81f8
1 parent 739acb5
commit 18c81f8
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 4 deletions.
diff --git a/example/App/App.tsx b/example/App/App.tsx
@@ -1,3 +1,4 @@
+import Hls from 'hls.js';
 import React, { useState, useRef } from 'react';
 
 import HlsPlayer from '../../src';
@@ -9,6 +10,9 @@ function App() {
     'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
   );
   const [destroy, setDestroy] = useState(false);
+  const [HLSInstance, setHLSInstance] = useState<Hls>();
+  const [displayHLSPrperties, setDisplayHLSPrperties] = useState(false)
+  const [selectedQuality, setSelectedQuality] = useState<number>();
 
   function _handleEnter(e: React.KeyboardEvent) {
     if (e.keyCode === 13) {
@@ -28,6 +32,19 @@ function App() {
     }
   }
 
+  function _handleHLSInstanceClick() {
+    setDisplayHLSPrperties(!displayHLSPrperties)
+  }
+
+  function getHLSInstance(hlsInstance: Hls) {
+    setHLSInstance(hlsInstance);
+  }
+
+  function handleQuality(e: React.ChangeEvent<HTMLSelectElement>) {
+    setSelectedQuality(Number(e.target.value));
+    if(HLSInstance) HLSInstance.currentLevel = Number(e.target.value);
+  }
+
   return (
     <div>
       <div
@@ -68,6 +85,7 @@ function App() {
           autoPlay
           playerRef={playerRef}
           src={hlsUrl}
+          getHLSInstance={getHLSInstance}
         />
       ) : null}
 
@@ -90,7 +108,36 @@ function App() {
       >
         Toggle Controls (via custom ref)
       </button>
-    </div>
+      <button
+        style={{
+          padding: '5px 10px',
+        }}
+        onClick={_handleHLSInstanceClick}
+      >
+        Get HLS Instance
+      </button>
+
+      {displayHLSPrperties && (
+        <div
+          style={{
+            padding: "5px 10px",
+            border: "1px solid black",
+            margin: "15px 15px",
+          }}
+        >
+          <h3>HLS Details</h3>
+          <p>Total Levels: {HLSInstance?.levels?.length}</p>
+          <div>
+          <p>Select Quoality</p>
+          <select value={selectedQuality} defaultValue={`${HLSInstance?.currentLevel}`} onChange={handleQuality}>
+            {HLSInstance?.levels?.map((level, index) => {
+              return <option value={`${index}`}>{level.bitrate}</option>
+            })}
+          </select>
+          </div>
+        </div>
+      )}
+    </div>  
   );
 }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,20 +1,24 @@
-import React, { useEffect, RefObject } from 'react';
+import React, { useEffect, RefObject, useState } from 'react';
 import Hls, { Config } from 'hls.js';
 
 export interface HlsPlayerProps
   extends React.VideoHTMLAttributes<HTMLVideoElement> {
   hlsConfig?: Config;
   playerRef: RefObject<HTMLVideoElement>;
   src: string;
+  getHLSInstance?: (HLSInstance: Hls) => void;
 }
 
 function ReactHlsPlayer({
   hlsConfig,
   playerRef = React.createRef<HTMLVideoElement>(),
   src,
   autoPlay,
+  getHLSInstance,
   ...props
 }: HlsPlayerProps) {
+  const [hlsInstance, setHlsInstance] = useState<Hls>();
+
   useEffect(() => {
     let hls: Hls;
 
@@ -64,6 +68,7 @@ function ReactHlsPlayer({
         }
       });
 
+      setHlsInstance(newHls);
       hls = newHls;
     }
 
@@ -79,6 +84,13 @@ function ReactHlsPlayer({
     };
   }, [autoPlay, hlsConfig, playerRef, src]);
 
+  useEffect(() => {
+    if(getHLSInstance && hlsInstance){
+      getHLSInstance(hlsInstance)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hlsInstance])
+
   // If Media Source is supported, use HLS.js to play video
   if (Hls.isSupported()) return <video ref={playerRef} {...props} />;