<template>
<div class="stream-info-container">
  <MicrophoneVolume class="mic-volume" :is-muted="isMuted" :volume="volume"></MicrophoneVolume>
  <div class="nickname">
    <TKText color="#fff" :truncated="true" width="80px" size="14px">{{ nickName }}</TKText>
    <TKText color="#fff" v-show="isSelf" size="14px">{{ t('me') }}</TKText>
  </div>
</div>
</template>

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

<script setup lang="ts">
import MicrophoneVolume from '../MicrophoneVolume/MicrophoneVolume.vue';
import TKText from '../../base/TKText/TKText.vue';
import { StreamInfoProps } from './StreamInfo';
import { t } from '../../../../TUICallService';

defineProps(StreamInfoProps);
</script>

<style lang="scss" scoped>
$stream-info-bg-color: #000000a6;
$stream-info-font-color: #fff;
.stream-info-container {
  padding: 2px 5px;
  display: flex;  
  align-items: center;
  background-color: $stream-info-bg-color;
  color: $stream-info-font-color;
  
  .nickname {
    display: flex;
  }
}
</style>
