pope-test-callkit2/src/Components/components/config/button/DefaultUI.ts

An Open-source Voice & Video Calling UI Component Based on Tencent Cloud Service.

import { TUIGlobal } from '../../../../TUICallService/index';
import HangupSrc from '../../../assets/button/hangup.svg';
import AcceptSrc from '../../../assets/button/accept.svg';
// @if process.env.BUILD_TARGET!='MINI'
import FullScreenSrc from '../../../assets/button/desktop/fullScreen.svg';
import MinimizeDeskSrc from '../../../assets/button/desktop/minimize.svg';
import InviteUserDeskSrc from '../../../assets/button/desktop/inviteUser.svg';
// @endif
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 process.env.BUILD_TARGET!='MINI'
if (!isMobile) {
  minimizeSrc = MinimizeDeskSrc;
  inviteUser = InviteUserDeskSrc;
}
// @endif

const initialStyle = {
  width: isMobile ? '60px' : '40px',
  height: isMobile ? '60px' : '40px',
  shape: 'circle',
  iconSize: isMobile ? 30 : 20,
  textColor: '#D5E0F2',
  textSize: '12px',
  textStyle: {
    marginTop: '5px',
  }
};
export const defaultUI = {
  accept: {
    basicConfig: {
      ...initialStyle,
      color: '#51C271',
      iconSrc: AcceptSrc,
    },
  },
  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,
    },
  },
  // @if process.env.BUILD_TARGET!='MINI'
  fullScreen: {
    basicConfig: {
      iconSize: 20,
      iconSrc: FullScreenSrc,
    },
  },
  // @endif
  minimize: {
    basicConfig: {
      iconSize: isMobile ? 24 : 20,
      iconSrc: minimizeSrc,
    },
  },
  switchCamera: {
    basicConfig: {
      iconSize: 28,
      iconSrc: SwitchCameraSrc,
    },
  },
  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,
    },
  },
};