Add migration to v6

src/editor/nodes/AudioNode.js

@@ -21,8 +21,9 @@ export default class AudioNode extends EditorNodeMixin(AudioSource) {
 
     const audioComp = json.components.find(c => c.name === "audio");
     const { src, controls, autoPlay, loop } = audioComp.props;
-
-    let audioType,
+    const audioParamsComp = json.components.find(c => c.name === "audio-params");
+    const {
+      audioType,
       gain,
       distanceModel,
       rolloffFactor,
@@ -30,33 +31,8 @@ export default class AudioNode extends EditorNodeMixin(AudioSource) {
       maxDistance,
       coneInnerAngle,
       coneOuterAngle,
-      coneOuterGain;
-    const audioParamsComp = json.components.find(c => c.name === "audio-params");
-    if (audioParamsComp) {
-      ({
-        audioType,
-        gain,
-        distanceModel,
-        rolloffFactor,
-        refDistance,
-        maxDistance,
-        coneInnerAngle,
-        coneOuterAngle,
-        coneOuterGain
-      } = audioParamsComp.props);
-    } else {
-      ({
-        audioType,
-        distanceModel,
-        rolloffFactor,
-        refDistance,
-        maxDistance,
-        coneInnerAngle,
-        coneOuterAngle,
-        coneOuterGain
-      } = audioComp.props);
-      gain = audioComp.props.volume;
-    }
+      coneOuterGain
+    } = audioParamsComp.props;
 
     loadAsync(
       (async () => {

src/editor/nodes/SceneNode.js

@@ -177,6 +177,82 @@ function migrateV4ToV5(json) {
   return json;
 }
 
+function migrateV5ToV6(json) {
+  json.version = 6;
+
+  for (const entityId in json.entities) {
+    if (!Object.prototype.hasOwnProperty.call(json.entities, entityId)) continue;
+
+    const entity = json.entities[entityId];
+
+    if (!entity.components) {
+      continue;
+    }
+
+    const audioComponent = entity.components.find(c => c.name === "audio");
+
+    if (audioComponent) {
+      // Prior to V6 audio parameters where part of the audio node, now they have been refactored to the audio-params component
+      entity.components.push({
+        name: "audio-params",
+        props: {
+          audioType: audioComponent.props["audioType"],
+          gain: audioComponent.props["volume"],
+          distanceModel: audioComponent.props["distanceModel"],
+          rolloffFactor: audioComponent.props["rolloffFactor"],
+          refDistance: audioComponent.props["refDistance"],
+          maxDistance: audioComponent.props["maxDistance"],
+          coneInnerAngle: audioComponent.props["coneInnerAngle"],
+          coneOuterAngle: audioComponent.props["coneOuterAngle"],
+          coneOuterGain: audioComponent.props["coneOuterGain"]
+        }
+      });
+
+      delete audioComponent.props["audioType"];
+      delete audioComponent.props["volume"];
+      delete audioComponent.props["distanceModel"];
+      delete audioComponent.props["rolloffFactor"];
+      delete audioComponent.props["refDistance"];
+      delete audioComponent.props["maxDistance"];
+      delete audioComponent.props["coneInnerAngle"];
+      delete audioComponent.props["coneOuterAngle"];
+      delete audioComponent.props["coneOuterGain"];
+    }
+
+    const videoComponent = entity.components.find(c => c.name === "video");
+
+    if (videoComponent) {
+      // Prior to V6 audio parameters where part of the audio node, now they have been refactored to the audio-params component
+      entity.components.push({
+        name: "audio-params",
+        props: {
+          audioType: videoComponent.props["audioType"],
+          gain: videoComponent.props["volume"],
+          distanceModel: videoComponent.props["distanceModel"],
+          rolloffFactor: videoComponent.props["rolloffFactor"],
+          refDistance: videoComponent.props["refDistance"],
+          maxDistance: videoComponent.props["maxDistance"],
+          coneInnerAngle: videoComponent.props["coneInnerAngle"],
+          coneOuterAngle: videoComponent.props["coneOuterAngle"],
+          coneOuterGain: videoComponent.props["coneOuterGain"]
+        }
+      });
+
+      delete videoComponent.props["audioType"];
+      delete videoComponent.props["gain"];
+      delete videoComponent.props["distanceModel"];
+      delete videoComponent.props["rolloffFactor"];
+      delete videoComponent.props["refDistance"];
+      delete videoComponent.props["maxDistance"];
+      delete videoComponent.props["coneInnerAngle"];
+      delete videoComponent.props["coneOuterAngle"];
+      delete videoComponent.props["coneOuterGain"];
+    }
+  }
+
+  return json;
+}
+
 export const FogType = {
   Disabled: "disabled",
   Linear: "linear",
@@ -209,6 +285,10 @@ export default class SceneNode extends EditorNodeMixin(Scene) {
       json = migrateV4ToV5(json);
     }
 
+    if (json.version === 5) {
+      json = migrateV5ToV6(json);
+    }
+
     const { root, metadata, entities } = json;
 
     let scene = null;

src/editor/nodes/VideoNode.js

@@ -20,8 +20,9 @@ export default class VideoNode extends EditorNodeMixin(Video) {
 
     const videoComp = json.components.find(c => c.name === "video");
     const { src, controls, autoPlay, loop, projection } = videoComp.props;
-
-    let audioType,
+    const audioParamsComp = json.components.find(c => c.name === "audio-params");
+    const {
+      audioType,
       gain,
       distanceModel,
       rolloffFactor,
@@ -29,33 +30,27 @@ export default class VideoNode extends EditorNodeMixin(Video) {
       maxDistance,
       coneInnerAngle,
       coneOuterAngle,
-      coneOuterGain;
-    const audioParamsComp = json.components.find(c => c.name === "audio-params");
-    if (audioParamsComp) {
-      ({
-        audioType,
-        gain,
-        distanceModel,
-        rolloffFactor,
-        refDistance,
-        maxDistance,
-        coneInnerAngle,
-        coneOuterAngle,
-        coneOuterGain
-      } = audioParamsComp.props);
-    } else {
-      ({
-        audioType,
-        distanceModel,
-        rolloffFactor,
-        refDistance,
-        maxDistance,
-        coneInnerAngle,
-        coneOuterAngle,
-        coneOuterGain
-      } = videoComp.props);
-      gain = videoComp.props.volume;
-    }
+      coneOuterGain
+    } = audioParamsComp.props;
+
+    loadAsync(
+      (async () => {
+        await node.load(src, onError);
+        node.controls = controls || false;
+        node.autoPlay = autoPlay;
+        node.loop = loop;
+        node.projection = projection;
+        node.audioType = audioType;
+        node.gain = gain;
+        node.distanceModel = distanceModel;
+        node.rolloffFactor = rolloffFactor;
+        node.refDistance = refDistance;
+        node.maxDistance = maxDistance;
+        node.coneInnerAngle = coneInnerAngle;
+        node.coneOuterAngle = coneOuterAngle;
+        node.coneOuterGain = coneOuterGain;
+      })()
+    );
 
     if (json.components.find(c => c.name === "billboard")) {
       node.billboard = true;

test/fixtures/V1TestScene.spoke

@@ -576,21 +576,16 @@
             "controls": false,
             "autoPlay": true,
             "loop": true,
-            "projection": "flat"
-          }
-        },
-        {
-          "name": "audio-params",
-          "props": {
             "audioType": "pannernode",
-            "gain": 0.75,
+            "volume": 0.75,
             "distanceModel": "inverse",
             "rolloffFactor": 10,
             "refDistance": 3,
             "maxDistance": 100,
             "coneInnerAngle": 20,
             "coneOuterAngle": 180,
-            "coneOuterGain": 0.5
+            "coneOuterGain": 0.5,
+            "projection": "flat"
           }
         }
       ],
@@ -626,21 +621,16 @@
             "controls": true,
             "autoPlay": true,
             "loop": false,
-            "projection": "360-equirectangular"
-          }
-        },
-        {
-          "name": "audio-params",
-          "props": {
             "audioType": "pannernode",
-            "gain": 0.5,
+            "volume": 0.5,
             "distanceModel": "inverse",
             "rolloffFactor": 1,
             "refDistance": 1,
             "maxDistance": 10000,
             "coneInnerAngle": 360,
             "coneOuterAngle": 360,
-            "coneOuterGain": 0
+            "coneOuterGain": 0,
+            "projection": "360-equirectangular"
           }
         }
       ],

test/fixtures/V3TestScene.spoke

@@ -702,21 +702,16 @@
             "controls": false,
             "autoPlay": true,
             "loop": true,
-            "projection": "flat"
-          }
-        },
-        {
-          "name": "audio-params",
-          "props": {
             "audioType": "pannernode",
-            "gain": 0.75,
+            "volume": 0.75,
             "distanceModel": "inverse",
             "rolloffFactor": 10,
             "refDistance": 3,
             "maxDistance": 100,
             "coneInnerAngle": 20,
             "coneOuterAngle": 180,
-            "coneOuterGain": 0.5
+            "coneOuterGain": 0.5,
+            "projection": "flat"
           }
         }
       ],
