AgoraIO-Community · Loren-Wang · Sep 9, 2024 · Sep 10, 2024 · Sep 11, 2024 · Sep 12, 2024
diff --git a/src/containers/action-bar/toolbox/index.tsx b/src/containers/action-bar/toolbox/index.tsx
@@ -7,6 +7,7 @@ import './index.css';
 import { useI18n } from 'agora-common-libs';
 import { ToolTip } from '@components/tooltip';
 import { useZIndex } from '@ui-scene/utils/hooks/use-z-index';
+import { RttTypeEnum } from '@ui-scene/uistores/type';
 export const ToolBox = observer(() => {
   const {
     layoutUIStore: { setHasPopoverShowed }  } = useStore();
@@ -57,17 +58,18 @@ const ToolBoxPopoverContent = observer(({ onClick }: { onClick: () => void }) =>
   const {
     getters,
     eduToolApi: { registeredCabinetToolItems },
+    widgetUIStore: { widgetActiveList }
   } = useStore();
   const transI18n = useI18n();
   const isWidgetActive = (widgetId: string) => {
     if (widgetId === 'breakout') {
       return getters.isBreakoutActive;
     }
     if (widgetId === 'rtt') {
-      return "true" === localStorage.getItem(`${getters.roomUuid}_subtitle`)
+      return widgetActiveList.includes(widgetId)
     }
     if (widgetId === 'rttbox') {
-      return "true" === localStorage.getItem(`${getters.roomUuid}_transcribe`)
+      return widgetActiveList.includes(widgetId)
     }
     return getters.activeWidgetIds.includes(widgetId);
   };
@@ -85,7 +87,6 @@ const ToolBoxPopoverContent = observer(({ onClick }: { onClick: () => void }) =>
             onWidgetIdChange={()=>{
             }}
             active={isWidgetActive(id)}
-            dropupActive={id === "rtt" || id === "rttbox"}
           />
         ))}
       </div>
@@ -97,52 +98,81 @@ interface ToolBoxItemProps {
   icon: SvgIconEnum;
   label: string;
   active: boolean;
-  dropupActive: boolean;
   onClick: () => void;
   onWidgetIdChange: (id: string) => void;
 }
 const ToolBoxItem: FC<ToolBoxItemProps> = observer((props) => {
-  const { icon, label, active, dropupActive, id, onClick, onWidgetIdChange } = props;
+  const { icon, label, active, id, onClick, onWidgetIdChange } = props;
   const { widgetUIStore, eduToolApi, breakoutUIStore } = useStore();
   const { updateZIndex } = useZIndex(id);
   useEffect(() => {
     if (id === 'rtt') {
       widgetUIStore.createWidget(id);
-      eduToolApi.setWidgetVisible(id, false);
       eduToolApi.sendWidgetVisibleIsShowTool(id, true);
     }
     if (id === 'rttbox') {
       widgetUIStore.createWidget(id);
-      eduToolApi.setWidgetVisible(id, false);
     }
   }, []);
+
+  //修改最大最小化
+  const setMinimizedState = (minimized: boolean) => {
+    eduToolApi.setMinimizedState({
+      minimized: minimized,
+      widgetId: id,
+      minimizedProperties: {
+        minimizedCollapsed:
+          widgetUIStore.widgetInstanceList.find((w) => w.widgetId === id)?.minimizedProperties
+            ?.minimizedCollapsed || false,
+      },
+    });
+  }
+
   const handleClick = () => {
-    if (eduToolApi.isWidgetMinimized(id)) {
-      eduToolApi.setMinimizedState({
-        minimized: false,
-        widgetId: id,
-        minimizedProperties: {
-          minimizedCollapsed:
-            widgetUIStore.widgetInstanceList.find((w) => w.widgetId === id)?.minimizedProperties
-              ?.minimizedCollapsed || false,
-        },
-      });
-    } else {
-      updateZIndex();
-      onWidgetIdChange(id)
-      if (id === 'breakout') {
-        breakoutUIStore.setDialogVisible(true);
-      } else if (id === 'rtt') {
-        eduToolApi.setWidgetVisible('rtt', true);
-        eduToolApi.sendWidgetVisibleIsShowRtt(id, true);
-        eduToolApi.changeSubtitleOpenState()
-      } else {
-        if (id === "rttbox") {
+    //当前widget是否是最小化的
+    const widgetIsMinimized = eduToolApi.isWidgetMinimized(id);
+    //档位widget是否是正在使用的状态
+    const widgetActive = (RttTypeEnum.SUBTITLE === id || RttTypeEnum.CONVERSION === id) ? widgetUIStore.widgetActiveList.includes(id) : active;
+    switch (id) {
+      case RttTypeEnum.SUBTITLE:
+        if(widgetIsMinimized){setMinimizedState(false)}else{
+          updateZIndex();
+          onWidgetIdChange(id)
+          //如果没有激活使用的话也要弹窗显示
+          if(!widgetActive){
+            eduToolApi.setWidgetVisible(id, true);
+          }
+          eduToolApi.sendWidgetVisibleIsShowRtt(id, true);
+          eduToolApi.changeSubtitleOpenState()
+        }
+        break
+      case RttTypeEnum.CONVERSION:
+        updateZIndex();
+        onWidgetIdChange(id)
+        if(!eduToolApi.isWidgetVisible(id)){
+          eduToolApi.setWidgetVisible(id, true);
+        }
+        if(widgetActive){
+          setMinimizedState(!widgetIsMinimized)
+        }else{
           eduToolApi.sendWidgetRttboxShow(id, true); 
           eduToolApi.changeConversionOpenState()
         }
-        widgetUIStore.createWidget(id);
-      }
+        break;
+      case 'breakout':
+        if (widgetIsMinimized) { setMinimizedState(false) } else {
+          updateZIndex();
+          onWidgetIdChange(id)
+          breakoutUIStore.setDialogVisible(true);
+        }
+        break;
+      default:
+        if (widgetIsMinimized) { setMinimizedState(false) } else {
+          widgetUIStore.createWidget(id);
+          updateZIndex();
+          onWidgetIdChange(id)
+        }
+        break;
     }
     onClick();
   };
@@ -154,8 +184,7 @@ const ToolBoxItem: FC<ToolBoxItemProps> = observer((props) => {
     <div className="fcr-toolbox-popover-item" onClick={handleClick}>
       <SvgImg type={icon} size={30}></SvgImg>
       <span className="fcr-toolbox-popover-item-label">{label}</span>
-     {dropupActive&&<div className='fcr-toolbox-popover-item-dropbox' onClick={()=>handleSettingClick}>
-      </div>}
+      {(id === "rtt" || id === "rttbox") && <div className='fcr-toolbox-popover-item-dropbox' onClick={() => handleSettingClick}></div>}
       {active && <div className="fcr-toolbox-popover-item-active"></div>}
     </div>
   );

diff --git a/src/containers/status-bar/widgets/index.tsx b/src/containers/status-bar/widgets/index.tsx
@@ -10,6 +10,7 @@ import { useEffect, useState } from 'react';
 import { AgoraExtensionWidgetEvent } from '@ui-scene/extension/events';
 import { useZIndex } from '@ui-scene/utils/hooks/use-z-index';
 import { useI18n } from 'agora-common-libs';
+import { RttTypeEnum } from '@ui-scene/uistores/type';
 
 export const StatusBarWidgetSlot = observer(() => {
   const { eduToolApi } = useStore();
@@ -195,47 +196,60 @@ const RttMinimize = observer(() => {
   const transI18n = useI18n();
   const {
     eduToolApi: { isWidgetMinimized, setMinimizedState },
-    widgetUIStore: {
-      widgetInstanceList,
-      classroomStore: {
-        widgetStore: { widgetController },
-      },
+    widgetUIStore: { widgetInstanceList,widgetActiveList },
+    classroomStore: {
+      widgetStore: { widgetController },
     },
   } = useStore();
-  const { updateZIndex } = useZIndex('rttbox');
-  const [countdownTimerState, setCountdownTimerState] = useState<CountdownTimerStates>({
-    current: 0,
-    state: CountdownTimerState.STOPPED,
-    tooltip: '',
-    icon: SvgIconEnum.FCR_V2_RTT,
-  });
-  const countdownTimer = widgetInstanceList.find((w) => w.widgetId === 'rttbox');
-
-  const handleClick = () => {
-    if (isWidgetMinimized('rttbox')) {
-      setMinimizedState({
-        minimized: false,
-        widgetId: 'rttbox',
-        minimizedProperties: {
-          minimizedCollapsed: false,
-        },
+  const widgetId = RttTypeEnum.CONVERSION;
+  const { updateZIndex } = useZIndex(widgetId);
+  const [show, setShow] = useState<boolean>(false)
+
+  const rttWidget = widgetInstanceList.find((w) => w.widgetId === widgetId);
+  useEffect(() => {
+    if (widgetController) {
+      widgetController.addBroadcastListener({
+        messageType: AgoraExtensionWidgetEvent.RttConversionOpenSuccess,
+        onMessage: () => { setShow(true) },
+      });
+      widgetController.addBroadcastListener({
+        messageType: AgoraExtensionWidgetEvent.RttConversionCloseSuccess,
+        onMessage: () => { setShow(false) },
       });
-    } else {
-      updateZIndex();
     }
-  };
+  }, [ widgetController]);
 
-  const { current, state, icon } = countdownTimerState;
-  return countdownTimer ? (
-      <div
-        className={classnames('fcr-minimized-widget-icon', 'fcr-minimized-widget-countdown', {
-          'fcr-minimized-widget-countdown-danger':
-            current <= 10 && state !== CountdownTimerState.STOPPED,
-        })}
-        onClick={handleClick}>
-        <SvgImg type={icon} size={20} />
-        {transI18n('fcr_device_option_rtt')}
-        {/* 转写中... */}
-      </div>
+  const handleClick = () => {
+    if(!rttWidget){
+      widgetController?.broadcast(AgoraExtensionWidgetEvent.RttSettingShowConversion)
+    }else{
+      if (isWidgetMinimized(widgetId)) {
+        updateZIndex();
+        setMinimizedState({
+          minimized: false,
+          widgetId: widgetId,
+          minimizedProperties: {
+            minimizedCollapsed: false,
+          },
+        });
+      } else {
+        setMinimizedState({
+          minimized: true,
+          widgetId: widgetId,
+          minimizedProperties: {
+            minimizedCollapsed: false,
+          },
+        });
+      }
+    }
+  };
+  return show ? (
+    <div
+      className={classnames('fcr-minimized-widget-icon', 'fcr-minimized-widget-countdown')}
+      onClick={handleClick}>
+      <SvgImg type={SvgIconEnum.FCR_V2_RTT} size={20} />
+      {transI18n('fcr_device_option_rtt')}
+      {/* 转写中... */}
+    </div>
   ) : null;
 });
diff --git a/src/extension/edu-tool.ts b/src/extension/edu-tool.ts
@@ -1,12 +1,13 @@
-import { AgoraWidgetController } from 'agora-edu-core';
+import { AgoraWidgetController,EduRoleTypeEnum } from 'agora-edu-core';
 import { Log, Logger, bound } from 'agora-rte-sdk';
 import { action, computed, IReactionDisposer, observable } from 'mobx';
 import { AgoraExtensionRoomEvent, AgoraExtensionWidgetEvent } from './events';
 import { SvgIconEnum } from '@components/svg-img';
 import { computedFn } from 'mobx-utils';
-import { StreamMediaPlayerOpenParams, WebviewOpenParams } from '@ui-scene/uistores/type';
+import { RttTypeEnum, StreamMediaPlayerOpenParams, WebviewOpenParams } from '@ui-scene/uistores/type';
 import { transI18n, FcrUISceneWidget } from 'agora-common-libs';
 import { AgoraIMMessageBase, CabinetToolItem } from './type';
+import { useStore } from '@ui-scene/utils/hooks/use-store';
 
 @Log.attach({ proxyMethods: false })
 export class EduTool {
@@ -22,7 +23,8 @@ export class EduTool {
     onTrackUpdate: () => {},
   };
   @observable
-  private _registeredCabinetToolItems: CabinetToolItem[] = [
+  //@ts-ignore
+  private _registeredCabinetToolItems: CabinetToolItem[] = EduRoleTypeEnum.student === window.EduClassroomConfig.sessionInfo.role ? [] : [
     {
       name: transI18n('fcr_tool_box_breakout_room'),
       id: 'breakout',
@@ -268,6 +270,11 @@ export class EduTool {
 
   @action.bound
   private _handleRegisterCabinetTool(cabinetToolItem: CabinetToolItem) {
+    //@ts-ignore
+    if (EduRoleTypeEnum.student === window.EduClassroomConfig.sessionInfo.role && !(RttTypeEnum.SUBTITLE === cabinetToolItem.id || RttTypeEnum.CONVERSION === cabinetToolItem.id)) {
+      return
+    }
+
     const item = this._registeredCabinetToolItems.find(item=>item.id === cabinetToolItem.id)
     if (!item) {
       this._registeredCabinetToolItems.push(cabinetToolItem);

diff --git a/src/extension/events.ts b/src/extension/events.ts
@@ -177,6 +177,22 @@ export enum AgoraExtensionWidgetEvent {
   UpdatePosition = 'update-position',
   //更新倒计时状态
   CountdownTimerStateChanged = 'countdown-timer-state-changed',
+  //widget启用状态改变处理
+  WidgetActiveStateChange = 'WidgetActiveStateChange',
   //显示转写弹窗
   RttShowConversion = "RttShowConversion",
+  //字幕功能开启成功
+  RttSubtitleOpenSuccess = "RttSubtitleOpenSuccess",
+  //字幕功能关闭成功
+  RttSubtitleCloseSuccess = "RttSubtitleCloseSuccess",
+  //转写功能开启成功
+  RttConversionOpenSuccess = "RttConversionOpenSuccess",
+  //转写功能关闭成功
+  RttConversionCloseSuccess = "RttConversionCloseSuccess",
+  //修改字幕开启状态
+  RttChangeToSubtitleOpenState = "RttChangeToSubtitleOpenState",
+  //修改转写开启状态
+  RttChangeToConversionOpenState = "RttChangeToConversionOpenState",
+  //设置里面的显示转写视图
+  RttSettingShowConversion = "RttSettingShowConversion",
 }
diff --git a/src/uistores/action-bar.ts b/src/uistores/action-bar.ts
@@ -125,7 +125,7 @@ export class ActionBarUIStore extends EduUIStoreBase {
   }
 
   @computed get showToolBox() {
-    return this.getters.isHost;
+    return this.getters.isHost || this.getters.isStudent;
   }
   @computed get showWhiteBoard() {
     return this.getters.isHost;
@@ -142,6 +142,9 @@ export class ActionBarUIStore extends EduUIStoreBase {
   @computed get showCloud() {
     return this.getters.isHost;
   }
+  @computed get isStudent() {
+    return this.getters.isStudent;
+  }
   @observable showLeaveOption = false;
   @observable leaveFlag = 1;
 

diff --git a/src/uistores/type.ts b/src/uistores/type.ts
@@ -120,3 +120,10 @@ export type StreamMediaPlayerOpenParams = {
   url: string;
   title: string;
 };
+//rtt功能类型枚举
+export enum RttTypeEnum{
+  //字幕
+  SUBTITLE = "rtt",
+  //转写
+  CONVERSION = "rttbox",
+}