@bigfishtv/cockpit/src/components/asset/AudioCell.js

import React, { Component } from 'react'

import Icon from '../Icon'

/**
 * Dumb asset cell for an audio file
 */
export default class AudioCell extends Component {
	static defaultProps = {
		title: '',
		cellSize: 'default',
	}

	render() {
		const { cellSize, title, filename, extension, url } = this.props
		return (
			<div className="media media-1">
				<div className="media-inner">
					{cellSize == 'small' ? (
						<Icon name="volume-up" size="24" />
					) : (
						<audio
							controls
							ref="media"
							style={{
								width: '170%',
								transform: 'scale(0.6)',
								boxShadow: '5px 5px 8px rgba(0,0, 0, 0.1)',
								borderRadius: 50,
							}}>
							<source src={url} type={'audio/' + extension} />
						</audio>
					)}
					{cellSize !== 'small' && (
						<span className="media-inner-title">
							<a href={url} target="_blank">
								{title || filename}
							</a>
						</span>
					)}
				</div>
			</div>
		)
	}
}