feat: video player

2024-06-12 10:27:33 +05:30
parent 1f466482f8
commit 231f2cbc14
4 changed files with 270 additions and 8 deletions
--- a/2
+++ b/2
--- a/frontend/src/components/AudioBlock.vue
+++ b/frontend/src/components/AudioBlock.vue
@@ -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>
--- a/frontend/src/components/VideoBlock.vue
+++ b/frontend/src/components/VideoBlock.vue
@@ -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>
--- a/frontend/src/utils/upload.js
+++ b/frontend/src/utils/upload.js
@@ -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