feat: plyr for vimeo

frontend/src/components/VideoBlock.vue

@@ -169,7 +169,6 @@ const toggleFullscreen = () => {
 <style scoped>
 .video-block {
 	width: 100%;
-	max-width: 900px;
 	margin: 0 auto;
 }
 

frontend/src/pages/Lesson.vue

@@ -42,11 +42,15 @@
 					</Button>
 				</div>
 			</div>
-			<div v-else ref="lessonContainer" class="bg-surface-white">
+			<div
+				v-else
+				ref="lessonContainer"
+				class="bg-surface-white overflow-y-auto"
+			>
 				<div
 					class="border-r container pt-5 pb-10 px-5"
 					:class="{
-						'w-1/2 mx-auto border-none': zenModeEnabled,
+						'w-3/4 mx-auto border-none': zenModeEnabled,
 					}"
 				>
 					<div
@@ -125,7 +129,7 @@
 						</div>
 					</div>
 
-					<div class="flex items-center mt-2">
+					<div v-if="!zenModeEnabled" class="flex items-center mt-2">
 						<span
 							class="h-6 mr-1"
 							:class="{
@@ -142,6 +146,10 @@
 							:instructors="lesson.data.instructors"
 						/>
 					</div>
+					<div v-else class="text-sm mt-1 text-ink-gray-7">
+						{{ lesson.data.course_title }}
+					</div>
+
 					<div
 						v-if="
 							lesson.data.instructor_content &&
@@ -160,19 +168,19 @@
 					</div>
 					<div
 						v-else-if="lesson.data.instructor_notes"
-						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-6"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-10"
 					>
 						<LessonContent :content="lesson.data.instructor_notes" />
 					</div>
 					<div
 						v-if="lesson.data.content"
-						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-5"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-10"
 					>
 						<div id="editor"></div>
 					</div>
 					<div
 						v-else
-						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-5"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-10"
 					>
 						<LessonContent
 							v-if="lesson.data?.body"
@@ -691,6 +699,10 @@ usePageMeta(() => {
 	border-left: 1px solid #e8e8eb;
 }
 
+.plyr__volume input[type='range'] {
+	display: none;
+}
+
 .plyr__control--overlaid {
 	background: radial-gradient(
 		circle,
@@ -699,11 +711,17 @@ usePageMeta(() => {
 	);
 }
 
+.plyr__control:hover {
+	background: none;
+}
+
+.plyr--video {
+	border: 1px solid theme('colors.gray.200');
+	border-radius: 8px;
+}
+
 :root {
-	--plyr-video-controls-background: radial-gradient(
+	--plyr-range-fill-background: white;
-		circle,
+	--plyr-video-control-background-hover: transparent;
-		rgba(0, 0, 0, 0.4) 0%,
-		rgba(0, 0, 0, 0.5) 50%
-	);
 }
 </style>

frontend/src/pages/LessonForm.vue

@@ -92,6 +92,7 @@ import {
 	inject,
 	ref,
 	onBeforeUnmount,
+	watch,
 } from 'vue'
 import { sessionStore } from '../stores/session'
 import EditorJS from '@editorjs/editorjs'
@@ -133,6 +134,7 @@ onMounted(() => {
 	editor.value = renderEditor('content')
 	instructorEditor.value = renderEditor('instructor-notes')
 	window.addEventListener('keydown', keyboardShortcut)
+	enablePlyr()
 })
 
 const renderEditor = (holder) => {
@@ -463,6 +465,37 @@ const showToast = (title, text, icon) => {
 	})
 }
 
+const enablePlyr = () => {
+	setTimeout(() => {
+		const videoElement = document.getElementsByClassName('video-player')
+		if (videoElement.length === 0) return
+
+		const src = document
+			.getElementsByClassName('video-player')[0]
+			.getAttribute('src')
+		if (src) {
+			let videoID = src.split('/').pop()
+			document
+				.getElementsByClassName('video-player')[0]
+				.setAttribute('data-plyr-embed-id', videoID)
+		}
+		new Plyr('.video-player', {
+			youtube: {
+				noCookie: true,
+			},
+			controls: [
+				'play-large',
+				'play',
+				'progress',
+				'current-time',
+				'mute',
+				'volume',
+				'fullscreen',
+			],
+		})
+	}, 500)
+}
+
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{

frontend/src/utils/index.js

@@ -200,16 +200,14 @@ export function getEditorTools() {
 					youtube: {
 						regex: /(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.be\/)|(?:youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch))(?:(?:\?v=)?([^#&?=]*))?((?:[?&]\w*=\w*)*)/,
 						embedUrl: '<%= remote_id %>',
-						/* 'https://www.youtube.com/embed/<%= remote_id %>?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1' */ html: `<div class="video-player" data-plyr-provider="youtube"></div>`,
+						/* 'https://www.youtube.com/embed/<%= remote_id %>?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1' */
+						html: `<div class="video-player" data-plyr-provider="youtube"></div>`,
 						id: ([id]) => id,
 					},
 					vimeo: {
 						regex: /(?:http[s]?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/,
-						embedUrl:
+						embedUrl: '<%= remote_id %>',
-							'https://player.vimeo.com/video/<%= remote_id %>',
+						html: `<div class="video-player" data-plyr-provider="vimeo"></div>`,
-						html: `<iframe style="width:100%; height: ${
-							window.innerWidth < 640 ? '15rem' : '30rem'
-						};" frameborder="0" allowfullscreen></iframe>`,
 						id: ([id]) => id,
 					},
 					codepen: true,