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

import React, { Component } from 'react'

import Modal from '../modal/Modal'

export default class MediaPreviewModal extends Component {
	static defaultProps = {
		asset: {},
	}

	handleClose = () => {
		this.props.closeModal()
	}

	render() {
		const { asset } = this.props
		const { kind, url, extension, filename } = asset
		return (
			<Modal
				title="Media Player"
				size={kind == 'audio' ? 'xsmall' : 'medium'}
				onClose={this.handleClose}
				ModalActions={props => (
					<button className="button" onClick={props.onClose}>
						Close
					</button>
				)}>
				<p>
					<a href={url} target="_blank" onClick={() => this.refs.media.pause()}>
						{filename}
					</a>
				</p>

				{kind == 'audio' && (
					<audio controls autoPlay ref="media" style={{ width: '100%' }}>
						<source src={url} type={'audio/' + extension} />
					</audio>
				)}

				{kind == 'video' && (
					<video controls autoPlay ref="media" style={{ width: '100%', height: 'auto' }}>
						<source src={url} type={'video/' + extension} />
					</video>
				)}
			</Modal>
		)
	}
}