UPD 2

- add RuTube servise

frontend/src/components/LessonContent.vue

@@ -9,6 +9,16 @@
 			allowfullscreen
 		></iframe>
 	</div>
+	<div v-if="rutube">
+		<iframe
+			class="rutube-video"
+			:src="getRutubeVideoSource(rutube.split('/').pop())"
+			width="100%"
+			:height="screenSize.width < 640 ? 200 : 400"
+			frameborder="0"
+			allowfullscreen
+		></iframe>
+	</div>
 	<div v-for="block in content?.split('\n\n')">
 		<div v-if="block.includes('{{ YouTubeVideo')">
 			<iframe
@@ -20,6 +30,16 @@
 				allowfullscreen
 			></iframe>
 		</div>
+		<div v-else-if="block.includes('{{ RutubeVideo')">
+			<iframe
+				class="rutube-video"
+				:src="getRutubeVideoSource(block)"
+				width="100%"
+				:height="screenSize.width < 640 ? 200 : 400"
+				frameborder="0"
+				allowfullscreen
+			></iframe>
+		</div>
 		<div v-else-if="block.includes('{{ Quiz')">
 			<Quiz :quiz="getId(block)" />
 		</div>
@@ -97,6 +117,13 @@ const getYouTubeVideoSource = (block) => {
 	return `https://www.youtube.com/embed/${block}`
 }
 
+const getRutubeVideoSource = (block) => {
+	if (block.includes('{{')) {
+		block = getId(block)
+	}
+	return `https://rutube.ru/play/embed/${block}`
+}
+
 const getPDFSource = (block) => {
 	return `${getId(block)}#toolbar=0`
 }
@@ -105,3 +132,11 @@ const getId = (block) => {
 	return block.match(/\(["']([^"']+?)["']\)/)[1]
 }
 </script>
+
+<style scoped>
+.youtube-video,
+.rutube-video {
+	display: block;
+	margin: 0 auto;
+}
+</style>

frontend/src/pages/Lesson.vue

@@ -258,6 +258,7 @@
 								v-if="lesson.data?.body"
 								:content="lesson.data.body"
 								:youtube="lesson.data.youtube"
+								:rutube="lesson.data.rutube"
 								:quizId="lesson.data.quiz_id"
 							/>
 						</div>

frontend/src/pages/LessonForm.vue

@@ -272,6 +272,7 @@ const lessonReference = createResource({
 
 const convertToJSON = (lessonData) => {
 	let blocks = []
+
 	if (lessonData.youtube) {
 		let youtubeID = lessonData.youtube.split('/').pop()
 		blocks.push({
@@ -282,6 +283,20 @@ const convertToJSON = (lessonData) => {
 			},
 		})
 	}
+
+	if (lessonData.rutube) {
+		let rutubeID = lessonData.rutube.includes('rutube.ru')
+			? lessonData.rutube.split('/').pop()
+			: lessonData.rutube;
+		blocks.push({
+			type: 'embed',
+			data: {
+				service: 'rutube',
+				embed: `https://rutube.ru/play/embed/${rutubeID}`,
+			},
+		});
+	}
+
 	lessonData.body.split('\n').forEach((block) => {
 		if (block.includes('{{ YouTubeVideo')) {
 			let youtubeID = block.match(/\(["']([^"']+?)["']\)/)[1]
@@ -294,6 +309,18 @@ const convertToJSON = (lessonData) => {
 					embed: youtubeID,
 				},
 			})
+		} else if (block.includes('{{ RutubeVideo')) {
+			let rutubeID = block.match(/\(["']([^"']+?)["']\)/)[1];
+			if (rutubeID.includes('rutube.ru')) {
+				rutubeID = rutubeID.split('/').pop();
+			}
+			blocks.push({
+				type: 'embed',
+				data: {
+					service: 'rutube',
+					embed: `https://rutube.ru/play/embed/${rutubeID}`,
+				},
+			});
 		} else if (block.includes('{{ Quiz')) {
 			let quiz = block.match(/\(["']([^"']+?)["']\)/)[1]
 			blocks.push({

frontend/src/utils/index.js

@@ -239,6 +239,15 @@ export function getEditorTools() {
 							'https://codesandbox.io/embed/<%= remote_id %>?view=editor+%2B+preview&module=%2Findex.html',
 						html: "<iframe style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;' sandbox='allow-mods allow-forms allow-popups allow-scripts allow-same-origin' frameborder='0' allowfullscreen='true'></iframe>",
 					},
+					rutube: {
+						regex: /(?:https?:\/\/)?(?:www\.)?rutube\.ru\/(?:video\/|play\/embed\/)([^#&?=]*)/,
+						embedUrl:
+							'https://rutube.ru/play/embed/<%= remote_id %>',
+						html: '<iframe style="width:100%; height: 30rem;" frameborder="0" allowfullscreen></iframe>',
+						height: 320,
+						width: 580,
+						id: ([id]) => id,
+					},
 				},
 			},
 		},