From e9961e43fc5657cd27a7211d669389722eb2dc03 Mon Sep 17 00:00:00 2001
From: Aman Singh <aman.singh@navi.com>
Date: Sat, 15 Jul 2023 02:45:09 +0530
Subject: [PATCH] TP-0000| houston 3049 handled waveform error | Aman Singh
 (#480)

* TP-0000| houston 3049 handled waveform error | Aman Singh

* TP-0000| submodule updated | Aman Singh

* TP-0000| EM review | Aman Singh
---
 .gitmodules                                  |  2 +-
 src/components/Waveform/Waveform.module.scss | 11 +++++
 src/components/Waveform/Waveform.tsx         | 51 +++++++++++++++-----
 web-ui-library                               |  2 +-
 4 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/.gitmodules b/.gitmodules
index c4c3e4a2..9749c85d 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,3 @@
 [submodule "web-ui-library"]
 	path = web-ui-library
-	url = git@github.cmd.navi-tech.in:navi-commons/web-ui-library.git
+	url = git@github.com:navi-commons/web-ui-library.git
diff --git a/src/components/Waveform/Waveform.module.scss b/src/components/Waveform/Waveform.module.scss
index 3fc0ca39..a04b4c91 100644
--- a/src/components/Waveform/Waveform.module.scss
+++ b/src/components/Waveform/Waveform.module.scss
@@ -62,3 +62,14 @@
     }
   }
 }
+
+.loadingOrError {
+  position: absolute;
+  top: 65%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-size: 12px;
+  color: var(--navi-color-red-base);
+  animation: fadeIn 500ms;
+}
diff --git a/src/components/Waveform/Waveform.tsx b/src/components/Waveform/Waveform.tsx
index f58ee72d..1b248aaf 100644
--- a/src/components/Waveform/Waveform.tsx
+++ b/src/components/Waveform/Waveform.tsx
@@ -19,10 +19,13 @@ interface IWaveform {
 
 let count = 0;
 const ID_PREFIX = '__waveform__list__item__';
+const ERROR_MESSAGE = 'Error, loading audio file';
 
 export const Waveform = ({ url }: IWaveform) => {
   const waveForm = useRef<any>();
+  const timeout = useRef<NodeJS.Timeout>();
   const [ready, setReady] = useState(false);
+  const [loadingOrError, setLoadingOrError] = useState('Loading ...');
   const id = useRef<string>(`${ID_PREFIX}waveform_${++count}`);
   const globalPlayerUrl = useSelector((state: RootState) => state?.common?.globalPlayer?.url);
   const globalCursor = useSelector((state: RootState) => state?.common?.globalPlayer?.cursor || 0);
@@ -91,7 +94,6 @@ export const Waveform = ({ url }: IWaveform) => {
         // console.trace('Waveform ERROR :: ', ex);
       }
     }
-
     return () => {
       waveForm?.current?.destroy();
     };
@@ -119,26 +121,51 @@ export const Waveform = ({ url }: IWaveform) => {
     return url == globalPlayerUrl && globalPlaying;
   };
 
+  const shouldIBeVisible = () => {
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => setLoadingOrError(ERROR_MESSAGE), 5e3);
+    return waveForm.current?.getDuration();
+  };
+
   return (
     <div className={styles.wavesWrapper}>
       {
         <div className={styles.secondsElapsed} style={{ visibility: ready ? 'visible' : 'none' }}>
-          <span style={{ fontWeight: amIPlaying() ? 'bold' : '' }} className={styles.current}>
-            {secondsToTimestamp(secondsElapsed)}
-          </span>{' '}
-          /{' '}
-          <span className={styles.duration}>
-            {secondsToTimestamp(waveForm?.current?.getDuration())}
-          </span>
+          {shouldIBeVisible() ? (
+            <>
+              <span style={{ fontWeight: amIPlaying() ? 'bold' : '' }} className={styles.current}>
+                {secondsToTimestamp(secondsElapsed)}
+              </span>{' '}
+              /{' '}
+              <span className={styles.duration}>
+                {secondsToTimestamp(waveForm?.current?.getDuration())}
+              </span>
+            </>
+          ) : loadingOrError === ERROR_MESSAGE ? (
+            'Unable to play'
+          ) : (
+            'Loading ...'
+          )}
         </div>
       }
 
       <div className={styles.secondRow}>
-        <span onClick={handlePlayPause} className={styles.playPause}>
-          {!amIPlaying() ? <Play /> : <Pause />}
-        </span>
-        <div className={styles.waves} id={id.current}></div>
+        {shouldIBeVisible() ? (
+          <span onClick={handlePlayPause} className={styles.playPause}>
+            {!amIPlaying() ? <Play /> : <Pause />}
+          </span>
+        ) : null}
+        <div
+          style={{
+            pointerEvents: shouldIBeVisible() ? 'all' : 'none'
+          }}
+          className={styles.waves}
+          id={id.current}
+        ></div>
       </div>
+      {!shouldIBeVisible() && loadingOrError === ERROR_MESSAGE && (
+        <div className={styles.loadingOrError}>{loadingOrError}</div>
+      )}
     </div>
   );
 };
diff --git a/web-ui-library b/web-ui-library
index 28071541..f7c84856 160000
--- a/web-ui-library
+++ b/web-ui-library
@@ -1 +1 @@
-Subproject commit 280715412a9e27f77b07b267753ce0c9c9d6447e
+Subproject commit f7c8485695c39d092eab42cec462c5b02c68cc45