<template>
  <OverlayStream
    :avatar="avatar"
    :bg-image="avatar"
    :show-avatar="showAvatar"
    :username="username"
    :show-user-name="showUserName"
    :show-mask="!isGroupCall"
    :blur="!isGroupCall"
    :show-mic-volume="showMicVolume"
    :show-tip="!isGroupCall && !isFloatWindow"
    :custom-style="audioStreamStyle"
    :is-small-window="isSmallWindow"
    :is-muted="isMuted"
    :volume="volume"
    bg-color="rgba(0, 0, 0, 0.5)"
  />
</template>

<script lang="ts">
export default {
  options: {
    virtualHost: true,
  },
};
</script>

<script setup lang="ts">
import { toRefs, computed } from '../../../../adapter-vue';
import { CallMediaType, TUIGlobal } from '../../../../TUICallService';
import OverlayStream from '../OverlayStream/OverlayStream.vue';
import { useCallInfoContext, useFloatWindowContext } from '../../../hooks';
import { AudioStreamProps } from './AudioStream';

const props = defineProps(AudioStreamProps);

const { callType, isGroupCall } = toRefs(useCallInfoContext());
const { isFloatWindow } = toRefs(useFloatWindowContext());
const showAvatar = computed(() => !isGroupCall.value && !TUIGlobal.isPC);
const showUserName = computed(() => isGroupCall.value ? TUIGlobal.isPC : callType.value === CallMediaType.AUDIO);
const showMicVolume = computed(() => !isGroupCall.value && TUIGlobal.isPC && callType.value === CallMediaType.AUDIO);
const audioStreamStyle = computed(() => ({ zIndex: 1 }));
</script>
