| {% block body %}

#node-container
	#node-overlay

	section.node-preview.video
		| {% if node.video_sources %}
		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 %}
		.video-dummy.sorry(
			style="{% if node.picture %}background-image: url({{ node.picture.thumbnail('l', api=api) }});{% endif %}")
			.video-dummy-content
				.video-dummy-content-text
					span Available to Blender Cloud subscribers
					span
						small Support Blender and get awesome stuff!
					hr
					a.subscribe(href="{{ url_for('cloud.join') }}") <em>Subscribe</em>
					a(href="{{ url_for('users.login') }}") Already a subscriber? Log in
		| {% endif %}


	section.node-details-container.video

		.node-details-header
			.node-title#node-title
				| {{node.name}}

		| {% if node.description %}
		.node-details-description#node-description
			| {{node.description}}
		| {% endif %}

		include ../../_node_details

		#comments-embed
			.comments-list-loading
				i.pi-spin

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

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

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

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

	videojs(videoPlayer, options).ready(function() {
		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.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"
	});

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

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

	{% endif %}

	$(function(){
		// Generate GA pageview
		ga('send', 'pageview', location.pathname);

		var content_type = $("li.node-details-meta-list-item.type").text();
		$("li.node-details-meta-list-item.type").text(content_type.substring(content_type.indexOf("/") + 1));

	});

include ../../_scripts

| {% endblock %}