Waveform component playtime click loses precision in smaller sizes

[juan-carvajal]

Hi! first I wanted to thank you for your library. It has proven very useful in the last few days and I have been able to build cool stuff with it. I am currently using your waveform component to integrate a player into my site. Like this: Nothing weird there, the waveform behaves as expected. The problem comes when I test the component in smaller screen sizes.

When I reduce the screen size, a click, let's say in the middle of the waveform, put the playtime at 25 %, something like this: (You can see where I clicked with the star icon, but the playtime went far behind that.

As I intend to use the site mostly in mobile devices this may be an major inconvenience, do you happen to know any workarounds?

[staskobzar]

Hello, This is probably because the dimensions inside the component are not recalculated. Is it ok when you reload the page after resize?

[juan-carvajal]

Hello, This is probably because the dimensions inside the component are not recalculated. Is it ok when you reload the page after resize?

Nope, that example right there was with the site refreshed.

[staskobzar]

I can not recreate this problem. When I go to the demo site and change the page size or dimensions with google chrome dev tools everything works as expected. Provide you code or exact steps on how to reproduce it. thanks

[juan-carvajal]

I can not recreate this problem. When I go to the demo site and change the page size or dimensions with google chrome dev tools everything works as expected. Provide you code or exact steps on how to reproduce it. thanks

This is my vue components (this component is then used inside other components such as cards and dialogs.

The fit class applied to the canvas is just 100% on both width and height.

I am running Vue3 with typescript.

<template>
  <div v-if="audioSource">
    <audio
      ref="audioRef"
      style="display: none"
      crossorigin="anonymous"
      :src="audioSource"
      autoplay
    ></audio>
    <av-waveform
      line-color="lime"
      canv-class="fit"
      ref-link="audioRef"
      playtime-font-family="Roboto"
    ></av-waveform>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  props: {
    audioSource: {
      type: String,
      required: true,
    },
  },
  setup() {
    const audioRef = ref<HTMLAudioElement>();

    function playAudio() {
      if (audioRef.value) {
        audioRef.value.play().catch((err) => {
          console.log(err);
          console.log(audioRef.value);
        });
      }
    }

    function stopAudio() {
      if (audioRef.value) {
        void audioRef.value.pause();
      }
    }

    return { audioRef, playAudio, stopAudio };
  },
  watch: {
    audioSource: {
      immediate: true,
      handler(value: string) {
        if (!value) {
          return;
        }

        this.playAudio();
      },
    },
  },
});
</script>

<style></style>