Michcio/FoundKey-0x7f
1
1
Fork 0
forked from FoundKeyGang/FoundKey
Code Pull requests Releases Activity

instead of ref

Browse source
This commit is contained in:
Puniko 2023-02-19 15:27:20 +01:00
parent b85e60df0f
commit 98acca0a31
1 changed files with 29 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
packages/client/src/components/wavesurfer.vue
View file

@ -22,7 +22,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted } from 'vue'; import { onMounted } from 'vue';
import * as foundkey from 'foundkey-js'; import * as foundkey from 'foundkey-js';
import WaveSurfer from 'wavesurfer.js'; import WaveSurfer from 'wavesurfer.js';
import Cursor from 'wavesurfer.js/dist/plugin/wavesurfer.cursor'; import Cursor from 'wavesurfer.js/dist/plugin/wavesurfer.cursor';
@ -31,19 +31,19 @@ const props = defineProps<{
src: foundkey.entities.DriveFile src: foundkey.entities.DriveFile
}>(); }>();
let playing = ref(false); let playing = $ref(false);
let position = ref(0); let position = $ref(0);
let volume = ref(1); let volume = $ref(1);
let isSeeking = ref(false); let isSeeking = $ref(false);
let duration = ref(1); let duration = $ref(1);
let display = ref<HTMLDivElement>(null); let display = $ref<HTMLDivElement>(null);
let player = ref(null); let player = $ref(null);
const theme = JSON.parse(localStorage.theme); const theme = JSON.parse(localStorage.theme);
onMounted(() => { onMounted(() => {
player.value = WaveSurfer.create({ player = WaveSurfer.create({
container: display.value, container: display,
barGab: 1, barGab: 1,
barWidth: 2, barWidth: 2,
barRadius: 2, barRadius: 2,
@ -61,20 +61,20 @@ onMounted(() => {
] ]
}); });
player.value.load(props.src.url); player.load(props.src.url);
player.value.on('ready', () => { player.on('ready', () => {
volume.value = player.value.getVolume(); volume = player.getVolume();
duration.value = player.value.getDuration(); duration = player.getDuration();
}); });
player.value.on('finish', () => { player.on('finish', () => {
playing.value = player.value.isPlaying(); playing = player.isPlaying();
}); });
player.value.on('audioprocess', () => { player.on('audioprocess', () => {
if (!isSeeking.value) { if (!isSeeking) {
position.value = player.value.getCurrentTime(); position = player.getCurrentTime();
} }
}); });
}); });
@ -92,26 +92,26 @@ function formatTime(value) {
} }
function playPause() { function playPause() {
player.value.playPause(); player.playPause();
playing.value = player.value.isPlaying(); playing = player.isPlaying();
} }
function stop() { function stop() {
player.value.stop(); player.stop();
playing.value = player.value.isPlaying(); playing = player.isPlaying();
} }
function initSeek() { function initSeek() {
isSeeking.value = true; isSeeking = true;
if (playing.value) { if (playing) {
player.value.playPause(); player.playPause();
} }
} }
function endSeek() { function endSeek() {
isSeeking.value = false; isSeeking = false;
if (playing.value) { if (playing) {
player.value.playPause(); player.playPause();
} }
} }