eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: plyr for vimeo

Browse Source
This commit is contained in:
Jannat Patel
2025-04-25 10:05:32 +05:30
parent 7cde05b58a
commit 53ea91e945
4 changed files with 66 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/pages/Lesson.vue
View File

@@ -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(
circle,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.5) 50%
);
--plyr-range-fill-background: white;
--plyr-video-control-background-hover: transparent;
}
</style>

33
frontend/src/pages/LessonForm.vue
View File

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