| {% extends "nodes/view_base.html" %}

| {% block node_preview %}
| {% if node.video_sources %}
section.node-preview.video
	video#videoplayer.video-js(
		controls,
		data-setup="{}",
		preload="auto",
		poster="{% if node.picture %}{{ node.picture.thumbnail('l', api=api) }}{% endif %}")
		| {% for source in node.video_sources %}
		source(
			src="{{ source.src }}",
			type="{{ source.type }}")
		| {% endfor %}
		p.vjs-no-js.
			To view this video please enable JavaScript, and consider upgrading to a web browser that
			<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
| {% else %}
| {% include 'nodes/custom/_node_preview_forbidden.html' %}
| {% endif %}
| {% endblock node_preview %}

| {% block node_download %}
| {% if node.file_variations %}
button.btn.btn-default.dropdown-toggle(
	type="button",
	data-toggle="dropdown",
	aria-haspopup="true",
	aria-expanded="false")
	i.pi-download
	| Download
	i.pi-angle-down.icon-dropdown-menu

ul.dropdown-menu
	| {% for variation in node.file_variations %}
	li
		a(href="{{ variation.link }}",
			title="Download this format",
			download)
			span.length {{ variation.length | filesizeformat }}

			span.format {{ variation.format }}
			span.size {{ variation.size }}
	| {% endfor %}
| {% endif %}
| {% endblock node_download %}


| {% block node_scripts %}
script(type="text/javascript").
	{% if node.video_sources %}

	var videoPlayer = document.getElementById('videoplayer');

	var options = {
		controlBar: {
			volumePanel: { inline: false }
		}
	};

	videojs(videoPlayer, options).ready(function() {
		this.ga({
			'eventLabel' : '{{ node._id }} - {{ node.name }}',
			'eventCategory' : '{{ node.project }}',
			'eventsToTrack' : ['start', 'error', 'percentsPlayed']
		});
		this.hotkeys();

	});

	function addVideoPlayerButton(data) {

		var controlBar,
				newButton = document.createElement('button'),
				buttonContent = document.createElement('span');

		newButton.className = 'vjs-control vjs-button ' + data.class;
		buttonContent.className = 'vjs-icon-placeholder';
		newButton.setAttribute('title', data.title);

		newButton.appendChild(buttonContent);
		controlBar = document.getElementsByClassName('vjs-control-bar')[0];
		insertBeforeButton = document.getElementsByClassName('vjs-fullscreen-control')[0];
		controlBar.insertBefore(newButton, insertBeforeButton);

		return newButton;
	}

	var videoPlayerLoopButton = addVideoPlayerButton({
		player: videoPlayer,
		class: 'vjs-loop-button',
		icon: 'pi-replay',
		title: 'Loop'
	});

	videoPlayerLoopButton.onclick = function() {
		if (videoPlayer.loop){
			videoPlayer.loop = false;
			$(this).removeClass('vjs-control-active');

		} else {
			videoPlayer.loop = true;
			$(this).addClass('vjs-control-active');
		}
	};

	{% endif %} // if node.video_sources

| {% endblock node_scripts %}