<script setup lang="ts">
import Hls from 'hls.js'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const itemId = String(route.params.id)

console.log(itemId)
onMounted(() => {
  const player = document.getElementById(itemId) as HTMLVideoElement
  if (Hls.isSupported() && player !== null) {
    const hls = new Hls()
    hls.loadSource(
      `https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8`,
    )
    hls.attachMedia(player)
  } else {
    // Handle the case where HLS is not supported
    console.error('HLS is not supported in this browser.')
  }
})
</script>

<template>
  <div class="video-player">
    <video class="video-window" ref="video" controls :id="itemId"></video>
  </div>
</template>

<style scoped>
.video-player {
  width: 99.5vw;
  height: 99.5vh;
  margin: auto;
}
.video-window {
  width: 100%;
  height: 100%;
}
</style>
