Merge pull request #1456 from pateljannat/issues-94

fix: allow fullscreen on vimeo and adjust video height on mobile devices
This commit is contained in:
Jannat Patel
2025-04-21 16:36:06 +05:30
committed by GitHub
3 changed files with 31 additions and 15 deletions

View File

@@ -9,16 +9,20 @@
:class="{ 'default-image': !course.image }" :class="{ 'default-image': !course.image }"
:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }" :style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
> >
<div <div class="flex items-center flex-wrap relative top-4 px-2 w-fit">
class="flex items-center flex-wrap space-x-1 relative top-4 px-2 w-fit" <Badge
> v-if="course.featured"
<Badge v-if="course.featured" variant="subtle" theme="green" size="md"> variant="subtle"
theme="green"
size="md"
class="mb-1 mr-1"
>
{{ __('Featured') }} {{ __('Featured') }}
</Badge> </Badge>
<div <div
v-if="course.tags" v-if="course.tags"
v-for="tag in course.tags?.split(', ')" v-for="tag in course.tags?.split(', ')"
class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md" class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md mb-1 mr-1"
> >
{{ tag }} {{ tag }}
</div> </div>

View File

@@ -56,7 +56,7 @@
<CourseInstructors :instructors="course.data.instructors" /> <CourseInstructors :instructors="course.data.instructors" />
</div> </div>
</div> </div>
<div v-if="course.data.tags" class="flex mt-4 w-fit"> <div v-if="course.data.tags" class="flex my-4 w-fit">
<Badge <Badge
theme="gray" theme="gray"
size="lg" size="lg"

View File

@@ -201,9 +201,9 @@ export function getEditorTools() {
regex: /(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.be\/)|(?:youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch))(?:(?:\?v=)?([^#&?=]*))?((?:[?&]\w*=\w*)*)/, regex: /(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.be\/)|(?:youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch))(?:(?:\?v=)?([^#&?=]*))?((?:[?&]\w*=\w*)*)/,
embedUrl: embedUrl:
'https://www.youtube.com/embed/<%= remote_id %>', 'https://www.youtube.com/embed/<%= remote_id %>',
html: '<iframe style="width:100%; height: 30rem;" frameborder="0" allowfullscreen></iframe>', html: `<iframe style="width:100%; height: ${
height: 320, window.innerWidth < 640 ? '15rem' : '30rem'
width: 580, };" frameborder="0" allowfullscreen></iframe>`,
id: ([id, params]) => { id: ([id, params]) => {
if (!params && id) { if (!params && id) {
return id return id
@@ -249,28 +249,40 @@ export function getEditorTools() {
return id + '?' + newParams.join('&') return id + '?' + newParams.join('&')
}, },
}, },
vimeo: true, 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>`,
id: ([id]) => id,
},
codepen: true, codepen: true,
aparat: { aparat: {
regex: /(?:http[s]?:\/\/)?(?:www.)?aparat\.com\/v\/([^\/\?\&]+)\/?/, regex: /(?:http[s]?:\/\/)?(?:www.)?aparat\.com\/v\/([^\/\?\&]+)\/?/,
embedUrl: embedUrl:
'https://www.aparat.com/video/video/embed/videohash/<%= remote_id %>/vt/frame', 'https://www.aparat.com/video/video/embed/videohash/<%= remote_id %>/vt/frame',
html: '<iframe style="margin: 0 auto; width: 100%; height: 25rem;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>', html: `<iframe style="margin: 0 auto; width: 100%; height: ${
height: 300, window.innerWidth < 640 ? '15rem' : '30rem'
width: 600, };" frameborder="0" scrolling="no" allowtransparency="true"></iframe>`,
}, },
github: true, github: true,
slides: { slides: {
regex: /https:\/\/docs\.google\.com\/presentation\/d\/([A-Za-z0-9_-]+)\/pub/, regex: /https:\/\/docs\.google\.com\/presentation\/d\/([A-Za-z0-9_-]+)\/pub/,
embedUrl: embedUrl:
'https://docs.google.com/presentation/d/<%= remote_id %>/embed', 'https://docs.google.com/presentation/d/<%= remote_id %>/embed',
html: "<iframe style='width: 100%; height: 30rem; border: 1px solid #D3D3D3; border-radius: 12px; margin: 1rem 0' frameborder='0' allowfullscreen='true'></iframe>", html: `<iframe style='width: 100%; height: ${
window.innerWidth < 640 ? '15rem' : '30rem'
}; border: 1px solid #D3D3D3; border-radius: 12px; margin: 1rem 0' frameborder='0' allowfullscreen='true'></iframe>`,
}, },
drive: { drive: {
regex: /https:\/\/drive\.google\.com\/file\/d\/([A-Za-z0-9_-]+)\/view(\?.+)?/, regex: /https:\/\/drive\.google\.com\/file\/d\/([A-Za-z0-9_-]+)\/view(\?.+)?/,
embedUrl: embedUrl:
'https://drive.google.com/file/d/<%= remote_id %>/preview', 'https://drive.google.com/file/d/<%= remote_id %>/preview',
html: "<iframe style='width: 100%; height: 25rem; border: 1px solid #D3D3D3; border-radius: 12px;' frameborder='0' allowfullscreen='true'></iframe>", html: `<iframe style='width: 100%; height: ${
window.innerWidth < 640 ? '15rem' : '30rem'
}; border: 1px solid #D3D3D3; border-radius: 12px;' frameborder='0' allowfullscreen='true'></iframe>`,
}, },
docsPublic: { docsPublic: {
regex: /https:\/\/docs\.google\.com\/document\/d\/([A-Za-z0-9_-]+)\/edit(\?.+)?/, regex: /https:\/\/docs\.google\.com\/document\/d\/([A-Za-z0-9_-]+)\/edit(\?.+)?/,