<template>
  <!-- 移动端 -->
  <div v-show="callType === CallMediaType.VIDEO" class="streamBox-mobile">
    <!-- 本地流 -->
    <Pusher :screen="screen" @toggleViewSize="switchScreen"></Pusher>
    <!-- 远端流 -->
    <Player :screen="screen" @toggleViewSize="switchScreen"></Player>
  </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from '../../../../adapter-vue';
import { TUIStore, StoreName, NAME, CallMediaType } from '../../../../TUICallService/index';
import Pusher from './wechat/Pusher.vue';
import Player from './wechat/Player.vue';
const screen = ref(true);
const callType = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_MEDIA_TYPE));

const handleCallMediaTypeChange = (value) => {
  callType.value = value;
};

onMounted(function () {
  TUIStore.watch(
    StoreName.CALL,
    {
      [NAME.CALL_MEDIA_TYPE]: handleCallMediaTypeChange,
    },
    {
      notifyRangeWhenWatch: NAME.MYSELF,
    },
  );
});

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CALL, {
    [NAME.CALL_MEDIA_TYPE]: handleCallMediaTypeChange,
  });
});

function switchScreen() {
  screen.value = !screen.value;
}
</script>
  
<style lang="scss" scoped>
.streamBox-mobile {
  width: 100vw;
  height: 100vh;
  position: relative;
}
</style>
  