eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: video player

Browse Source
This commit is contained in:
Jannat Patel
2024-06-20 16:46:50 +05:30
parent 3ba8805413
commit 05e8513ad1
5 changed files with 159 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/components/AudioBlock.vue
View File

@@ -1,19 +1,20 @@
<template>
<div>
<audio width="100%" controls controlsList="nodownload" class="mb-4">
<!-- <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>
<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">
<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 fill-gray-900" />
<Pause v-else class="w-4 h-4 fill-gray-900" />
<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"
@@ -21,15 +22,15 @@
step="0.1"
v-model="currentTime"
@input="changeCurrentTime"
class="duration-slider"
class="duration-slider w-full h-1"
/>
<span class="text-xs text-gray-900 font-medium"
>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span
>
<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" />
<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>
@@ -44,7 +45,6 @@ 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)
@@ -60,7 +60,6 @@ onMounted(() => {
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 = () => {
@@ -88,6 +87,10 @@ 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)
@@ -105,13 +108,30 @@ watch(isPlaying, (newVal) => {
<style>
.duration-slider {
flex: 1;
height: 0.25rem;
-webkit-appearance: none;
appearance: none;
background-color: theme('colors.gray.400');
cursor: pointer;
}
.duration-slider::-moz-range-track {
background: theme('colors.gray.900');
.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>