fcr-ui-scene 3.5.0 → 3.6.0

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

@@ -1,406 +0,0 @@
-/* fcr member-window */
-.fcr-member-window {
-  width: 100%;
-  height: 100%;
-  color: var(--fcr_ui_scene_icontext1);
-  background-color: var(--fcr_ui_scene_video);
-  font-size: 12px;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  position: relative;
-  overflow: hidden;
-}
-.fcr-member-window button,
-.fcr-member-board button {
-  border: none;
-  outline: none;
-}
-.fcr-member-window button:focus,
-.fcr-member-board button:focus {
-  border: none;
-  outline: none;
-}
-.fcr-member-board {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.fcr-member-board-mask {
-  display: none;
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-}
-.fcr-member-board-mask-show {
-  display: block;
-}
-/* .fcr-member-window.fcr-member-window-suspend {
-  background-color: var(--fcr_ui_scene_video_s);
-  border-radius: 0;
-} */
-.fcr-member-window-background {
-  position: absolute;
-  inset: 0;
-  color: var(--fcr_ui_scene_icontext3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  visibility: hidden;
-}
-.fcr-member-window-is-broken {
-  visibility: visible;
-}
-
-.fcr-member-window-background svg {
-  opacity: 0.3;
-}
-
-.fcr-member-window-avatar {
-  padding: 0 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  position: relative;
-}
-
-.fcr-member-window-body {
-  position: absolute;
-  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;
-  font-size: 0;
-  border: 2px solid var(--fcr_ui_scene_ramp_green6);
-  opacity: 0;
-}
-.fcr-member-window-excitation-show {
-  opacity: 1;
-}
-.fcr-member-window-pin {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 4px;
-  top: 4px;
-  width: 26px;
-  height: 26px;
-  border-radius: var(--fcr_cornerradius_xs);
-  background-color: var(--fcr_ui_scene_view_toast);
-  opacity: 0;
-  transition: opacity 0.2s;
-  z-index: 3;
-}
-.fcr-member-window-pin-show {
-  opacity: 1;
-}
-.fcr-member-board:hover .fcr-user-window-actions-top,
-.fcr-member-window:hover .fcr-user-window-actions-top {
-  opacity: 1;
-}
-.fcr-member-window-members-sharebtn {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--fcr_ui_scene_ramp_green6);
-  border-radius: var(--fcr_cornerradius_xxs);
-  /* padding: 0 1px; */
-  height: 18px;
-  margin-right: 2px;
-}
-.fcr-member-window-members-sharebtn-show {
-  margin-left: 0px;
-  display: flex;
-}
-/* fcr-member-window-action start */
-
-.fcr-user-window-actions {
-  position: absolute;
-  inset: 0;
-  pointer-events: auto !important;
-  transition: opacity 0.2s;
-  overflow: hidden;
-  z-index: 2;
-}
-
-.fcr-user-window-actions-hide {
-  opacity: 0;
-}
-
-.fcr-user-window-actions button {
-  pointer-events: auto;
-}
-
-.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);
-  font-weight: var(--fcr_font_weight_m);
-  font-size: 12px;
-  backdrop-filter: blur(25px);
-  display: inline-flex;
-  align-items: center;
-  overflow: hidden;
-}
-.fcr-user-window-actions-bottom-layout-info {
-  border-radius: var(--fcr_cornerradius_xxs);
-  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 {
-  opacity: 1;
-}
-.fcr-member-board:hover .fcr-user-window-actions-bottom,
-.fcr-member-window:hover .fcr-user-window-actions-bottom {
-  opacity: 1;
-}
-.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);
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.fcr-member-window-gallery .fcr-user-window-actions-tag {
-  height: 24px;
-  border-radius: var(--fcr_cornerradius_s);
-}
-
-.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) {
-  padding-left: 4px;
-}
-
-.fcr-user-window-actions-volume {
-  color: var(--fcr_ui_scene_icontext1);
-  --fcr-volume-icon-color: var(--fcr_ui_scene_icontext1);
-}
-
-.fcr-user-window-actions-tag-host .fcr-user-window-actions-volume {
-  color: var(--fcr_ui_scene_white10);
-  --fcr-volume-icon-color: var(--fcr_ui_scene_white10);
-}
-
-.fcr-member-window-gallery .fcr-user-window-actions-tag-host {
-  padding: 0 13px;
-}
-
-.fcr-member-window-gallery .fcr-user-window-actions-tag-host:has(svg) {
-  padding-left: 6px;
-}
-
-.fcr-user-window-actions-microphone {
-  padding: 1px;
-  align-self: stretch;
-  display: inline-flex;
-  align-items: center;
-  color: var(--fcr_ui_scene_icontext1);
-  border-radius: var(--fcr_cornerradius_xxs);
-  background-color: var(--fcr_ui_scene_view_toast);
-  cursor: default;
-}
-
-.fcr-user-window-actions-tag-host .fcr-user-window-actions-microphone {
-  color: var(--fcr_ui_scene_white10);
-}
-
-.fcr-user-window-has-audio .fcr-user-window-actions-microphone {
-  display: none;
-}
-
-.fcr-member-window-gallery .fcr-user-window-actions-microphone {
-  padding: 0;
-  background-color: transparent;
-}
-
-.fcr-user-window-actions-tag ~ .fcr-user-window-actions-microphone {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.fcr-user-window-actions-tag:has(~ .fcr-user-window-actions-microphone) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.fcr-user-window-actions-bottom .fcr-user-window-actions-name {
-  padding: 0 2px;
-  font-weight: var(--fcr_font_weight_s);
-  line-height: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.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;
-}
-
-/* .fcr-member-window-gallery .fcr-user-window-actions-name {
-  padding: 0 4px;
-} */
-
-.fcr-user-window-actions-name-doing {
-  line-height: 1;
-  font-weight: var(--fcr_font_weight_s);
-  white-space: nowrap;
-  padding-right: 6px;
-}
-
-.fcr-user-window-actions-top {
-  height: 26px;
-  position: absolute;
-  inset: 3px 3px auto;
-  display: flex;
-  flex-flow: row-reverse nowrap;
-  gap: 5px;
-  font-size: 12px;
-  opacity: 0;
-  transition: opacity 0.2s;
-  z-index: 1;
-}
-.fcr-member-window .fcr-user-window-actions-top-active {
-  opacity: 1;
-}
-.fcr-user-window-actions-more {
-  padding: 3px;
-  border-radius: var(--fcr_cornerradius_xxs);
-  background-color: var(--fcr_web_ui_scene_hover3);
-}
-
-.fcr-user-window-actions-mute {
-  padding: 0 6px;
-  border-radius: var(--fcr_cornerradius_xxs);
-  background-color: var(--fcr_web_ui_scene_hover3);
-}
-
-.fcr-user-window-actions-mute:disabled {
-  display: none;
-}
-
-.fcr-layout-content-bar {
-  position: absolute;
-  height: 0px;
-  width: 100%;
-  transition: height 0s;
-  z-index: 1;
-}
-
-.fcr-layout-speaker .fcr-layout-content-bar {
-  position: relative;
-}
-
-.fcr-layout-content-top {
-  top: 0;
-  display: flex;
-  flex-flow: column-reverse nowrap;
-  justify-content: flex-end;
-}
-
-.fcr-layout-content-top .fcr-layout-content-bar-body {
-  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,74 +0,0 @@
-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;
-    onRemovePin: (streamId: string) => void;
-    slot?: React.ReactNode;
-    width?: number;
-    height?: number;
-    canShowSpeakerSpotlight: boolean;
-    memberWindowPreviewType?: 'gallery' | 'carousel' | 'suspend';
-    videoRenderMode: AgoraRtcRenderMode;
-    videoStreamType: AgoraRtcVideoStreamType;
-}
-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, interpreterUsers, interpreterState, handleRename, renderListLength, }: {
-    windowData: FcrUIVideoWindowData;
-    iconSize: number;
-    windowSize: "large" | "normal";
-    openPrivateChat: (userId: string) => void;
-    localUserRole: FcrUserRole;
-    sendParticipantEvent: (event: any) => void;
-    muteAudio: (mute: boolean, userId: string) => void;
-    hasPinnedStream: boolean;
-    allowedOperations: string[];
-    setVideoOrientation: () => void;
-    showActionBottomLabel: boolean;
-    isShowActionAudio: boolean;
-    actionAudioTag: string;
-    onVisibleChanged?: (visible: boolean) => void;
-    videoWindowCurrentWidth?: number;
-    videoWindowCurrentHeight?: number;
-    videoWindowPreviewType?: FcrVideoWindowPreviewType;
-    showRotation: boolean;
-    interpreterUsers: FcrInterpreterUserInfo[];
-    interpreterState: boolean;
-    handleRename: () => void;
-    renderListLength?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-interface MemberBoardProps {
-    slot: React.ReactNode;
-    isMask: boolean;
-    onMaskDoubleClick: () => void;
-    windowData: FcrUIVideoWindowData;
-    allowedOperations: string[];
-    showActionBottomLabel: boolean;
-    isShowActionAudio: boolean;
-    actionAudioTag: string;
-}
-export declare const MemberBoard: ({ slot, isMask, onMaskDoubleClick, windowData, allowedOperations, showActionBottomLabel, isShowActionAudio, actionAudioTag, }: MemberBoardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const FcrUIVideoPlayer: (props: {
-    isLocal: boolean;
-    streamId: string;
-    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, hasScreenSharing, }: {
-    streamId: string;
-    hasVideoStream: boolean;
-    videoStreamType: AgoraRtcVideoStreamType;
-    renderMode: AgoraRtcRenderMode;
-    hasScreenSharing: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export {};