Initial support for song browsing from UI

ui/src/common/BitrateField.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const BitrateField = ({ record = {}, source }) => {
+  return <span>{`${record[source]} kbps`}</span>
+}
+
+BitrateField.propTypes = {
+  label: PropTypes.string,
+  record: PropTypes.object,
+  source: PropTypes.string.isRequired
+}
+
+BitrateField.defaultProps = {
+  addLabel: true
+}
+
+export default BitrateField

ui/src/common/DurationField.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const DurationField = ({ record = {}, source }) => {
+  return <span>{format(record[source])}</span>
+}
+
+const format = (d) => {
+  const date = new Date(null)
+  date.setSeconds(d)
+  const fmt = date.toISOString().substr(11, 8)
+  return fmt.replace(/^00:/, '')
+}
+
+DurationField.propTypes = {
+  label: PropTypes.string,
+  record: PropTypes.object,
+  source: PropTypes.string.isRequired
+}
+
+DurationField.defaultProps = {
+  addLabel: true
+}
+
+export default DurationField

ui/src/common/Title.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Title = ({ subTitle }) => {
+  return <span>CloudSonic {subTitle ? ` - ${subTitle}` : ''}</span>
+}
+
+export default Title

ui/src/common/index.js

@@ -0,0 +1,5 @@
+import Title from './Title'
+import DurationField from './DurationField'
+import BitrateField from './BitrateField'
+
+export { Title, DurationField, BitrateField }