JSON-ответ Zencoder Progress преобразуется в ширину заполнения в индикаторной строке

Question

Я отчаянно искал информацию о том, как получить ответ JSON о прогрессе zencoder, преобразовать переменную "прогресс" из ответа в переменную javascript и использовать ее для заполнения числа значением ширины css.

Более подробную информацию об ответе Zencoder JSON можно найти здесь: https://app.zencoder.com/docs/api/jobs/progress

Типичный вывод выглядит следующим образом:

{
  "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
    }
  ]
}

Я хочу получать обновленное значение "progress" каждые полсекунды или около того и использовать его для заполнения значения ширины в индикаторе выполнения Twitter Boostraps:

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

Будем чрезвычайно признательны любой помощи!

Answer 1

Во-первых, вам нужна функция для фактического опроса. Получив ответ, вы обновите индикатор выполнения и будете делать все, что захотите. Здесь я разделил это на отдельную функцию с неоригинальным именем, parseResponse(), который затем вызывает poll() снова, пока работа не будет сделана.

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

Когда мы получаем прогресс от Zencoder, мы хотим обновлять индикатор выполнения только тогда, когда задание находится в определенных состояниях. Здесь мы просто выходим из состояния, если оно не обрабатывается или не завершено, и в этом случае мы действительно изменяем ширину индикатора выполнения.

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?");
  }
}

Как только вы это настроите, вы можете начать процесс, позвонив poll(),

Это предполагает, что вы используете jQuery и у вас есть только один индикатор на странице, но это должно дать вам представление о том, как начать работу.