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!

You might find this useful: http://www.bootply.com/67388 It needs to be modified so that you request/poll for results at some interval and then update the progress bar accordingly — Carol Skelly, Jul 23 '13 at 02:26

Matt McClure · Accepted Answer · 2013-07-26T22:58:30.193

3

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.

edited Jul 26 '13 at 22:58

answered Jul 23 '13 at 02:42

Matt McClure

2,046
2
18
19

Thank you very much for this response. Whilst the code looks absolutely perfect for what I need, I can't get it to work. I only have one progress bar on the page but am unsure how to ensure that jQuery is installed within my application/server. I apologise if I'm being naive - I know my way around PHP but very little javascript. Any help would be greatly appreciated! Tom – user2608266 Jul 23 '13 at 21:41
Sorry about that, I just assumed you were including jQuery since the Bootstrap JS is all jQuery plugins. You should see an include at the top of your page ` – Matt McClure Jul 23 '13 at 23:50
Just to make things easier, here's a [working example](http://www.bootply.com/69250). Keep in mind you'll need to specify both a Zencoder read-only API key and a job ID for it to do anything. – Matt McClure Jul 24 '13 at 00:06
Thank you again for your response. Using the (very helpful) working example, I still couldn't get it to work in this environment. I modified the code to be as follows http://www.bootply.com/69306 which updates the 'status' html once, then doesn't continue to update it, nor does the progress bar fill up. On refresh, the 'status' updates accordingly so I can only assume that this is not looping as required? – user2608266 Jul 24 '13 at 10:41
After a few hours of trial and error I managed to fix this. The problem was the 'response' in 'Math.round(response.progress)'. This should have been 'data'. Thank you for getting me 95% of the way there. Much appreciated. – user2608266 Jul 24 '13 at 17:23
Argh! I'm so sorry about that, I took something I had already written and simplified it for your question and missed that. Sorry! If this answer was helpful to you, would you mind accepting it? – Matt McClure Jul 26 '13 at 23:01
Hi Matt, this piece of code has been working great so far although I wonder if there is a way to stop the progress bar being set in the loop if the new value is not greater than the previous? I ask this because the progress bar jumps back and forth a bit which I assume is something to do with the data being received. Any help would be greatly appreciated. – user2608266 Nov 29 '13 at 10:15
You could either get the current width of the progress element or just set the progress to a variable, then check to see if the new progress is >= to the old progress value before updating the css. [Example gist](https://gist.github.com/mmcc/7707017) – Matt McClure Nov 29 '13 at 15:05

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

1 Answers1