feat: add Ban interaction feature

Author: codeacme17

example/src/components/Demo.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watchEffect, defineProps } from "vue"
-import type { Ref } from "vue"
-import { IllestWaveform } from "1llest-waveform-vue"
-import type { IllestWaveformProps } from "1llest-waveform-vue"
-import "1llest-waveform-vue/dist/style.css"
-import PlayIcon from "./icons/Play.vue"
-import PauseIcon from "./icons/Pause.vue"
-import ReplayIcon from "./icons/Replay.vue"
-
-const { props } = defineProps(["props"])
+import { onMounted, reactive, ref, watchEffect, defineProps } from 'vue'
+import type { Ref } from 'vue'
+// import { IllestWaveform } from '1llest-waveform-vue'
+import IllestWaveform from '../../../src/components/IllestWaveform.vue'
+import type { IllestWaveformProps } from '1llest-waveform-vue'
+import '1llest-waveform-vue/dist/style.css'
+import PlayIcon from './icons/Play.vue'
+import PauseIcon from './icons/Pause.vue'
+import ReplayIcon from './icons/Replay.vue'
+
+const { props } = defineProps(['props'])
 
 const waveOptions = reactive<IllestWaveformProps>({
   url: props.url,
@@ -24,8 +25,8 @@ const init = ref(false)
 const playing = ref(false)
 const finished = ref(false)
 const ready = ref(false)
-const currentTime = ref("0:00")
-const durationTime = ref("0:00")
+const currentTime = ref('0:00')
+const durationTime = ref('0:00')
 
 const initHandler = (v: boolean) => {
   init.value = v
@@ -92,24 +93,24 @@ const getDuration = () => {
 
       <div class="ml-5">
         <button
-          @click="play"
-          class="btn text-[#3e6bff]"
           v-show="!playing && !finished"
+          class="btn text-[#3e6bff]"
+          @click="play"
         >
           <PlayIcon />
           <div class="ml-2">PLAY</div>
         </button>
 
         <button
-          @click="pause"
-          class="btn text-yellow-500"
           v-show="playing && !finished"
+          class="btn text-yellow-500"
+          @click="pause"
         >
           <PauseIcon />
           <div>PAUSE</div>
         </button>
 
-        <button @click="replay" class="btn text-green-500" v-show="finished">
+        <button v-show="finished" class="btn text-green-500" @click="replay">
           <ReplayIcon />
           <div>REPLAY</div>
         </button>

src/components/IllestWaveform.vue

@@ -24,6 +24,7 @@ type IllestWaveformProps = {
   lazy?: boolean
   skeleton?: boolean
   skeletonColor?: string
+  interact?: boolean
 }
 
 const props = withDefaults(defineProps<IllestWaveformProps>(), {
@@ -37,6 +38,7 @@ const props = withDefaults(defineProps<IllestWaveformProps>(), {
   lazy: true,
   skeleton: true,
   skeletonColor: '#232323',
+  interact: true,
 })
 
 // Render trigger can control the render time
@@ -135,12 +137,12 @@ function drawWaveMask(): void | undefined {
 }
 
 function mouseMoveHandler(e: any): void {
-  if (!ready.value) return
+  if (!ready.value || !props.interact) return
   moveX.value = e.layerX
 }
 
 function clickHandler(): void {
-  if (!ready.value) return
+  if (!ready.value || !props.interact) return
   maskWidth.value = moveX.value
   const pickedTime: number =
     (moveX.value / wave._canvas.width) * webAudioController._audioDuration
@@ -213,7 +215,6 @@ defineExpose({
   <section
     id="ill-wave-container"
     ref="waveformContainer"
-    :style="`${!ready ? 'cursor: progress;' : 'cursor: pointer'}`"
     @mousemove="mouseMoveHandler"
     @click="clickHandler"
   >
@@ -238,7 +239,7 @@ defineExpose({
     </div>
 
     <div
-      v-show="ready"
+      v-show="ready && props.interact"
       id="ill-cursor"
       :style="`width:${props.cursorWidth}px; transform: translateX(${moveX}px);background-color: ${props.cursorColor}; `"
     />
@@ -302,6 +303,7 @@ defineExpose({
   top: 0px;
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
+  cursor: pointer;
 }
 
 #ill-wave-container:hover #ill-cursor {

src/types/waveform.ts

@@ -10,4 +10,5 @@ export type IllestWaveformProps = {
   lazy?: boolean
   skeleton?: boolean
   skeletonColor?: string
+  interact?: boolean
 }