feat(core): call real endpoint for audio transcription (#11139)

fix AF-2359

packages/frontend/core/src/components/audio-player/audio-player.tsx

@@ -23,7 +23,7 @@ const formatTime = (seconds: number): string => {
 export interface AudioPlayerProps {
   // Audio metadata
   name: string;
-  size: number;
+  size: number | ReactNode; // the size entry may be used for drawing error message
   waveform: number[] | null;
   // Playback state
   playbackState: 'idle' | 'playing' | 'paused' | 'stopped';
@@ -97,7 +97,9 @@ export const AudioPlayer = ({
             <div className={styles.nameLabel}>{name}</div>
           </div>
           <div className={styles.upperRow}>
-            <div className={styles.sizeInfo}>{bytes(size)}</div>
+            <div className={styles.sizeInfo}>
+              {typeof size === 'number' ? bytes(size) : size}
+            </div>
           </div>
         </div>
         <div className={styles.upperRight}>

packages/frontend/core/src/components/audio-player/lottie/styles.css.ts

@@ -1,6 +1,8 @@
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { globalStyle, style } from '@vanilla-extract/css';
-export const root = style({});
+export const root = style({
+  display: 'inline-flex',
+});
 
 // replace primary colors to cssVarV2('icon/primary')
 const iconPrimaryColors = [

packages/frontend/core/src/components/audio-player/use-seek-time.ts

@@ -26,7 +26,7 @@ export const useSeekTime = (
           playbackState.state === 'playing'
             ? (Date.now() - playbackState.updateTime) / 1000
             : 0;
-        // if timeElapsed + playbackState.seekOffset is closed to duration,
+        // if timeElapsed + playbackState.seekOffset is close to duration,
         // set seekTime to duration
         // this is to avoid the seek time being set to a value that is not exactly the same as the duration
         // at the end of the audio

packages/frontend/core/src/components/providers/current-server-scope.tsx

@@ -0,0 +1,47 @@
+import { ServersService } from '@affine/core/modules/cloud';
+import { GlobalContextService } from '@affine/core/modules/global-context';
+import { FrameworkScope, useLiveData, useService } from '@toeverything/infra';
+import { useMemo } from 'react';
+
+export const CurrentServerScopeProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const globalContext = useService(GlobalContextService).globalContext;
+  const serversService = useService(ServersService);
+  const currentServerId = useLiveData(globalContext.serverId.$);
+  const serverService = useLiveData(
+    useMemo(() => {
+      if (!currentServerId) {
+        return null;
+      }
+      return serversService.server$(currentServerId);
+    }, [currentServerId, serversService])
+  );
+
+  if (!serverService) {
+    // todo(@pengx17): render a loading/error component here if not found?
+    return null;
+  }
+
+  return (
+    <FrameworkScope scope={serverService.scope}>{children}</FrameworkScope>
+  );
+};
+
+export const useCurrentServerService = () => {
+  const globalContext = useService(GlobalContextService).globalContext;
+  const serversService = useService(ServersService);
+  const currentServerId = useLiveData(globalContext.serverId.$);
+  const serverService = useLiveData(
+    useMemo(() => {
+      if (!currentServerId) {
+        return null;
+      }
+      return serversService.server$(currentServerId);
+    }, [currentServerId, serversService])
+  );
+
+  return serverService ?? undefined;
+};