fcr-ui-scene 3.4.2 → 3.4.4

package/lib/modules/layout/member-window/index.css

@@ -72,6 +72,48 @@
   inset: 0;
   font-size: 0;
 }
+.fcr-member-window-body-render-video-loading {
+  border-radius: 10px;
+  position: absolute;
+  z-index: 999;
+  display: flex;
+  top: 10px;
+  right: 13px;
+  max-width: 447px;
+  height: fit-content;
+  transition: all 0.2s;
+  padding: 6px 8px;
+  gap: 14px;
+  background: #748bff;
+  align-items: center;
+  justify-content: center;
+}
+.fcr-member-window-body-render-video-loading span {
+  color: #fff;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  white-space: pre-wrap;
+}
+.fcr-member-window-body-render-video-loading .render-video-loading-icon {
+  animation: loading-rotate 1s linear infinite;
+}
+
+@keyframes loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.fcr-member-window-body.fcr-member-window-body-video-remote {
+  visibility: hidden;
+}
+.fcr-member-window-body.fcr-member-window-body-video-remote-render {
+  visibility: visible;
+}
 .fcr-member-window-excitation {
   position: absolute;
   inset: 0;
@@ -83,7 +125,7 @@
   opacity: 1;
 }
 .fcr-member-window-pin {
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
   position: absolute;
@@ -93,12 +135,13 @@
   height: 26px;
   border-radius: var(--fcr_cornerradius_xs);
   background-color: var(--fcr_ui_scene_view_toast);
-  opacity: 0;
-  transition: opacity 0.2s;
+  /* opacity: 0; */
+  /* transition: opacity 0.2s; */
   z-index: 3;
 }
 .fcr-member-window-pin-show {
-  opacity: 1;
+  /* opacity: 1; */
+  display: flex;
 }
 .fcr-member-board:hover .fcr-user-window-actions-top,
 .fcr-member-window:hover .fcr-user-window-actions-top {
@@ -110,14 +153,19 @@
   justify-content: center;
   background-color: var(--fcr_ui_scene_ramp_green6);
   border-radius: var(--fcr_cornerradius_xxs);
-  padding: 0 1px;
+  /* padding: 0 1px; */
   height: 18px;
   margin-right: 2px;
 }
 .fcr-member-window-members-sharebtn-show {
-  margin-left: 6px;
+  margin-left: 0px;
   display: flex;
 }
