Merge pull request #53 from flowplayer/chore/fa-712/updates

Refactor: [FA-712] useFlowplayer hook

Author: maximzavadskiy

README.md

@@ -15,7 +15,7 @@
 
 ### Resources
 <!-- [Documentation](https://developer.wowza.com/docs/wowza-flowplayer/guides/add-the-player-using-typescript.md/) -->
-* [Examples and Guides](https://developer.wowza.com/docs/wowza-flowplayer/player/embed/embed-with-standalone/#use-npm)
+* [Examples and Guides](https://developer.wowza.com/docs/wowza-flowplayer/player/components/react/)
 * [Releases](https://github.com/flowplayer/react-flowplayer/releases)
 * [Support](https://www.wowza.com/support)
 

demo/demo.tsx

@@ -39,7 +39,8 @@ const Main = () => {
   // Listen to player events for the demo
   useEffect(() => {
     if (!playerApi) return;
-    playerApi.on([PAUSE, PLAYING], stateHandler);
+    playerApi.on(PAUSE, stateHandler);
+    playerApi.on(PLAYING, stateHandler);
 
     return () => {
       // Cleanup on unmount

package.json

@@ -16,23 +16,23 @@
     "prepublish": "yarn build"
   },
   "peerDependencies": {
-    "@flowplayer/player": "^3.11.1",
+    "@flowplayer/player": "^3.21.0",
     "react": ">= 17.0.2"
   },
   "devDependencies": {
-    "@flowplayer/player": "^3.11.1",
+    "@flowplayer/player": "^3.21.0",
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
-    "css-loader": "^5.0.1",
+    "css-loader": "^7.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "style-loader": "^2.0.0",
-    "ts-loader": "^9.3.1",
-    "tsd": "^0.31.0",
-    "typescript": "^4.7.4",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "4.9.2"
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.2",
+    "tsd": "^0.31.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
   },
   "files": [
     "lib/*.js",

src/hooks.tsx

@@ -1,40 +1,16 @@
-import { RefObject, useEffect, useMemo, useState } from "react";
-import flowplayer from "@flowplayer/player";
-import type { Plugin } from "@flowplayer/player";
-/**
- * Hook to use Flowplayer API in an async way - tries to solve the chicken/egg problem
- */
+import { RefObject, useEffect, useState } from "react";
+import flowplayer, { type Player } from "@flowplayer/player";
+
 export const useFlowplayer = (ref: RefObject<HTMLDivElement>) => {
-  // Store flowplayer instances to a state value in order to force re-renders when new instances are available
-  const [flowplayerInstances, setFlowplayerInstances] = useState(flowplayer.instances.slice());
 
-  const ReactFlowplayerDetectExtension = useMemo(
-    () =>
-      class implements Plugin {
-        init() {
-          setFlowplayerInstances(flowplayer.instances.slice());
-        }
-      },
-    [],
-  );
+  const [player, setPlayer] = useState<Player>();
 
-  // Detect new flowplayer instances to keep up to date
   useEffect(() => {
-    // If API is already created we don't need the extension
-    if (
-      ref?.current &&
-      (flowplayer.instances as any[]).some((instance) => instance.root == ref?.current)
-    ) {
-      setFlowplayerInstances(flowplayer.instances.slice());
-      return () => {};
+    if (ref.current) {
+      const newPlayer = flowplayer(ref.current);
+      setPlayer(newPlayer);
     }
-    flowplayer(ReactFlowplayerDetectExtension);
-    return () => {
-      (flowplayer.extensions as any[]).filter((ext) => ext !== ReactFlowplayerDetectExtension);
-    };
-  }, []);
+  }, [ref]);
 
-  return useMemo(() => {
-    return ref?.current ? flowplayer(ref.current) : null;
-  }, [flowplayerInstances]);
+  return player;
 };

test/index.test-d.tsx

@@ -4,10 +4,9 @@ import React, { useRef } from "react";
 import { Player } from "@flowplayer/player";
 
 // - useFlowplayer returns Player instance -
-const playerRef = useRef<HTMLDivElement>(null);
+const playerRef = useRef<HTMLDivElement | null>(null);
 const playerApi = useFlowplayer(playerRef);
-expectType<Player | null>(playerApi);
-
+if (playerApi) expectType<Player>(playerApi);
 // - basic initalization -
 const _uplayer = (
   <Flowplayer src={"demoSrc"} token={"DEMO_TOKEN"} ref={playerRef} />

tsconfig.json

@@ -1,17 +1,18 @@
 {
-    "include": [
-        "src/*",
-        "demo/index.d.ts"
-    ],
-    "exclude": [
-        "test/**/*.test-d.tsx" // we have a separate task where types are tested
-    ],
-    "compilerOptions": {
-        "target": "es2015",
-        "jsx": "react",
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "outDir": "./lib",
-        "moduleResolution": "node"
-    }
-}
+  "include": [
+    "src/*",
+    "demo/index.d.ts"
+  ],
+  "exclude": [
+    "test/**/*.test-d.tsx" // we have a separate task where types are tested
+  ],
+  "compilerOptions": {
+    "target": "es2015",
+    "jsx": "react",
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "outDir": "./lib",
+    "moduleResolution": "node"
+  }
+}