MapillaryJS: storytelling example that doesn't work

1

Hi I’m trying to build a simple storytelling starting from the sample http://bl.ocks.org/knikel/630c2d6fa37a8a0e082a

This is the code …

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
        <script src="https://npmcdn.com/mapillary-js@1.0.1/dist/mapillary-js.min.js"></script>
        <link rel="stylesheet" href="https://npmcdn.com/mapillary-js@1.0.1/dist/mapillary-js.min.css"/>
        <style>
           body { background-color: silver; }
          .mly-wrapper { margin: 0 auto; }

          .mly-wrapper {
             position: relative;
             background-color: grey;
             width: 640px;
             height: 480px;
           }
           #mly, .mapillary-js {
             position: relative;
             height: 100%;
             width: 100%;
           }
        </style>
      </head>
       <body>
        <div class="mly-wrapper"><div class="mly" id="mly-route"></div></div>
        <button onclick="play()">Play</button><button onclick="stop()">Stop</button>
        <script>
          var play = undefined;
          var stop = undefined;

          document.addEventListener("DOMContentLoaded", function(event) {
            var mlyRoute = new Mapillary.Viewer('mly-route', 'cjJ1SUtVOEMtdy11b21JM0tyYTZIQTo2ZmVjNTQ3YWQ0OWI2Yjgx', 'KHkhx0zPgqzg5Qcjrf4FUQ',
                                              {cover: true, cache: false, direction: false});
            var route = mlyRoute.getComponent("route");
       
            route.configure({paths: [
              {sequenceKey: "zr5MyShhYUwUlagucdggDA", startKey: "KHkhx0zPgqzg5Qcjrf4FUQ", stopKey: "KHkhx0zPgqzg5Qcjrf4FUQ",
                 infoKeys: [
                  {key: "KHkhx0zPgqzg5Qcjrf4FUQ", description: "aaaaaa"},
                 ]
              },

              {sequenceKey: "4x5ay3CHwgxFTdIIQg81-A", startKey: "LkN9pXajYIUOtmhhnotLLA", stopKey: "LkN9pXajYIUOtmhhnotLLA",
                 infoKeys: [
                  {key: "LkN9pXajYIUOtmhhnotLLA", description: "bbbb"},
                 ]
              }
            ], playing: true});

            mlyRoute.activateComponent("route");

            play = function play() {
              mlyRoute.deactivateCover();
              route.play();
            }

            stop = function stop() {
              route.stop()
            }
          })
        </script>
       </body>
      </html>

The problem is that the application stops on the first image of the first sequence, showing the message “aaaaaa”, and doesn’t show the second image of the second sequence.

Any suggestion? Thank you very much in advance!!!

Cesare