| {% 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-outline-primary.dropdown-toggle.px-3(
	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.dropdown-menu-right
	| {% 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 }
		},
		playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4]
	};

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

		this.hotkeys({
			enableVolumeScroll: false,
			customKeys: {
				KeyL: {
					key: function(event) {
						return (event.which === 76);
					},
					handler: function(player, options, event) {
						videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
					}
				}
			}
		});

		this.rememberVolumePlugin();

		{% if current_user.is_authenticated %}
		let fetch_progress_url = '{{ url_for("users_api.get_video_progress", video_id=node._id) }}';
		let report_url = '{{ url_for("users_api.set_video_progress", video_id=node._id) }}';

		this.progressPlugin({
			'report_url': report_url,
			'fetch_progress_url': fetch_progress_url,
		});

		{% endif %}
	});

	// Generic utility to add-buttons to the player.
	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;
	}

	// Video loop stuff. TODO: Move it to video_plugins.js
	var videoPlayerLoopButton = addVideoPlayerButton({
		player: videoPlayer,
		class: 'vjs-loop-button',
		icon: 'pi-replay',
		title: 'Loop'
	});

	function videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton) {
		if (videoPlayer.loop){
			videoPlayer.loop = false;
			$(videoPlayerLoopButton).removeClass('vjs-control-active');
		} else {
			videoPlayer.loop = true;
			$(videoPlayerLoopButton).addClass('vjs-control-active');
		}
	}

	videoPlayerLoopButton.onclick = function() {
		videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
	};

	{% endif %} // if node.video_sources

| {% endblock node_scripts %}