+
+.fcr-member-window-members-sharebtn-large {
+  height: 24px;
+  margin-right: 6px;
+}
 /* fcr-member-window-action start */
 
 .fcr-user-window-actions {
@@ -140,20 +188,31 @@
 .fcr-user-window-actions-bottom {
   position: absolute;
   inset: auto auto 4px 4px;
+  z-index: 1;
+  max-width: calc(100% - 8px);
+  height: 18px;
+  transition: opacity 0.2s;
+  opacity: 1;
+}
+
+.fcr-user-window-actions-bottom-layout {
   color: var(--fcr_ui_scene_icontext1);
-  border-radius: var(--fcr_cornerradius_xxs);
-  background-color: var(--fcr_ui_scene_view_toast);
-  backdrop-filter: blur(25px);
   font-weight: var(--fcr_font_weight_m);
-  font-size: 10px;
+  font-size: 12px;
+  backdrop-filter: blur(25px);
   display: inline-flex;
   align-items: center;
-  max-width: calc(100% - 8px);
-  height: 18px;
   overflow: hidden;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.2s;
+}
+.fcr-user-window-actions-bottom-layout-info {
+  border-radius: var(--fcr_cornerradius_xs);
+  background-color: var(--fcr_ui_scene_view_toast);
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+}
+.fcr-user-window-actions-bottom-interpreter-tag {
+  margin-left: 8px;
 }
 .fcr-member-board .fcr-user-window-actions-bottom-show,
 .fcr-member-window .fcr-user-window-actions-bottom-show {
@@ -165,13 +224,12 @@
 }
 .fcr-member-window-gallery .fcr-user-window-actions-bottom {
   height: 24px;
-  border-radius: var(--fcr_cornerradius_s);
   font-size: 12px;
 }
 
 .fcr-user-window-actions-tag {
   height: 18px;
-  border-radius: var(--fcr_cornerradius_xxs);
+  border-radius: var(--fcr_cornerradius_xs);
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
@@ -179,13 +237,14 @@
 
 .fcr-member-window-gallery .fcr-user-window-actions-tag {
   height: 24px;
-  border-radius: var(--fcr_cornerradius_s);
+  border-radius: var(--fcr_cornerradius_xs);
 }
 
 .fcr-user-window-actions-tag-host {
   color: var(--fcr_ui_scene_white10);
   background: linear-gradient(90deg, #4262ff, #7c79ff);
   padding: 0 8px;
+  /* margin-right: 10px; */
 }
 
 .fcr-user-window-actions-tag-host:has(svg) {
@@ -251,9 +310,30 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.fcr-user-window-actions-bottom .fcr-user-window-actions-name.ml-5 {
+  margin-left: 5px;
+}
+
 .fcr-user-window-actions-name-isme {
   font-weight: normal;
 }
+
+.fcr-user-window-actions-bottom .fcr-user-window-actions-name-rename {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  display: none;
+}
+
+.fcr-user-window-actions-bottom:hover .fcr-user-window-actions-name-rename {
+  display: block;
+}
+
+.member-window-actions__more-actions {
+  padding: 0;
+}
+
 /* .fcr-member-window-gallery .fcr-user-window-actions-name {
   padding: 0 4px;
 } */
@@ -319,3 +399,21 @@
   display: flex;
   flex-flow: column-reverse nowrap;
 }
+
+.fcr-user-window-actions-tag_large {
+  margin-bottom: 10px;
+}
+.fcr-user-window-actions-bottom .fcr-device-settings-video__video-flip-container {
+  position: static;
+  margin-left: 2px;
+}
+.fcr-user-window-actions-bottom .fcr-device-settings-video__video-flip-container:hover {
+  background: var(--fcr_ui_scene_white10);
+}
+.fcr-user-window-actions-bottom
+  .fcr-device-settings-video__video-flip-container
+  .fcr-clickable-icon-small {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--fcr_cornerradius_xs);
+}

package/lib/modules/layout/member-window/index.d.ts

@@ -1,8 +1,9 @@
-import { FcrUserRole } from 'agora-edu-core/lib/type';
+import { FcrUserRole } from 'fcr-core/lib/type';
 import { FcrUIVideoWindowData } from '../type';
 import './index.css';
 import { AgoraRtcRenderMode, AgoraRtcVideoStreamType } from 'agora-rte-sdk/lib/core/rtc/type';
 import { FcrVideoWindowPreviewType } from '../../video-window/type';
+import { FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
 export interface MemberWindowCustomProps {
     showAvatar: boolean;
     onDoubleClick: () => void;
@@ -19,7 +20,7 @@ export interface MemberWindowProps extends MemberWindowCustomProps {
     windowData: FcrUIVideoWindowData;
 }
 export declare const MemberWindow: ({ showAvatar, windowData, onDoubleClick, slot, width, height, canShowSpeakerSpotlight, onRemovePin, memberWindowPreviewType, videoRenderMode, videoStreamType, }: MemberWindowProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MemberWindowActions: ({ windowData, iconSize, windowSize, openPrivateChat, localUserRole, sendParticipantEvent, muteAudio, hasPinnedStream, allowedOperations, setVideoOrientation, showActionBottomLabel, isShowActionAudio, actionAudioTag, onVisibleChanged, videoWindowCurrentWidth, videoWindowCurrentHeight, videoWindowPreviewType, showRotation, }: {
+export declare const MemberWindowActions: ({ windowData, iconSize, windowSize, openPrivateChat, localUserRole, sendParticipantEvent, muteAudio, hasPinnedStream, allowedOperations, setVideoOrientation, showActionBottomLabel, isShowActionAudio, actionAudioTag, onVisibleChanged, videoWindowCurrentWidth, videoWindowCurrentHeight, videoWindowPreviewType, showRotation, interpreterUsers, interpreterState, handleRename, renderListLength, }: {
     windowData: FcrUIVideoWindowData;
     iconSize: number;
     windowSize: "large" | "normal";
@@ -38,6 +39,10 @@ export declare const MemberWindowActions: ({ windowData, iconSize, windowSize, o
     videoWindowCurrentHeight?: number;
     videoWindowPreviewType?: FcrVideoWindowPreviewType;
     showRotation: boolean;
+    interpreterUsers: FcrInterpreterUserInfo[];
+    interpreterState: boolean;
+    handleRename: (userId: string) => void;
+    renderListLength?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 interface MemberBoardProps {
     slot: React.ReactNode;
@@ -56,12 +61,14 @@ export declare const FcrUIVideoPlayer: (props: {
     hasVideoStream: boolean;
     videoStreamType: AgoraRtcVideoStreamType;
     renderMode: AgoraRtcRenderMode;
+    hasScreenSharing: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const FcrUILocalVideoPlayer: () => import("react/jsx-runtime").JSX.Element;
-export declare const FcrUIRemoteVideoPlayer: ({ streamId, hasVideoStream, videoStreamType, renderMode, }: {
+export declare const FcrUIRemoteVideoPlayer: ({ streamId, hasVideoStream, videoStreamType, renderMode, hasScreenSharing, }: {
     streamId: string;
     hasVideoStream: boolean;
     videoStreamType: AgoraRtcVideoStreamType;
     renderMode: AgoraRtcRenderMode;
+    hasScreenSharing: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export {};