Zencoder progress JSON response converted to populate width in boostrap progress bar

Question

I have desperately looked for information on how to take the zencoder progress JSON response, convert the "progress" variable from the response into a javascript variable and use it to populate the number in a css width value.

More information on the Zencoder JSON response can be found here: https://app.zencoder.com/docs/api/jobs/progress

The typical output is as follows:

{
  "state": "processing",
  "progress": 32.34567345,
  "input": {
    "id": 1234,
    "state": "finished"
  },
  "outputs": [
    {
      "id": 4567,
      "state": "processing",
      "current_event": "Transcoding",
      "current_event_progress": 25.0323,
      "progress": 35.23532
    },
     {
      "id": 4568,
     "state": "processing",
      "current_event": "Uploading",
      "current_event_progress": 82.32,
      "progress": 95.3223
    }
  ]
}

I want to get the updated "progress" value every half a second or so and use it to populate the width value in Twitter Boostraps progress bar:

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Any help would be enormously appreciated!

Answer 1

First you need a function to actually do the polling. When a response is received, you'll update the progress bar and do whatever else you'd like. Here I have that split out into a separate, unoriginally named function, parseResponse(), which then calls poll() again until the job is done.

var jobId = 12345;

function poll() {
  setTimeout(function() {
    $.ajax({
      url: 'https://app.zencoder.com/api/v2/jobs/' + jobId + '/progress',
      type: 'GET',
      headers: { "Zencoder-Api-Key": 'ZENCODER READ ONLY API KEY' },
      //dataType: 'json',
      success: function(data) {
        parseResponse(data);
      },
      error: function(data) {
        console.log(data)
      }
    });
  }, 3000);
}

When we get the progress back from Zencoder, we only want to update the progress bar when the job is in certain states. Here we just log out the state unless it's processing or finished, in which case we do indeed change the width of the progress bar.

function parseResponse(data) {
  switch(data.state) {
    case 'pending':
      console.log('Pending');
      poll();
      break;
    case 'waiting':
      console.log('Waiting');
      poll();
      break;
    case 'processing':
      console.log('processing');
      $('.progress .bar').css('width', Math.round(data.progress) + '%');
      poll();
      break;
    case 'finished':
      console.log('Finished');
      $('.progress').removeClass('active');
      $('.progress .bar').css('width', '100%');
      break;
    case 'failed':
      console.log('Failed');
      break;
    case 'cancelled':
      console.log('Cancelled');
      break;
    default: 
      console.log("Wat?");
  }
}

Once you have this set up, you can kick off the process by calling poll().

This assumes you're using jQuery and only have one progress bar on the page, but that should give you an idea of how to get started.