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}`;

            // check which file path is valid, use the valid one and load the player
            loadFileWithFallback(path_0, path_1, 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}`;

            // check which file path is valid, use the valid one and load the player
            loadFileWithFallback(path_0, path_1, 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,
                                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 {
              throw new Error('Both primary and fallback files not found');
            }
          });
        }
      })

  }