refactor: Update useQueryParams hook to accept optional streamUrl parameter (#420)

The useQueryParams hook in the P2PVideoDemo component has been updated to accept an optional streamUrl parameter. This allows for more flexibility in setting the initial stream URL when using the hook. The defaultParams object in the hook has also been modified to include the streamUrl parameter. This refactor improves the reusability and configurability of the useQueryParams hook.

Author: DimaDemchenko

packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx

@@ -66,7 +66,7 @@ export const P2PVideoDemo = ({
     p2pUploaded: 0,
   });
 
-  const { queryParams, setURLQueryParams } = useQueryParams();
+  const { queryParams, setURLQueryParams } = useQueryParams(streamUrl);
 
   const trackers = useMemo(
     () => queryParams.trackers.split(","),
@@ -121,7 +121,7 @@ export const P2PVideoDemo = ({
 
     return PlayerComponent ? (
       <PlayerComponent
-        streamUrl={streamUrl ?? queryParams.streamUrl}
+        streamUrl={queryParams.streamUrl}
         announceTrackers={trackers}
         swarmId={queryParams.swarmId === "" ? undefined : queryParams.swarmId}
         onPeerConnect={onPeerConnect}

packages/p2p-media-loader-demo/src/hooks/useQueryParams.ts

@@ -1,40 +1,45 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { DEFAULT_STREAM, DEFAULT_TRACKERS, PLAYERS } from "../constants";
 
 type QueryParamsType = Record<string, string>;
 
-const defaultParams: QueryParamsType = {
-  player: Object.keys(PLAYERS)[0],
-  streamUrl: DEFAULT_STREAM,
-  trackers: DEFAULT_TRACKERS,
-  debug: "",
-  swarmId: "",
-};
-
-function getInitialParams(searchParams: URLSearchParams): QueryParamsType {
+function getInitialParams(
+  searchParams: URLSearchParams,
+  defaultParams: QueryParamsType,
+): QueryParamsType {
   return Object.keys(defaultParams).reduce((params, key) => {
     params[key] = searchParams.get(key) ?? defaultParams[key];
     return params;
   }, {} as QueryParamsType);
 }
 
-export function useQueryParams() {
+export function useQueryParams(streamUri?: string) {
+  const defaultParams = useMemo(() => {
+    return {
+      player: Object.keys(PLAYERS)[0],
+      streamUrl: streamUri ?? DEFAULT_STREAM,
+      trackers: DEFAULT_TRACKERS,
+      debug: "",
+      swarmId: "",
+    } as QueryParamsType;
+  }, [streamUri]);
+
   const searchParamsRef = useRef(new URLSearchParams(window.location.search));
   const [queryParams, setQueryParams] = useState<QueryParamsType>(() =>
-    getInitialParams(searchParamsRef.current),
+    getInitialParams(searchParamsRef.current, defaultParams),
   );
 
   const updateQueryParamsFromURL = useCallback(() => {
     const searchParams = searchParamsRef.current;
-    const newParams = getInitialParams(searchParams);
+    const newParams = getInitialParams(searchParams, defaultParams);
 
     setQueryParams((prevParams) => {
       const hasChanges = Object.keys(newParams).some(
         (key) => prevParams[key] !== newParams[key],
       );
       return hasChanges ? newParams : prevParams;
     });
-  }, []);
+  }, [defaultParams]);
 
   const setURLQueryParams = useCallback(
     (newParams: Partial<QueryParamsType>) => {
@@ -60,7 +65,7 @@ export function useQueryParams() {
 
       updateQueryParamsFromURL();
     },
-    [updateQueryParamsFromURL],
+    [defaultParams, updateQueryParamsFromURL],
   );
 
   useEffect(() => {