{% extends "browse.html" %}

{% block style %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ url_for('player.static', filename='css/jplayer.blue.monday.min.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ url_for('player.static', filename='css/base.css') }}"/>
{% endblock %}

{% block content %}
<div data-player-swf="{{ url_for('player.static', filename='js') }}"
     data-player-url="{{ url_for('download_file', path=file.urlpath) }}"
     data-player-format="{{ file.media_format }}"
     class="jp-jplayer"></div>
<div class="jp-audio" role="application" aria-label="media player">
	<div class="jp-type-single">
		<div class="jp-gui jp-interface">
			<div class="jp-controls">
				<button class="jp-play" role="button" tabindex="0">play</button>
				<button class="jp-stop" role="button" tabindex="0">stop</button>
			</div>
			<div class="jp-progress">
				<div class="jp-seek-bar">
					<div class="jp-play-bar"></div>
				</div>
			</div>
			<div class="jp-volume-controls">
				<button class="jp-mute" role="button" tabindex="0">mute</button>
				<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
				<div class="jp-volume-bar">
					<div class="jp-volume-bar-value"></div>
				</div>
			</div>
			<div class="jp-time-holder">
				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
				<div class="jp-toggles">
					<button class="jp-repeat" role="button" tabindex="0">repeat</button>
				</div>
			</div>
		</div>
		<div class="jp-details">
			<div class="jp-title" aria-label="title">&nbsp;</div>
		</div>
		<div class="jp-no-solution">
			<span>Update Required</span>
			To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
		</div>
	</div>
</div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('player.static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('player.static', filename='js/jquery.jplayer.min.js') }}"></script>
    <script src="{{ url_for('player.static', filename='js/base.js') }}"></script>
{% endblock %}
