Merge pull request #140 from nickhsine/tsp

refactor(tsp): play audio if in the viewport
readr-media · Mar 16, 2023 · 3b71792 · 3b71792
2 parents 5608031 + de27d86
commit 3b71792
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 29 deletions.
diff --git a/packages/three-story-points/package.json b/packages/three-story-points/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "gsap": "^3.11.4",
     "lodash": "^4.17.21",
+    "react-intersection-observer": "^9.3.5",
     "three": "^0.150.1",
     "three-story-controls": "^1.0.6"
   },

diff --git a/packages/three-story-points/src/react-components/audio.js b/packages/three-story-points/src/react-components/audio.js
@@ -128,17 +128,18 @@ function useMuted(initialValue = true) {
 
 /**
  *  @param {Object} opts
+ *  @param {boolean} opts.play
  *  @param {string[]} opts.audioUrls
  *  @param {string} [opts.preload='auto'] - 'auto', 'none' or 'metadata'. `preload` attribute of `audio` tag.
  */
-export default function Audio({ audioUrls, preload = 'auto' }) {
+export default function Audio({ play, audioUrls, preload = 'auto' }) {
   const audioRef = useRef(null)
   const muted = useMuted(true)
 
   useEffect(() => {
     const audio = audioRef.current
     // Do not need to play audio if `muted` is true.
-    if (!audio || muted) {
+    if (!audio || muted || !play) {
       return
     }
 
@@ -170,7 +171,7 @@ export default function Audio({ audioUrls, preload = 'auto' }) {
         audio.pause()
       }
     }
-  }, [muted])
+  }, [muted, play])
 
   return (
     <audio ref={audioRef} preload={preload}>

diff --git a/packages/three-story-points/src/react-components/index.js b/packages/three-story-points/src/react-components/index.js
@@ -14,6 +14,7 @@ import {
 } from 'three'
 import { loadGltfModel } from '../loader.js'
 import { useState, useEffect, useRef, useMemo } from 'react'
+import { useInView } from 'react-intersection-observer'
 
 const _ = {
   throttle,
@@ -243,9 +244,13 @@ export default function ThreeStoryPoints({
   pois: plainPois = [],
   debugMode = false,
 }) {
+  const containerRef = useRef(null)
   const [leftOffset, setLeftOffset] = useState(0)
   const [models, setModels] = useState([])
   const [poiIndex, setPoiIndex] = useState(0)
+  const [inViewRef, inView] = useInView({
+    threshold: [0.6],
+  })
 
   /** @type POI[] */
   const pois = useMemo(() => {
@@ -262,7 +267,6 @@ export default function ThreeStoryPoints({
     })
   }, [plainPois])
 
-  const containerRef = useRef(null)
   const canvasRef = useRef(null)
   const threeObj = useMemo(() => createThreeObj(models, pois, canvasRef), [
     models,
@@ -376,30 +380,33 @@ export default function ThreeStoryPoints({
   }, [threeObj])
 
   return (
-    <Block leftOffset={leftOffset} ref={containerRef}>
-      <canvas ref={canvasRef}></canvas>
-      {poiIndex > 0 ? (
-        <PrevNav
-          onClick={() => {
-            threeObj.controls.prevPOI()
-          }}
-        />
-      ) : null}
-      {poiIndex < pois.length - 1 ? (
-        <NextNav
-          onClick={() => {
-            threeObj.controls.nextPOI()
-          }}
-        />
-      ) : null}
-      <Caption>{captions[poiIndex]}</Caption>
-      {audios?.[poiIndex]?.urls && (
-        <Audio
-          key={poiIndex}
-          audioUrls={audios?.[poiIndex]?.urls}
-          preload={audios?.[poiIndex]?.preload}
-        />
-      )}
+    <div ref={inViewRef}>
+      <Block leftOffset={leftOffset} ref={containerRef}>
+        <canvas ref={canvasRef}></canvas>
+        {poiIndex > 0 ? (
+          <PrevNav
+            onClick={() => {
+              threeObj.controls.prevPOI()
+            }}
+          />
+        ) : null}
+        {poiIndex < pois.length - 1 ? (
+          <NextNav
+            onClick={() => {
+              threeObj.controls.nextPOI()
+            }}
+          />
+        ) : null}
+        <Caption>{captions[poiIndex]}</Caption>
+        {audios?.[poiIndex]?.urls && (
+          <Audio
+            key={poiIndex}
+            play={inView}
+            audioUrls={audios?.[poiIndex]?.urls}
+            preload={audios?.[poiIndex]?.preload}
+          />
+        )}
+      </Block>
       {debugMode && (
         <AudioPlayButton
           onClick={() => {
@@ -411,6 +418,6 @@ export default function ThreeStoryPoints({
           播放聲音
         </AudioPlayButton>
       )}
-    </Block>
+    </div>
   )
 }