Hubs Pager Scripting

pager.js

const Pager = world.registerComponent("pager", {
  page: { default: 0 }
});

class PagerSystem extends System {
  static query = {
    input: { components: [Input] },
    pagers: { components: [Pager, Transform] }
  };

  execute() {
    const input = this.queries.input[0];

    this.queries.pagers.forEach((entity) => {
      const nextSlide = input.targetPressed(entity, Actions.primary);
      const prevSlide =  input.targetPressed(entity, Actions.secondary);

      if (nextSlide || prevSlide) {
        const rootObj = entity.getMutableComponent(Transform);
        const pager = entity.getMutableComponent(Pager);
        rootObj.children[pager.page].getMutableComponent(Visible).visible = false;
        pager.page += nextSlide ? 1 : -1;
        rootObj.children[pager.page].getMutableComponent(Visible).visible = true;
      }
    });
  }
}

world.registerSystem(PagerSystem);

SlideDeck.gltf

{
  "scene": 0,
  "scenes": [
    {
      "name": "My Presentation",
      "nodes": [0, 1, 2],
      "extensions": {
        "MOZ_hubs_components": {
          "pager": {}
        }
      }
    }
  ],
  "nodes": [
    {
      "name": "Slide 1",
      "extensions": {
        "MOZ_hubs_components": {
          "gltf-model": {
            "src": "https://sketchfab.com/mymodel"
          },
          "visible": { "value": true }
        }
      }
    },
    {
      "name": "Slide 2",
      "extensions": {
        "MOZ_hubs_components": {
          "image": {
            "src": "https://example.com/slide2.png"
          },
          "visible": { "value": false }
        }
      }
    },
    {

      "name": "Slide 3",
      "extensions": {
        "MOZ_hubs_components": {
          "image": {
            "src": "https://youtube.com/sdhjkfh"
          }
        },
        "visible": { "value": false }
      }
    },
    {
      "name": "Slide 4",
      "children": [4],
      "visible": { "value": false }
    },
    {
      "name": "Slide 4 Content"
    }
  ],
  "extensions": {
    "MOZ_hubs_components": {
      "pager": {
        "src": "https://hubs-cdn.mozilla.com/pager.js"
      }
    }
  }
}