fix: install error

README.md

@@ -1,10 +1,18 @@
 # Usehlsvideoplayer
-[![Static Badge](https://img.shields.io/badge/npm-latest_v1.2.5-blue?logo=npm)](https://www.npmjs.com/package/usehlsvideoplayer)
+[![Static Badge](https://img.shields.io/badge/npm-latest_v1.2.6-blue?logo=npm)](https://www.npmjs.com/package/usehlsvideoplayer)
 ![Static Badge](https://img.shields.io/badge/license-ISC-red)
 
 `usehlsvideoplayer` is a React hook designed to simplify the integration of [Hls.js](https://github.com/video-dev/hls.js) for video playback in your React applications. This hook creates a video player instance and manages the loading of an HTTP Live Streaming (HLS) video source. With `usehlsvideoplayer`, you can effortlessly incorporate Hls.js functionality into your components.
 
 ## Installation
+## Dependencies
+
+This package has a dependency on react, [Hls.js](https://github.com/video-dev/hls.js) and typescript,
+so make sure to include it in your project.
+
+```bash
+npm install hls.js
+```
 
 Install the package using npm:
 
@@ -124,14 +132,6 @@ The hook returns an object with the following property:
 
 The hook takes care of cleaning up resources when the component unmounts. It automatically detaches the Hls.js instance and removes event listeners.
 
-## Dependencies
-
-This package has a dependency on [Hls.js](https://github.com/video-dev/hls.js), so make sure to include it in your project.
-
-```bash
-npm install hls.js
-```
-
 ## License
 
 This project is licensed under the `ISC` License.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "usehlsvideoplayer",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "A react hook for playing hls files",
   "main": "usehlsplayer.js",
   "module": "usehlsplayer.mjs",
@@ -25,16 +25,18 @@
     "url": "https://github.com/klevert-ope/Usehlsvideoplayer/issues"
   },
   "homepage": "https://github.com/klevert-ope/Usehlsvideoplayer#readme",
+  "optionalDependencies": {
+    "hls.js": "^1.4.14"
+  },
   "dependencies": {
-    "hls.js": "^1.4.14",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.45",
     "esbuild": "^0.19.10",
     "rollup": "^4.9.1",
     "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-esbuild": "^6.1.0",
-    "typescript": "^5.3.3"
+    "rollup-plugin-esbuild": "^6.1.0"
   }
 }

src/useHlsVideoPlayer.ts

@@ -1,3 +1,14 @@
+/**
+ * @file
+ * usehlsvideoplayer is a React hook
+ * designed to simplify the integration of Hls.js for video playback in your React applications.
+ * This hook creates a video player instance and manages the loading of an HTTP Live Streaming (HLS) video source.
+ * With usehlsvideoplayer, you can effortlessly incorporate Hls.js functionality into your components.
+ * The hook takes care of cleaning up resources when the component unmounts.
+ * It automatically detaches the Hls.js instance and removes event listeners.
+ * @copyright (c) 2023 Klevert Opee
+ * @license ISC
+ */
 import Hls from "hls.js";
 import React, { DependencyList, EffectCallback, useEffect, useLayoutEffect, useRef } from "react";
 

usehlsplayer.mjs

@@ -1,6 +1,17 @@
 import Hls from 'hls.js';
 import { useRef, useLayoutEffect, useEffect } from 'react';
 
+/**
+ * @file
+ * usehlsvideoplayer is a React hook
+ * designed to simplify the integration of Hls.js for video playback in your React applications.
+ * This hook creates a video player instance and manages the loading of an HTTP Live Streaming (HLS) video source.
+ * With usehlsvideoplayer, you can effortlessly incorporate Hls.js functionality into your components.
+ * The hook takes care of cleaning up resources when the component unmounts.
+ * It automatically detaches the Hls.js instance and removes event listeners.
+ * @copyright (c) 2023 Klevert Opee
+ * @license ISC
+ */
 let useIsomorphicLayoutEffect;
 if (typeof window !== "undefined") {
   useIsomorphicLayoutEffect = useLayoutEffect;