<template>
  <div class="box">
    <easy-player
      :video-url="getUrl(props.serialNumberValue)"
      live
      autoplay
      fluent="true"
      :style="{ width: props.width + 'px', height: props.height + 'px' }"
      :stretch="props.videoFit"
      :muted="props.videoMuted"
      :loop="props.videoLoop"
    />
  </div>
</template>

<script setup lang="ts">
  const props = defineProps([
    'serialNumberValue',
    'width',
    'height',
    'videoMuted',
    'videoLoop',
    'videoFit',
  ]);

  function getUrl(value) {
    return 'http://221.2.83.254:7012/live/' + value + '.m3u8';
  }
</script>

<style lang="scss" scoped>
  .box {
    width: v-bind('`${props.width}px`');
    height: v-bind('`${props.height}px`');
    z-index: 99;
  }
  ::v-deep .vjs-bitrate-control {
    display: none !important;
  }
</style>
