humus-old/client/ui/throughput.js

// 3rd party.
import classnames from 'classnames';
import React, {useEffect, useState} from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import {Vector} from '@avocado/math';
import contempo from 'contempo';
// 1st party.
import {WorldTime} from '../../common/world-time';

const decorate = compose(
  contempo(`
.throughput {
  background-color: rgba(0, 0, 0, .3);
  color: white;
  font-size: 0.6em;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  line-height: 1em;
  width: 11em;
  padding: 0.5em;
  font-family: monospace;
}
.throughput .kbps:before {
  color: rgb(0, 255, 0);
  content: 'kb/s ';
}
.throughput .mbps:before {
  color: rgb(255, 180, 0);
  content: 'mb/s ';
}
.throughput .input:before {
  content: '\\a0in: ';
}
.throughput .output:before {
  content: 'out: ';
}
.throughput p {
  margin: 0.25em;
}
  `),
);

function formatKbps(bps) {
  const kbps = bps / 1000;
  return Math.floor(kbps * 100) / 100;
}

function formatMbps(bps) {
  const mbps = bps / 1000000;
  return Math.floor(mbps * 100) / 100;
}

function format(bps) {
  const unit = preferredUnit(bps);
  switch (unit) {
    case 'kbps':
      return formatKbps(bps);
    case 'mbps':
      return formatMbps(bps);
  }
}

function preferredUnit(bps) {
  if (bps > 1000000) {
    return 'mbps';
  }
  else {
    return 'kbps';
  }
}

const ThroughputComponent = ({Parser}) => {
  const [throughput, setThroughput] = useState([0, 0]);
  const [inUnit, setInUnit] = useState('kbps');
  const [outUnit, setOutUnit] = useState('kbps');
  useEffect(() => {
    const {Decoder, Encoder} = Parser;
    const throughputSampleTime = 0.5;
    // Throughput ticker.
    const throughputHandle = setInterval(() => {
      const throughput = Vector.scale([
        Decoder.throughput || 0,
        Encoder.throughput || 0,
      ], 8 * (1 / throughputSampleTime));
      setThroughput(throughput);
      setInUnit(preferredUnit(throughput[0]));
      setOutUnit(preferredUnit(throughput[1]));
      Decoder.throughput = 0;
      Encoder.throughput = 0;
    }, throughputSampleTime * 1000);
    return () => {
      clearInterval(throughputHandle);
    };
  }, []);
  return <div className="throughput unselectable">
    <p className={classnames(
      'unit',
      inUnit,
    )}>
      <span className="input">
        {format(throughput[0])}
      </span>
    </p>
    <p className={classnames(
      'unit',
      outUnit,
    )}>
      <span className="output">
        {format(throughput[1])}
      </span>
    </p>
  </div>;
}

export default decorate(ThroughputComponent);