Merge pull request #394 from Tresjs/chore/lint

chore: fix linter errors
Tresjs · May 2, 2024 · aa6b479 · aa6b479
2 parents 26d2831 + 0b4971b
commit aa6b479
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 82 deletions.
diff --git a/docs/.vitepress/theme/components/PositionalAudioDemo.vue b/docs/.vitepress/theme/components/PositionalAudioDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, shallowRef, onUnmounted, watch, onMounted } from 'vue'
+import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, PositionalAudio, Sphere, useGLTF } from '@tresjs/cientos'
 import { TresLeches, useControls } from '@tresjs/leches'
@@ -39,11 +39,10 @@ const { helper, innerAngle, outerAngle, outerGain } = useControls({
     value: 0.3,
     min: 0,
     max: 1,
-    step: .01,
+    step: 0.01,
   },
 })
 
-// eslint-disable-next-line max-len
 const model = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/positional-audio/ping-pong.glb', { draco: true })
 
 const onBallBounce = () => {
@@ -59,17 +58,17 @@ watch(helper.value, () => {
 })
 
 watch([ballRef, ready], ([ball]) => {
-  if (!ball?.value || !ready.value) return
+  if (!ball?.value || !ready.value) { return }
 
   ctx.add(() => {
     tl = gsap
       .timeline({ repeat: -1, yoyo: true, onRepeat: onBallBounce })
-      .to(ball.value.position, { y: 0, ease: 'power1.in', duration: .35 })
+      .to(ball.value.position, { y: 0, ease: 'power1.in', duration: 0.35 })
   })
 })
 
 onMounted(() => {
-  ctx = gsap.context((self) => { }, ballRef?.value)
+  ctx = gsap.context((_) => { }, ballRef?.value)
 })
 
 onUnmounted(() => {
@@ -158,7 +157,7 @@ onUnmounted(() => {
   height: 100%;
   position: absolute;
   z-index: 24;
-  background-color: rgba(0, 0, 0, .75);
+  background-color: rgba(0, 0, 0, 0.75);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -180,7 +179,7 @@ onUnmounted(() => {
 .ready button,
 .controls button {
   padding: 5px 10px;
-  background: #1B1C1E;
+  background: #1b1c1e;
   border: 1px solid #161618;
 }
-</style>
+</style>
diff --git a/docs/guide/abstractions/positional-audio.md b/docs/guide/abstractions/positional-audio.md
@@ -16,8 +16,8 @@ The `<PositionalAudio>` component is very simple to set up and use, allowing you
 
 ```vue
 <script setup lang="ts">
-import { shallowRef, onUnmounted } from 'vue'
-import { PositionalAudio, Box } from '@tresjs/cientos'
+import { onUnmounted, shallowRef } from 'vue'
+import { Box, PositionalAudio } from '@tresjs/cientos'
 
 const positionalAudioRef = shallowRef(null)
 
@@ -34,7 +34,7 @@ onUnmounted(() => {
         <PositionalAudio
           ref="positionalAudioRef"
           url="your-sound.mp3"
-        /> 
+        />
       </Suspense>
     </Box>
   </TresCanvas>
@@ -73,7 +73,6 @@ If you are sure that there will be a user gesture before your `<PositionAudio>`
 | `stop()` | Stop audio — *Cannot be fired if audio is already stopped.* |
 | `dispose()` | Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists). |
 
-
 ```typescript{1,3,8}
 const positionalAudioRef = shallowRef(null)
 
@@ -110,4 +109,4 @@ const handlerAudio = (action: string) => {
 
 | Event       | Description                                                      |
 | :---------- | :--------------------------------------------------------------- |
-| `is-playing` | Triggered when the audio changes its state (play, pause, or stop) <br> `@is-playing="(e) => yourIsPlayingRef = e"` |
+| `is-playing` | Triggered when the audio changes its state (play, pause, or stop) <br> `@is-playing="(e) => yourIsPlayingRef = e"` |
diff --git a/playground/src/pages/abstractions/PositionalAudio.vue b/playground/src/pages/abstractions/PositionalAudio.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, PositionalAudio, Box } from '@tresjs/cientos'
+import { Box, OrbitControls, PositionalAudio } from '@tresjs/cientos'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -13,7 +13,7 @@ const positionalAudioIsPlaying = ref(false)
 const positionalAudioRef = shallowRef(null)
 
 const handlerAudio = (action: string) => {
-  if (!positionalAudioRef.value) return
+  if (!positionalAudioRef.value) { return }
 
   const { play, pause, stop } = positionalAudioRef.value
 
@@ -112,7 +112,7 @@ const onContinue = () => {
   height: 100%;
   position: fixed;
   z-index: 1;
-  background-color: rgba(0, 0, 0, .75);
+  background-color: rgba(0, 0, 0, 0.75);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -131,7 +131,8 @@ const onContinue = () => {
   column-gap: 5px;
 }
 
-.playground-positional-audio__controls-methods, .playground-positional-audio__controls-events {
+.playground-positional-audio__controls-methods,
+.playground-positional-audio__controls-events {
   display: flex;
   align-items: center;
   backdrop-filter: blur(5px);
@@ -143,4 +144,4 @@ const onContinue = () => {
 .playground-positional-audio__controls button {
   padding: 5px 10px;
 }
-</style>
+</style>
diff --git a/src/core/abstractions/PositionalAudio.vue b/src/core/abstractions/PositionalAudio.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onBeforeUnmount, shallowRef, watch, toRefs, shallowReactive, onMounted } from 'vue'
-import { Box3, AudioLoader, AudioListener, type PositionalAudio } from 'three'
-import { useTresContext, useLoader } from '@tresjs/core'
+import { onBeforeUnmount, onMounted, shallowReactive, shallowRef, toRefs, watch } from 'vue'
+import { AudioListener, AudioLoader, Box3, type PositionalAudio } from 'three'
+import { useLoader, useTresContext } from '@tresjs/core'
 import { PositionalAudioHelper } from 'three/examples/jsm/helpers/PositionalAudioHelper'
 
 // TODO: Add & Dynamize : setRolloffFactor 'FLOAT' from https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio.setRolloffFactor
@@ -43,35 +43,28 @@ const buffer = shallowRef<AudioBuffer | null>(null)
 const listener = shallowReactive<AudioListener>(new AudioListener())
 
 const playAudio = () => {
-  if (positionalAudioRef?.value?.isPlaying) return
-  
+  if (positionalAudioRef?.value?.isPlaying) { return }
+
   positionalAudioRef?.value?.play()
   emit('isPlaying', positionalAudioRef?.value?.isPlaying)
 }
 
 const pauseAudio = () => {
-  if (!positionalAudioRef?.value?.isPlaying) return
+  if (!positionalAudioRef?.value?.isPlaying) { return }
 
   positionalAudioRef.value.pause()
   emit('isPlaying', positionalAudioRef?.value?.isPlaying)
 }
 
 const stopAudio = () => {
-  if (!positionalAudioRef.value) return
+  if (!positionalAudioRef.value) { return }
 
   positionalAudioRef.value.stop()
   emit('isPlaying', positionalAudioRef?.value?.isPlaying)
 }
 
-const dispose = () => {
-  camera?.value?.remove(listener)
-  
-  disposeAudio()
-  disposeHelper()
-}
-
 const disposeAudio = () => {
-  if (!positionalAudioRef?.value) return
+  if (!positionalAudioRef?.value) { return }
 
   stopAudio()
 
@@ -82,6 +75,54 @@ const disposeAudio = () => {
   }
 }
 
+const disposeHelper = () => {
+  if (!positionalAudioRef?.value || !positionalAudioHelperRef?.value) { return }
+
+  positionalAudioHelperRef?.value?.dispose()
+  positionalAudioRef?.value?.remove(positionalAudioHelperRef?.value)
+}
+
+const updatePositionalAudio = () => {
+  if (!positionalAudioRef.value) { return }
+
+  positionalAudioRef.value.setBuffer(buffer.value)
+  positionalAudioRef.value.setRefDistance(distance.value)
+  positionalAudioRef.value.setLoop(loop.value)
+  positionalAudioRef.value.setDirectionalCone(innerAngle.value, outerAngle.value, outerGain.value)
+
+  positionalAudioHelperRef?.value?.update()
+
+  // Small hack to solve the visibility problem of material[0] inside the positionalAudioHelperRef function update()
+  // https://github.com/mrdoob/three.js/blob/ef80ac74e6716a50104a57d8add6c8a950bff8d7/examples/jsm/helpers/PositionalAudioHelper.js#L94C49-L94C57
+  if (positionalAudioHelperRef?.value) {
+    const material = positionalAudioHelperRef.value.material[0]
+    const materialVisible = material.visible
+
+    if (!materialVisible && outerAngle.value !== innerAngle.value) {
+      material.visible = true
+    }
+  }
+}
+
+const createHelper = () => {
+  updatePositionalAudio()
+
+  const parent = positionalAudioRef.value?.parent
+  const boxParent = new Box3().setFromObject(parent)
+  const depthParent = (boxParent.max.z - boxParent.min.z) * 2
+
+  positionalAudioHelperRef.value = new PositionalAudioHelper(positionalAudioRef.value, depthParent, 32, 16)
+  positionalAudioRef?.value?.add(positionalAudioHelperRef.value)
+  positionalAudioHelperRef.value.update()
+}
+
+const dispose = () => {
+  camera?.value?.remove(listener)
+
+  disposeAudio()
+  disposeHelper()
+}
+
 defineExpose({
   root: positionalAudioRef,
   play: playAudio,
@@ -93,10 +134,10 @@ defineExpose({
 buffer.value = await useLoader(AudioLoader, url.value)
 
 watch(positionalAudioRef, () => {
-  if (!positionalAudioRef?.value) return
+  if (!positionalAudioRef?.value) { return }
 
-  if (helper.value) createHelper()
-  if (ready.value && autoplay) playAudio()
+  if (helper.value) { createHelper() }
+  if (ready.value && autoplay) { playAudio() }
 })
 
 watch(helper, () => {
@@ -109,10 +150,10 @@ watch(helper, () => {
 })
 
 watch(ready, () => {
-  if (ready.value) updatePositionalAudio()
+  if (ready.value) { updatePositionalAudio() }
 
-  if (autoplay.value && ready.value) playAudio()
-  if (!autoplay.value && ready.value) stopAudio()
+  if (autoplay.value && ready.value) { playAudio() }
+  if (!autoplay.value && ready.value) { stopAudio() }
 })
 
 watch([distance, loop, buffer, innerAngle, outerAngle, outerGain, autoplay], () => {
@@ -126,47 +167,6 @@ onMounted(() => {
 onBeforeUnmount(() => {
   dispose()
 })
-
-const updatePositionalAudio = () => {
-  if (!positionalAudioRef.value) return
-
-  positionalAudioRef.value.setBuffer(buffer.value)
-  positionalAudioRef.value.setRefDistance(distance.value)
-  positionalAudioRef.value.setLoop(loop.value)
-  positionalAudioRef.value.setDirectionalCone(innerAngle.value, outerAngle.value, outerGain.value)
-
-  positionalAudioHelperRef?.value?.update()
-
-  // Small hack to solve the visibility problem of material[0] inside the positionalAudioHelperRef function update()
-  // https://github.com/mrdoob/three.js/blob/ef80ac74e6716a50104a57d8add6c8a950bff8d7/examples/jsm/helpers/PositionalAudioHelper.js#L94C49-L94C57
-  if (positionalAudioHelperRef?.value) {
-    const material = positionalAudioHelperRef.value.material[0]
-    const materialVisible = material.visible
-
-    if (!materialVisible && outerAngle.value !== innerAngle.value) {
-      material.visible = true
-    }
-  }
-}
-
-const createHelper = () => {
-  updatePositionalAudio()
-
-  const parent = positionalAudioRef.value?.parent
-  const boxParent = new Box3().setFromObject(parent)
-  const depthParent = (boxParent.max.z - boxParent.min.z) * 2
-
-  positionalAudioHelperRef.value = new PositionalAudioHelper(positionalAudioRef.value, depthParent, 32, 16)
-  positionalAudioRef?.value?.add(positionalAudioHelperRef.value)
-  positionalAudioHelperRef.value.update()
-}
-
-const disposeHelper = () => {
-  if (!positionalAudioRef?.value || !positionalAudioHelperRef?.value) return
-
-  positionalAudioHelperRef?.value?.dispose()
-  positionalAudioRef?.value?.remove(positionalAudioHelperRef?.value)
-}
 </script>
 
 <template>
@@ -175,4 +175,4 @@ const disposeHelper = () => {
     :args="[listener]"
     v-bind="$attrs"
   />
-</template>
+</template>