Added quality info (#918)

* added quality info

* fixed formatting

* implemented various suggestions

* npm run prettier

* applied suggestions

* npm run prettier

* corrected lossless formats and other suggestions

* moved losslessformats into consts.js

* added some test

* typo while resolving conflicts

* fetch

* removed a bug causing component (as suggested)

* Update PlayerToolbar.js

* implemented suggestions

* added few more tests

* npm run prettier

* added size

* updated qualityInfo

* implemented suggestions

* added test for when no record is recieved

* Update QualityInfo.js

ui/src/common/QualityInfo.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Chip from '@material-ui/core/Chip'
+import { LOSSLESS_FORMATS } from '../consts'
+
+export const QualityInfo = ({ record, size, ...rest }) => {
+  let { suffix = 'NO_SUFFIX', bitRate = 'NO_BITRATE' } = record
+  suffix = suffix.toUpperCase()
+  let info = suffix
+  if (!LOSSLESS_FORMATS.includes(suffix)) {
+    info += ' ' + bitRate
+  }
+  return <Chip {...rest} size={size} variant="outlined" label={info} />
+}
+
+QualityInfo.propTypes = {
+  record: PropTypes.object.isRequired,
+  size: PropTypes.string,
+}
+
+QualityInfo.defaultProps = {
+  size: 'small',
+  record: {},
+}