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

@@ -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

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;
+}

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>
   );
 };