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

1
frontend/src/components/VideoBlock.vue
View File

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

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

10
frontend/src/utils/index.js
View File

@@ -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:
'https://player.vimeo.com/video/<%= remote_id %>',
html: `<iframe style="width:100%; height: ${
window.innerWidth < 640 ? '15rem' : '30rem'
};" frameborder="0" allowfullscreen></iframe>`,
embedUrl: '<%= remote_id %>',
html: `<div class="video-player" data-plyr-provider="vimeo"></div>`,
id: ([id]) => id,
},
codepen: true,