Move AudioPlayer to shared components (#30386)

* feat: add `PlayPauseButton` to storybook

* feat: add generic media body

* feat: add seekbar component

* chore: add ViewWrapper to help writing stories with vm

* refactor: move `formatBytes` from `formattingUtils` into shared component

* refactor: add `className` props to `Clock`

* feat: add new audio player component

* test(e2e): add screenshots for new shared components

* feat: add AudioPlayerViewModel

* feat: use new audio player in `MAudioBody`

* refactor: remove old audio player

* test(e2e): update existing tests

* refactor: remove unused `DurationClock`

* refactor: rename `SeekBar` into `LegacySeekBar`

src/utils/FormattingUtils.ts

@@ -12,6 +12,9 @@ import { useIdColorHash } from "@vector-im/compound-web";
 
 import { _t, getCurrentLanguage, getUserLanguage } from "../languageHandler";
 import { jsxJoin } from "./ReactUtils";
+
+export { formatBytes } from "../shared-components/utils/FormattingUtils";
+
 const locale = getCurrentLanguage();
 
 // It's quite costly to instanciate `Intl.NumberFormat`, hence why we do not do
@@ -40,22 +43,6 @@ export function formatCountLong(count: number): string {
     return formatter.format(count);
 }
 
-/**
- * format a size in bytes into a human readable form
- * e.g: 1024 -> 1.00 KB
- */
-export function formatBytes(bytes: number, decimals = 2): string {
-    if (bytes === 0) return "0 Bytes";
-
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-}
-
 export function getUserNameColorClass(userId: string): string {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const number = useIdColorHash(userId);