pope-test-callkit2/src/Components/components/common/ButtonPanel/config.ts

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

const ButtonPanelMobileConfig = {
  singleCall: {
    video: {
      calling: [
        [], [
          {},
          { name: 'hangup', props: { showText: false, marginTop: '2.2vh' } },
          {},
        ],
      ],
      accept: [
        [], [
          { name: 'reject', props: { showText: false }, customStyle: { justifyContent: 'flex-end' }  },
          {},
          { name: 'accept', props: { showText: false }, customStyle: { justifyContent: 'flex-start' } },
        ]
      ],
      connected: [
        [
          { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
          { name: 'speaker' },
          { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
        ], [
          {},
          { name: 'hangup', props: { showText: false }, customStyle: { paddingTop: '6vh' } },
          { name: 'switchCamera', customStyle: { justifyContent: 'center', paddingTop: '6vh' } },
        ]
      ],
    },
    audio: {
      calling: [
        [], [
          {},
          { name: 'hangup' },
          {},
        ]
      ],
      accept: [
        [], [
          { name: 'reject', customStyle: { justifyContent: 'flex-end' }  },
          {},
          { name: 'accept', customStyle: { justifyContent: 'flex-start' } },
        ]
      ],
      connected: [
        [], [
          { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
          { name: 'hangup' },
          { name: 'speaker', customStyle: { justifyContent: 'flex-end' } },
        ]
      ],
    },
  },
  groupCall: {
    video: {
      calling: [[
        { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
        { name: 'speaker' },
        { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
      ], [
        {},
        { name: 'hangup', props: { showText: false }, customStyle: { paddingTop: '6vh' } },
        {},
      ]],
      accept: [
        [], [
          { name: 'reject', props: { showText: false } },
          { name: 'accept', props: { showText: false } },
        ],
      ],
      connected: [
        [
          { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
          { name: 'speaker' },
          { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
        ], [
          {},
          { name: 'hangup', props: { showText: false }, customStyle: { paddingTop: '6vh' } },
          {},
        ]
      ],
      close_calling: [
        [
          { name: 'microphone', props: { showText: false } },
          { name: 'speaker', props: { showText: false } },
          { name: 'camera', props: { showText: false } },
          { name: 'hangup', props: { showText: false } },
        ]
      ],
      close_connected: [
        [
          { name: 'microphone', props: { showText: false } },
          { name: 'speaker', props: { showText: false } },
          { name: 'camera', props: { showText: false } },
          { name: 'hangup', props: { showText: false } },
        ]
      ],
    },
    audio: {
      calling: [[
        { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
        { name: 'speaker' },
        { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
      ], [
        {},
        { name: 'hangup', props: { showText: false }, customStyle: { paddingTop: '6vh' } },
        {},
      ]],
      accept: [
        [], [
          { name: 'reject' },
          { name: 'accept' },
        ]
      ],
      connected: [
        [
          { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
          { name: 'speaker' },
          { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
        ], [
          {},
          { name: 'hangup', props: { showText: false }, customStyle: { paddingTop: '6vh' } },
          {},
        ]
      ],
      close_calling: [
        [
          { name: 'microphone', props: { showText: false } },
          { name: 'speaker', props: { showText: false } },
          { name: 'camera', props: { showText: false } },
          { name: 'hangup', props: { showText: false } },
        ]
      ],
      close_connected: [
        [
          { name: 'microphone', props: { showText: false } },
          { name: 'speaker', props: { showText: false } },
          { name: 'camera', props: { showText: false } },
          { name: 'hangup', props: { showText: false } },
        ]
      ],
    },
  },
};

// @if process.env.BUILD_TARGET!='MINI'
const ButtonPanelPCConfig = {
  singleCall: {
    video: {
      calling: [
        [
          { name: 'camera' },
          { name: 'microphone' },
          { name: 'hangup' },
        ],
      ],
      accept: [
        [
          { name: 'camera' },
          { name: 'reject' },
          { name: 'accept' },
        ],
      ],
      connected: [
        [
          { name: 'camera' },
          { name: 'microphone' },
          { name: 'speaker' },
          { name: 'hangup' },
        ],
      ],
    },
    audio: {
      calling: [
        [
          { name: 'microphone' },
          { name: 'hangup' },
        ],
      ],
      accept: [
        [
          { name: 'reject' },
          { name: 'accept' },
        ],
      ],
      connected: [
        [
          { name: 'microphone' },
          { name: 'hangup' },
        ],
      ],
    }
  },
  groupCall: {
    video: {
      calling: [[
        { name: 'camera' },
        { name: 'microphone' },
        { name: 'inviteUser' },
        { name: 'hangup' },
      ]],
      accept: [
        [
          { name: 'reject' },
          { name: 'accept' },
        ],
      ],
      connected: [
        [
          { name: 'camera' },
          { name: 'microphone' },
          { name: 'speaker' },
          { name: 'inviteUser' },
          { name: 'hangup' },
        ],
      ],
    },
    audio: {
      calling: [
        [
          { name: 'microphone' },
          { name: 'hangup' },
        ],
      ],
      accept: [
        [
          { name: 'reject' },
          { name: 'accept' },
        ],
      ],
      connected: [
        [
          { name: 'microphone' },
          { name: 'speaker' },
          { name: 'inviteUser' },
          { name: 'hangup' },
        ],
      ],
    },
  },
};
// @endif

export const ButtonPanelConfig = {
  // @if process.env.BUILD_TARGET!='MINI'
  pc: ButtonPanelPCConfig,
  // @endif
  mobile: ButtonPanelMobileConfig,
};