feat: video player
This commit is contained in:
Jannat Patel
117
frontend/src/components/AudioBlock.vue
Normal file
117
frontend/src/components/AudioBlock.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<audio width="100%" controls controlsList="nodownload" class="mb-4">
|
||||
<source :src="encodeURI(file)" type="audio/mp3" />
|
||||
</audio>
|
||||
<audio width="100%" controlsList="nodownload" class="mb-4">
|
||||
<source :src="encodeURI(file)" type="audio/mp3" />
|
||||
</audio>
|
||||
<div class="flex items-center space-x-4 p-2 shadow rounded-2xl">
|
||||
<Button variant="ghost" @click="togglePlay">
|
||||
<template #icon>
|
||||
<Play v-if="!isPlaying" class="w-4 h-4 fill-gray-900" />
|
||||
<Pause v-else class="w-4 h-4 fill-gray-900" />
|
||||
</template>
|
||||
</Button>
|
||||
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
:max="duration"
|
||||
step="0.1"
|
||||
v-model="currentTime"
|
||||
@input="changeCurrentTime"
|
||||
class="duration-slider"
|
||||
/>
|
||||
<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 fill-gray-900" />
|
||||
<VolumeX v-else class="w-4 h-4 fill-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 volume = ref(1)
|
||||
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 = () => {
|
||||
console.log(audio.value.duration)
|
||||
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 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;
|
||||
height: 0.25rem;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: theme('colors.gray.400');
|
||||
}
|
||||
|
||||
.duration-slider::-moz-range-track {
|
||||
background: theme('colors.gray.900');
|
||||
}
|
||||
</style>
|
||||
137
frontend/src/components/VideoBlock.vue
Normal file
137
frontend/src/components/VideoBlock.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div ref="videoContainer" class="video-block group relative">
|
||||
<video @ended="videoEnded" class="rounded-lg">
|
||||
<source :src="file" type="video/mp4" />
|
||||
</video>
|
||||
<div
|
||||
class="flex items-center space-x-4 bg-gray-200 rounded-2xl p-0.5 absolute bottom-3 w-[98%] invisible group-hover:visible left-0 right-0 mx-auto"
|
||||
>
|
||||
<Button variant="ghost">
|
||||
<template #icon>
|
||||
<Play
|
||||
v-if="!playing"
|
||||
@click="playVideo"
|
||||
class="w-4 h-4 fill-gray-900"
|
||||
/>
|
||||
<Pause v-else @click="pauseVideo" class="w-4 h-4 fill-gray-900" />
|
||||
</template>
|
||||
</Button>
|
||||
<span class="text-xs font-medium">
|
||||
{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
:max="duration"
|
||||
step="0.1"
|
||||
v-model="currentTime"
|
||||
@input="changeTime"
|
||||
class="duration-slider"
|
||||
/>
|
||||
<Button variant="ghost" @click="toggleMute">
|
||||
<template #icon>
|
||||
<Volume2 v-if="!muted" class="w-4 h-4 fill-gray-900" />
|
||||
<VolumeX v-else class="w-4 h-4 fill-gray-900" />
|
||||
</template>
|
||||
</Button>
|
||||
<Button variant="ghost" @click="toggleFullscreen">
|
||||
<template #icon>
|
||||
<Maximize class="w-4 h-4 fill-gray-900" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } 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,
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
videoRef.value = document.querySelector('video')
|
||||
videoRef.value.onloadedmetadata = loadedMetaData
|
||||
videoRef.value.ontimeupdate = updateTime
|
||||
}, 0)
|
||||
})
|
||||
|
||||
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 changeTime = () => {
|
||||
videoRef.value.currentTime = currentTime.value
|
||||
}
|
||||
|
||||
const loadedMetaData = () => {
|
||||
duration.value = videoRef.value.duration
|
||||
}
|
||||
|
||||
const updateTime = () => {
|
||||
currentTime.value = videoRef.value.currentTime
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.duration-slider {
|
||||
flex: 1;
|
||||
height: 0.25rem;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: theme('colors.gray.400');
|
||||
}
|
||||
</style>
|
||||
@@ -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