85 lines
2.3 KiB
Vue
85 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import * as log from 'loglevel'
|
|
import { computed } from 'vue'
|
|
import type { LearningContent } from '@/types'
|
|
import { useCircleStore } from '@/stores/circle'
|
|
|
|
log.debug('LearningContent.vue setup')
|
|
|
|
const circleStore = useCircleStore()
|
|
|
|
const props = defineProps<{
|
|
learningContent: LearningContent
|
|
}>()
|
|
|
|
const block = computed(() => {
|
|
if (props.learningContent?.contents?.length) {
|
|
return props.learningContent.contents[0]
|
|
}
|
|
|
|
return undefined
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="block">
|
|
<nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b border-gray-500">
|
|
<button
|
|
type="button"
|
|
class="btn-text inline-flex items-center px-3 py-2 font-normal"
|
|
data-cy="close-learnng-content"
|
|
@click="circleStore.closeLearningContent()"
|
|
>
|
|
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
|
<span class="hidden lg:inline">zurück zum Circle</span>
|
|
</button>
|
|
|
|
<h1 class="text-xl hidden lg:block">{{ learningContent?.title }}</h1>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-blue"
|
|
data-cy="complete-and-continue"
|
|
@click="circleStore.continueFromLearningContent(this.learningContent)"
|
|
>
|
|
Abschliessen und weiter
|
|
</button>
|
|
</nav>
|
|
|
|
<div v-if="block.type === 'exercise'" class="h-screen">
|
|
<iframe width="100%" height="100%" scrolling="no" :src="block.value.url" />
|
|
</div>
|
|
|
|
<div v-else class="mx-auto max-w-5xl px-4 lg:px-8 py-4">
|
|
<p>{{ block.value.description }}</p>
|
|
|
|
<div v-if="block.type === 'video'">
|
|
<iframe
|
|
class="mt-8 w-full aspect-video"
|
|
:src="block.value.url"
|
|
:title="learningContent.title"
|
|
frameborder="0"
|
|
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen
|
|
>
|
|
</iframe>
|
|
</div>
|
|
|
|
<div v-if="block.type === 'podcast'">
|
|
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="" :src="block.value.url"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
$header-height: 77px;
|
|
$footer-height: 57px;
|
|
|
|
$content-height: $header-height + $footer-height;
|
|
|
|
.h-screen {
|
|
height: calc(100vh - $content-height);
|
|
}
|
|
</style>
|