feat: batch creation

frontend/src/components/LessonContent.vue

@@ -0,0 +1,99 @@
+<template>
+	<div v-if="youtube">
+		<iframe
+			class="youtube-video"
+			:src="getYouTubeVideoSource(youtube)"
+			width="100%"
+			height="400"
+			frameborder="0"
+			allowfullscreen
+		></iframe>
+	</div>
+	<div v-for="block in content.split('\n\n')">
+		<div v-if="block.includes('{{ YouTubeVideo')">
+			<iframe
+				class="youtube-video"
+				:src="getYouTubeVideoSource(block)"
+				width="100%"
+				height="400"
+				frameborder="0"
+				allowfullscreen
+			></iframe>
+		</div>
+		<div v-else-if="block.includes('{{ Quiz')">
+			<Quiz :quiz="getId(block)" />
+		</div>
+		<div v-else-if="block.includes('{{ Video')">
+			<video controls width="100%" controlsList="nodownload">
+				<source :src="getId(block)" type="video/mp4" />
+			</video>
+		</div>
+		<div v-else-if="block.includes('{{ PDF')">
+			<iframe
+				:src="getPDFSource(block)"
+				width="100%"
+				height="400"
+				frameborder="0"
+				allowfullscreen
+			></iframe>
+		</div>
+		<div v-else-if="block.includes('{{ Audio')">
+			<audio width="100%" controls controlsList="nodownload">
+				<source :src="getId(block)" type="audio/mp3" />
+			</audio>
+		</div>
+		<div v-else-if="block.includes('{{ Embed')">
+			<iframe
+				width="100%"
+				height="400"
+				:src="getId(block)"
+				frameborder="0"
+				allowfullscreen
+			>
+			</iframe>
+		</div>
+		<div v-else v-html="markdown.render(block)"></div>
+	</div>
+	<div v-if="quizId">
+		<Quiz :quiz="quizId" />
+	</div>
+</template>
+<script setup>
+import Quiz from '@/components/QuizBlock.vue'
+import MarkdownIt from 'markdown-it'
+
+const markdown = new MarkdownIt({
+	html: true,
+	linkify: true,
+})
+
+const props = defineProps({
+	content: {
+		type: String,
+		required: true,
+	},
+	youtube: {
+		type: String,
+		required: false,
+	},
+	quizId: {
+		type: String,
+		required: false,
+	},
+})
+
+const getYouTubeVideoSource = (block) => {
+	if (block.includes('{{')) {
+		block = getId(block)
+	}
+	return `https://www.youtube.com/embed/${block}`
+}
+
+const getPDFSource = (block) => {
+	return `${getId(block)}#toolbar=0`
+}
+
+const getId = (block) => {
+	return block.match(/\(["']([^"']+?)["']\)/)[1]
+}
+</script>