@tencentcloud/call-uikit-vue2
Version:
An Open-source Voice & Video Calling UI Component Based on Tencent Cloud Service.
97 lines (88 loc) • 4.09 kB
text/typescript
import { watch, ref, toRefs, computed } from '../../adapter-vue';
import { useCustomUI } from './useCustomUI';
import { TUIGlobal, CallStatus } from '../../TUICallService';
import { add, deepClone, findValues, modify } from '../util';
import { VirtualBackgroundMobileConfig } from '../components/common/ButtonPanel/config/VirtualBackgroundMobileConfig';
import { useCallInfoContext } from './useCallInfoContext';
import { useUserInfoExcludeVolumeContext } from './useUserInfoContextExcludeVolume';
import { ButtonPanelConfig } from '../components/common/ButtonPanel/config/InitConfig';
function setVirtualBackgroundConfig(config) {
const newConfig = deepClone(config);
modify(newConfig, 'mobile.singleCall.video', VirtualBackgroundMobileConfig);
add(newConfig, 'pc.singleCall.video.calling[0][2]', { name: 'virtualBackground', props: {} });
add(newConfig, 'pc.singleCall.video.accept[0][1]', { name: 'virtualBackground', props: {} });
add(newConfig, 'pc.singleCall.video.connected[0][3]', { name: 'virtualBackground', props: {} });
add(newConfig, 'pc.groupCall.video.calling[0][3]', { name: 'virtualBackground', props: {} });
add(newConfig, 'pc.groupCall.video.connected[0][4]', { name: 'virtualBackground', props: {} });
return newConfig;
}
function setCloseCameraConfig(config, isVideoAvailable, isShowVirtualBackgroundIcon) {
let newConfig = deepClone(config);
if(isVideoAvailable){
modify(newConfig, 'mobile.singleCall.video.connected[1][2].props.show', true);
if(isShowVirtualBackgroundIcon) {
setVirtualBackgroundConfig(newConfig);
}
} else {
modify(newConfig, 'mobile.singleCall.video.connected[1][2].props.show', false);
if(isShowVirtualBackgroundIcon) {
modify(newConfig, 'mobile.singleCall.video.connected[1][0].props.show', false);
modify(newConfig, 'pc.singleCall.video.connected[0][3].props.show', false);
modify(newConfig, 'pc.groupCall.video.connected[0][4].props.show', false);
}
}
return newConfig;
}
export function useCustomUIButtonConfig() {
const { isShowEnableVirtualBackground, callStatus } = toRefs(useCallInfoContext());
const customUIConfig = useCustomUI();
const { localUserInfoExcludeVolume: localUserInfo } = toRefs(useUserInfoExcludeVolumeContext());
const isVideoAvailable = computed(() => localUserInfo?.value.isVideoAvailable || false);
const isShowVirtualBackgroundIcon = computed(() => isShowEnableVirtualBackground.value && !TUIGlobal.isH5);
const results = ref([]);
watch([customUIConfig, isShowEnableVirtualBackground, isVideoAvailable], () => {
let initConfig = deepClone(ButtonPanelConfig);
if (isShowVirtualBackgroundIcon.value) {
initConfig = setVirtualBackgroundConfig(ButtonPanelConfig);
}
if(callStatus.value === CallStatus.CONNECTED) {
initConfig = setCloseCameraConfig(initConfig, isVideoAvailable.value, isShowVirtualBackgroundIcon.value);
}
const { button: buttonsConfig } = customUIConfig.value;
const rs = [];
function condition(value) {
return Object.keys(buttonsConfig).includes(value);
}
function formatResults({ key, value }) {
const valueArr = value.split('.');
let path = valueArr.slice(0, valueArr.length - 1);
const rowPath = valueArr.slice(0, valueArr.length - 2);
const rowIndex = rowPath[rowPath.length - 1];
if (rowIndex === '0') {
for(let i = 0; i < 3; i++) {
let newPath = rowPath.slice();
newPath.push(i);
newPath.push('customStyle');
newPath.push('justifyContent');
newPath = newPath.join('.');
rs.push({ path: newPath, value: 'center' });
}
}
path.push('props');
path.push('show');
path = path.join('.');
return {
path,
value: buttonsConfig?.[key]?.show,
};
}
findValues(initConfig, condition, '', rs, formatResults);
rs?.forEach((item) => {
modify(initConfig, item.path, item.value);
});
results.value = initConfig;
}, {
immediate: true,
});
return results;
}