@trtc/calls-uikit-react 4.1.0

package/src/Components/components/common/ButtonPanel/config.ts

@@ -0,0 +1,505 @@
+import Accept from './button/Accept';
+import Reject from './button/Reject';
+import Microphone from './button/Microphone';
+import Camera from './button/Camera';
+import Hangup from './button/Hangup';
+import Speaker from './button/Speaker';
+import SwitchCamera from './button/SwitchCamera';
+import BackgroundBlur from './button/BackgroundBlur';
+
+const ButtonPanelPCConfig = {
+  singleCall: {
+    video: {
+      calling: [
+        [
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Hangup,
+          },
+        ],
+      ],
+      accept: [
+        [
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+          {
+            component: Reject,
+            name: '',
+          },
+          {
+            component: Accept,
+            name: '',
+          },
+        ],
+      ],
+      connected: [
+        [
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Speaker,
+            name: 'speaker',
+            props: {},
+          },
+          {
+            component: Hangup,
+            name: '',
+          },
+        ],
+      ],
+    },
+    audio: {
+      calling: [
+        [
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Hangup,
+            name: '',
+          },
+        ],
+      ],
+      accept: [
+        [
+          {
+            component: Reject,
+            name: '',
+          },
+          {
+            component: Accept,
+            name: '',
+          },
+        ],
+      ],
+      connected: [
+        [
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Speaker,
+            name: 'speaker',
+            props: {},
+          },
+          {
+            component: Hangup,
+            name: '',
+          },
+        ],
+      ],
+    },
+  },
+  groupCall: {
+    video: {
+      calling: [
+        [
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Hangup,
+            name: '',
+          },
+        ],
+      ],
+      accept: [
+        [
+          {
+            component: Reject,
+            name: '',
+          },
+          {
+            component: Accept,
+            name: '',
+          },
+        ],
+      ],
+      connected: [
+        [
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Hangup,
+            name: '',
+          },
+        ],
+      ],
+    },
+    audio: {
+      calling: [
+        [
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Hangup,
+            name: '',
+          },
+        ],
+      ],
+      accept: [
+        [
+          {
+            component: Reject,
+            name: '',
+          },
+          {
+            component: Accept,
+            name: '',
+          },
+        ],
+      ],
+      connected: [
+        [
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Hangup,
+            name: '',
+          },
+        ],
+      ],
+    },
+  },
+};
+
+const ButtonPanelH5Config = {
+  singleCall: {
+    video: {
+      calling: [
+        [
+          {
+            component: Hangup,
+            props: {
+              showText: false,
+            },
+          },
+        ],
+      ],
+      accept: [
+        [
+          {
+            component: Reject,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+          {
+            component: Accept,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+        ],
+      ],
+      connected: [
+        [
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Speaker,
+            name: 'speaker',
+            props: {},
+          },
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+        ],
+        [
+          {
+            component: BackgroundBlur,
+            name: 'backgroundBlur',
+            props: {
+              style: {
+                justifyContent: 'center',
+                alignItems: 'center',
+                visibility: 'hidden',
+              },
+            },
+          },
+          {
+            component: Hangup,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+          {
+            component: SwitchCamera,
+            name: 'switchCamera',
+            props: {
+              style: {
+                justifyContent: 'center',
+                alignItems: 'center',
+              },
+            },
+          },
+        ],
+      ],
+    },
+    audio: {
+      calling: [
+        [
+          {
+            component: Hangup,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+        ],
+      ],
+      accept: [
+        [
+          {
+            component: Reject,
+            name: '',
+          },
+          {
+            component: Accept,
+            name: '',
+          },
+        ],
+      ],
+      connected: [
+        [
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Hangup,
+            name: '',
+          },
+          {
+            component: Speaker,
+            name: 'speaker',
+            props: {},
+          },
+        ],
+      ],
+    },
+  },
+  groupCall: {
+    video: {
+      calling: [
+        [
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Speaker,
+            name: 'speaker',
+            props: {},
+          },
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+        ],
+        [
+          {
+            component: Hangup,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+        ],
+      ],
+      accept: [
+        [
+          {
+            component: Reject,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+          {
+            component: Accept,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+        ],
+      ],
+      connected: [
+        [
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Speaker,
+            name: 'speaker',
+            props: {},
+          },
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+        ],
+        [
+          {
+            component: Hangup,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+        ],
+      ],
+    },
+    audio: {
+      calling: [
+        [
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Speaker,
+            name: 'speaker',
+            props: {},
+          },
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+        ],
+        [
+          {
+            component: Hangup,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+        ],
+      ],
+      accept: [
+        [
+          {
+            component: Reject,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+          {
+            component: Accept,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+        ],
+      ],
+      connected: [
+        [
+          {
+            component: Microphone,
+            name: 'microphone',
+            props: {},
+          },
+          {
+            component: Speaker,
+            name: 'speaker',
+            props: {},
+          },
+          {
+            component: Camera,
+            name: 'camera',
+            props: {},
+          },
+        ],
+        [
+          {
+            component: Hangup,
+            name: '',
+            props: {
+              showText: false,
+            },
+          },
+        ],
+      ],
+    },
+  },
+};
+
+export const ButtonPanelConfig = {
+  pc: ButtonPanelPCConfig,
+  h5: ButtonPanelH5Config,
+};

package/src/Components/components/common/ButtonPanel/index.ts

@@ -0,0 +1,3 @@
+import ButtonPanel from './ButtonPanel';
+
+export default ButtonPanel;

package/src/Components/components/common/CallMessage/CallMessage.tsx

@@ -0,0 +1,18 @@
+import { CallMediaType } from "../../../../TUICallService";
+import CallMessageC2C from "./CallMessageC2C/CallMessageC2C";
+import CallMessageGroup from "./CallMessageGroup/CallMessageGroup";
+
+export interface ICallMessageProps {
+  message: any;
+  // TODO: switch to enum
+  callType: 'C2C' | 'group';
+  onClick?: (params: { callMediaType: CallMediaType, inviteeList: string[] }) => any;
+}
+
+export default function CallMessage(props: ICallMessageProps) {
+  const { callType = 'C2C' } = props;
+
+  return callType === 'C2C'
+    ? <CallMessageC2C {...props} />
+    : <CallMessageGroup {...props} />
+}

package/src/Components/components/common/CallMessage/CallMessageC2C/CallMessageC2C.module.scss

@@ -0,0 +1,19 @@
+.message-c2c-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  word-break: break-all;
+
+  .call-content {
+    padding-left: 8px;
+  }
+
+  &.c2c {
+    cursor: pointer;
+  }
+  
+  .icon {
+    width: 20px;
+    height: 20px;
+  }
+}

package/src/Components/components/common/CallMessage/CallMessageC2C/CallMessageC2C.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { CallMediaType, NAME, StoreName, TUICallKitAPI, TUIStore } from '../../../../../TUICallService';
+import { classNames } from '../../../../util/classnames';
+import { ICallMessageProps } from '../CallMessage';
+import Icon from '../../../base/Icon/Icon';
+import videoCallSVG from '../../../../assets/callMessage/videoCall.svg';
+import audioCallSVG from '../../../../assets/callMessage/audioCall.svg';
+import callMessageC2CStyle from './CallMessageC2C.module.scss';
+
+export default function CallMessageC2C(props: ICallMessageProps) {
+  const {
+    message = {},
+    onClick,
+  } = props;
+
+  const [contentKey, setContentKey] = useState();
+  const [callMediaType, setCallMediaType] = useState();
+  const [inviteeList, setInviteeList] = useState([]);
+  const [t, setT] = useState<(params: any) => any>();
+
+  function handleTranslateChange(value) {
+    setT(() => value);
+  }
+
+  const watchOptions = {
+    [NAME.TRANSLATE]: handleTranslateChange,
+  };
+
+  useEffect(() => {
+    TUIStore.watch(
+      StoreName.CALL,
+      watchOptions,
+      {
+        notifyRangeWhenWatch: NAME.MYSELF,
+      },
+    );
+
+    TUIStore.watch(StoreName.CALL, watchOptions);
+
+    return () => {
+      TUIStore.unwatch(StoreName.CALL, watchOptions);
+    };
+  }, []);
+
+  useEffect(() => {
+    TUICallKitAPI.getCallMessage(message).then((messageObject) => {
+      const { callMediaType, messageCardContent = '', inviteeList = [] } = messageObject || {};
+      setCallMediaType(callMediaType);
+      setContentKey(messageCardContent);
+      setInviteeList(inviteeList);
+    });
+  }, [message]);
+
+  const content = typeof t === 'function' ? t(contentKey) : contentKey;
+
+  const callIcon = callMediaType === CallMediaType.AUDIO
+    ? audioCallSVG
+    : videoCallSVG;
+
+  const callMessageContainerClassName = classNames([
+    callMessageC2CStyle['message-c2c-container'],
+    'c2c',
+  ]);
+
+  const handleClick = () => {
+    typeof onClick === 'function' && onClick({ callMediaType, inviteeList });
+  };
+
+  const iconClassNames = classNames([
+    callMessageC2CStyle.icon,
+  ]);
+
+  return (
+    <div
+      className={callMessageContainerClassName}
+      onClick={handleClick}
+    >
+      <div className={iconClassNames}>
+        <Icon url={callIcon} />
+      </div>
+      <span className={callMessageC2CStyle['call-content']}>{content}</span>
+    </div>
+  );
+}

package/src/Components/components/common/CallMessage/CallMessageGroup/CallMessageGroup.module.scss

@@ -0,0 +1,5 @@
+.message-group-container {
+  &.group {
+    cursor: default;
+  }
+}

package/src/Components/components/common/CallMessage/CallMessageGroup/CallMessageGroup.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import { TUICallKitAPI } from '../../../../../TUICallService';
+import { classNames } from '../../../../util/classnames';
+import callMessageGroupStyle from './CallMessageGroup.module.scss';
+import { ICallMessageProps } from '../CallMessage';
+
+export default function CallMessageGroup(props: ICallMessageProps) {
+  const {
+    message = {},
+    onClick,
+  } = props;
+
+  const [content, setContent] = useState();
+  const [callType, setCallType] = useState();
+
+  useEffect(() => {
+    TUICallKitAPI.getCallMessage(message).then((messageObject) => {
+      const { callType, messageCardContent = '' } = messageObject || {};
+      setCallType(callType);
+      setContent(messageCardContent);
+    });
+  }, [message]);
+
+
+  const callMessageContainerClassName = classNames([
+    callMessageGroupStyle['message-group-container'],
+    'group',
+  ]);
+
+  return (
+    <div
+      className={callMessageContainerClassName}
+    >
+      <span className={callMessageGroupStyle['call-content']}>{content}</span>
+    </div>
+  );
+}

package/src/Components/components/common/CallMessage/index.ts

@@ -0,0 +1,3 @@
+import CallMessage from './CallMessage';
+
+export default CallMessage;