@trtc/calls-uikit-vue 4.1.0

package/src/Components/components/common/ButtonPanel/ButtonPanel.vue

@@ -0,0 +1,238 @@
+<template>
+  <div :class="buttonPanelClassName">
+    <div class="button-group">
+      <Grid unit="%" @toggle="handleToggle" :layout="layout" :focus="focus">
+        <GridItem index="accept" height="auto" :customStyle="customStyle">
+          <Accept />
+        </GridItem>
+        <GridItem index="reject" height="auto" :customStyle="customStyle">
+          <Reject />
+        </GridItem>
+        <GridItem index="microphone" height="auto" :customStyle="customStyle">
+          <Microphone />
+        </GridItem>
+        <GridItem index="hangup" height="auto" :customStyle="customStyle">
+          <Hangup />
+        </GridItem>
+        <GridItem index="speaker" height="auto" :customStyle="customStyle">
+        <Speaker />
+        </GridItem>
+        <GridItem index="camera" height="auto" :customStyle="customStyle">
+          <TKCamera />
+        </GridItem>
+        <GridItem index="virtualBackground" height="auto" :customStyle="customStyle">
+          <VirtualBackground />
+        </GridItem>
+        <GridItem index="switchCamera" height="auto" :customStyle="customStyle">
+          <SwitchCamera />
+        </GridItem>
+        <GridItem index="inviteUser" height="auto" :customStyle="customStyle">
+          <InviteUser />
+        </GridItem>
+      </Grid>
+    </div>
+    <div v-if="showButtonPanelBackground" :class="toggleButtonContainerClassName">
+      <ToggleButtonPanel />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, computed, toRefs, watch, watchEffect, provide, onMounted, onUnmounted } from '../../../../adapter-vue';
+import { NAME, StoreName, TUIGlobal, TUIStore } from '../../../../TUICallService';
+import Grid from '../../base/Grid/Grid.vue';
+import GridItem from '../../base/Grid/GridItem/GridItem.vue';
+import { useButtonPanelLayout } from './hooks/useButtonPanelLayout';
+import TKCamera from '../../common/Button/Camera.vue';
+import Hangup from '../../common/Button/Hangup.vue';
+import Accept from '../../common/Button/Accept.vue';
+import Microphone from '../../common/Button/Microphone.vue';
+import Reject from '../../common/Button/Reject.vue';
+import Speaker from '../../common/Button/Speaker.vue';
+import SwitchCamera from '../../common/Button/SwitchCamera.vue';
+import VirtualBackground from '../../common/Button/VirtualBackground.vue';
+import ToggleButtonPanel from '../../common/Button/ToggleButtonPanel.vue';
+import InviteUser from '../../common/Button/InviteUser.vue';
+import { IsClickableContextKey, PopoverContextKey } from '../../../context';
+import { classNames } from '../../base/util';
+import { useButtonPanelStatus, useCallInfoContext, useFocusContext } from '../../../hooks';
+
+const focus = ref(null);
+const buttonProps = ref({});
+const { isGroupCall } = toRefs(useCallInfoContext());
+const { status: panelStatus } = useButtonPanelStatus() || {};
+const showButtonPanelBackground = ref(false);
+const IsClickableContextValue = ref(false);
+const PopoverContextValue = ref('');
+
+const focusElement = useFocusContext();
+
+watchEffect(() => {
+  if (showButtonPanelBackground.value) {
+    return;
+  }
+
+  if (isGroupCall.value && !TUIGlobal.isPC && focusElement.value !== null) {
+    showButtonPanelBackground.value = true;
+  } else {
+    showButtonPanelBackground.value = false;
+  }
+});
+
+const buttonPanelClassName = computed(() => classNames([
+  'button-panel-container',
+  {
+    pc: TUIGlobal.isPC,
+    mobile: !TUIGlobal.isPC,
+    h5: TUIGlobal.isH5,
+    groupCall: isGroupCall.value,
+    singleCall: !isGroupCall.value,
+    close: panelStatus?.value === 'close',
+    open: panelStatus?.value === 'open',
+    showBackGround: showButtonPanelBackground.value,
+  },
+]));
+const toggleButtonContainerClassName = classNames([
+  'toggle-button-container',
+  { h5: TUIGlobal.isH5 },
+]);
+const customStyle = TUIGlobal.isH5 ? {
+  transitionProperty: 'width,height,left,top',
+  transitionDuration: '0.3s',
+  transitionTimingFunction: 'ease-in',
+} : {};
+
+function handleToggle(value) {
+  focus.value = value;
+}
+
+const { layout, config } = useButtonPanelLayout();
+
+watch(config, () => {
+  const propsConfig = {};
+  const flatConfig = config.value.flat();
+
+  for (let item of flatConfig) {
+    const { name, props = {} } = item;
+
+    if (props.showText !== false) {
+      props.showText = true;
+    }
+    propsConfig[name] = props;
+  }
+
+  buttonProps.value = propsConfig;
+}, { immediate: true });
+
+function handleIsClickableChange(value) {
+  IsClickableContextValue.value = value;
+}
+
+const watchOptions = {
+  [NAME.IS_CLICKABLE]: handleIsClickableChange,
+};
+onMounted(() => {
+  TUIStore.watch(
+    StoreName.CALL,
+    watchOptions,
+    {
+      notifyRangeWhenWatch: NAME.MYSELF,
+    },
+  );
+});
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, watchOptions);
+});
+
+provide(IsClickableContextKey, IsClickableContextValue);
+provide(PopoverContextKey, PopoverContextValue);
+</script>
+
+<style lang="scss" scoped>
+.button-panel-container {
+  position: absolute;
+  z-index: 1;
+  &.pc {
+    width: 60%;
+    height: 63px;
+    margin: 0 auto;
+    bottom: 6%;
+    left: 50%;
+    z-index: 2;
+    transform: translateX(-50%);
+  }
+
+  &.mobile {
+    display: flex;
+    justify-content: center;
+    height: 27%;
+    bottom: 0;
+    width: 100%;
+
+    &.h5 {
+      transition-property: width,height,left,top;
+      transition-duration: 0.3s;
+      transition-timing-function: ease-in;
+    }
+
+    &.groupCall {
+      &.showBackGround {
+        background-color:#4F586B;
+      }
+    }
+
+    .button-group {
+      position: absolute;
+      width: 72%;
+      top: 2vh;
+      height: 80%;
+    }
+
+    &.close {
+      height: 14%;
+      align-items: center;
+
+      .button-group {
+        position: absolute;
+        width: 72%;
+        right: 6.2vw;
+        height: 40px;
+        top: auto;
+        bottom: auto;
+      }
+    }
+  }
+
+  .button-group {
+    position: relative;
+    height: 100%;
+  }
+
+  .toggle-button-container {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 8.2vw;
+
+    &.h5 {
+      transition-property: width,height,left,top;
+      transition-duration: 0.3s;
+      transition-timing-function: ease-in;
+    }
+  }
+
+  &.open {
+    .toggle-button-container {
+      bottom: 6vh;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,248 @@
+const ButtonPanelMobileConfig: any = {
+  singleCall: {
+    video: {
+      calling: [
+        [], [
+          {},
+          { name: 'hangup' },
+          {},
+        ],
+      ],
+      accept: [
+        [], [
+          { name: 'reject', customStyle: { justifyContent: 'flex-end' }  },
+          {},
+          { name: 'accept', customStyle: { justifyContent: 'flex-start' } },
+        ]
+      ],
+      connected: [
+        [
+          { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
+          { name: 'speaker' },
+          { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
+        ], [
+          {},
+          { name: 'hangup', customStyle: { paddingTop: '6vh' } },
+          { name: 'switchCamera', customStyle: { justifyContent: 'center', paddingTop: '6vh' }, props: {} },
+        ]
+      ],
+    },
+    audio: {
+      calling: [
+        [], [
+          {},
+          { name: 'hangup' },
+          {},
+        ]
+      ],
+      accept: [
+        [], [
+          { name: 'reject', customStyle: { justifyContent: 'flex-end' }  },
+          {},
+          { name: 'accept', customStyle: { justifyContent: 'flex-start' } },
+        ]
+      ],
+      connected: [
+        [], [
+          { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
+          { name: 'hangup' },
+          { name: 'speaker', customStyle: { justifyContent: 'flex-end' } },
+        ]
+      ],
+    },
+  },
+  groupCall: {
+    video: {
+      calling: [[
+        { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
+        { name: 'speaker' },
+        { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
+      ], [
+        {},
+        { name: 'hangup', customStyle: { paddingTop: '6vh' } },
+        {},
+      ]],
+      accept: [
+        [], [
+          { name: 'reject' },
+          { name: 'accept' },
+        ],
+      ],
+      connected: [
+        [
+          { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
+          { name: 'speaker' },
+          { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
+        ], [
+          {},
+          { name: 'hangup', customStyle: { paddingTop: '6vh' } },
+          {},
+        ]
+      ],
+      close_calling: [
+        [
+          { name: 'microphone', props: {} },
+          { name: 'speaker' },
+          { name: 'camera', props: {} },
+          { name: 'hangup' },
+        ]
+      ],
+      close_connected: [
+        [
+          { name: 'microphone', props: {} },
+          { name: 'speaker' },
+          { name: 'camera', props: {} },
+          { name: 'hangup' },
+        ]
+      ],
+    },
+    audio: {
+      calling: [[
+        { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
+        { name: 'speaker' },
+        { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
+      ], [
+        {},
+        { name: 'hangup', customStyle: { paddingTop: '6vh' } },
+        {},
+      ]],
+      accept: [
+        [], [
+          { name: 'reject' },
+          { name: 'accept' },
+        ]
+      ],
+      connected: [
+        [
+          { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
+          { name: 'speaker' },
+          { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
+        ], [
+          {},
+          { name: 'hangup', customStyle: { paddingTop: '6vh' } },
+          {},
+        ]
+      ],
+      close_calling: [
+        [
+          { name: 'microphone', props: {} },
+          { name: 'speaker' },
+          { name: 'camera', props: {} },
+          { name: 'hangup' },
+        ]
+      ],
+      close_connected: [
+        [
+          { name: 'microphone', props: {} },
+          { name: 'speaker' },
+          { name: 'camera', props: {} },
+          { name: 'hangup' },
+        ]
+      ],
+    },
+  },
+};
+
+const ButtonPanelPCConfig = {
+  singleCall: {
+    video: {
+      calling: [
+        [
+          { name: 'camera', props: {} },
+          { name: 'microphone', props: {} },
+          { name: 'hangup' },
+        ],
+      ],
+      accept: [
+        [
+          { name: 'camera', props: {} },
+          { name: 'reject' },
+          { name: 'accept' },
+        ],
+      ],
+      connected: [
+        [
+          { name: 'camera', props: {} },
+          { name: 'microphone', props: {} },
+          { name: 'speaker' },
+          { name: 'hangup' },
+        ],
+      ],
+    },
+    audio: {
+      calling: [
+        [
+          { name: 'microphone', props: {} },
+          { name: 'hangup' },
+        ],
+      ],
+      accept: [
+        [
+          { name: 'reject' },
+          { name: 'accept' },
+        ],
+      ],
+      connected: [
+        [
+          { name: 'microphone', props: {} },
+          { name: 'speaker' },
+          { name: 'hangup' },
+        ],
+      ],
+    }
+  },
+  groupCall: {
+    video: {
+      calling: [[
+        { name: 'camera', props: {} },
+        { name: 'microphone', props: {} },
+        { name: 'inviteUser', props: {} },
+        { name: 'hangup' },
+      ]],
+      accept: [
+        [
+          { name: 'reject' },
+          { name: 'accept' },
+        ],
+      ],
+      connected: [
+        [
+          { name: 'camera', props: {} },
+          { name: 'microphone', props: {} },
+          { name: 'speaker' },
+          { name: 'inviteUser', props: {} },
+          { name: 'hangup' },
+        ],
+      ],
+    },
+    audio: {
+      calling: [
+        [
+          { name: 'camera', props: {} },
+          { name: 'microphone', props: {} },
+          { name: 'hangup' },
+        ],
+      ],
+      accept: [
+        [
+          { name: 'reject' },
+          { name: 'accept' },
+        ],
+      ],
+      connected: [
+        [
+          { name: 'camera', props: {} },
+          { name: 'microphone', props: {} },
+          { name: 'speaker' },
+          { name: 'inviteUser', props: {} },
+          { name: 'hangup' },
+        ],
+      ],
+    },
+  },
+};
+
+export const ButtonPanelConfig = {
+  pc: ButtonPanelPCConfig,
+  mobile: ButtonPanelMobileConfig,
+};

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

@@ -0,0 +1,29 @@
+export const VirtualBackgroundMobileConfig = {
+  calling: [[
+    { name: 'switchCamera', customStyle: { justifyContent: 'flex-start' }, props: {} },
+    { name: 'virtualBackground' },
+    { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
+  ], [
+    {},
+    { name: 'hangup', customStyle: { paddingTop: '6vh' } },
+    {},
+  ]],
+  accept: [[
+    { name: 'switchCamera', customStyle: { justifyContent: 'flex-start' }, props: {} },
+    { name: 'virtualBackground' },
+    { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
+  ], [
+    { name: 'reject', customStyle: { paddingTop: '6vh', justifyContent: 'center' } },
+    {},
+    { name: 'accept', customStyle: { paddingTop: '6vh', justifyContent: 'center' } },
+  ]],
+  connected: [[
+    { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
+    { name: 'speaker' },
+    { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
+  ], [
+    { name: 'virtualBackground', customStyle: { justifyContent: 'center', paddingTop: '6vh' }, props: {} },
+    { name: 'hangup', customStyle: { paddingTop: '6vh' } },
+    { name: 'switchCamera', customStyle: { justifyContent: 'center', paddingTop: '6vh' }, props: {} },
+  ]],
+};

package/src/Components/components/common/ButtonPanel/hooks/useButtonPanelLayout.ts

@@ -0,0 +1,63 @@
+import { ref, toRefs, watch } from '../../../../../adapter-vue';
+import { CallMediaType, CallRole, CallStatus, TUIGlobal } from '../../../../../TUICallService';
+import { useButtonPanelStatus, useCallInfoContext, useCustomUIButtonConfig } from '../../../../hooks';
+
+export function useButtonPanelLayout() {
+  const sortedLayout = ref([]);
+  const buttonPanelConfig = ref([]);
+  const { callStatus, isGroupCall, callType, callRole } = toRefs(useCallInfoContext());
+  const { status: panelStatus } = useButtonPanelStatus() || {};
+  const customUIButtonConfig = useCustomUIButtonConfig();
+
+  watch([callStatus, isGroupCall, callType, callRole, panelStatus, customUIButtonConfig],
+    () => {
+      let initConfig = customUIButtonConfig.value;
+      const key1 = TUIGlobal.isPC ? 'pc' : 'mobile';
+      const key2 = isGroupCall.value ? 'groupCall' : 'singleCall';
+      const key3 = callType.value === CallMediaType.AUDIO ? 'audio' : 'video';
+      // eslint-disable-next-line no-nested-ternary
+      let key4 = callStatus.value === CallStatus.CALLING
+        ? callRole.value === CallRole.CALLER ? 'calling' : 'accept'
+        : callStatus.value;
+      
+      if (isGroupCall && panelStatus?.value === 'close') {
+        key4 = 'close_' + key4;
+      }
+      const config = initConfig?.[key1]?.[key2]?.[key3]?.[key4] || [];
+      buttonPanelConfig.value = config;
+      const layout = [];
+      let index = 0;
+
+      for (let i = 0; i < config.length; i++) {
+        const filterButtonArray = i === 0 ? config[i].filter((item) => item?.props?.show !== false) : config[i];
+        config[i] = filterButtonArray;
+        const width = 12 / filterButtonArray.length;
+        const height = 3;
+    
+        for (let j = 0; j < filterButtonArray.length; j++) {
+          layout[index++] = {
+            i: filterButtonArray[j].name,
+            x: j * width,
+            y: i * width,
+            w: width,
+            h: height,
+            // @ts-ignore
+            customStyle: filterButtonArray[j].customStyle,
+            customProps: filterButtonArray[j].props,
+          };
+        }
+      }
+
+      index = 0;
+      let rs = [];
+      for (let i = 0; i < config.flat().length; i++) {
+        rs[i] = layout[index++];
+      }
+
+      rs = rs.filter(item => item.i);
+      sortedLayout.value = rs;
+    }, {
+      immediate: true,
+    });
+  return { layout: sortedLayout, config: buttonPanelConfig } as const;
+}

package/src/Components/components/common/DeviceSelect/DeviceSelect.ts

@@ -0,0 +1,11 @@
+import { PropType } from '../../../../adapter-vue';
+import { DeviceType } from '../../../../TUICallService/const';
+export const DeviceSelectProps = {
+  deviceType: {
+    type: String as PropType<DeviceType>,
+  },
+  isShowControlBtn: {
+    type: Boolean,
+    default: false,
+  },
+};