<script lang="ts" setup>
  import { useMeetingCenter } from 'any-hooks/communication/useMeetingCenter';
  import { useContacts } from 'any-hooks/contacts/useContacts';
  import { AgoraStreamItem } from 'any-hooks/types/agora';
  import { UserData } from 'src/types/auth';
  import { defineProps, onMounted, watch } from 'vue';
  import { useInjector, useState } from 'vue-vulcan';

  const { stream }              = defineProps<{stream: AgoraStreamItem}>();
  const { getContactById, contacts }      = useInjector(useContacts);
  const [ contact, setContact ] = useState<UserData>(null);
  const { mode } = useInjector(useMeetingCenter)

  onMounted( () => {    
    const currentContact = getContactById(stream.uid+'');
    setContact(currentContact);
  })  

  watch(contacts, _ => {
    const currentContact = getContactById(stream.uid+'');
    setContact(currentContact);
  })
</script>

<template>
  <view class="player-container" >
    <live-player  
      class="full"
      :src="stream.url"  
      mode="RTC"        
      :autoplay="true"
      :autoPauseIfNavigate="false"
      :autoPauseIfOpenNative="false"     
      :backgroundMute="true"
      waitingImage="https://webdemo.agora.io/away.png"
      v-show="mode === 'video' && !stream.videoPause"
    />   
    <view class="cover" v-if="contact">
      <text class="name">{{contact.nickname}}</text>
      <image v-if="mode==='audio' || stream.videoPause" class="avatar" :src="contact.avatar" mode="widthFix"/>
    </view>
  </view>
</template>

<style lang="less">
  .player-container{    
    position: relative;
    background: #000;
    .cover{      
      color: #fff;
      position: absolute;      
      width: 100%;
      height: 100%;
      top:0;
      left:0;
      .avatar{
        position: absolute;
        width: 50%;
        height: 50%;
        top:25%;
        left:25%;
      }
      .name{
        position: absolute;
        top: 10px;
        left: 10px;
      }
    }
  }
</style>