<script lang="ts" setup>
  import { useAuthData } from 'any-hooks/auth/useAuthData';
  import { useMeetingCenter } from 'any-hooks/communication/useMeetingCenter';
  import { defineProps } from 'vue';
  import { useInjector } from 'vue-vulcan';

  const { authData } = useInjector(useAuthData);      
  const { url }      = defineProps({url: String});  

  const { mode } = useInjector(useMeetingCenter);

  const onError = (e) => {
    console.log('pusher state',e);
  }
  
</script>

<template>
  <view class="pusher-container">
    <live-pusher 
      class="full"
      :autopush="true"
      :url="url"     
      mode="RTC" 
      aspect="3:4"
      
      waiting-image="https://webdemo.agora.io/away.png" 
      v-show="mode==='video'"
      v-on:error="onError"      
      :debug="!0"
    />     
    <view class="cover">
      <text class="name">{{authData.nickname}}</text>
      <image class="avatar" v-if="mode==='audio'" :src="authData.avatar" mode="widthFix"/>
    </view>         
  </view>
</template>

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