<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import CommonContent from '@/api/CommonContent';
import Header from '@/components/parts/Header.vue';
import SimplePageContentLoader from '@/components/SimplePageContentLoader.vue';

const route = useRoute();
const loader = useSimpleDataLoader(async () => {
  return (await CommonContent.getContentDetail(Number(route.query.id)));
});
</script>

<template>
  <main class="main-content main-bg main-bg3">
    <Header show-back absolute />
    <SimplePageContentLoader :loader="loader">
      <div class="content absolute">
        <video autoplay controls :src="loader.content.value?.video" />
      </div>
    </SimplePageContentLoader>
  </main>
</template>

<style lang="scss" scoped>

video {
  width: 100%;
  height: 100%;
}

@media (max-height: 600px) {
}

</style>
