@trtc/calls-uikit-vue 4.1.0

package/src/Components/components/config/button/ClosedPanelUI.ts

@@ -0,0 +1,109 @@
+import HangupSrc from '../../../assets/button/hangup.svg';
+import CameraOpenSrc from '../../../assets/button/camera-open.svg';
+import CameraCloseSrc from '../../../assets/button/camera-close.svg';
+import MicrophoneOpenSrc from '../../../assets/button/microphone-open.svg';
+import MicrophoneCloseSrc from '../../../assets/button/microphone-close.svg';
+import SpeakerOpenSrc from '../../../assets/button/speaker-open.svg';
+import SpeakerCloseSrc from '../../../assets/button/speaker-close.svg';
+import UpSrc from '../../../assets/button/mobile/up.svg';
+import { MobileUI } from './DefaultUI';
+
+const initialStyle = {
+  width: '40px',
+  height: '40px',
+  shape: 'circle',
+  iconSize: 20,
+  textColor: '#D5E0F2',
+};
+
+const closedButtonUI = {
+  microphone: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#FFFFFF',
+      iconSrc: MicrophoneOpenSrc,
+    },
+    closedConfig: {
+      ...initialStyle,
+      color: '#6b758a4d',
+      iconSrc: MicrophoneCloseSrc,
+    },
+  },
+  speaker: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#FFFFFF',
+      iconSrc: SpeakerOpenSrc,
+    },
+    closedConfig: {
+      ...initialStyle,
+      color: '#6b758a4d',
+      iconSrc: SpeakerCloseSrc,
+    },
+  },
+  camera: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#FFFFFF',
+      iconSrc: CameraOpenSrc,
+    },
+    closedConfig: {
+      ...initialStyle,
+      color: '#6b758a4d',
+      iconSrc: CameraCloseSrc,
+    },
+  },
+  hangup: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#ED4651',
+      iconSrc: HangupSrc,
+    },
+    loadingConfig: {
+      ...initialStyle,
+      color: '#ED4651',
+      loadingWidth: '20px',
+      loadingHeight: '20px',
+    },
+  },
+  toggleButtonPanel: {
+    basicConfig: {
+      color: 'transparent',
+      width: '40px',
+      height: '40px',
+      shape: 'circle',
+      iconSize: 40,
+      iconSrc: UpSrc,
+    },
+  },
+};
+
+export const closedPanelUI = {
+  mobile: {
+    ...MobileUI,
+    groupCall: {
+      video: {
+        ...MobileUI.groupCall.video,
+        calling: {
+          ...MobileUI.groupCall.video.calling,
+          ...closedButtonUI,
+        },
+        connected: {
+          ...MobileUI.groupCall.video.connected,
+          ...closedButtonUI,
+        },
+      },
+      audio: {
+        ...MobileUI.groupCall.audio,
+        calling: {
+          ...MobileUI.groupCall.audio.calling,
+          ...closedButtonUI,
+        },
+        connected: {
+          ...MobileUI.groupCall.audio.connected,
+          ...closedButtonUI,
+        },
+      },
+    },
+  },
+};

package/src/Components/components/config/button/DefaultUI.ts

