Only show affordance of first 360 scene

NDLANO · Sep 20, 2024 · 3dd5743 · 3dd5743
1 parent 04ca6e2
commit 3dd5743
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/scripts/components/Main.js b/scripts/components/Main.js
@@ -61,6 +61,7 @@ export default class Main extends React.Component {
     };
 
     this.isVeryFirstRenderDone = this.props.isVeryFirstRenderDone ?? false;
+    this.show360Affordance = true; // No need to use state for this
 
     this.documentID = `document-dom-${H5P.createUUID()}`;
   }
@@ -964,6 +965,10 @@ export default class Main extends React.Component {
                 zoomOut={ this.onZoomOut.bind(this) }
                 maxZoomedIn={ this.state.maxZoomedIn }
                 maxZoomedOut={ this.state.maxZoomedOut }
+                show360Affordance={ this.show360Affordance }
+                on360AffordanceDone={ () => {
+                  this.show360Affordance = false;
+                } }
               />
             );
           })

diff --git a/scripts/components/Scene/Scene.js b/scripts/components/Scene/Scene.js
@@ -128,6 +128,8 @@ export default class Scene extends React.Component {
         isPanorama={this.props.sceneParams.sceneType === SceneTypes.PANORAMA}
         enableZoom={this.props.sceneParams.enableZoom}
         getInteractionTitle={this.getInteractionTitle.bind(this)}
+        show360Affordance={ this.props.show360Affordance }
+        on360AffordanceDone={ this.props.on360AffordanceDone }
       />
     );
   }

diff --git a/scripts/components/Scene/SceneTypes/ThreeSixtyScene.js b/scripts/components/Scene/SceneTypes/ThreeSixtyScene.js
@@ -13,6 +13,12 @@ export const sceneRenderingQualityMapping = {
   low: 16,
 };
 
+/** @constant {number} AFFORDANCE_INTERVAL_DEFAULT_MS Default time in between affordance pointers. */
+const AFFORDANCE_INTERVAL_DEFAULT_MS = 7500;
+
+/** @constant {number} AFFORDANCE_INTERVAL_MIN_MS Minimum time in between affordance pointers. */
+const AFFORDANCE_INTERVAL_MIN_MS = 1000;
+
 export default class ThreeSixtyScene extends React.Component {
   /**
    * @param {object} props React properties.
@@ -83,9 +89,9 @@ export default class ThreeSixtyScene extends React.Component {
       isRendered: true
     });
 
-    this.registerAffordance({
-      intervalMs: 7500
-    });
+    if (this.props.show360Affordance) {
+      this.registerAffordance();
+    }
 
     this.focusScene();
   }
@@ -97,8 +103,8 @@ export default class ThreeSixtyScene extends React.Component {
    * @param {boolean} [params.once] If true, run only once.
    */
   registerAffordance(params = {}) {
-    if (typeof params.intervalMs !== 'number' || params.intervalMs < 1000) {
-      params.intervalMs = 2000;
+    if (typeof params.intervalMs !== 'number' || params.intervalMs < AFFORDANCE_INTERVAL_MIN_MS) {
+      params.intervalMs = AFFORDANCE_INTERVAL_DEFAULT_MS;
     }
 
     window.clearTimeout(this.affordanceStartTimeout);
@@ -193,6 +199,8 @@ export default class ThreeSixtyScene extends React.Component {
 
     document.removeEventListener('click', this.terminateAffordance);
     document.removeEventListener('keydown', this.terminateAffordance);
+
+    this.props.on360AffordanceDone?.();
   }
 
   /**