<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import Header from '@/components/parts/Header.vue';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import CommonContent from '@/api/CommonContent';
import SimplePageContentLoader from '@/components/SimplePageContentLoader.vue';
import SimpleRichHtml from '@/components/SimpleRichHtml.vue';
import { Vue3Marquee } from 'vue3-marquee';
import ImageLine from '@/components/small/ImageLine.vue';
import ImagePreview from '@/components/small/ImagePreview.vue';
import { ref } from 'vue';

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

const showPreview = ref(false);
const activeItem = ref(0);


</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>