@@ -0,0 +1,544 @@
+import { TUIGlobal } from '../../../../TUICallService/index';
+import HangupSrc from '../../../assets/button/hangup.svg';
+import AcceptSrc from '../../../assets/button/accept.svg';
+import VirtualBackgroundOpenSrc from '../../../assets/button/background-blur-open.svg';
+import VirtualBackgroundCloseSrc from '../../../assets/button/background-blur-close.svg';
+import FullScreenSrc from '../../../assets/button/desktop/fullScreen.svg';
+import MinimizeDeskSrc from '../../../assets/button/desktop/minimize.svg';
+import InviteUserDeskSrc from '../../../assets/button/desktop/inviteUser.svg';
+import MinimizeMobileSrc from '../../../assets/button/mobile/minimize.svg';
+import SwitchCameraSrc from '../../../assets/button/mobile/switch-camera.svg';
+import CameraOpenSrc from '../../../assets/button/camera-open.svg';
+import CameraCloseSrc from '../../../assets/button/camera-close.svg';
+import MicrophoneOpenSrc from '../../../assets/button/microphone-open.svg';
+import MicrophoneCloseSrc from '../../../assets/button/microphone-close.svg';
+import SpeakerOpenSrc from '../../../assets/button/speaker-open.svg';
+import SpeakerCloseSrc from '../../../assets/button/speaker-close.svg';
+import InviteUserMobileSrc from '../../../assets/button/mobile/inviteUser.svg';
+import DownSrc from '../../../assets/button/mobile/down.svg';
+
+const isMobile = !TUIGlobal.isPC;
+
+let minimizeSrc = MinimizeMobileSrc;
+let inviteUser = InviteUserMobileSrc;
+if (!isMobile) {
+  minimizeSrc = MinimizeDeskSrc;
+  inviteUser = InviteUserDeskSrc;
+}
+
+const initialStyle = {
+  width: isMobile ? '60px' : '40px',
+  height: isMobile ? '60px' : '40px',
+  shape: 'circle',
+  iconSize: isMobile ? 30 : 20,
+  showText: true,
+  textColor: '#D5E0F2',
+  textSize: '12px',
+  textStyle: {
+    marginTop: '5px',
+  }
+};
+export const defaultButtonUI = {
+  accept: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#51C271',
+      iconSrc: AcceptSrc,
+    },
+    loadingConfig: {
+      ...initialStyle,
+      color: '#51C271',
+      loadingWidth: isMobile ? '30px' : '20px',
+      loadingHeight: isMobile ? '30px' : '20px',
+    },
+  },
+  hangup: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#ED4651',
+      iconSrc: HangupSrc,
+    },
+    loadingConfig: {
+      ...initialStyle,
+      color: '#ED4651',
+      loadingWidth: isMobile ? '30px' : '20px',
+      loadingHeight: isMobile ? '30px' : '20px',
+    },
+  },
+  reject: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#ED4651',
+      iconSrc: HangupSrc,
+    },
+  },
+  camera: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#FFFFFF',
+      iconSrc: CameraOpenSrc,
+      shape: 'circle',
+    },
+    closedConfig: {
+      ...initialStyle,
+      color: '#6b758a4d',
+      iconSrc: CameraCloseSrc,
+    },
+    loadingConfig: {
+      ...initialStyle,
+      color: '#6b758a4d',
+      loadingWidth: isMobile ? '30px' : '20px',
+      loadingHeight: isMobile ? '30px' : '20px',
+    },
+  },
+  microphone: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#FFFFFF',
+      iconSrc: MicrophoneOpenSrc,
+    },
+    closedConfig: {
+      ...initialStyle,
+      color: '#6b758a4d',
+      iconSrc: MicrophoneCloseSrc,
+    },
+  },
+  speaker: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#FFFFFF',
+      iconSrc: SpeakerOpenSrc,
+    },
+    closedConfig: {
+      ...initialStyle,
+      color: '#6b758a4d',
+      iconSrc: SpeakerCloseSrc,
+    },
+  },
+  fullScreen: {
+    basicConfig: {
+      iconSize: 20,
+      iconSrc: FullScreenSrc,
+    },
+  },
+  minimize: {
+    basicConfig: {
+      iconSize: isMobile ? 24 : 20,
+      iconSrc: minimizeSrc,
+    },
+  },
+  switchCamera: {
+    basicConfig: {
+      ...initialStyle,
+      color: 'transparent',
+      iconSrc: SwitchCameraSrc,
+      shape: 'circle',
+    },
+  },
+  inviteUser: {
+    basicConfig: {
+      ...initialStyle,
+      color: isMobile ? '' : '#6b758a4d',
+      width: isMobile ? '24px' : '40px',
+      height: isMobile ? '24px' : '40px',
+      shape: isMobile ? '' : 'circle',
+      iconSize: isMobile ? 24 : 20,
+      iconSrc: inviteUser,
+    },
+  },
+  toggleButtonPanel: {
+    basicConfig: {
+      color: 'transparent',
+      width: '40px',
+      height: '40px',
+      shape: 'circle',
+      iconSize: 40,
+      iconSrc: DownSrc,
+    },
+  },
+  virtualBackground: {
+    basicConfig: {
+      ...initialStyle,
+      color: '#6b758a4d',
+      iconSrc: VirtualBackgroundOpenSrc,
+      shape: 'circle',
+    },
+    closedConfig: {
+      ...initialStyle,
+      color: '#FFFFFF',
+      iconSrc: VirtualBackgroundCloseSrc,
+    },
+    loadingConfig: {
+      ...initialStyle,
+      color: '#6b758a4d',
+      loadingWidth: isMobile ? '30px' : '20px',
+      loadingHeight: isMobile ? '30px' : '20px',
+    },
+    disableConfig: {
+      ...initialStyle,
+      color: '#6b758a4d',
+      iconSrc: VirtualBackgroundOpenSrc,
+      buttonStyle: {
+        opacity: 0.6
+      }
+    }
+  },
+};
+
+export const MobileUI = {
+  singleCall: {
+    video: {
+      calling: {
+        ...defaultButtonUI,
+        switchCamera: {
+          basicConfig: {
+            ...initialStyle,
+            color: '#6b758a4d',
+            iconSrc: SwitchCameraSrc,
+            shape: 'circle',
+            showText: true,
+          },
+          disableConfig: {
+            ...initialStyle,
+            color: '#6b758a4d',
+            iconSrc: SwitchCameraSrc,
+            shape: 'circle',
+            showText: true,
+            buttonStyle: {
+              opacity: 0.6
+            }
+          }
+        },
+        hangup: {
+          basicConfig: {
+            ...defaultButtonUI.hangup.basicConfig,
+          },
+          loadingConfig: {
+            ...defaultButtonUI.hangup.loadingConfig,
+          },
+        },
+        reject: {
+          basicConfig: {
+            ...defaultButtonUI.reject.basicConfig,
+            showText: false,
+          },
+        },
+      },
+      accept: {
+        ...defaultButtonUI,
+        switchCamera: {
+          basicConfig: {
+            ...initialStyle,
+            color: '#6b758a4d',
+            iconSrc: SwitchCameraSrc,
+            shape: 'circle',
+          },
+          disableConfig: {
+            ...initialStyle,
+            color: '#6b758a4d',
+            iconSrc: SwitchCameraSrc,
+            shape: 'circle',
+            showText: true,
+            buttonStyle: {
+              opacity: 0.6
+            }
+          }
+        },
+        accept: {
+          basicConfig: { 
+            ...defaultButtonUI.accept.basicConfig,
+            showText: false,
+          },
+          loadingConfig: { 
+            ...defaultButtonUI.accept.loadingConfig,
+            showText: false,
+          },
+        },
+        reject: {
+          basicConfig: { 
+            ...defaultButtonUI.reject.basicConfig,
+            showText: false,
+          }
+        },
+      },
+      connected: {
+        ...defaultButtonUI,
+        virtualBackground: {
+          basicConfig: {
+            ...initialStyle,
+            color: 'transparent',
+            iconSrc: VirtualBackgroundOpenSrc,
+            shape: 'circle',
+            showText: false,
+          },
+          closedConfig: {
+            ...initialStyle,
+            color: 'transparent',
+            iconSrc: VirtualBackgroundOpenSrc,
+            showText: false,
+          },
+          disableConfig: {
+            ...initialStyle,
+            color: 'transparent',
+            iconSrc: VirtualBackgroundOpenSrc,
+            showText: false,
+            buttonStyle: {
+              opacity: 0.6
+            }
+          }
+        },
+        hangup: {
+          basicConfig: {
+            ...defaultButtonUI.hangup.basicConfig,
+            showText: false,
+          },
+          loadingConfig: {
+            ...defaultButtonUI.hangup.loadingConfig,
+            showText: false,
+          },
+        },
+        switchCamera: {
+          basicConfig: {
+            ...defaultButtonUI.switchCamera.basicConfig,
+            showText: false,
+          },
+          disableConfig: {
+            ...defaultButtonUI.switchCamera.basicConfig,
+            showText: false,
+            buttonStyle: {
+              opacity: 0.6
+            }
+          }
+        },
+      }
+    },
+    audio: {
+      calling: defaultButtonUI,
+      accept: defaultButtonUI,
+      connected: defaultButtonUI,
+    }
+  },
+  groupCall: {
+    video: {
+      calling: {
+        ...defaultButtonUI,
+        switchCamera: {
+          basicConfig: {
+            ...initialStyle,
+            color: '#6b758a4d',
+            iconSrc: SwitchCameraSrc,
+            shape: 'circle',
+          },
+        },
+        hangup: {
+          basicConfig: {
+            ...defaultButtonUI.hangup.basicConfig,
+            showText: false,
+          },
+          loadingConfig: {
+            ...defaultButtonUI.hangup.loadingConfig,
+            showText: false,
+          },
+        },
+        accept: {
+          basicConfig: {
+            ...defaultButtonUI.accept.basicConfig,
+            showText: false,
+          },
+          loadingConfig: { 
+            ...defaultButtonUI.accept.loadingConfig,
+            showText: false,
+          },
+        },
+        reject: {
+          basicConfig: {
+            ...defaultButtonUI.reject.basicConfig,
+            showText: false,
+          },
+        },
+      },
+      accept: {
+        ...defaultButtonUI,
+        hangup: {
+          basicConfig: {
+            ...defaultButtonUI.hangup.basicConfig,
+            showText: false,
+          },
+          loadingConfig: {
+            ...defaultButtonUI.hangup.loadingConfig,
+            showText: false,
+          },
+        },
+        accept: {
+          basicConfig: {
+            ...defaultButtonUI.accept.basicConfig,
+            showText: false,
+          },
+          loadingConfig: { 
+            ...defaultButtonUI.accept.loadingConfig,
+            showText: false,
+          },
+        },
+        reject: {
+          basicConfig: {
+            ...defaultButtonUI.reject.basicConfig,
+            showText: false,
+          },
+        },
+      },
+      connected: {
+        ...defaultButtonUI,
+        virtualBackground: {
+          basicConfig: {
+            ...initialStyle,
+            color: 'transparent',
+            iconSrc: VirtualBackgroundOpenSrc,
+            shape: 'circle',
+            showText: false,
+          },
+          closedConfig: {
+            ...initialStyle,
+            color: 'transparent',
+            iconSrc: VirtualBackgroundCloseSrc,
+            showText: false,
+          },
+        },
+        hangup: {
+          basicConfig: {
+            ...defaultButtonUI.hangup.basicConfig,
+            showText: false,
+          },
+          loadingConfig: {
+            ...defaultButtonUI.hangup.loadingConfig,
+            showText: false,
+          },
+        },
+      }
+    },
+    audio: {
+      calling: {
+        ...defaultButtonUI,
+        switchCamera: {
+          basicConfig: {
+            ...initialStyle,
+            color: '#6b758a4d',
+            iconSrc: SwitchCameraSrc,
+            shape: 'circle',
+          },
+        },
+        hangup: {
+          basicConfig: {
+            ...defaultButtonUI.hangup.basicConfig,
+            showText: false,
+          },
+          loadingConfig: {
+            ...defaultButtonUI.hangup.loadingConfig,
+            showText: false,
+          },
+        },
+        accept: {
+          basicConfig: {
+            ...defaultButtonUI.accept.basicConfig,
+            showText: false,
+          },
+          loadingConfig: { 
+            ...defaultButtonUI.accept.loadingConfig,
+            showText: false,
+          },
+        },
+        reject: {
+          basicConfig: {
+            ...defaultButtonUI.reject.basicConfig,
+            showText: false,
+          },
+        },
+      },
+      accept: {
+        ...defaultButtonUI,
+        hangup: {
+          basicConfig: {
+            ...defaultButtonUI.hangup.basicConfig,
+            showText: false,
+          },
+          loadingConfig: {
+            ...defaultButtonUI.hangup.loadingConfig,
+            showText: false,
+          },
+        },
+        accept: {
+          basicConfig: {
+            ...defaultButtonUI.accept.basicConfig,
+            showText: false,
+          },
+          loadingConfig: { 
+            ...defaultButtonUI.accept.loadingConfig,
+            showText: false,
+          },
+        },
+        reject: {
+          basicConfig: {
+            ...defaultButtonUI.reject.basicConfig,
+            showText: false,
+          },
+        },
+      },
+      connected: {
+        ...defaultButtonUI,
+        hangup: {
+          basicConfig: {
+            ...defaultButtonUI.hangup.basicConfig,
+            showText: false,
+          },
+          loadingConfig: {
+            ...defaultButtonUI.hangup.loadingConfig,
+            showText: false,
+          },
+        },
+        virtualBackground: {
+          basicConfig: {
+            ...initialStyle,
+            color: 'transparent',
+            iconSrc: VirtualBackgroundOpenSrc,
+            shape: 'circle',
+          },
+          closedConfig: {
+            ...initialStyle,
+            color: 'transparent',
+            iconSrc: VirtualBackgroundCloseSrc,
+          },
+        },
+      }
+    }
+  },
+};
+export const PCUI = {
+  singleCall: {
+    video: {
+      calling: defaultButtonUI,
+      accept: defaultButtonUI,
+      connected: defaultButtonUI,
+    },
+    audio: {
+      calling: defaultButtonUI,
+      accept: defaultButtonUI,
+      connected: defaultButtonUI,
+    },
+  },
+  groupCall: {
+    video: {
+      calling: defaultButtonUI,
+      accept: defaultButtonUI,
+      connected: defaultButtonUI,
+    },
+    audio: {
+      calling: defaultButtonUI,
+      accept: defaultButtonUI,
+      connected: defaultButtonUI,
+    },
+  },
+};
+
+export const InitialUI = {
+  pc: PCUI,
+  mobile: MobileUI,
+};

