dy-admin-live/src/components/live-broadcast/action-bar.tsx

import { defineComponent, reactive } from 'vue'
import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElSlider, ElDialog, ElIcon } from 'element-plus'
import runtime, * as RuntimeUtils from './runtime'
import styles from './action-bar.module.less'
import Share from './share'

export const state = reactive({
  volume: 30,
  barStatus: {
    camera: false, // 摄像头
    volume: false, // 声音调节
    microphone: false, // 麦克风
    screen: false, // 共享屏幕
    share: false, // 分享
  },
  shareVisiable: false
})

export default defineComponent({
  name: 'LiveBroadcast-ActionBar',
  computed: {
    isCameraDisabled() {
      return state.barStatus.camera && runtime.deviceStatus.camera !== 'denied' && runtime.cameras.length
    },
    isMicrophoneDisabled() {
      const isDisabled = state.barStatus.microphone && runtime.deviceStatus.microphone !== 'denied' && runtime.microphones.length
      return isDisabled
    },
    isVolumeDisabled() {
      return state.volume === 0
    }
  },
  methods: {
    startShare() {
      console.log('调用')
      state.shareVisiable = true
    },
    volumeChange(value: number) {
      state.volume = value
      RuntimeUtils.setVolume(value)
    }
  },
  render() {
    return (
      <div class={styles['action-bar']} id="action-bar">
        <div style={{ display: 'flex' }}>
          <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              <SvgIcon
                onClick={() => {
                  state.barStatus.camera = !state.barStatus.camera
                  RuntimeUtils.toggleDevice('camera')
                }}
                name={this.isCameraDisabled ? 'bar-camera-disabled' : 'bar-camera'}
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
              <ElDropdown
                placement="top"
                // @ts-ignore
                disabled={runtime.cameras.length === 0}
                onCommand={RuntimeUtils.setSelectCamera}
                // @ts-ignore
                vSlots={{
                  dropdown: () => (
                    <ElDropdownMenu>
                      {runtime.cameras.map(item => (<ElDropdownItem disabled={item === runtime.selectedCamera} command={item}>{item.label}</ElDropdownItem>))}
                    </ElDropdownMenu>
                  )
                }}
              >
                <div class={styles['bar-btn']} style={{ height: '32px' }}>
                  <SvgIcon
                    name="bar-arrow-down"
                    style={{
                      width: '18px'
                    }}
                  />
                </div>
              </ElDropdown>
            </div>
            <span class={styles['bar-btn-text']}>摄像头</span>
          </div>
          <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              <SvgIcon
                onClick={() => {
                  state.barStatus.volume = !state.barStatus.volume;
                  if(!state.barStatus.volume) {
                    sessionStorage.getItem('volume') && this.volumeChange(Number(sessionStorage.getItem('volume')))
                  } else {
                    sessionStorage.setItem('volume', state.volume.toString())
                    this.volumeChange(0)
                  }
                }}
                name={this.isVolumeDisabled ? 'bar-volume-disabled' : 'bar-volume'}
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
              <ElDropdown
                placement="top-start"
                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
                // @ts-ignore
                vSlots={{
                  dropdown: () => (
                    <div class={styles.volumeSlider}>
                      <SvgIcon class={styles.volumeIcon} name="message-voice" color="#fff" />
                      <ElSlider modelValue={state.volume} onInput={this.volumeChange} size="small" />
                    </div>
                  )
                }}
              >
                <div class={styles['bar-btn']} style={{ height: '32px' }}>
                  <SvgIcon
                    name="bar-arrow-down"
                    style={{
                      width: '18px'
                    }}
                  />
                </div>
              </ElDropdown>
            </div>
            <span class={styles['bar-btn-text']}>音量调节</span>
          </div>

          <div class={styles['bar-btn']} onClick={RuntimeUtils.shareScreenVideo}>
            <div class={styles.btnInner}>
              <SvgIcon
                name="bar-screen-share"
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
            </div>
            <span class={styles['bar-btn-text']}>屏幕共享</span>
          </div>

          {/* <div class={styles['bar-btn']} >
            <div class={styles.btnInner}>
              <SvgIcon
                name="bar-beauty"
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
            </div>
            <span class={styles['bar-btn-text']}>美颜</span>
          </div> */}
          <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              <SvgIcon
                onClick={() => {
                  const needPublish = runtime.videoStatus === 'liveing'
                  state.barStatus.microphone = !state.barStatus.microphone
                  if (!state.barStatus.microphone) {
                    RuntimeUtils.openDevice('microphone', needPublish)
                  } else {
                    RuntimeUtils.closeDevice('microphone', needPublish)
                  }
                }}
                name={this.isMicrophoneDisabled ? 'bar-mike-disabled' : 'bar-mike'}
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
              <ElDropdown
                placement="top-start"
                // @ts-ignore
                disabled={runtime.microphones.length === 0}
                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
                onCommand={RuntimeUtils.setSelectMicrophone}
                // @ts-ignore
                vSlots={{
                  dropdown: () => (
                    <ElDropdownMenu>
                      {runtime.microphones.map(item => (<ElDropdownItem disabled={item === runtime.selectedMicrophone} command={item}>{item.label}</ElDropdownItem>))}
                    </ElDropdownMenu>
                  )
                }}
              >
                <div class={styles['bar-btn']} style={{ height: '32px' }}>
                  <SvgIcon
                    name="bar-arrow-down"
                    style={{
                      width: '18px'
                    }}
                  />
                </div>
              </ElDropdown>
            </div>
            <span class={styles['bar-btn-text']}>麦克风</span>
          </div>

        </div>
        <div style={{ display: 'flex' }} onClick={this.startShare}>
          <div class={styles['bar-btn']} >
            <div class={styles.btnInner}>
              <SvgIcon
                name="bar-share"
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
            </div>
            <span class={styles['bar-btn-text']} >分享</span>
          </div>
        </div>
        {/* <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton> */}
        <ElDialog width="510px"
        destroy-on-close
          append-to-body modelValue={state.shareVisiable} title="分享" before-close={() => { state.shareVisiable = false }}>
            <Share onClose={()=>state.shareVisiable = false}/>
        </ElDialog>
      </div>
    )
  }
})