diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue index 2cc160a9..be961bf1 100644 --- a/frontend/src/pages/Lesson.vue +++ b/frontend/src/pages/Lesson.vue @@ -294,15 +294,13 @@ import { MessageCircleQuestion, } from 'lucide-vue-next' import Discussions from '@/components/Discussions.vue' -import { getEditorTools } from '../utils' +import { getEditorTools, enablePlyr } from '@/utils' import { sessionStore } from '@/stores/session' import EditorJS from '@editorjs/editorjs' import LessonContent from '@/components/LessonContent.vue' import CourseInstructors from '@/components/CourseInstructors.vue' import ProgressBar from '@/components/ProgressBar.vue' import CertificationLinks from '@/components/CertificationLinks.vue' -import Plyr from 'plyr' -import 'plyr/dist/plyr.css' const user = inject('$user') const router = useRouter() @@ -356,35 +354,6 @@ onBeforeUnmount(() => { document.removeEventListener('fullscreenchange', attachFullscreenEvent) }) -const enablePlyr = () => { - setTimeout(() => { - const videoElement = document.getElementsByClassName('video-player') - if (videoElement.length === 0) return - - const src = videoElement[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 lesson = createResource({ url: 'lms.lms.utils.get_lesson', makeParams(values) { diff --git a/frontend/src/pages/LessonForm.vue b/frontend/src/pages/LessonForm.vue index 2bd8b1b2..ff3243da 100644 --- a/frontend/src/pages/LessonForm.vue +++ b/frontend/src/pages/LessonForm.vue @@ -92,17 +92,14 @@ import { inject, ref, onBeforeUnmount, - watch, } from 'vue' import { sessionStore } from '../stores/session' import EditorJS from '@editorjs/editorjs' import LessonHelp from '@/components/LessonHelp.vue' -import { AppleIcon, ChevronRight } from 'lucide-vue-next' -import { createToast, getEditorTools } from '@/utils' +import { ChevronRight } from 'lucide-vue-next' +import { createToast, getEditorTools, enablePlyr } from '@/utils' import { capture } from '@/telemetry' import { useOnboarding } from 'frappe-ui/frappe' -import Plyr from 'plyr' -import 'plyr/dist/plyr.css' const { brand } = sessionStore() const editor = ref(null) @@ -470,35 +467,6 @@ const showToast = (title, text, icon) => { }) } -const enablePlyr = () => { - setTimeout(() => { - const videoElement = document.getElementsByClassName('video-player') - if (videoElement.length === 0) return - - const src = videoElement[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 = [ { diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js index 8aca97e5..a80174bb 100644 --- a/frontend/src/utils/index.js +++ b/frontend/src/utils/index.js @@ -15,6 +15,8 @@ import Embed from '@editorjs/embed' import SimpleImage from '@editorjs/simple-image' import Table from '@editorjs/table' import { usersStore } from '../stores/user' +import Plyr from 'plyr' +import 'plyr/dist/plyr.css' const readOnlyMode = window.read_only_mode @@ -550,3 +552,30 @@ export const canCreateCourse = () => { (userResource.data?.is_instructor || userResource.data?.is_moderator) ) } + +export const enablePlyr = () => { + setTimeout(() => { + const videoElement = document.getElementsByClassName('video-player') + if (videoElement.length === 0) return + + const src = videoElement[0].getAttribute('src') + if (src) { + let videoID = src.split('/').pop() + videoElement[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) +}