chore: resolved conflicts
This commit is contained in:
Jannat Patel
137
frontend/src/components/AudioBlock.vue
Normal file
137
frontend/src/components/AudioBlock.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <audio width="100%" controls controlsList="nodownload" class="mb-4">
|
||||
<source :src="encodeURI(file)" type="audio/mp3" />
|
||||
</audio> -->
|
||||
<audio @ended="handleAudioEnd" controlsList="nodownload" class="mb-4">
|
||||
<source :src="encodeURI(file)" type="audio/mp3" />
|
||||
</audio>
|
||||
<div
|
||||
class="flex items-center space-x-2 shadow rounded-lg p-1 w-1/2 mx-auto"
|
||||
>
|
||||
<Button variant="ghost" @click="togglePlay">
|
||||
<template #icon>
|
||||
<Play v-if="!isPlaying" class="w-4 h-4 text-gray-900" />
|
||||
<Pause v-else class="w-4 h-4 text-gray-900" />
|
||||
</template>
|
||||
</Button>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
:max="duration"
|
||||
step="0.1"
|
||||
v-model="currentTime"
|
||||
@input="changeCurrentTime"
|
||||
class="duration-slider w-full h-1"
|
||||
/>
|
||||
<span class="text-xs text-gray-900 font-medium">
|
||||
{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
|
||||
</span>
|
||||
<Button variant="ghost" @click="toggleMute">
|
||||
<template #icon>
|
||||
<Volume2 v-if="!isMuted" class="w-4 h-4 text-gray-900" />
|
||||
<VolumeX v-else class="w-4 h-4 text-gray-900" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { Play, Pause, Volume2, VolumeX } from 'lucide-vue-next'
|
||||
import { Button } from 'frappe-ui'
|
||||
|
||||
const isPlaying = ref(false)
|
||||
const audio = ref(null)
|
||||
let isMuted = ref(false)
|
||||
let currentTime = ref(0)
|
||||
let duration = ref(0)
|
||||
|
||||
const props = defineProps({
|
||||
file: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
audio.value = document.querySelector('audio')
|
||||
console.log(audio.value)
|
||||
audio.value.onloadedmetadata = () => {
|
||||
duration.value = audio.value.duration
|
||||
}
|
||||
audio.value.ontimeupdate = () => {
|
||||
currentTime.value = audio.value.currentTime
|
||||
}
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const togglePlay = () => {
|
||||
if (audio.value.paused) {
|
||||
audio.value.play()
|
||||
isPlaying.value = true
|
||||
} else {
|
||||
audio.value.pause()
|
||||
isPlaying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMute = () => {
|
||||
audio.value.muted = !audio.value.muted
|
||||
isMuted.value = audio.value.muted
|
||||
}
|
||||
|
||||
const changeCurrentTime = () => {
|
||||
audio.value.currentTime = currentTime.value
|
||||
}
|
||||
|
||||
const handleAudioEnd = () => {
|
||||
isPlaying.value = false
|
||||
}
|
||||
|
||||
const formatTime = (time) => {
|
||||
const minutes = Math.floor(time / 60)
|
||||
const seconds = Math.floor(time % 60)
|
||||
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
|
||||
}
|
||||
|
||||
watch(isPlaying, (newVal) => {
|
||||
if (newVal) {
|
||||
audio.value.play()
|
||||
} else {
|
||||
audio.value.pause()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.duration-slider {
|
||||
flex: 1;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: theme('colors.gray.400');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.duration-slider::-webkit-slider-thumb {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
-webkit-appearance: none;
|
||||
background-color: theme('colors.gray.900');
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
input[type='range'] {
|
||||
overflow: hidden;
|
||||
width: 150px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
box-shadow: -150px 0 0 150px theme('colors.gray.900');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
178
frontend/src/components/VideoBlock.vue
Normal file
178
frontend/src/components/VideoBlock.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div ref="videoContainer" class="video-block group relative">
|
||||
<video @timeupdate="updateTime" @ended="videoEnded" class="rounded-lg">
|
||||
<source :src="fileURL" :type="type" />
|
||||
</video>
|
||||
<div
|
||||
class="flex items-center space-x-2 bg-gray-200 rounded-lg p-0.5 absolute bottom-3 w-[98%] left-0 right-0 mx-auto"
|
||||
>
|
||||
<Button variant="ghost">
|
||||
<template #icon>
|
||||
<Play
|
||||
v-if="!playing"
|
||||
@click="playVideo"
|
||||
class="w-4 h-4 text-gray-900"
|
||||
/>
|
||||
<Pause v-else @click="pauseVideo" class="w-4 h-4 text-gray-900" />
|
||||
</template>
|
||||
</Button>
|
||||
<Button variant="ghost" @click="toggleMute">
|
||||
<template #icon>
|
||||
<Volume2 v-if="!muted" class="w-4 h-4 text-gray-900" />
|
||||
<VolumeX v-else class="w-4 h-4 text-gray-900" />
|
||||
</template>
|
||||
</Button>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
:max="duration"
|
||||
step="0.1"
|
||||
v-model="currentTime"
|
||||
@input="changeCurrentTime"
|
||||
class="duration-slider w-full h-1"
|
||||
/>
|
||||
<span class="text-xs font-medium">
|
||||
{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
|
||||
</span>
|
||||
<Button variant="ghost" @click="toggleFullscreen">
|
||||
<template #icon>
|
||||
<Maximize class="w-4 h-4 text-gray-900" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { Play, Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
|
||||
import { Button } from 'frappe-ui'
|
||||
|
||||
const videoRef = ref(null)
|
||||
const videoContainer = ref(null)
|
||||
let playing = ref(false)
|
||||
let currentTime = ref(0)
|
||||
let duration = ref(0)
|
||||
let muted = ref(false)
|
||||
|
||||
const props = defineProps({
|
||||
file: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'video/mp4',
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
videoRef.value = document.querySelector('video')
|
||||
videoRef.value.onloadedmetadata = () => {
|
||||
duration.value = videoRef.value.duration
|
||||
}
|
||||
videoRef.value.ontimeupdate = () => {
|
||||
currentTime.value = videoRef.value.currentTime
|
||||
}
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const fileURL = computed(() => {
|
||||
if (isYoutube) {
|
||||
let url = props.file
|
||||
if (url.includes('watch?v=')) {
|
||||
url = url.replace('watch?v=', 'embed/')
|
||||
}
|
||||
return `${url}?autoplay=0&controls=0&disablekb=1&playsinline=1&cc_load_policy=1&cc_lang_pref=auto`
|
||||
}
|
||||
return props.file
|
||||
})
|
||||
|
||||
const isYoutube = computed(() => {
|
||||
return props.type == 'video/youtube'
|
||||
})
|
||||
|
||||
const playVideo = () => {
|
||||
videoRef.value.play()
|
||||
playing.value = true
|
||||
}
|
||||
|
||||
const pauseVideo = () => {
|
||||
videoRef.value.pause()
|
||||
playing.value = false
|
||||
}
|
||||
|
||||
const videoEnded = () => {
|
||||
playing.value = false
|
||||
}
|
||||
|
||||
const toggleMute = () => {
|
||||
videoRef.value.muted = !videoRef.value.muted
|
||||
muted.value = videoRef.value.muted
|
||||
}
|
||||
|
||||
const changeCurrentTime = () => {
|
||||
videoRef.value.currentTime = currentTime.value
|
||||
}
|
||||
|
||||
const formatTime = (time) => {
|
||||
const minutes = Math.floor(time / 60)
|
||||
const seconds = Math.floor(time % 60)
|
||||
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
|
||||
}
|
||||
|
||||
const toggleFullscreen = () => {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen()
|
||||
} else {
|
||||
videoContainer.value.requestFullscreen()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.video-block {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.video-block video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.duration-slider {
|
||||
flex: 1;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: theme('colors.gray.400');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.duration-slider::-webkit-slider-thumb {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
-webkit-appearance: none;
|
||||
background-color: theme('colors.gray.900');
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
input[type='range'] {
|
||||
overflow: hidden;
|
||||
width: 150px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
box-shadow: -500px 0 0 500px theme('colors.gray.900');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -15,6 +15,7 @@ export const usersStore = defineStore('lms-users', () => {
|
||||
const allUsers = createResource({
|
||||
url: 'lms.lms.api.get_all_users',
|
||||
cache: ['allUsers'],
|
||||
auto: true,
|
||||
})
|
||||
|
||||
return {
|
||||
|
||||
32
frontend/src/utils/customEmbed.js
Normal file
32
frontend/src/utils/customEmbed.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import Embed from '@editorjs/embed'
|
||||
import VideoBlock from '@/components/VideoBlock.vue'
|
||||
import { createApp } from 'vue'
|
||||
|
||||
export class CustomEmbed extends Embed {
|
||||
render() {
|
||||
const container = super.render()
|
||||
const { service, source, embed } = this.data
|
||||
|
||||
if (service === 'youtube' || service === 'vimeo') {
|
||||
// Remove the iframe or existing embed content
|
||||
container.innerHTML = ''
|
||||
|
||||
// Create a placeholder element for Vue component
|
||||
const vueContainer = document.createElement('div')
|
||||
vueContainer.setAttribute('data-service', service)
|
||||
vueContainer.setAttribute('data-video-id', this.data.source)
|
||||
|
||||
// Append the Vue placeholder
|
||||
container.appendChild(vueContainer)
|
||||
console.log(source)
|
||||
// Mount the Vue component (using a global Vue instance)
|
||||
const app = createApp(VideoBlock, {
|
||||
file: source,
|
||||
type: 'video/youtube',
|
||||
})
|
||||
app.mount(vueContainer)
|
||||
}
|
||||
|
||||
return container
|
||||
}
|
||||
}
|
||||
@@ -4,12 +4,12 @@ import { Quiz } from '@/utils/quiz'
|
||||
import { Upload } from '@/utils/upload'
|
||||
import Header from '@editorjs/header'
|
||||
import Paragraph from '@editorjs/paragraph'
|
||||
import Embed from '@editorjs/embed'
|
||||
import { CodeBox } from '@/utils/code'
|
||||
import NestedList from '@editorjs/nested-list'
|
||||
import InlineCode from '@editorjs/inline-code'
|
||||
import { watch } from 'vue'
|
||||
import { watch, createApp } from 'vue'
|
||||
import dayjs from '@/utils/dayjs'
|
||||
import Embed from '@editorjs/embed'
|
||||
|
||||
export function createToast(options) {
|
||||
toast({
|
||||
@@ -167,6 +167,7 @@ export function getEditorTools() {
|
||||
youtube: true,
|
||||
vimeo: true,
|
||||
codepen: true,
|
||||
aparat: true,
|
||||
slides: {
|
||||
regex: /https:\/\/docs\.google\.com\/presentation\/d\/e\/([A-Za-z0-9_-]+)\/pub/,
|
||||
embedUrl:
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
import AudioBlock from '@/components/AudioBlock.vue'
|
||||
import VideoBlock from '@/components/VideoBlock.vue'
|
||||
import { createApp } from 'vue'
|
||||
|
||||
export class Upload {
|
||||
constructor({ data, api, readOnly }) {
|
||||
this.data = data
|
||||
@@ -10,19 +14,23 @@ export class Upload {
|
||||
|
||||
render() {
|
||||
this.wrapper = document.createElement('div')
|
||||
this.wrapper.innerHTML = this.renderUpload(this.data)
|
||||
this.renderUpload(this.data)
|
||||
return this.wrapper
|
||||
}
|
||||
|
||||
renderUpload(file) {
|
||||
if (this.isVideo(file.file_type)) {
|
||||
return `<video controls width='100%' controlsList='nodownload' class="mb-4" oncontextmenu="return false;">
|
||||
<source src=${encodeURI(file.file_url)} type='video/mp4'>
|
||||
</video>`
|
||||
const app = createApp(VideoBlock, {
|
||||
file: file.file_url,
|
||||
})
|
||||
app.mount(this.wrapper)
|
||||
return
|
||||
} else if (this.isAudio(file.file_type)) {
|
||||
return `<audio controls width='100%' controls controlsList='nodownload' class="mb-4">
|
||||
<source src=${encodeURI(file.file_url)} type='audio/mp3'>
|
||||
</audio>`
|
||||
const app = createApp(AudioBlock, {
|
||||
file: file.file_url,
|
||||
})
|
||||
app.mount(this.wrapper)
|
||||
return
|
||||
} else if (file.file_type == 'pdf') {
|
||||
return `<iframe src="${encodeURI(
|
||||
file.file_url
|
||||
|
||||
Reference in New Issue
Block a user