How to "lock" the page until upload is completed?

Sometimes it just happens that someone comes to the page, records the video and then just clicks x to close their browser or the page.

When that happens, they either expect that video was already saved or they simply forget about it, so why not remind everyone that the video is still being recorded?

How? Well, that is rather easy for both v1 and v2 and we will cover both now.

Intro to "lock" for both v1 and v2

Regardless of which one of the 2 you are using, you will need to specify the headers in your page. If you are not sure what are headers, please check out the following page: Ziggeo Integration Headers.

Both will also hold the following code that detects the closing of the page and reacts to it:

<script>
  //We will use this as indicator of the
  // locked / unlocked status
  var lock = false;

  //Now to check if the browser is being closed or 
  // not we could use something like this:

  //the event that should be fired when browser or
  // tab is being closed.
  window.onbeforeunload = function (e) {
    //Is the lock present or not? We only need this
    // to run if it is
    if(lock) {
      //OK, so lock is present, we are still
      // uploading video. Lets tell them about it
      var closeMessage = "Are you sure you want to close the browser? This would stop the upload and video would be lost!";

      //lets check that we have the event regardless of the browser used
      e = e || window.event;

      //we should have event, still better to
      // check one more time
      if(e) {
        e.returnValue = closeMessage;
      }

      //lets return the message as well just in
      // case the event was not there.
      return closeMessage;
    }
  }
</script>

This code shows us the 'lock' variable that we use to store the status into allowing us to know if it is locked or unlocked.

Following it is the event that is fired each time the page or browser is being closed giving us a chance to reach - it is good to mention however that browsers can decide "not to bother" the person using the same browser and to just close the page. This is entirely up to browser's decision.

v1 codes to "lock" the page until upload is complete

You can head to our Embedding Methods page to see more about how you would add the v1 embedding to the same.

Once you do you will need following events:

1. uploading
2. uploaded

The first one will tell us when the uploading has started and the second one will tell us when the upload is finished.

To make it possible for us to use the lock, we will add a code to our page like this one:

<script>
  // Uploading is started
  ZiggeoApi.Events.on("uploading", function (data) {
    //lets 'lock' the closing of the browser
    lock = true;
  });

  // Upload ended
  ZiggeoApi.Events.on("uploaded", function (uploaded) {
    lock = false;
  });
</script>

And that is it :)

What will happen is that we will change the status of "lock" variable as soon as the uploading starts to locked status and then again in unlocked status as soon as the uploading has finalized.

v2 codes to "lock" the page until upload is complete

v2 is slightly different than v1 so instead of just adding event declaration like we can with v1, we must specify event for v2 (at least at this time) directly on the embedding.

This is because v1 will fire its events from any embedding (global events) while v2 will only fire events given to specific embedding (private events).

Because of this, we first need to make sure that either of the following is true:

1. DOM is read
2. page has finished loading

The best way to do that easily would be with our global "system_ready" event, which would make the code look like the following:

<script>  ZiggeoApi.Events.on("system_ready", function (data) {

    //We get the embedding through its ID
    //This expects that somewhere in your code you
    // have embedding created as in the following
    // example:
    // <ziggeorecorder
    //    id="recorder">
    // </ziggeorecorder>
    var recorder = ZiggeoApi.V2.Recorder.findByElement( document.getElementById('recorder') );

    // Uploading is started
    recorder.on("uploading", function (data) {
      //lets 'lock' the closing of the browser
      lock = true;
    });

    // Upload has finished
    recorder.on("uploaded", function (uploaded) {
      lock = false;
    });
  });
</script>

And that is it for v2 as well :)

Hope you like the sample and do feel free to ask us in case you have any questions about the same.