feat: video player

frontend/src/utils/customEmbed.js

@@ -0,0 +1,32 @@
+import Embed from '@editorjs/embed'
+import VideoBlock from '@/components/VideoBlock.vue'
+import { createApp } from 'vue'
+
+export class CustomEmbed extends Embed {
+	render() {
+		const container = super.render()
+		const { service, source, embed } = this.data
+
+		if (service === 'youtube' || service === 'vimeo') {
+			// Remove the iframe or existing embed content
+			container.innerHTML = ''
+
+			// Create a placeholder element for Vue component
+			const vueContainer = document.createElement('div')
+			vueContainer.setAttribute('data-service', service)
+			vueContainer.setAttribute('data-video-id', this.data.source)
+
+			// Append the Vue placeholder
+			container.appendChild(vueContainer)
+			console.log(source)
+			// Mount the Vue component (using a global Vue instance)
+			const app = createApp(VideoBlock, {
+				file: source,
+				type: 'video/youtube',
+			})
+			app.mount(vueContainer)
+		}
+
+		return container
+	}
+}

frontend/src/utils/index.js

@@ -4,12 +4,12 @@ import { Quiz } from '@/utils/quiz'
 import { Upload } from '@/utils/upload'
 import Header from '@editorjs/header'
 import Paragraph from '@editorjs/paragraph'
-import Embed from '@editorjs/embed'
 import { CodeBox } from '@/utils/code'
 import NestedList from '@editorjs/nested-list'
 import InlineCode from '@editorjs/inline-code'
-import { watch } from 'vue'
+import { watch, createApp } from 'vue'
 import dayjs from '@/utils/dayjs'
+import Embed from '@editorjs/embed'
 
 export function createToast(options) {
 	toast({
@@ -179,6 +179,20 @@ export function getEditorTools() {
 	}
 }
 
+function getVideoBlockHtml(medium) {
+	let regex
+	if (medium === 'youtube') {
+		regex =
+			/(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.be\/)|(?:youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch))(?:(?:\?v=)?([^#&?=]*))?((?:[?&]\w*=\w*)*)/
+		regex.exec(url)?.slice(1)
+	}
+	const wrapper = document.createElement('div')
+	const app = createApp(VideoBlock, {
+		file: file.file_url,
+	})
+	app.mount(wrapper)
+}
+
 export function getTimezones() {
 	return [
 		'Pacific/Midway',