Web_Code/Js/lotti_Sidebar_Anim.js

/* ========================================================================== */
/* ============================= complete_Check ============================= */
/* ========================================================================== */
function complete_Check(second_Anim){
    
  console.log("I was found complete_Check ")

  var rocket_Name = "rocket_Orange.lottie";
  var aircraft_Name = "airplane.lottie";

  player.addEventListener('complete',()=> {

      // first animation has completed
      if(!second_Anim){

          console.log("first animation has completed");

          // the animation must be stopped, such that it can be played again
          //player.currentState  = playing --> stop it, to rerun it
          player.stop();
      
          // load the second animation -> can be played when eventListender('ready') is called

          var path_0 = `../../../7_Animation/${rocket_Name}`;
          var path_1 = `../../7_Animation/${rocket_Name}`;
          var path_2 = `../7_Animation/${rocket_Name}`;
          var path_3 = `Data/7_Animation/${rocket_Name}`;

          // check which file path is valid, use the valid one and load the player
          loadFileWithFallback(path_0, path_1, path_2, path_3, player);

          // let the system know second anim is loaded
          second_Anim = true;

          // playing the second animation directy does not make sense, since it takes some time to fetch the data from the net, then it must be loaded (postprocessed) --> it takes some time till the animation ready to be played --> use ready ewventListener
          // play the second anim
          // player.play();
          // console.log(`the current state is: ${player.currentState}`)
          }

      // second animation has completed
      else {
          
          console.log("second animation completed");

          // load back the first animation
          var path_0 = `../../../7_Animation/${aircraft_Name}`;
          var path_1 = `../../7_Animation/${aircraft_Name}`;
          var path_2 = `../7_Animation/${aircraft_Name}`;
          var path_3 = `Data/7_Animation/${aircraft_Name}`;

          // check which file path is valid, use the valid one and load the player
          loadFileWithFallback(path_0, path_1, path_2, path_3, player);

          // let the system know first anim is loaded
          second_Anim = false;

          // stop the animation, such that the first animation can be played again if anim is clicked on
          player.stop();

          } 
  });



  // Add an event listener for the 'ready' event --> is executed when player.load(.lotti or .json-file) compledted and ready for beeing played
  player.addEventListener('ready', () => {

      // play the second animation when it's loaded and ready for it
      if (second_Anim){
      
          player.play();
      
      }
  });
}


/* ========================================================================== */
/* ========================== loadFileWithFallback ========================== */
/* ========================================================================== */
function loadFileWithFallback(  primaryPath, 
                              fallbackPath,
                              path_2,
                              path_3,
                              player) {


  // gets two paths --> check which one is valid. Use the valid one to load the player
  fetch(primaryPath)
    .then((response) => {

      // no reading here, only checking metadta
      if (response.ok) {

        // If the primary file is found, use it
        console.log("returning: ", primaryPath);
        player.load(primaryPath);

      // also possible to read the content directy
      //   return response.text();
      } 
      
      else {
        // If the primary file is not found, try the fallback path
        return fetch(fallbackPath).then((fallbackResponse) => {
          if (fallbackResponse.ok) {
          
          console.log("returning: ", fallbackPath);
          player.load(fallbackPath);

          } 
          
          else {
            // If both primary and fallback files not found, try path_2
            return fetch(path_2).then((path2Response) => {
              if (path2Response.ok) {

                console.log("returning: ", path_2);
                player.load(path_2);

              }

              else {

              // If both primary and fallback files not found, try path_2
              return fetch(path_3).then((path3Response) => {
                if (path3Response.ok) {

                  console.log("returning: ", path_3);
                  player.load(path_3);

                }

                else{
                  throw new Error('Primary, fallback, path_2 and path_3 files not found');
                }
                
              });
              
              }


          });


        }

      });
    }

});
                              }