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>
|
||||
Reference in New Issue
Block a user