@@ -759,21 +754,16 @@
             "controls": true,
             "autoPlay": true,
             "loop": false,
-            "projection": "360-equirectangular"
-          }
-        },
-        {
-          "name": "audio-params",
-          "props": {
             "audioType": "pannernode",
-            "gain": 0.5,
+            "volume": 0.5,
             "distanceModel": "inverse",
             "rolloffFactor": 1,
             "refDistance": 1,
             "maxDistance": 10000,
             "coneInnerAngle": 360,
             "coneOuterAngle": 360,
-            "coneOuterGain": 0
+            "coneOuterGain": 0,
+            "projection": "360-equirectangular"
           }
         }
       ],

test/integration/Editor.test.js

@@ -270,3 +270,11 @@ test("Editor should load V5TestScene", withPage(`/projects/new?template=${v5Test
   const serializedScene = await getSerializedScene(page, sceneHandle);
   t.snapshot(serializedScene);
 });
+
+const v6TestSceneUrl = getFixtureUrl("V6TestScene.spoke");
+
+test("Editor should load V6TestScene", withPage(`/projects/new?template=${v6TestSceneUrl}`), async (t, page) => {
+  const sceneHandle = await waitForProjectLoaded(page);
+  const serializedScene = await getSerializedScene(page, sceneHandle);
+  t.snapshot(serializedScene);
+});