From 18c81f8d8ba14845fb0c408aea6028df41a9dd99 Mon Sep 17 00:00:00 2001
From: Shubham Lad <shubham@quoality.com>
Date: Sat, 23 Jul 2022 04:09:56 +0530
Subject: [PATCH] Added HLS Instance accessibility support

---
 example/App/App.tsx | 49 ++++++++++++++++++++++++++++++++++++++++++++-
 package-lock.json   |  4 ++--
 src/index.tsx       | 14 ++++++++++++-
 3 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/example/App/App.tsx b/example/App/App.tsx
index b60282b..bf8aa8f 100644
--- 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
index bdf3367..490ed8f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-hls-player",
-  "version": "2.0.0",
+  "version": "3.0.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-hls-player",
-      "version": "2.0.0",
+      "version": "3.0.7",
       "license": "MIT",
       "dependencies": {
         "hls.js": "^0.14.17"
diff --git a/src/index.tsx b/src/index.tsx
index f2a304c..1078efd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, RefObject } from 'react';
+import React, { useEffect, RefObject, useState } from 'react';
 import Hls, { Config } from 'hls.js';
 
 export interface HlsPlayerProps
@@ -6,6 +6,7 @@ export interface HlsPlayerProps
   hlsConfig?: Config;
   playerRef: RefObject<HTMLVideoElement>;
   src: string;
+  getHLSInstance?: (HLSInstance: Hls) => void;
 }
 
 function ReactHlsPlayer({
@@ -13,8 +14,11 @@ function ReactHlsPlayer({
   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} />;