let enable or disable reactive url

canalplus · Jan 8, 2024 · 0b408c2 · 0b408c2
1 parent c335af9
commit 0b408c2
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 16 deletions.
diff --git a/demo/full/scripts/components/GenerateLinkURL.tsx b/demo/full/scripts/components/GenerateLinkURL.tsx
@@ -35,12 +35,12 @@ function GeneratedLinkURL({
   }
   return (
     <>
-      <span className="generated-url-link-wrapper">
+      <div className="generated-url-link-wrapper">
         {"URL: "}
         <a className="generated-url-link" href={url} >
           {url}
         </a>
-      </span>
+      </div>
       <Button
         key={0}
         className={"copy-url-button"}

diff --git a/demo/full/scripts/controllers/ContentList.tsx b/demo/full/scripts/controllers/ContentList.tsx
@@ -302,12 +302,16 @@ function ContentList({
   showOptions,
   onOptionToggle,
   generatedURL,
+  isReactiveURLEnabled,
+  onIsReactiveURLEnabledChange,
 }: {
   loadVideo: (opts: ILoadVideoOptions) => void;
   onContentConfigChange: (config: ContentConfig) => void;
   showOptions: boolean;
   onOptionToggle: () => void;
   generatedURL: string | null;
+  isReactiveURLEnabled: boolean,
+  onIsReactiveURLEnabledChange: (newVal : boolean) => void,
 }): JSX.Element {
   const initialContents = React.useMemo(() => {
     return constructContentList();
@@ -744,7 +748,20 @@ function ContentList({
     <div className="choice-inputs-wrapper">
       <div className={"generated-url" + (shouldDisplayGeneratedLink ? " enabled" : "")}>
         { shouldDisplayGeneratedLink &&
-          <GeneratedLinkURL url={generatedURL} />
+        <>
+          <div className="link-with-copy-button">
+            <GeneratedLinkURL url={generatedURL} />
+          </div>
+          <Checkbox
+            className="enable-reactive-url"
+            ariaLabel="Enable reactive url"
+            checked={isReactiveURLEnabled}
+            onChange={onIsReactiveURLEnabledChange}
+            name="enableReactiveUrl"
+          >
+            Enable reactive URL
+          </Checkbox>
+        </>
         }
       </div>
       <div className="content-inputs">

diff --git a/demo/full/scripts/controllers/Player.tsx b/demo/full/scripts/controllers/Player.tsx
@@ -18,6 +18,7 @@ import type {
   IVideoRepresentationsSwitchingMode,
 } from "../../../../src/public_types";
 import { ContentConfig, generateURLForConfig, parseHashInURL } from "../lib/url_hash";
+import { usePrevious } from "../lib/usePrevious";
 
 const {
   useCallback,
@@ -58,6 +59,12 @@ function Player(): JSX.Element {
   const playerWrapperElementRef = useRef<HTMLDivElement>(null);
   const [contentConfig, setContentConfig] =
     React.useState<null | ContentConfig>(null);
+  const [isReactiveURLEnabled, setIsReactiveURLEnabled] =
+    useState<boolean>(true);
+  const previousIsReactiveURLEnabled = usePrevious(isReactiveURLEnabled);
+  const onIsReactiveURLEnabledChange = useCallback((newVal: boolean) => {
+    setIsReactiveURLEnabled(newVal);
+  }, []);
 
   const onOptionToggle = useCallback(() => {
     setShowOptions((prevState) => !prevState);
@@ -259,20 +266,26 @@ function Player(): JSX.Element {
     return generateURLForConfig({
       contentConfig,
       loadVideoConfig: loadVideoOpts,
-      playerConfig: playerOpts
+      playerConfig: playerOpts,
+      demoConfig: { reactiveURL: isReactiveURLEnabled }
     });
-  }, [contentConfig, loadVideoOpts, playerOpts]);
+  }, [contentConfig, loadVideoOpts, playerOpts, isReactiveURLEnabled]);
 
+  const [sharableURL, setSharableURL] = React.useState("");
   React.useEffect(() => {
-    if (generatedURL) {
+    // still update URL if the last change was editing "isReactiveURLEnabled"
+    // value, so the "isReactiveURLEnabled" can be stored in the URL
+    const isEnabled = previousIsReactiveURLEnabled || isReactiveURLEnabled;
+    if (generatedURL && isEnabled) {
+      setSharableURL(generatedURL);
       window.location.href = generatedURL;
     }
-  }, [generatedURL]);
+  }, [generatedURL, isReactiveURLEnabled]);
 
   React.useEffect(() => {
     const parsedHash = parseHashInURL(decodeURI(location.hash));
     if (parsedHash !== null) {
-      const { loadVideoConfig , playerConfig } = parsedHash;
+      const { loadVideoConfig , playerConfig, disableReactiveURL } = parsedHash;
       if (typeof loadVideoConfig === "string") {
         // maybe we want to check the shape of the object to
         // be error prone instead of casting?
@@ -286,6 +299,10 @@ function Player(): JSX.Element {
         setPlayerOpts(JSON.parse(playerConfig) as
         IConstructorSettings);
       }
+
+      if (disableReactiveURL) {
+        setIsReactiveURLEnabled(false);
+      }
     }
   }, []);
 
@@ -297,7 +314,9 @@ function Player(): JSX.Element {
           onContentConfigChange={handleContentConfigChange}
           showOptions={showOptions}
           onOptionToggle={onOptionToggle}
-          generatedURL={generatedURL}
+          generatedURL={sharableURL}
+          isReactiveURLEnabled={isReactiveURLEnabled}
+          onIsReactiveURLEnabledChange={onIsReactiveURLEnabledChange}
         />
         <Settings
           playerOptions={playerOpts}

diff --git a/demo/full/scripts/lib/url_hash.ts b/demo/full/scripts/lib/url_hash.ts
@@ -195,9 +195,13 @@ export function generateURLForConfig({
   },
   loadVideoConfig,
   playerConfig,
+  demoConfig : {
+    reactiveURL // update reactively the URL when player options changes
+  }
 } : { contentConfig: ContentConfig,
         loadVideoConfig: ILoadVideoSettings
         playerConfig: IConstructorSettings,
+        demoConfig: { reactiveURL : boolean },
     }): string | null {
 
   if(!transport) {
@@ -214,6 +218,7 @@ export function generateURLForConfig({
     { value: licenseServerUrl, key: "licenseServ" },
     { value: serverCertificateUrl, key: "certServ" },
     { value: JSON.stringify(loadVideoConfig), key: "loadVideoConfig"},
-    { value: JSON.stringify(playerConfig), key: "playerConfig"}
+    { value: JSON.stringify(playerConfig), key: "playerConfig"},
+    { value: !reactiveURL, key: "disableReactiveURL" }
   ]);
 }
diff --git a/demo/full/scripts/lib/usePrevious.ts b/demo/full/scripts/lib/usePrevious.ts
@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+/**
+ * Custom hook to get the previous value of the input passed in param.
+ * @param value the current value
+ * @returns the previous value of the value passed in params
+ */
+export function usePrevious<T>(value : T): T | undefined {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
diff --git a/demo/full/styles/style.css b/demo/full/styles/style.css
@@ -840,21 +840,24 @@ header .right {
   z-index: 1;
   color: #3a3a3a;
   font-size: 14px;
-  background-color: rgba(255, 255, 255, 0.8);
-  border-radius: 3px;
   display: none;
+  margin-bottom: 10px;
+}
+
+.link-with-copy-button {
+  position: relative;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  margin-bottom: 10px;
-  position: relative;
+  display: flex;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 3px;
 }
 
 .generated-url.enabled {
   animation: grow-generated-url 0.6s;
   display: flex;
   flex-direction: row;
-  align-items: center;
 }
 
 .generated-url-link.none {
@@ -870,7 +873,7 @@ header .right {
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 10px;
-  margin-right: 60px;
+  margin-right: 60px; 
 }
 .copy-url-button {
   position: absolute;
@@ -882,10 +885,32 @@ header .right {
   background-color: white;
 }
 
+.copy-url-button:not(:disabled) {
+  color: #3a3a3a;
+}
+
 .copy-url-button:hover:not(:disabled) {
   color: #ec3655;
 }
 
+.enable-reactive-url {
+  margin-left: 8px;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  font-size: 1.1em;
+  color: #2b2e2f;
+  border: dashed 1px #d1d1d1;
+  border-radius: 3px;
+  padding-right: 5px;
+  text-align: center;
+  text-wrap: nowrap;
+}
+
+.enable-reactive-url > label:first-child {
+  margin: 5px;
+}
+
 .knob-value > select {
   width: 100%;
   border: 0;