package/src/Components/components/config/button/index.ts

@@ -0,0 +1,2 @@
+export * from './ClosedPanelUI';
+export * from './DefaultUI';

package/src/Components/context/ButtonPanelContext.ts

@@ -0,0 +1,6 @@
+
+export type TButtonPanelContextValue = {
+  status: any;
+};
+
+export const ButtonPanelContextKey = 'ButtonPanelContextKey';

package/src/Components/context/CallInfoContext.ts

@@ -0,0 +1,15 @@
+import { CallStatus, CallRole, CallMediaType } from '../../TUICallService';
+
+export type TCallInfoContextValue = {
+  callStatus?: CallStatus,
+  callRole?: CallRole,
+  callType?: CallMediaType,
+  isGroupCall?: boolean,
+  isEarPhone?: boolean,
+  focusElement?: string | null,
+  enableVirtualBackground?: boolean,
+  isShowEnableVirtualBackground?: boolean,
+  isMuteSpeaker?: boolean,
+};
+
+export const CallInfoContextKey = 'CallInfoContextKey';

package/src/Components/context/CallerUserInfoContext.ts

@@ -0,0 +1,9 @@
+export type TCallerUserInfoValue = {
+  callerUserInfo: {
+    avatar?: string;
+    userId?: string;
+    displayUserInfo?: string;
+  },
+};
+
+export const CallerUserInfoContextKey = 'CallerUserInfoContextKey';

package/src/Components/context/CustomUIConfigContext.ts

@@ -0,0 +1 @@
+export const CustomUIConfigContextKey = 'CustomUIConfigContextKey';

package/src/Components/context/FloatWindowContext.ts

@@ -0,0 +1,5 @@
+export type TFloatWindowContextValue = {
+  isFloatWindow: boolean,
+};
+
+export const FloatWindowContextKey = 'FloatWindowContextKey';

package/src/Components/context/FocusItemContext.ts

@@ -0,0 +1 @@
+export const FocusContextKey = 'FocusContextKey';

package/src/Components/context/IsClickableContext.ts

@@ -0,0 +1 @@
+export const IsClickableContextKey = 'IsClickableContextKey';

package/src/Components/context/PopoverContext.ts

@@ -0,0 +1 @@
+export const PopoverContextKey = 'PopoverContextKey';

package/src/Components/context/TranslateContext.ts

@@ -0,0 +1 @@
+export const translateContextKey = 'translateContextKey';