jellyfin-web/dashboard-ui/bower_components/hls.js/demo/canvas.js

  var eventLeftMargin = 180;
  var eventRightMargin = 0;

  function canvasLoadEventUpdate(canvas, minTime, maxTime, events) {
    var ctx = canvas.getContext('2d');
    for (var i =0, y_offset = 20; i < events.length; i++) {
      var event = events[i], start = event.time, end = event.time + event.duration + event.latency;
      if((start >= minTime && start <= maxTime)) {
        y_offset+=20;
      }
    }
    canvas.height = y_offset;

    ctx.fillStyle = "green";
    ctx.globalAlpha = 0.5;
    ctx.fillRect(0,0,eventLeftMargin, canvas.height);
    ctx.fillRect(canvas.width-eventRightMargin,0,eventRightMargin, canvas.height);
    ctx.globalAlpha = 1;

    //draw legend
    var x_offset = 5;
    ctx.font = "12px Arial";

    legend = "load event";
    ctx.fillStyle = "black";
    ctx.fillText(legend,x_offset,15);
    x_offset = eventLeftMargin+5;


    legend = 'start - end';
    ctx.fillStyle = "black";
    ctx.fillText(legend,x_offset,15);
    x_offset += ctx.measureText(legend).width+5;

    legend = '[latency';
    ctx.fillStyle = "orange";
    ctx.fillText(legend,x_offset,15);
    x_offset += ctx.measureText(legend).width+5;

    legend = 'loading';
    ctx.fillStyle = "green";
    ctx.fillText(legend,x_offset,15);
    x_offset += ctx.measureText(legend).width+5;

    legend = 'parsing';
    ctx.fillStyle = "blue";
    ctx.fillText(legend,x_offset,15);
    x_offset += ctx.measureText(legend).width+5;

    legend = 'appending]';
    ctx.fillStyle = "red";
    ctx.fillText(legend,x_offset,15);
    x_offset += ctx.measureText(legend).width+5;

    legend = 'size bitrate';
    ctx.fillStyle = "black";
    ctx.fillText(legend,x_offset,15);
    x_offset += ctx.measureText(legend).width+5;

    for (i =0, y_offset = 20; i < events.length; i++) {
      var event = events[i], start = Math.round(event.time), end = Math.round(event.time + event.duration + event.latency);
      if((start >= minTime && start <= maxTime)) {
        canvasDrawLoadEvent(ctx,y_offset,event,minTime,maxTime);
        y_offset+=20;
      }
    }
  }

  function canvasVideoEventUpdate(canvas, minTime, maxTime, events) {
    var ctx = canvas.getContext('2d');
    for (var i =0, y_offset = 20; i < events.length; i++) {
      var event = events[i], start = event.time, end = event.time;
      if((start >= minTime && start <= maxTime)) {
        y_offset+=20;
      }
    }
    canvas.height = y_offset;
    ctx.fillStyle = "green";
    ctx.globalAlpha = 0.5;
    ctx.fillRect(0,0,eventLeftMargin, canvas.height);
    ctx.fillRect(canvas.width-eventRightMargin,0,eventRightMargin, canvas.height);
    ctx.globalAlpha = 1;

    //draw legend
    var x_offset = 5;
    ctx.font = "12px Arial";

    legend = 'video event';
    ctx.fillStyle = "black";
    ctx.fillText(legend,x_offset,15);

    x_offset = eventLeftMargin+5;
    legend = 'time';
    ctx.fillStyle = "black";
    ctx.fillText(legend,x_offset,15);

    x_offset += ctx.measureText(legend).width+5;
    legend = '[duration]';
    ctx.fillStyle = "blue";
    ctx.fillText(legend,x_offset,15);

    for (i =0, y_offset = 20; i < events.length; i++) {
      var event = events[i], start = Math.round(event.time), end = Math.round(event.time);
      if((start >= minTime && start <= maxTime)) {
        canvasDrawVideoEvent(ctx,y_offset,event,minTime,maxTime);
        y_offset+=20;
      }
    }
  }

  function canvasBufferWindowUpdate(canvas, minTime, maxTime, focusTime, events) {
    var ctx = canvas.getContext('2d'),
    minTimeBuffer, minTimePos,focusTimeBuffer,focusTimePos,
    bufferChartStart = eventLeftMargin,
    bufferChartWidth = ctx.canvas.width-eventLeftMargin-eventRightMargin;
    ctx.clearRect (0,0,canvas.width, canvas.height);

    if(events.length === 0) {
      return;
    }

    ctx.fillStyle = "green";
    ctx.globalAlpha = 0.5;
    ctx.fillRect(0,0,eventLeftMargin, canvas.height);
    ctx.globalAlpha = 1;

    //draw legend
    var x_offset = 5;
    var y_offset = 0;
    ctx.font = "15px Arial";

    var maxBuffer = 0, firstEventIdx = -1, focusEventIdx= -1, event;
    for (var i =0 ; i < events.length; i++) {
      event = events[i];
      maxBuffer = Math.max(maxBuffer, event.buffer+event.pos);
      if(firstEventIdx === -1 && event.time >= minTime) {
        firstEventIdx = Math.max(0,i-1);
      }
      if(focusEventIdx === -1 && event.time >= focusTime) {
        focusEventIdx = Math.max(0,i-1);
      }
    }
    // compute position and buffer length at pos minTime using linear approximation
    if((firstEventIdx+1) < events.length) {
      minTimePos = events[firstEventIdx].pos + (minTime-events[firstEventIdx].time)*(events[firstEventIdx+1].pos-events[firstEventIdx].pos)/(events[firstEventIdx+1].time-events[firstEventIdx].time);
      minTimeBuffer = minTimePos + events[firstEventIdx].buffer + (minTime-events[firstEventIdx].time)*(events[firstEventIdx+1].buffer-events[firstEventIdx].buffer)/(events[firstEventIdx+1].time-events[firstEventIdx].time);
    } else {
      minTimeBuffer = 0;
      minTimePos = 0;
    }

    // compute position and buffer length at pos focusTime using linear approximation
    if((focusEventIdx+1) < events.length) {
      focusTimePos = events[focusEventIdx].pos + (focusTime-events[focusEventIdx].time)*(events[focusEventIdx+1].pos-events[focusEventIdx].pos)/(events[focusEventIdx+1].time-events[focusEventIdx].time);
      focusTimeBuffer = events[focusEventIdx].buffer + (focusTime-events[focusEventIdx].time)*(events[focusEventIdx+1].buffer-events[focusEventIdx].buffer)/(events[focusEventIdx+1].time-events[focusEventIdx].time);
    } else {
      focusTimePos = 0;
      focusTimeBuffer = 0;
    }

    maxBuffer*=1.1;

    y_offset += 15;
    legend = 'play pos/buffer zoomed';
    ctx.fillStyle = "black";
    ctx.fillText(legend,x_offset,y_offset);

    y_offset += 15;
    legend = '[' + minTime + ',' + maxTime + ']';
    ctx.fillText(legend,x_offset,y_offset);

    y_offset += 15;
    legend = 'focus time:' + focusTime + ' ms';
    ctx.fillText(legend,x_offset,y_offset);

    y_offset += 15;
    legend = 'focus position:' + Math.round(focusTimePos) + ' ms';
    ctx.fillText(legend,x_offset,y_offset);

    y_offset += 15;
    legend = 'focus buffer:' + Math.round(focusTimeBuffer) + ' ms';
    ctx.fillText(legend,x_offset,y_offset);

    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.moveTo(bufferChartStart, ctx.canvas.height);
    ctx.lineTo(bufferChartStart, ctx.canvas.height*(1 - minTimeBuffer/maxBuffer));
    for (var i =firstEventIdx+1 ; i < events.length; i++) {
      event = events[i];
      x_offset = bufferChartStart + (bufferChartWidth*(event.time-minTime))/(maxTime-minTime);
      y_offset = ctx.canvas.height*(1 - (event.buffer+event.pos)/maxBuffer);
      ctx.lineTo(x_offset,y_offset);
    }
    ctx.lineTo(x_offset, canvas.height);
    ctx.fill();

    ctx.fillStyle = "brown";
    ctx.beginPath();
    ctx.moveTo(bufferChartStart, ctx.canvas.height);
    ctx.lineTo(bufferChartStart, ctx.canvas.height*(1 - minTimePos/maxBuffer));
    for (var i =firstEventIdx+1 ; i < events.length; i++) {
      event = events[i];
      x_offset = bufferChartStart + (bufferChartWidth*(event.time-minTime))/(maxTime-minTime);
      y_offset = ctx.canvas.height*(1 - (event.pos)/maxBuffer);
      ctx.lineTo(x_offset,y_offset);
    }
    ctx.lineTo(x_offset, canvas.height);
    ctx.fill();

    ctx.fillStyle = "white";
    ctx.fillRect(canvas.width-eventRightMargin,0,eventRightMargin, canvas.height);
    ctx.fillStyle = "green";
    ctx.globalAlpha = 0.5;
    ctx.fillRect(canvas.width-eventRightMargin,0,eventRightMargin, canvas.height);
    ctx.globalAlpha = 1;

    ctx.fillStyle = "black";
    x_offset = bufferChartStart + (bufferChartWidth*(focusTime-minTime))/(maxTime-minTime);
    ctx.moveTo(x_offset, ctx.canvas.height);
    y_offset = ctx.canvas.height*(1 - (focusTimePos+focusTimeBuffer)/maxBuffer);
    ctx.lineTo(x_offset,y_offset);
    ctx.stroke();
  }

  function canvasBufferTimeRangeUpdate(canvas, minTime, maxTime, windowMinTime, windowMaxTime, events) {
    var ctx = canvas.getContext('2d'),
    bufferChartStart = eventLeftMargin,
    bufferChartWidth = ctx.canvas.width-eventLeftMargin-eventRightMargin,
    x_offset = 0,y_offset = 0,
    event;
    ctx.clearRect (0,0,canvas.width, canvas.height);

    ctx.fillStyle = "green";
    ctx.globalAlpha = 0.5;
    ctx.fillRect(0,0,eventLeftMargin, canvas.height);
    ctx.fillRect(canvas.width-eventRightMargin,0,eventRightMargin, canvas.height);
    ctx.globalAlpha = 1;

    x_offset = 5;
    y_offset = 15;
    legend = 'play pos/buffer';
    ctx.fillStyle = "black";
    ctx.font = "15px Arial";
    ctx.fillText(legend,x_offset,y_offset);

    if(events.length === 0) {
      return;
    }

    var maxBuffer = 0;
    for (var i =0 ; i < events.length; i++) {
      maxBuffer = Math.max(maxBuffer, events[i].buffer + events[i].pos);
    }

    y_offset+=15;
    legend = 'last pos:' + events[events.length-1].pos  + ' ms';
    ctx.fillText(legend,x_offset,y_offset);

    y_offset+=15;
    legend = 'last buffer:' + events[events.length-1].buffer  + ' ms';
    ctx.fillText(legend,x_offset,y_offset);

    y_offset+=15;
    legend = 'max buffer:' + maxBuffer  + ' ms';
    ctx.fillText(legend,x_offset,y_offset);

    y_offset += 15;
    legend = 'nb samples:' + events.length;
    ctx.fillText(legend,x_offset,y_offset);

    maxBuffer*=1.1;

    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.moveTo(bufferChartStart, ctx.canvas.height);
    for (var i =0 ; i < events.length; i++) {
      event = events[i];
      x_offset = bufferChartStart + (bufferChartWidth*(event.time-minTime))/(maxTime-minTime);
      y_offset = ctx.canvas.height*(1 - (event.buffer+event.pos)/maxBuffer);
      ctx.lineTo(x_offset,y_offset);
    }
    ctx.lineTo(x_offset, canvas.height);
    ctx.fill();

    ctx.fillStyle = "brown";
    ctx.beginPath();
    ctx.moveTo(bufferChartStart, ctx.canvas.height);
    for (var i =0 ; i < events.length; i++) {
      event = events[i];
      x_offset = bufferChartStart + (bufferChartWidth*(event.time-minTime))/(maxTime-minTime);
      y_offset = ctx.canvas.height*(1 - event.pos/maxBuffer);
      ctx.lineTo(x_offset,y_offset);
    }
    ctx.lineTo(x_offset, canvas.height);
    ctx.fill();

    ctx.globalAlpha = 0.7;
    ctx.fillStyle = "grey";
    var x_start = bufferChartStart;
    var x_w = bufferChartWidth*(windowMinTime-minTime)/(maxTime-minTime);
    ctx.fillRect(x_start,0,x_w, canvas.height);
    var x_start = bufferChartStart+bufferChartWidth*(windowMaxTime-minTime)/(maxTime-minTime);
    var x_w = canvas.width-x_start-eventRightMargin;
    ctx.fillRect(x_start,0,x_w, canvas.height);
    ctx.globalAlpha = 1;
  }

  function canvasBitrateEventUpdate(canvas, minTime, maxTime, windowMinTime, windowMaxTime, levelEvents, bitrateEvents) {
    var ctx = canvas.getContext('2d'),
    bufferChartStart = eventLeftMargin,
    bufferChartWidth = ctx.canvas.width-eventLeftMargin-eventRightMargin,
    x_offset = 0,y_offset = 0,
    event, maxLevel, minLevel, sumLevel, maxBitrate, minBitrate, sumDuration;
    ctx.clearRect (0,0,canvas.width, canvas.height);

    if(levelEvents.length === 0) {
      return;
    }

    maxBitrate = minBitrate = bitrateEvents[0].bitrate;
    sumLevel = sumDuration = 0;
    for (var i =0 ; i < bitrateEvents.length; i++) {
      sumLevel += bitrateEvents[i].duration*bitrateEvents[i].level;
      sumDuration += bitrateEvents[i].duration;
      maxBitrate = Math.max(maxBitrate, bitrateEvents[i].bitrate);
      minBitrate = Math.min(minBitrate, bitrateEvents[i].bitrate);
    }

    maxLevel = minLevel = levelEvents[0].id;
    for (var i =0 ; i < levelEvents.length; i++) {
      maxLevel = Math.max(maxLevel, levelEvents[i].id);
      minLevel = Math.min(minLevel, levelEvents[i].id);
    }

    ctx.fillStyle = "green";
    ctx.globalAlpha = 0.5;
    ctx.fillRect(0,0,eventLeftMargin, canvas.height);
    ctx.fillRect(canvas.width-eventRightMargin,0,eventRightMargin, canvas.height);
    ctx.globalAlpha = 1;

    x_offset = 5;
    y_offset = 0;
    ctx.fillStyle = "black";
    ctx.font = "15px Arial";

    y_offset+=15;
    legend = 'last bitrate:' + (bitrateEvents[bitrateEvents.length-1].bitrate/1000).toFixed(2) + "Mb/s";
    ctx.fillText(legend,x_offset,y_offset);

    y_offset+=15;
    legend = 'min bitrate:' + (minBitrate/1000).toFixed(2)  + "Mb/s";
    ctx.fillText(legend,x_offset,y_offset);

    y_offset+=15;
    legend = 'max bitrate:' + (maxBitrate/1000).toFixed(2)  + "Mb/s";
    ctx.fillText(legend,x_offset,y_offset);

    y_offset+=15;
    legend = 'min/last/max level:' + minLevel + '/' + levelEvents[levelEvents.length-1].id + '/' + maxLevel;
    ctx.fillText(legend,x_offset,y_offset);

    y_offset += 15;
    legend = 'nb level switch:' + (levelEvents.length-1);
    ctx.fillText(legend,x_offset,y_offset);

    y_offset += 15;
    legend = 'average level:' + (sumLevel/sumDuration).toFixed(2);
    ctx.fillText(legend,x_offset,y_offset);

    maxBitrate*=1.1;

    ctx.strokeStyle = "blue";
    ctx.beginPath();
    ctx.moveTo(bufferChartStart, ctx.canvas.height);
    for (var i =0 ; i < bitrateEvents.length; i++) {
      event = bitrateEvents[i];
      x_offset = bufferChartStart + (bufferChartWidth*(event.time-minTime))/(maxTime-minTime);
      y_offset = ctx.canvas.height*(1 - event.bitrate/maxBitrate);
      ctx.lineTo(x_offset,y_offset);
    }
    ctx.lineTo(bufferChartStart+bufferChartWidth, y_offset);
    ctx.stroke();

    ctx.strokeStyle = "black";
    ctx.beginPath();
    x_offset = bufferChartStart;
    y_offset =  ctx.canvas.height;
    ctx.moveTo(x_offset, y_offset);
    for (var i =0 ; i < levelEvents.length; i++) {
      event = levelEvents[i];
      x_offset = bufferChartStart + (bufferChartWidth*(event.time-minTime))/(maxTime-minTime);
      ctx.lineTo(x_offset,y_offset);
      y_offset = ctx.canvas.height*(1 - event.bitrate/maxBitrate);
      ctx.lineTo(x_offset,y_offset);
    }
    ctx.lineTo(bufferChartStart+bufferChartWidth, y_offset);
    ctx.stroke();

    ctx.globalAlpha = 0.7;
    ctx.fillStyle = "grey";
    var x_start = bufferChartStart;
    var x_w = bufferChartWidth*(windowMinTime-minTime)/(maxTime-minTime);
    ctx.fillRect(x_start,0,x_w, canvas.height);
    var x_start = bufferChartStart+bufferChartWidth*(windowMaxTime-minTime)/(maxTime-minTime);
    var x_w = canvas.width-x_start-eventRightMargin;
    ctx.fillRect(x_start,0,x_w, canvas.height);
    ctx.globalAlpha = 1;

  }


  function canvasDrawLoadEvent(ctx,yoffset,event,minTime,maxTime) {
    var legend,offset,x_start,x_w,
    networkChartStart = eventLeftMargin,
    networkChartWidth = ctx.canvas.width-eventLeftMargin-eventRightMargin,
    tend = Math.round(event.time + event.duration + event.latency);

   //draw start
    ctx.fillStyle = "black";
    ctx.font = "12px Arial";
    legend = Math.round(event.time);
    offset = ctx.measureText(legend).width+5;
    x_start = networkChartStart-offset+networkChartWidth*(event.time-minTime)/(maxTime-minTime);
    ctx.fillText(legend,x_start,yoffset+12);

    //draw latency rectangle
    ctx.fillStyle = "orange";
    x_start = networkChartStart + networkChartWidth*(event.time-minTime)/(maxTime-minTime);
    x_w = networkChartWidth*event.latency/(maxTime-minTime);
    ctx.fillRect(x_start,yoffset,x_w, 15);
    //draw download rectangle
    ctx.fillStyle = "green";
    x_start = networkChartStart + networkChartWidth*(event.time+event.latency-minTime)/(maxTime-minTime);
    x_w = networkChartWidth*event.load/(maxTime-minTime);
    ctx.fillRect(x_start,yoffset,x_w, 15);

    if(event.parsing) {
      //draw parsing rectangle
      ctx.fillStyle = "blue";
      x_start = networkChartStart + networkChartWidth*(event.time+event.latency+event.load-minTime)/(maxTime-minTime);
      x_w = networkChartWidth*event.parsing/(maxTime-minTime);
      ctx.fillRect(x_start,yoffset,x_w, 15);

      if(event.buffer) {
        //draw buffering rectangle
        ctx.fillStyle = "red";
        x_start = networkChartStart + networkChartWidth*(event.time+event.latency+event.load+event.parsing-minTime)/(maxTime-minTime);
        x_w = networkChartWidth*event.buffer/(maxTime-minTime);
        ctx.fillRect(x_start,yoffset,x_w, 15);
      }
    }

   //draw end time
    ctx.fillStyle = "black";
    ctx.font = "12px Arial";
    legend = tend;
    x_start += x_w + 5;
    ctx.fillText(legend,x_start,yoffset+12);
    x_start += ctx.measureText(legend).width+5;

    legend = "[" + Math.round(event.latency);
    ctx.fillStyle = "orange";
    ctx.fillText(legend,x_start,yoffset+12);
    x_start += ctx.measureText(legend).width+5;

    legend = Math.round(event.load);
    if(!event.parsing) legend += "]";
    ctx.fillStyle = "green";
    ctx.fillText(legend,x_start,yoffset+12);
    x_start += ctx.measureText(legend).width+5;

    if(event.parsing) {
      legend = Math.round(event.parsing);
      if(!event.buffer) legend +="]";
      ctx.fillStyle = "blue";
      ctx.fillText(legend,x_start,yoffset+12);
      x_start += ctx.measureText(legend).width+5;

      if(event.buffer) {
        legend = Math.round(event.buffer) + "]";
        ctx.fillStyle = "red";
        ctx.fillText(legend,x_start,yoffset+12);
        x_start += ctx.measureText(legend).width+5;
      }
    }

    if(event.size) {
      if(event.size > 1000*1000) {
        legend = (event.size/1000000).toFixed(1) + 'MB';
      } else {
        legend = Math.round(event.size/1000) + 'kB';
      }
      ctx.fillStyle = "black";
      ctx.fillText(legend,x_start,yoffset+12);
      x_start += ctx.measureText(legend).width+5;
    }

    if(event.bw) {
      if(event.bw > 1000) {
        legend = (event.bw/1000).toFixed(1) + 'Mbps';
      } else {
        legend = event.bw + ' kbps';
      }
      ctx.fillStyle = "black";
      ctx.fillText(legend,x_start,yoffset+12);
      x_start += ctx.measureText(legend).width+5;
    }

    // draw event name
    ctx.fillStyle = "black";
    ctx.font = "15px Arial";
    legend = event.type;
    if(event.id2 !== undefined) {
      legend += ' ' + event.id2;
    }
    if(event.id !== undefined) {
      if(event.type === 'fragment') {
      legend += ' @';
      }
      legend += ' ' + event.id;
    }
    if(event.start !== undefined) {
      legend += ' [' + event.start + ',' + event.end + ']';
    }
    ctx.fillText(legend,5,yoffset+15);
  }

  function canvasDrawVideoEvent(ctx,yoffset,event,minTime,maxTime) {
    var legend,offset,x_start,x_w,
    networkChartStart = eventLeftMargin,
    networkChartWidth = ctx.canvas.width-eventLeftMargin-eventRightMargin;

    // draw event name
    ctx.fillStyle = "black";
    ctx.font = "15px Arial";
    legend = event.type;
    if (event.name) legend+= ':' + event.name;
    ctx.fillText(legend,5,yoffset+15);


   //draw start time
    ctx.fillStyle = "black";
    ctx.font = "12px Arial";
    legend = Math.round(event.time);
    offset = ctx.measureText(legend).width+5;
    x_start = networkChartStart-offset+networkChartWidth*(event.time-minTime)/(maxTime-minTime);
    ctx.fillText(legend,x_start,yoffset+12);


    //draw event rectangle
    x_start = networkChartStart + networkChartWidth*(event.time-minTime)/(maxTime-minTime);
    if(event.duration) {
      x_w = networkChartWidth*event.duration/(maxTime-minTime);
    } else {
      x_w = 1;
    }
    ctx.fillRect(x_start,yoffset,x_w, 15);

    if(event.duration) {

     //draw end time
      ctx.fillStyle = "black";
      ctx.font = "12px Arial";
      legend = Math.round(event.time+event.duration);
      x_start += x_w + 5;
      ctx.fillText(legend,x_start,yoffset+12);
      x_start += ctx.measureText(legend).width+5;

      legend = "[" + Math.round(event.duration) + "]";
      ctx.fillStyle = "blue";
      ctx.fillText(legend,x_start,yoffset+12);
    }
  }