refactor: extracted function that enables plyr as a utility

This commit is contained in:
Jannat Patel
2025-05-06 10:35:05 +05:30
parent 3a10d4bdc0
commit be7e7bc6fd
3 changed files with 32 additions and 66 deletions

View File

@@ -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) {

View File

@@ -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 = [
{