feat: remove pauseTrigger, now play-trigger element also work for pau…

…se state when is playing
Tresjs · Oct 5, 2023 · 6973f23 · 6973f23
1 parent 535801d
commit 6973f23
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 57 deletions.
diff --git a/docs/guide/abstractions/global-audio.md b/docs/guide/abstractions/global-audio.md
@@ -20,20 +20,21 @@ import { GlobalAudio } from '@tresjs/cientos'
 </template>
 ```
 
+*The `src` prop is required
+
 ## Props
 
-| Prop           | Description                                         | Default               |
-| :------------- | :-------------------------------------------------- | --------------------- |
-| `src`          | Path to your audio file                             |                       |
-| `playElement`  | Id of the DOM element that triggers the play state  | `renderer.domElement` |
-| `pauseElement` | Id of the DOM element that triggers the pause state |                       |
-| `stopElement`  | Id of the DOM element that triggers the stop state  |                       |
-| `loop`         | If the audio must be replayed when ends             | `false`               |
-| `volume`       | Volume of the audio                                 | `0.5`                 |
-| `playbackRate` | PlaybackRate of the audio                           | `1`                   |
+| Prop           | Description                                              | Default               |
+| :------------- | :------------------------------------------------------- | --------------------- |
+| `src`          | Path to your audio file                                  |                       |
+| `playTrigger`  | Id of the DOM element that triggers the play/pause state | `renderer.domElement` |
+| `stopTrigger`  | Id of the DOM element that triggers the stop state       |                       |
+| `loop`         | If the audio must be replayed when ends                  | `false`               |
+| `volume`       | Volume of the audio                                      | `0.5`                 |
+| `playbackRate` | PlaybackRate of the audio                                | `1`                   |
 
 ## Events
 
-| Event       | Description                                                       |
-| :---------- | :---------------------------------------------------------------- |
-| `isPlaying` | Dispatched when the Audio change its state (play, pause or stop)  |
+| Event       | Description                                                      |
+| :---------- | :--------------------------------------------------------------- |
+| `isPlaying` | Dispatched when the Audio change its state (play, pause or stop) |
diff --git a/playground/src/pages/abstractions/GlobalAudioDemo.vue b/playground/src/pages/abstractions/GlobalAudioDemo.vue
@@ -1,51 +1,44 @@
 <script setup lang="ts">
+import { shallowRef, watch } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { GlobalAudio } from '@tresjs/cientos'
-import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
 
 const exampleAudio
   = 'https://raw.githubusercontent.com/Tresjs/assets/main/music/sunny-afternoon.mp3'
 
-const gl = {
-  clearColor: '#82DBC5',
-  alpha: false,
-}
-const options = useControls({
-  volume: { value: 0.5, min: 0, max: 3, step: 0.1 },
-  playbackRate: { value: 0.5, min: 0, max: 3, step: 0.1 },
+const isPlaying = shallowRef(false)
+const sound = shallowRef(false)
+
+watch(sound, (value) => {
+  console.log(value)
 })
 </script>
 
 <template>
-  <TresLeches />
   <div class="floating-controls">
-    <button id="pauseBtn">
-      Pause
-    </button>
     <button id="playBtn">
-      Play
+      {{ !isPlaying ? 'Play' : 'Pause' }}
     </button>
     <button id="stopBtn">
       Stop
     </button>
   </div>
-  <TresCanvas v-bind="gl">
+  <TresCanvas clear-color="#82DBC5">
     <TresPerspectiveCamera
       :position="[0, 0, 7.5]"
       :fov="75"
       :near="0.1"
       :far="1000"
     />
     <GlobalAudio
+      ref="sound"
       :src="exampleAudio"
       :volume="0.5"
-      :loop="false"
+      :loop="true"
       :playback-rate="1"
-      play-element="playBtn"
-      pause-element="pauseBtn"
-      stop-element="stopBtn"
-      @is-playing="(e) => console.log('isPlaying', e)"
+      play-trigger="playBtn"
+      stop-trigger="stopBtn"
+      @is-playing="(e) => isPlaying = e"
     />
   </TresCanvas>
 </template>

diff --git a/src/core/abstractions/GlobalAudio.ts b/src/core/abstractions/GlobalAudio.ts
@@ -12,29 +12,21 @@ export interface AudioProps {
    */
   src: string
   /**
-   * Id of the DOM element that trigger the play state.
+   * Id of the DOM element that trigger the play/pause state.
    * @type {string}
    * @memberof AudioProps
    * @default renderer.domElement
    *
    */
-  playElement?: string
-  /**
-   * Id of the DOM element that trigger the pause state.
-   * @type {string}
-   * @memberof AudioProps
-   * @default
-   *
-   */
-  pauseElement?: string
+  playTrigger?: string
   /**
    * Id of the DOM element that trigger the stop state.
    * @type {string}
    * @memberof AudioProps
    * @default
    *
    */
-  stopElement?: string
+  stopTrigger?: string
   /**
    * If the audio must be replayed when ends.
    * @type {boolean}
@@ -69,9 +61,8 @@ export const GlobalAudio = defineComponent<AudioProps>({
     'loop',
     'volume',
     'playbackRate',
-    'playElement',
-    'pauseElement',
-    'stopElement',
+    'playTrigger',
+    'stopTrigger',
   ] as unknown as undefined,
 
   async setup(props, { expose, emit }) {
@@ -101,22 +92,17 @@ export const GlobalAudio = defineComponent<AudioProps>({
 
     }, { immediate: true })
 
-    const selector = document.getElementById(props.playElement ?? '')
+    const selector = document.getElementById(props.playTrigger ?? '')
     const btnPlay = selector ? selector : renderer.value.domElement
     useEventListener(btnPlay, 'click', () => {
-      sound.play()
+      if (sound.isPlaying) {
+        sound.pause()
+      }
+      else sound.play()
       emit('isPlaying', sound.isPlaying)
     })
 
-    const btnPause = document.getElementById(props.pauseElement ?? '')
-    if (btnPause) {
-      useEventListener(btnPause, 'click', () => {
-        sound.pause()
-        emit('isPlaying', sound.isPlaying)
-      })
-    }
-
-    const btnStop = document.getElementById(props.stopElement ?? '')
+    const btnStop = document.getElementById(props.stopTrigger ?? '')
     if (btnStop) {
       useEventListener(btnStop, 'click', () => {
         sound.stop()