Merge branch 'develop' into fix/optionInput

RocketChat · Sep 11, 2023 · 9713ffa · 9713ffa
2 parents 37f6fb6 + 385170c
commit 9713ffa
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx
@@ -28,6 +28,32 @@ function forceDownload(url: string, fileName?: string) {
   xhr.send();
 }
 
+const getDurationForInfinityDurationAudioFile = (
+  src: string,
+  callback: (duration: number) => void
+) => {
+  const audioElement = new Audio();
+  audioElement.src = src;
+
+  audioElement.addEventListener('loadedmetadata', () => {
+    const { duration } = audioElement;
+    if (duration === Infinity) {
+      audioElement.currentTime = 1e101;
+      return;
+    }
+
+    return callback(duration);
+  });
+
+  audioElement.addEventListener('durationchange', () => {
+    if (audioElement.duration === Infinity) {
+      return;
+    }
+    callback(audioElement.duration);
+    audioElement.remove();
+  });
+};
+
 export const AudioPlayer = forwardRef<
   HTMLAudioElement,
   {
@@ -169,8 +195,14 @@ export const AudioPlayer = forwardRef<
           onTimeUpdate={(e) => {
             setCurrentTime((e.target as HTMLAudioElement).currentTime);
           }}
-          onLoadedData={(e) => {
-            setDurationTime((e.target as HTMLAudioElement).duration);
+          onLoadedMetadata={(e) => {
+            const { duration } = e.target as HTMLAudioElement;
+
+            if (duration !== Infinity) {
+              return setDurationTime(duration);
+            }
+
+            getDurationForInfinityDurationAudioFile(src, setDurationTime);
           }}
           onEnded={() => setIsPlaying(false)}
           ref={refs}

diff --git a/packages/fuselage/src/styles/primitives/button.scss b/packages/fuselage/src/styles/primitives/button.scss
@@ -42,5 +42,9 @@
     color: map.get($colors, disabled-color);
     border-color: map.get($colors, disabled-border-color);
     background-color: map.get($colors, disabled-background-color);
+
+    * {
+      transform: none !important;
+    }
   }
 }