Adicionado suporte ao Safari e novos campos no Enviar Sinal.

Adabriand Furtado
1 parent e3569528
Showing 105 changed files with 414 additions and 251 deletions Show diff stats
view/css/main.css
view/img/circular/md/plano-baixo-esquerda.mp4
view/img/circular/md/plano-baixo-tras.mp4
view/img/circular/md/plano-cima-direita.mp4
view/img/circular/md/plano-cima-frente.mp4
view/img/circular/md/plano-direita-baixo.mp4
view/img/circular/md/plano-direita-tras.mp4
view/img/circular/md/plano-esquerda-cima.mp4
view/img/circular/md/plano-esquerda-frente.mp4
view/img/circular/md/plano-frente-baixo.mp4
view/img/circular/md/plano-frente-direita.mp4
view/img/circular/md/plano-tras-cima.mp4
view/img/circular/md/plano-tras-esquerda.mp4
view/img/circular/md/raio-grande.mp4
view/img/circular/md/raio-normal.mp4
view/img/circular/md/raio-pequeno.mp4
view/img/circular/md/sentido-anti-horario.mp4
view/img/circular/md/sentido-horario.mp4
view/img/circular/md/velocidade-lento.mp4
view/img/circular/md/velocidade-normal.mp4
@@ -8,6 +8,10 @@ body nav.navbar:first-child {
 	display: none;
 }
  
+.navbar-wl .navbar-nav {
+	padding-left: 60px;
+}
+
 footer {
 	display: none;
 }
@@ -534,6 +538,10 @@ ul.rig.columns-4 li {
 	width: 100%;
 }
  
+#thanks-screen a {
+	text-decoration: underline;
+}
+
 #completed-all-task-msg {
 	display: none;
 }
 (function(videoHelper, $, undefined) {
-	
+
+	function _getSource(videoBaseUrl) {
+		return '<source src="' + videoBaseUrl + '.webm" type="video/webm">'
+				+ '<source src="' + videoBaseUrl
+				+ '.mp4" type="video/mp4">Sem suporte a vídeos';
+	}
+
 	function _controlVideo(elId, toPlay) {
-		var videoSrc = $(elId).attr("src");
-		if (typeof videoSrc == "undefined" ||
-				(typeof videoSrc != "undefined" && videoSrc === ""))
+		if ($(elId).length === 0)
 			return;
 		if (toPlay) {
 			$(elId).get(0).play();
@@ -11,13 +15,17 @@
 			$(elId).get(0).pause();
 		}
 	}
-	
+
 	videoHelper.play = function(elId) {
 		_controlVideo(elId, true);
-	}
-	
-	 videoHelper.pause = function(elId) {
+	};
+
+	videoHelper.pause = function(elId) {
 		_controlVideo(elId, false);
-	}
+	};
+
+	videoHelper.getSource = function(videoBaseUrl) {
+		return _getSource(videoBaseUrl);
+	};
  
 }(window.videoHelper = window.videoHelper || {}, jQuery));
 (function(renderSign, $, undefined) {
-	
+
 	var api_url = '';
-	
+
 	function _submitParameterJSON(parsedParameterJSON, callback) {
 		console.log(parsedParameterJSON);
 		$.ajax({
@@ -18,14 +18,15 @@
 			}
 		});
 	}
-	
+
 	function _showRenderedAvatar(parameterJSON) {
 		var userId = parameterJSON['userId'];
 		var signName = parameterJSON['sinal'];
-		$("#render-avatar video").attr("src",
-				_getRenderedAvatarUrl(userId, signName));
+
+		var avatarBaseUrl = _getRenderedAvatarBaseUrl(userId, signName);
+		$('#render-avatar video').html(videoHelper.getSource(avatarBaseUrl));
 		$("#render-avatar").fadeIn(300);
-	}	
+	}
  
 	function _showRenderScreen(toShow) {
 		if (toShow) {
@@ -38,22 +39,22 @@
 			videoHelper.pause("#render-avatar video");
 		}
 	}
-	
-	function _getRenderedAvatarUrl(userId, signName) {
-		return api_url + '/public/' + userId + '/' + signName + ".webm";
+
+	function _getRenderedAvatarBaseUrl(userId, signName) {
+		return api_url + '/public/' + userId + '/' + signName;
 	}
-	
+
 	renderSign.showRenderedAvatar = function(parameterJSON) {
 		_showRenderedAvatar(parameterJSON);
 		_showRenderScreen(true);
 	}
-	
+
 	renderSign.showRenderScreen = function(toShow) {
 		_showRenderScreen(toShow);
 	}
-	
-	renderSign.getRenderedAvatarUrl = function(userId, signName) {
-		return _getRenderedAvatarUrl(userId, signName);
+
+	renderSign.getRenderedAvatarBaseUrl = function(userId, signName) {
+		return _getRenderedAvatarBaseUrl(userId, signName);
 	}
  
 	renderSign.submit = function(parsedParameterJSON) {
@@ -65,13 +66,14 @@
 		$("#finish-button").addClass("disabled");
 		$("#finish-button").show();
  
-		_submitParameterJSON(parsedParameterJSON, function(parsedParameterJSON) {
-			$("#render-loading").fadeOut(300);
-			$("#finish-button").removeClass("disabled");
-			_showRenderedAvatar(parsedParameterJSON);
-		});
+		_submitParameterJSON(parsedParameterJSON,
+				function(parsedParameterJSON) {
+					$("#render-loading").fadeOut(300);
+					$("#finish-button").removeClass("disabled");
+					_showRenderedAvatar(parsedParameterJSON);
+				});
 	};
-	
+
 	renderSign.setup = function(apiUrl) {
 		api_url = apiUrl;
 		$("#render-edit").off("click").on("click", function() {
 (function(submitSign, $, undefined) {
  
 	var submitUrl = '';
-	
+	var MIN_PHRASES_LENGTH = 3;
+	var MAX_PHRASES_LENGTH = 20;
+
 	function _isEmpty(str) {
 		return (!str || 0 === str.length);
 	}
  
-	function _validadeInputFields() {
+	function _alertSignName() {
+		$('#upload-warning-msg').hide();
 		var signName = $('#input-sign-name').val();
+		if (_isEmpty(signName)) {
+			$('#upload-warning-msg').html('Por favor indique o nome do sinal.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertWordClass() {
+		$('#upload-warning-msg').hide();
+		var wordClass = $('#input-word-class').val();
+		if (_isEmpty(wordClass)) {
+			$('#upload-warning-msg').html(
+					'Por favor selecione a classe gramatical do sinal.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _areValidPhrases(phrases) {
+		var cleanPhrases = phrases.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
+		var splitPhrasesLength = cleanPhrases.trim().split(/\s+/g).length;
+		return splitPhrasesLength >= MIN_PHRASES_LENGTH
+				&& splitPhrasesLength <= MAX_PHRASES_LENGTH;
+	}
+
+	function _alertPhrase() {
+		$('#upload-warning-msg').hide();
+		var phrases = $('#input-phrases').val();
+		if (!_areValidPhrases(phrases)) {
+			$('#upload-warning-msg').html(
+					'As frases de exemplo devem possuir no minímo '
+							+ MIN_PHRASES_LENGTH + ' e no máximo '
+							+ MAX_PHRASES_LENGTH + ' palavras.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertState() {
+		$('#upload-warning-msg').hide();
 		var state = $('#input-state').val();
+		if (_isEmpty(state)) {
+			$('#upload-warning-msg').html('Por favor selecione seu estado.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertCity() {
+		$('#upload-warning-msg').hide();
 		var city = $('#input-city').val();
+		if (_isEmpty(city)) {
+			$('#upload-warning-msg').html(
+					'Por favor indique o nome da sua cidade.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _alertSignUpload() {
+		$('#upload-warning-msg').hide();
 		var signUpload = $('#input-sign-upload').val();
-		return !_isEmpty(signName) && !_isEmpty(state) && !_isEmpty(city)
-				&& !_isEmpty(signUpload);
+		if (_isEmpty(signUpload)) {
+			$('#upload-warning-msg').html(
+					'Por favor selecione o arquivo do vídeo do seu sinal.');
+			$('#upload-warning-msg').show();
+		}
+	}
+
+	function _validadeAllFields() {
+		var signName = $('#input-sign-name').val();
+		var wordClass = $('#input-word-class').val();
+		var phrases = $('#input-phrases').val();
+		var state = $('#input-state').val();
+		var city = $('#input-city').val();
+		var signUpload = $('#input-sign-upload').val();
+		return !_isEmpty(signName) && !_isEmpty(wordClass)
+				&& _areValidPhrases(phrases) && !_isEmpty(state)
+				&& !_isEmpty(city) && !_isEmpty(signUpload);
 	}
  
 	function _updateSubmitButton() {
-		if (_validadeInputFields()) {
-			$('#submit-sign-container button').removeClass('disabled');
+		if (_validadeAllFields()) {
+			_enableSubmitButton();
 		} else {
-			$('#submit-sign-container button').addClass('disabled');
+			_disableSubmitButton();
 		}
 	}
-	
+
+	function _enableSubmitButton() {
+		$('#submit-sign-container button').removeClass('disabled');
+		$('#submit-sign-container button').off('click');
+	}
+
+	function _disableSubmitButton() {
+		$('#submit-sign-container button').addClass('disabled');
+		$('#submit-sign-container button').on('click', function(event) {
+			event.preventDefault();
+		});
+	}
+
 	function _resetFormFields() {
 		$('#input-sign-name').val('');
 		$('#input-state').val('');
 		$('#input-city').val('');
 		$('#input-sign-upload').val('');
 		$("#upload-progress .progress-bar").css("width", "0px");
-    	$('#upload-progress-container').hide();
+		$('#upload-progress-container').hide();
 		$('#input-sign-upload').show();
 	}
-	
-	submitSign.show = function() {
-		$(".sub-main-container").hide();
-		$("#submit-sign-container").show();
-		$("#submit-sign-anchor").focus();
-	}
  
-	submitSign.setup = function(uploadSignHost) {
-		submitUrl = uploadSignHost;
+	function _setupSubmitSignForm() {
+		_disableSubmitButton();
 		$('#submit-sign-container form').fileupload(
 				{
 					url : submitUrl,
-				    add: function (e, data) {            
-				        $('#submit-sign-container button').off('click').on('click', function (event) {
-				        	event.preventDefault();
-				        	
-				        	$('#submit-sign-container button').addClass('disabled');
-				        	$('#input-sign-upload').hide();
-				        	$('#upload-progress-container').show();
-				        	data.submit();
-				        });
-				    },
+					add : function(e, data) {
+						$('#submit-sign-container button').off('click').on(
+								'click',
+								function(event) {
+									event.preventDefault();
+
+									$('#submit-sign-container button')
+											.addClass('disabled');
+									$('#input-sign-upload').hide();
+									$('#upload-progress-container').show();
+									data.submit();
+								});
+					},
 					done : function(e, data) {
 						$('#upload-success-msg').fadeIn(500);
 						setTimeout(function() {
@@ -64,27 +145,52 @@
 					progressall : function(e, data) {
 						var progress = parseInt(data.loaded / data.total * 100,
 								10);
-						$("#upload-progress .progress-bar").attr('aria-valuenow', progress).
-							css("width", progress + "%");
+						$("#upload-progress .progress-bar").attr(
+								'aria-valuenow', progress).css("width",
+								progress + "%");
 					},
 					error : function(error) {
 						alert(error.responseText);
 					},
-					replaceFileInput: false
+					replaceFileInput : false
 				});
  
 		$('#input-sign-name').on('input', function() {
+			_alertSignName();
+			_updateSubmitButton();
+		});
+		$('#input-word-class').on('input', function() {
+			_alertWordClass();
+			_updateSubmitButton();
+		});
+		$('#input-phrases').on('input', function() {
+			_alertPhrase();
 			_updateSubmitButton();
 		});
 		$('#input-state').on('input', function() {
+			_alertState();
 			_updateSubmitButton();
 		});
 		$('#input-city').on('input', function() {
+			_alertCity();
 			_updateSubmitButton();
 		});
 		$('#input-sign-upload').on('change', function() {
+			_alertSignUpload();
 			_updateSubmitButton();
 		});
+	}
+
+	submitSign.show = function() {
+		$(".sub-main-container").hide();
+		$("#submit-sign-container").show();
+		$("#submit-sign-anchor").focus();
+	};
+
+	submitSign.setup = function(uploadSignHost) {
+		submitUrl = uploadSignHost;
+		loadHtmlHelper.load('/submit-sign/submit-sign.html',
+				'#submit-sign-container', _setupSubmitSignForm);
 	};
  
 }(window.submitSign = window.submitSign || {}, jQuery));
@@ -6,20 +6,20 @@
 	var projectId = -1;
  
 	function _updateTeachedSignsMessage() {
-		$(".teached-signs-msg").hide();
+		$('.teached-signs-msg').hide();
 		if (doneTasks == 0) {
-			$(".teached-signs-msg[type=none]").show();
+			$('.teached-signs-msg[type=none]').show();
 		} else if (doneTasks == 1) {
-			$(".teached-signs-msg[type=one]").show();
+			$('.teached-signs-msg[type=one]').show();
 		} else {
-			$(".teached-signs-msg[type=more] span").text(doneTasks);
-			$(".teached-signs-msg[type=more]").show();
+			$('.teached-signs-msg[type=more] span').text(doneTasks);
+			$('.teached-signs-msg[type=more]').show();
 		}
 	}
  
 	function _createSigns(answers) {
 		_updateTeachedSignsMessage();
-		$("#signs-list-container").html("");
+		$('#signs-list-container').html('');
 		for (i = 0; i < answers.length; i++) {
 			_addSign(answers[i].info);
 		}
@@ -28,25 +28,24 @@
 	function _addSign(answer) {
 		var signName = answer.parameter_json.sinal;
 		var apiUserId = answer.parameter_json.userId;
-		var videoUrl = renderSign.getRenderedAvatarUrl(apiUserId, signName);
-		$("#signs-list-container").append(
+		var videoBaseUrl = renderSign.getRenderedAvatarBaseUrl(apiUserId,
+				signName);
+		$('#signs-list-container').append(
 				'<div class="col-btn col-xs-6 col-sm-3 col-md-2" sign-name="'
 						+ signName
 						+ '"><button class="btn btn-danger btn-block">'
 						+ signName + '</button></div>');
-		$("#signs-list-container .col-btn[sign-name=" + signName + "]")
-				.off("click")
-				.on(
-						"click",
-						function() {
-							$('#teached-sign-video-container')
-									.html(
-											"<video autoplay loop><source src='"
-													+ videoUrl
-													+ "' type='video/webm'>Sem suporte a vídeos</video>");
-							$('#teached-sign-name').html(signName);
-							$('#teached-sign-modal').modal('show');
-						});
+		$('#signs-list-container .col-btn[sign-name=' + signName + ']').off(
+				'click').on(
+				'click',
+				function() {
+					$('#teached-sign-video-container').html(
+							'<video autoplay loop>'
+									+ videoHelper.getSource(videoBaseUrl)
+									+ '</video>');
+					$('#teached-sign-name').html(signName);
+					$('#teached-sign-modal').modal('show');
+				});
 	}
  
 	function _updateTeachedSignsContainer() {
@@ -56,13 +55,13 @@
 	}
  
 	teachedSigns.show = function() {
-		$(".sub-main-container").hide();
-		$("#teached-signs-container").show();
+		$('.sub-main-container').hide();
+		$('#teached-signs-container').show();
 	}
  
 	teachedSigns.setup = function() {
 		pybossaApiHelper.getProjectId().done(function(response) {
-			if (typeof response == "undefined" || response.length < 1) {
+			if (typeof response == 'undefined' || response.length < 1) {
 				return;
 			}
 			projectId = response[0].id;
@@ -33,10 +33,9 @@
 	function _loadTaskInfo(task) {
 		currentTaskId = task.id;
 		var signName = task.info.sign_name;
-		var refVidLink = videosUrl + signName + '_REF.webm';
+		var baseRefVidUrl = videosUrl + signName + '_REF';
 		$('.sign-label').text(signName);
-		$('.ref-video').attr('src', refVidLink);
-
+		$('.ref-video').html(videoHelper.getSource(baseRefVidUrl));
 		_setupTmpParameterJSON(task.info.sign_name);
 	}
  
@@ -4,30 +4,33 @@
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/duration-slow.webm"
+			<video
 				preload="metadata" value="lento"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/duration-slow.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/duration-slow.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/long-duration-icon.png" /> Longa
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/duration-normal.webm"
+			<video
 				preload="metadata" value="normal"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/duration-normal.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/duration-normal.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/normal-duration-icon.png" /> Normal
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/duration-fast.webm"
+			<video
 				preload="metadata" value="rapido"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/duration-fast.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/duration-fast.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/short-duration-icon.png" /> Breve
@@ -5,30 +5,33 @@
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/velocity-slow.webm"
+			<video
 				preload="metadata" value="lento"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-slow.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-slow.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/slow-velocity-icon.png" /> Lento
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/velocity-normal.webm"
+			<video
 				preload="metadata" value="normal"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-normal.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-normal.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/normal-velocity-icon.png" /> Normal
 	</div>
 	<div class="single-column-option-container">
 		<div class="single-column-option">
-			<video src="{{ server }}/img/exf/velocity-fast.webm"
+			<video
 				preload="metadata" value="rapido"
 				class="video-panel-option selection-panel-option" autoplay loop>
-				<source type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-fast.webm" type="video/webm">
+				<source src="{{ server }}/img/exf/velocity-fast.mp4" type="video/mp4">
 		</div>
 		<img class="single-column-option"
 			src="{{ server }}/img/fast-velocity-icon.png" /> Rápido
@@ -5,36 +5,30 @@
 	</div>
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
-			<li><video src="{{ server }}/img/mov/PONTUAL.webm"
+			<li><video 
 					preload="metadata" value="pontual"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/PONTUAL.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/PONTUAL.mp4" type="video/mp4">
 				</video> Pontual</li>
-			<li><video src="{{ server }}/img/mov/RETILINEO.webm"
+			<li><video
 					preload="metadata" value="retilineo"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/RETILINEO.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/RETILINEO.mp4" type="video/mp4">
 				</video> Retilíneo</li>
-			<li><video src="{{ server }}/img/mov/CIRCULAR.webm"
+			<li><video
 					preload="metadata" value="circular"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/CIRCULAR.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/CIRCULAR.mp4" type="video/mp4">					
 				</video> Circular</li>
-			<li><video src="{{ server }}/img/mov/SEMICIRCULAR.webm"
+			<li><video
 					preload="metadata" value="semicircular"
 					class="video-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/mov/SEMICIRCULAR.webm" type="video/webm">
+					<source src="{{ server }}/img/mov/SEMICIRCULAR.mp4" type="video/mp4">
 				</video> Semi-Circular</li>
-			<!--
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>
-      <li><img class="video-panel-option selection-panel-option"
-        src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>
-         -->
 		</ul>
 	</div>
 </div>
@@ -6,76 +6,76 @@
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.webm"
 					preload="metadata" value="baixo-esquerda"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.mp4" type="video/mp4">
 				</video>Baixo - Direita</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.webm"
 					preload="metadata" value="cima-direita"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.mp4" type="video/mp4">
 				</video>Cima - Esquerda</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.webm"
 					preload="metadata" value="direita-baixo"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.mp4" type="video/mp4">
 				</video>Esquerda - Baixo</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.webm"
 					preload="metadata" value="esquerda-cima"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.mp4" type="video/mp4">
 				</video>Direita - Cima</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.webm"
 					preload="metadata" value="baixo-tras"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.mp4" type="video/mp4">
 				</video>Baixo - Trás</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.webm"
 					preload="metadata" value="cima-frente"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.mp4" type="video/mp4">
 				</video>Cima - Frente</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.webm"
 					preload="metadata" value="frente-baixo"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.mp4" type="video/mp4">
 				</video>Frente - Baixo</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.webm"
 					preload="metadata" value="tras-cima"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.mp4" type="video/mp4">
 				</video>Trás - Cima</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.webm"
 					preload="metadata" value="frente-direita"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.mp4" type="video/mp4">
 				</video>Frente - Esquerda</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.webm"
 					preload="metadata" value="tras-esquerda"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.mp4" type="video/mp4">
 				</video>Trás - Direita</li>	
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.webm"
 					preload="metadata" value="direita-tras"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.mp4" type="video/mp4">
 				</video>Esquerda - Trás</li>
 			<li><video
-					src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.webm"
 					preload="metadata" value="esquerda-frente"
 					class="box-panel-option selection-panel-option" autoplay>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.mp4" type="video/mp4">
 				</video>Direita - Frente</li>
 		</ul>
 	</div>
@@ -5,20 +5,23 @@
 	</div>
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-pequeno.webm"
+			<li><video
 					preload="metadata" value="pequeno"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-pequeno.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-pequeno.mp4" type="video/mp4">
 				</video>Pequeno</li>
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-normal.webm"
+			<li><video
 					preload="metadata" value="normal"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-normal.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-normal.mp4" type="video/mp4">
 				</video>Médio</li>
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-grande.webm"
+			<li><video
 					preload="metadata" value="grande"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-grande.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/raio-grande.mp4" type="video/mp4">
 				</video>Grande</li>
 		</ul>
 	</div>
@@ -5,15 +5,17 @@
 	</div>
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-horario.webm"
+			<li><video
 					preload="metadata" value="true"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-horario.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-horario.mp4" type="video/mp4">
 				</video>Horário</li>
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-anti-horario.webm"
+			<li><video
 					preload="metadata" value="false"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-anti-horario.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/sentido-anti-horario.mp4" type="video/mp4">
 				</video>Anti-horário</li>
 		</ul>
 	</div>
@@ -5,20 +5,23 @@
 	</div>
 	<div class="selection-panel-inner-body">
 		<ul class="rig columns-2">
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-lento.webm"
+			<li><video
 					preload="metadata" value="lento"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-lento.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-lento.mp4" type="video/mp4">
 				</video>Lento</li>
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-normal.webm"
+			<li><video
 					preload="metadata" value="normal"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-normal.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-normal.mp4" type="video/mp4">
 				</video>Normal</li>
-			<li><video src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-rapido.webm"
+			<li><video
 					preload="metadata" value="rapido"
 					class="box-panel-option selection-panel-option" autoplay loop>
-					<source type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-rapido.webm" type="video/webm">
+					<source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/velocidade-rapido.mp4" type="video/mp4">
 				</video>Rápido</li>
 		</ul>
 	</div>
 <link rel="stylesheet" href="{{ server }}/css/main.css">
  
-<a href="{{ homepage_url }}" class="wl-logo"> <img
-	src="{{ server }}/img/logo.svg">
-</a>
 <nav class="navbar navbar-default navbar-wl">
 	<div class="container">
+		<a href="{{ homepage_url }}" class="wl-logo"> <img
+			src="{{ server }}/img/logo.svg">
+		</a>
 		<!-- Brand and toggle get grouped for better mobile display -->
 		<div class="navbar-header">
 			<button type="button" class="navbar-toggle collapsed"
@@ -16,12 +16,14 @@
 			</button>
 		</div>
 		<!-- Collect the nav links, forms, and other content for toggling -->
-		<div class="collapse navbar-collapse" id="navbar-collapse-1">
+		<div id="navbar-collapse-1" class="collapse navbar-collapse">
 			<ul class="nav navbar-nav navbar-right">
+				<li><a href="/pybossa/project"
+					target="_blank">Início</a></li>
 				<li><a href="javascript:void(0);"
 					onclick="wikilibras.showTeachContainer()">Ensinar</a></li>
 				<li><a id="submit-sign-anchor" href="javascript:void(0);"
-					onclick="submitSign.show()">Enviar sinal</a></li>
+					onclick="submitSign.show()">Gravar e enviar vídeo</a></li>
 				<li><a href="javascript:void(0);" onclick="teachedSigns.show()">Sinais
 						ensinados</a></li>
 				<li><a href="javascript:void(0);"
@@ -40,10 +42,9 @@
 		<div id="initial-screen">
 			<div class="col-sm-6 col-centered">
 				<div class="col-sm-8 col-centered">
-					<video src="" preload="metadata"
+					<video preload="metadata"
 						class="ref-video video-body-main video-border" autoplay loop
 						controls>
-						<source type="video/webm">
 					</video>
 				</div>
 				<h6 class="text-center">
@@ -60,9 +61,8 @@
 					<h8>Vídeo de referência "<span class="sign-label"></span>"</h8>
 					<div id="ref-video-panel" class="col-sm-12">
 						<div id="ref-video-container" class="col-sm-10">
-							<video src="" preload="metadata"
+							<video preload="metadata"
 								class="ref-video video-body-main video-border" loop controls>
-								<source type="video/webm">
 							</video>
 						</div>
 						<div id="minimize-icon-container" class="col-sm-2 icon_container"
@@ -160,9 +160,8 @@
 				<div id="render-ref" class="col-sm-6">
 					<h6>Vídeo de referência</h6>
 					<div class="col-sm-12">
-						<video src="" preload="metadata"
+						<video preload="metadata"
 							class="ref-video video-body-main video-border" loop controls>
-							<source type="video/webm">
 						</video>
 					</div>
 				</div>
@@ -171,9 +170,8 @@
 						<h6>
 							Sinal "<span class="sign-label"></span>" construído
 						</h6>
-						<video src="" preload="metadata"
+						<video preload="metadata"
 							class="video-body-main video-border" autoplay loop controls>
-							<source type="video/webm">
 						</video>
 						<div id="render-edit" class="icon_container" name="big-edit">
 							<img class="col-centered"
@@ -198,18 +196,18 @@
 			</div>
 		</div>
 		<div id="thanks-screen">
-			<div class="col-sm-7 col-centered">
+			<div class="col-sm-8 col-centered">
 				<div id="completed-task-msg">
 					<h3 class="text-center">Obrigado,</h3>
 					<h6 class="text-center">você configurou o sinal com sucesso!</h6>
 				</div>
 				<div id="completed-all-task-msg" class="text-center">
 					<h4>
-						Que pena, não há disponíveis sinais no momento!
+						Que pena, não há sinais disponíveis no momento!
 						</h6>
 						<h6>
 							Ajude a expandir o dicionário <a href="javascript:void(0);"
-								onclick="submitSign.show()">enviando um novo sinal</a>, ou
+								onclick="submitSign.show()">gravando e enviando um vídeo</a>, ou
 						</h6>
 						<h6>
 							experimente <a href="javascript:void(0);"
@@ -224,83 +222,6 @@
 		</div>
 	</div>
 	<div id="submit-sign-container" class="sub-main-container">
-		<form class="form-horizontal" method="post"
-			enctype="multipart/form-data">
-			<div id="upload-success-msg" class="alert alert-success">
-				<strong>Envio concluído, muito obrigado! Em breve o seu
-					sinal estará no dicionário WikiLibras.</strong>
-			</div>
-			<fieldset>
-				<h2>Sentiu falta de algum sinal no dicionário? Grave e envie o
-					vídeo do seu sinal aqui!</h2>
-				<div class="submit-sign-form col-sm-8">
-					<div class="form-group">
-						<label class="control-label col-sm-3">Nome do sinal:</label>
-						<div class="col-sm-5">
-							<input id="input-sign-name" name="nome" class="form-control"
-								placeholder="Nome do sinal" type="text">
-						</div>
-					</div>
-					<div class="form-group">
-						<label class="control-label col-sm-3">Estado:</label>
-						<div class="col-sm-5">
-							<select id="input-state" name="estado" class="form-control">
-								<option value="">Selecione seu Estado</option>
-								<option value="Acre">Acre</option>
-								<option value="Alagoas">Alagoas</option>
-								<option value="Amapá">Amapá</option>
-								<option value="Amazonas">Amazonas</option>
-								<option value="Bahia">Bahia</option>
-								<option value="Ceará">Ceará</option>
-								<option value="Distrito Federal">Distrito Federal</option>
-								<option value="Espirito Santo">Espirito Santo</option>
-								<option value="Goiás">Goiás</option>
-								<option value="Maranhão">Maranhão</option>
-								<option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
-								<option value="Mato Grosso">Mato Grosso</option>
-								<option value="Minas Gerais">Minas Gerais</option>
-								<option value="Pará">Pará</option>
-								<option value="Paraíba">Paraíba</option>
-								<option value="Paraná">Paraná</option>
-								<option value="Pernambuco">Pernambuco</option>
-								<option value="Piauí">Piauí</option>
-								<option value="Rio de Janeiro">Rio de Janeiro</option>
-								<option value="Rio Grande do Norte">Rio Grande do Norte</option>
-								<option value="Rio Grande do Sul">Rio Grande do Sul</option>
-								<option value="Rondônia">Rondônia</option>
-								<option value="Roraima">Roraima</option>
-								<option value="Santa Catarina">Santa Catarina</option>
-								<option value="São Paulo">São Paulo</option>
-								<option value="Sergipe">Sergipe</option>
-								<option value="Tocantins">Tocantins</option>
-							</select>
-						</div>
-					</div>
-					<div class="form-group">
-						<label class="control-label col-sm-3">Cidade:</label>
-						<div class="col-sm-5">
-							<input id="input-city" name="cidade" class="form-control"
-								placeholder="Nome da sua cidade" type="text">
-						</div>
-					</div>
-					<div class="form-group">
-						<label class="control-label col-sm-3">Arquivo do sinal:</label>
-						<div class="col-sm-5">
-							<input id="input-sign-upload" type="file" name="video" />
-						</div>
-						<div id="upload-progress-container" class="col-sm-5">
-							<div id="upload-progress" class="progress">
-								<div class="progress-bar" role="progressbar" aria-valuenow="0"
-									aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
-							</div>
-						</div>
-					</div>
-					<div class="form-actions">
-						<label class="control-label col-sm-3"></label>
-						<button name="btn" class="btn btn-primary btn-lg disabled">Enviar</button>
-					</div>
-			</fieldset>
-		</form>
 	</div>
 	<div id="teached-signs-container" class="sub-main-container">
 		<h4 class="teached-signs-msg" type="none">Você ainda não ensinou
@@ -350,8 +271,10 @@
 <script src="{{ server }}/js/selection-panel/articulation.js"></script>
 <script src="{{ server }}/js/selection-panel/configuration.js"></script>
 <script src="{{ server }}/js/selection-panel/orientation.js"></script>
-<script src="{{ server }}/js/selection-panel/default-configuration-handler.js"></script>
-<script src="{{ server }}/js/selection-panel/dynamic-selection-workflow.js"></script>
+<script
+	src="{{ server }}/js/selection-panel/default-configuration-handler.js"></script>
+<script
+	src="{{ server }}/js/selection-panel/dynamic-selection-workflow.js"></script>
 <script src="{{ server }}/js/selection-panel/selection-panel.js"></script>
  
 <!-- Helpers -->
@@ -0,0 +1,110 @@
+<div class="container">
+	<div class="row">
+		<div id="upload-warning-msg" class="alert alert-warning"
+			style="display: none;"></div>
+		<div id="upload-success-msg" class="alert alert-success">
+			<strong>Envio concluído, muito obrigado! Em breve o seu
+				sinal estará no dicionário WikiLibras.</strong>
+		</div>
+	</div>
+</div>
+<form class="form-horizontal" method="post"
+	enctype="multipart/form-data">
+	<fieldset>
+		<h2>Sentiu falta de algum sinal no dicionário? Grave e envie o
+			vídeo do seu sinal aqui!</h2>
+		<div class="submit-sign-form col-sm-8">
+			<div class="form-group">
+				<label class="control-label col-sm-3">Nome do sinal:</label>
+				<div class="col-sm-5">
+					<input id="input-sign-name" name="nome" class="form-control"
+						placeholder="Nome do sinal" type="text">
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-3">Classe gramatical:</label>
+				<div class="col-sm-5">
+					<select id="input-word-class" name="classe-gramatical"
+						class="form-control">
+						<option value="">Selecione a classe gramatical</option>
+						<option value="Verbo">Verbo</option>
+						<option value="Substantivo">Substantivo</option>
+						<option value="Adjetivo">Adjetivo</option>
+						<option value="Advérbio">Advérbio</option>
+						<option value="Pronome">Pronome</option>
+						<option value="Preposição">Preposição</option>
+						<option value="Conjunção">Conjunção</option>
+						<option value="Artigo">Artigo</option>
+						<option value="Numeral">Numeral</option>
+						<option value="Interjeição">Interjeição</option>
+					</select>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-3">Frases de exemplo:</label>
+				<div class="col-sm-5">
+					<textarea id="input-phrases" name="frases" class="form-control"
+						rows="2">
+					</textarea>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-3">Estado:</label>
+				<div class="col-sm-5">
+					<select id="input-state" name="estado" class="form-control">
+						<option value="">Selecione seu Estado</option>
+						<option value="Acre">Acre</option>
+						<option value="Alagoas">Alagoas</option>
+						<option value="Amapá">Amapá</option>
+						<option value="Amazonas">Amazonas</option>
+						<option value="Bahia">Bahia</option>
+						<option value="Ceará">Ceará</option>
+						<option value="Distrito Federal">Distrito Federal</option>
+						<option value="Espirito Santo">Espirito Santo</option>
+						<option value="Goiás">Goiás</option>
+						<option value="Maranhão">Maranhão</option>
+						<option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
+						<option value="Mato Grosso">Mato Grosso</option>
+						<option value="Minas Gerais">Minas Gerais</option>
+						<option value="Pará">Pará</option>
+						<option value="Paraíba">Paraíba</option>
+						<option value="Paraná">Paraná</option>
+						<option value="Pernambuco">Pernambuco</option>
+						<option value="Piauí">Piauí</option>
+						<option value="Rio de Janeiro">Rio de Janeiro</option>
+						<option value="Rio Grande do Norte">Rio Grande do Norte</option>
+						<option value="Rio Grande do Sul">Rio Grande do Sul</option>
+						<option value="Rondônia">Rondônia</option>
+						<option value="Roraima">Roraima</option>
+						<option value="Santa Catarina">Santa Catarina</option>
+						<option value="São Paulo">São Paulo</option>
+						<option value="Sergipe">Sergipe</option>
+						<option value="Tocantins">Tocantins</option>
+					</select>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-3">Cidade:</label>
+				<div class="col-sm-5">
+					<input id="input-city" name="cidade" class="form-control"
+						placeholder="Nome da sua cidade" type="text">
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-3">Arquivo do sinal:</label>
+				<div class="col-sm-5">
+					<input id="input-sign-upload" type="file" name="video" />
+				</div>
+				<div id="upload-progress-container" class="col-sm-5">
+					<div id="upload-progress" class="progress">
+						<div class="progress-bar" role="progressbar" aria-valuenow="0"
+							aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
+					</div>
+				</div>
+			</div>
+			<div class="form-actions">
+				<label class="control-label col-sm-3"></label>
+				<button name="btn" class="btn btn-primary btn-lg disabled">Enviar</button>
+			</div>
+	</fieldset>
+</form>
...	...	@@ -8,6 +8,10 @@ body nav.navbar:first-child {
8	8	display: none;
9	9	}
10	10
	11	+.navbar-wl .navbar-nav {
	12	+ padding-left: 60px;
	13	+}
	14	+
11	15	footer {
12	16	display: none;
13	17	}
...	...	@@ -534,6 +538,10 @@ ul.rig.columns-4 li {
534	538	width: 100%;
535	539	}
536	540
	541	+#thanks-screen a {
	542	+ text-decoration: underline;
	543	+}
	544	+
537	545	#completed-all-task-msg {
538	546	display: none;
539	547	}
...	...
1	1	(function(videoHelper, $, undefined) {
2		-
	2	+
	3	+ function _getSource(videoBaseUrl) {
	4	+ return '<source src="' + videoBaseUrl + '.webm" type="video/webm">'
	5	+ + '<source src="' + videoBaseUrl
	6	+ + '.mp4" type="video/mp4">Sem suporte a vídeos';
	7	+ }
	8	+
3	9	function _controlVideo(elId, toPlay) {
4		- var videoSrc = $(elId).attr("src");
5		- if (typeof videoSrc == "undefined" \|\|
6		- (typeof videoSrc != "undefined" && videoSrc === ""))
	10	+ if ($(elId).length === 0)
7	11	return;
8	12	if (toPlay) {
9	13	$(elId).get(0).play();
...	...	@@ -11,13 +15,17 @@
11	15	$(elId).get(0).pause();
12	16	}
13	17	}
14		-
	18	+
15	19	videoHelper.play = function(elId) {
16	20	_controlVideo(elId, true);
17		- }
18		-
19		- videoHelper.pause = function(elId) {
	21	+ };
	22	+
	23	+ videoHelper.pause = function(elId) {
20	24	_controlVideo(elId, false);
21		- }
	25	+ };
	26	+
	27	+ videoHelper.getSource = function(videoBaseUrl) {
	28	+ return _getSource(videoBaseUrl);
	29	+ };
22	30
23	31	}(window.videoHelper = window.videoHelper \|\| {}, jQuery));
...	...
1	1	(function(renderSign, $, undefined) {
2		-
	2	+
3	3	var api_url = '';
4		-
	4	+
5	5	function _submitParameterJSON(parsedParameterJSON, callback) {
6	6	console.log(parsedParameterJSON);
7	7	$.ajax({
...	...	@@ -18,14 +18,15 @@
18	18	}
19	19	});
20	20	}
21		-
	21	+
22	22	function _showRenderedAvatar(parameterJSON) {
23	23	var userId = parameterJSON['userId'];
24	24	var signName = parameterJSON['sinal'];
25		- $("#render-avatar video").attr("src",
26		- _getRenderedAvatarUrl(userId, signName));
	25	+
	26	+ var avatarBaseUrl = _getRenderedAvatarBaseUrl(userId, signName);
	27	+ $('#render-avatar video').html(videoHelper.getSource(avatarBaseUrl));
27	28	$("#render-avatar").fadeIn(300);
28		- }
	29	+ }
29	30
30	31	function _showRenderScreen(toShow) {
31	32	if (toShow) {
...	...	@@ -38,22 +39,22 @@
38	39	videoHelper.pause("#render-avatar video");
39	40	}
40	41	}
41		-
42		- function _getRenderedAvatarUrl(userId, signName) {
43		- return api_url + '/public/' + userId + '/' + signName + ".webm";
	42	+
	43	+ function _getRenderedAvatarBaseUrl(userId, signName) {
	44	+ return api_url + '/public/' + userId + '/' + signName;
44	45	}
45		-
	46	+
46	47	renderSign.showRenderedAvatar = function(parameterJSON) {
47	48	_showRenderedAvatar(parameterJSON);
48	49	_showRenderScreen(true);
49	50	}
50		-
	51	+
51	52	renderSign.showRenderScreen = function(toShow) {
52	53	_showRenderScreen(toShow);
53	54	}
54		-
55		- renderSign.getRenderedAvatarUrl = function(userId, signName) {
56		- return _getRenderedAvatarUrl(userId, signName);
	55	+
	56	+ renderSign.getRenderedAvatarBaseUrl = function(userId, signName) {
	57	+ return _getRenderedAvatarBaseUrl(userId, signName);
57	58	}
58	59
59	60	renderSign.submit = function(parsedParameterJSON) {
...	...	@@ -65,13 +66,14 @@
65	66	$("#finish-button").addClass("disabled");
66	67	$("#finish-button").show();
67	68
68		- _submitParameterJSON(parsedParameterJSON, function(parsedParameterJSON) {
69		- $("#render-loading").fadeOut(300);
70		- $("#finish-button").removeClass("disabled");
71		- _showRenderedAvatar(parsedParameterJSON);
72		- });
	69	+ _submitParameterJSON(parsedParameterJSON,
	70	+ function(parsedParameterJSON) {
	71	+ $("#render-loading").fadeOut(300);
	72	+ $("#finish-button").removeClass("disabled");
	73	+ _showRenderedAvatar(parsedParameterJSON);
	74	+ });
73	75	};
74		-
	76	+
75	77	renderSign.setup = function(apiUrl) {
76	78	api_url = apiUrl;
77	79	$("#render-edit").off("click").on("click", function() {
...	...
1	1	(function(submitSign, $, undefined) {
2	2
3	3	var submitUrl = '';
4		-
	4	+ var MIN_PHRASES_LENGTH = 3;
	5	+ var MAX_PHRASES_LENGTH = 20;
	6	+
5	7	function _isEmpty(str) {
6	8	return (!str \|\| 0 === str.length);
7	9	}
8	10
9		- function _validadeInputFields() {
	11	+ function _alertSignName() {
	12	+ $('#upload-warning-msg').hide();
10	13	var signName = $('#input-sign-name').val();
	14	+ if (_isEmpty(signName)) {
	15	+ $('#upload-warning-msg').html('Por favor indique o nome do sinal.');
	16	+ $('#upload-warning-msg').show();
	17	+ }
	18	+ }
	19	+
	20	+ function _alertWordClass() {
	21	+ $('#upload-warning-msg').hide();
	22	+ var wordClass = $('#input-word-class').val();
	23	+ if (_isEmpty(wordClass)) {
	24	+ $('#upload-warning-msg').html(
	25	+ 'Por favor selecione a classe gramatical do sinal.');
	26	+ $('#upload-warning-msg').show();
	27	+ }
	28	+ }
	29	+
	30	+ function _areValidPhrases(phrases) {
	31	+ var cleanPhrases = phrases.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "");
	32	+ var splitPhrasesLength = cleanPhrases.trim().split(/\s+/g).length;
	33	+ return splitPhrasesLength >= MIN_PHRASES_LENGTH
	34	+ && splitPhrasesLength <= MAX_PHRASES_LENGTH;
	35	+ }
	36	+
	37	+ function _alertPhrase() {
	38	+ $('#upload-warning-msg').hide();
	39	+ var phrases = $('#input-phrases').val();
	40	+ if (!_areValidPhrases(phrases)) {
	41	+ $('#upload-warning-msg').html(
	42	+ 'As frases de exemplo devem possuir no minímo '
	43	+ + MIN_PHRASES_LENGTH + ' e no máximo '
	44	+ + MAX_PHRASES_LENGTH + ' palavras.');
	45	+ $('#upload-warning-msg').show();
	46	+ }
	47	+ }
	48	+
	49	+ function _alertState() {
	50	+ $('#upload-warning-msg').hide();
11	51	var state = $('#input-state').val();
	52	+ if (_isEmpty(state)) {
	53	+ $('#upload-warning-msg').html('Por favor selecione seu estado.');
	54	+ $('#upload-warning-msg').show();
	55	+ }
	56	+ }
	57	+
	58	+ function _alertCity() {
	59	+ $('#upload-warning-msg').hide();
12	60	var city = $('#input-city').val();
	61	+ if (_isEmpty(city)) {
	62	+ $('#upload-warning-msg').html(
	63	+ 'Por favor indique o nome da sua cidade.');
	64	+ $('#upload-warning-msg').show();
	65	+ }
	66	+ }
	67	+
	68	+ function _alertSignUpload() {
	69	+ $('#upload-warning-msg').hide();
13	70	var signUpload = $('#input-sign-upload').val();
14		- return !_isEmpty(signName) && !_isEmpty(state) && !_isEmpty(city)
15		- && !_isEmpty(signUpload);
	71	+ if (_isEmpty(signUpload)) {
	72	+ $('#upload-warning-msg').html(
	73	+ 'Por favor selecione o arquivo do vídeo do seu sinal.');
	74	+ $('#upload-warning-msg').show();
	75	+ }
	76	+ }
	77	+
	78	+ function _validadeAllFields() {
	79	+ var signName = $('#input-sign-name').val();
	80	+ var wordClass = $('#input-word-class').val();
	81	+ var phrases = $('#input-phrases').val();
	82	+ var state = $('#input-state').val();
	83	+ var city = $('#input-city').val();
	84	+ var signUpload = $('#input-sign-upload').val();
	85	+ return !_isEmpty(signName) && !_isEmpty(wordClass)
	86	+ && _areValidPhrases(phrases) && !_isEmpty(state)
	87	+ && !_isEmpty(city) && !_isEmpty(signUpload);
16	88	}
17	89
18	90	function _updateSubmitButton() {
19		- if (_validadeInputFields()) {
20		- $('#submit-sign-container button').removeClass('disabled');
	91	+ if (_validadeAllFields()) {
	92	+ _enableSubmitButton();
21	93	} else {
22		- $('#submit-sign-container button').addClass('disabled');
	94	+ _disableSubmitButton();
23	95	}
24	96	}
25		-
	97	+
	98	+ function _enableSubmitButton() {
	99	+ $('#submit-sign-container button').removeClass('disabled');
	100	+ $('#submit-sign-container button').off('click');
	101	+ }
	102	+
	103	+ function _disableSubmitButton() {
	104	+ $('#submit-sign-container button').addClass('disabled');
	105	+ $('#submit-sign-container button').on('click', function(event) {
	106	+ event.preventDefault();
	107	+ });
	108	+ }
	109	+
26	110	function _resetFormFields() {
27	111	$('#input-sign-name').val('');
28	112	$('#input-state').val('');
29	113	$('#input-city').val('');
30	114	$('#input-sign-upload').val('');
31	115	$("#upload-progress .progress-bar").css("width", "0px");
32		- $('#upload-progress-container').hide();
	116	+ $('#upload-progress-container').hide();
33	117	$('#input-sign-upload').show();
34	118	}
35		-
36		- submitSign.show = function() {
37		- $(".sub-main-container").hide();
38		- $("#submit-sign-container").show();
39		- $("#submit-sign-anchor").focus();
40		- }
41	119
42		- submitSign.setup = function(uploadSignHost) {
43		- submitUrl = uploadSignHost;
	120	+ function _setupSubmitSignForm() {
	121	+ _disableSubmitButton();
44	122	$('#submit-sign-container form').fileupload(
45	123	{
46	124	url : submitUrl,
47		- add: function (e, data) {
48		- $('#submit-sign-container button').off('click').on('click', function (event) {
49		- event.preventDefault();
50		-
51		- $('#submit-sign-container button').addClass('disabled');
52		- $('#input-sign-upload').hide();
53		- $('#upload-progress-container').show();
54		- data.submit();
55		- });
56		- },
	125	+ add : function(e, data) {
	126	+ $('#submit-sign-container button').off('click').on(
	127	+ 'click',
	128	+ function(event) {
	129	+ event.preventDefault();
	130	+
	131	+ $('#submit-sign-container button')
	132	+ .addClass('disabled');
	133	+ $('#input-sign-upload').hide();
	134	+ $('#upload-progress-container').show();
	135	+ data.submit();
	136	+ });
	137	+ },
57	138	done : function(e, data) {
58	139	$('#upload-success-msg').fadeIn(500);
59	140	setTimeout(function() {
...	...	@@ -64,27 +145,52 @@
64	145	progressall : function(e, data) {
65	146	var progress = parseInt(data.loaded / data.total * 100,
66	147	10);
67		- $("#upload-progress .progress-bar").attr('aria-valuenow', progress).
68		- css("width", progress + "%");
	148	+ $("#upload-progress .progress-bar").attr(
	149	+ 'aria-valuenow', progress).css("width",
	150	+ progress + "%");
69	151	},
70	152	error : function(error) {
71	153	alert(error.responseText);
72	154	},
73		- replaceFileInput: false
	155	+ replaceFileInput : false
74	156	});
75	157
76	158	$('#input-sign-name').on('input', function() {
	159	+ _alertSignName();
	160	+ _updateSubmitButton();
	161	+ });
	162	+ $('#input-word-class').on('input', function() {
	163	+ _alertWordClass();
	164	+ _updateSubmitButton();
	165	+ });
	166	+ $('#input-phrases').on('input', function() {
	167	+ _alertPhrase();
77	168	_updateSubmitButton();
78	169	});
79	170	$('#input-state').on('input', function() {
	171	+ _alertState();
80	172	_updateSubmitButton();
81	173	});
82	174	$('#input-city').on('input', function() {
	175	+ _alertCity();
83	176	_updateSubmitButton();
84	177	});
85	178	$('#input-sign-upload').on('change', function() {
	179	+ _alertSignUpload();
86	180	_updateSubmitButton();
87	181	});
	182	+ }
	183	+
	184	+ submitSign.show = function() {
	185	+ $(".sub-main-container").hide();
	186	+ $("#submit-sign-container").show();
	187	+ $("#submit-sign-anchor").focus();
	188	+ };
	189	+
	190	+ submitSign.setup = function(uploadSignHost) {
	191	+ submitUrl = uploadSignHost;
	192	+ loadHtmlHelper.load('/submit-sign/submit-sign.html',
	193	+ '#submit-sign-container', _setupSubmitSignForm);
88	194	};
89	195
90	196	}(window.submitSign = window.submitSign \|\| {}, jQuery));
...	...
...	...	@@ -6,20 +6,20 @@
6	6	var projectId = -1;
7	7
8	8	function _updateTeachedSignsMessage() {
9		- $(".teached-signs-msg").hide();
	9	+ $('.teached-signs-msg').hide();
10	10	if (doneTasks == 0) {
11		- $(".teached-signs-msg[type=none]").show();
	11	+ $('.teached-signs-msg[type=none]').show();
12	12	} else if (doneTasks == 1) {
13		- $(".teached-signs-msg[type=one]").show();
	13	+ $('.teached-signs-msg[type=one]').show();
14	14	} else {
15		- $(".teached-signs-msg[type=more] span").text(doneTasks);
16		- $(".teached-signs-msg[type=more]").show();
	15	+ $('.teached-signs-msg[type=more] span').text(doneTasks);
	16	+ $('.teached-signs-msg[type=more]').show();
17	17	}
18	18	}
19	19
20	20	function _createSigns(answers) {
21	21	_updateTeachedSignsMessage();
22		- $("#signs-list-container").html("");
	22	+ $('#signs-list-container').html('');
23	23	for (i = 0; i < answers.length; i++) {
24	24	_addSign(answers[i].info);
25	25	}
...	...	@@ -28,25 +28,24 @@
28	28	function _addSign(answer) {
29	29	var signName = answer.parameter_json.sinal;
30	30	var apiUserId = answer.parameter_json.userId;
31		- var videoUrl = renderSign.getRenderedAvatarUrl(apiUserId, signName);
32		- $("#signs-list-container").append(
	31	+ var videoBaseUrl = renderSign.getRenderedAvatarBaseUrl(apiUserId,
	32	+ signName);
	33	+ $('#signs-list-container').append(
33	34	'<div class="col-btn col-xs-6 col-sm-3 col-md-2" sign-name="'
34	35	+ signName
35	36	+ '"><button class="btn btn-danger btn-block">'
36	37	+ signName + '</button></div>');
37		- $("#signs-list-container .col-btn[sign-name=" + signName + "]")
38		- .off("click")
39		- .on(
40		- "click",
41		- function() {
42		- $('#teached-sign-video-container')
43		- .html(
44		- "<video autoplay loop><source src='"
45		- + videoUrl
46		- + "' type='video/webm'>Sem suporte a vídeos</video>");
47		- $('#teached-sign-name').html(signName);
48		- $('#teached-sign-modal').modal('show');
49		- });
	38	+ $('#signs-list-container .col-btn[sign-name=' + signName + ']').off(
	39	+ 'click').on(
	40	+ 'click',
	41	+ function() {
	42	+ $('#teached-sign-video-container').html(
	43	+ '<video autoplay loop>'
	44	+ + videoHelper.getSource(videoBaseUrl)
	45	+ + '</video>');
	46	+ $('#teached-sign-name').html(signName);
	47	+ $('#teached-sign-modal').modal('show');
	48	+ });
50	49	}
51	50
52	51	function _updateTeachedSignsContainer() {
...	...	@@ -56,13 +55,13 @@
56	55	}
57	56
58	57	teachedSigns.show = function() {
59		- $(".sub-main-container").hide();
60		- $("#teached-signs-container").show();
	58	+ $('.sub-main-container').hide();
	59	+ $('#teached-signs-container').show();
61	60	}
62	61
63	62	teachedSigns.setup = function() {
64	63	pybossaApiHelper.getProjectId().done(function(response) {
65		- if (typeof response == "undefined" \|\| response.length < 1) {
	64	+ if (typeof response == 'undefined' \|\| response.length < 1) {
66	65	return;
67	66	}
68	67	projectId = response[0].id;
...	...
...	...	@@ -33,10 +33,9 @@
33	33	function _loadTaskInfo(task) {
34	34	currentTaskId = task.id;
35	35	var signName = task.info.sign_name;
36		- var refVidLink = videosUrl + signName + '_REF.webm';
	36	+ var baseRefVidUrl = videosUrl + signName + '_REF';
37	37	$('.sign-label').text(signName);
38		- $('.ref-video').attr('src', refVidLink);
39		-
	38	+ $('.ref-video').html(videoHelper.getSource(baseRefVidUrl));
40	39	_setupTmpParameterJSON(task.info.sign_name);
41	40	}
42	41
...	...
...	...	@@ -4,30 +4,33 @@
4	4	</div>
5	5	<div class="single-column-option-container">
6	6	<div class="single-column-option">
7		- <video src="{{ server }}/img/exf/duration-slow.webm"
	7	+ <video
8	8	preload="metadata" value="lento"
9	9	class="video-panel-option selection-panel-option" autoplay loop>
10		- <source type="video/webm">
	10	+ <source src="{{ server }}/img/exf/duration-slow.webm" type="video/webm">
	11	+ <source src="{{ server }}/img/exf/duration-slow.mp4" type="video/mp4">
11	12	</div>
12	13	<img class="single-column-option"
13	14	src="{{ server }}/img/long-duration-icon.png" /> Longa
14	15	</div>
15	16	<div class="single-column-option-container">
16	17	<div class="single-column-option">
17		- <video src="{{ server }}/img/exf/duration-normal.webm"
	18	+ <video
18	19	preload="metadata" value="normal"
19	20	class="video-panel-option selection-panel-option" autoplay loop>
20		- <source type="video/webm">
	21	+ <source src="{{ server }}/img/exf/duration-normal.webm" type="video/webm">
	22	+ <source src="{{ server }}/img/exf/duration-normal.mp4" type="video/mp4">
21	23	</div>
22	24	<img class="single-column-option"
23	25	src="{{ server }}/img/normal-duration-icon.png" /> Normal
24	26	</div>
25	27	<div class="single-column-option-container">
26	28	<div class="single-column-option">
27		- <video src="{{ server }}/img/exf/duration-fast.webm"
	29	+ <video
28	30	preload="metadata" value="rapido"
29	31	class="video-panel-option selection-panel-option" autoplay loop>
30		- <source type="video/webm">
	32	+ <source src="{{ server }}/img/exf/duration-fast.webm" type="video/webm">
	33	+ <source src="{{ server }}/img/exf/duration-fast.mp4" type="video/mp4">
31	34	</div>
32	35	<img class="single-column-option"
33	36	src="{{ server }}/img/short-duration-icon.png" /> Breve
...	...
...	...	@@ -5,30 +5,33 @@
5	5	</div>
6	6	<div class="single-column-option-container">
7	7	<div class="single-column-option">
8		- <video src="{{ server }}/img/exf/velocity-slow.webm"
	8	+ <video
9	9	preload="metadata" value="lento"
10	10	class="video-panel-option selection-panel-option" autoplay loop>
11		- <source type="video/webm">
	11	+ <source src="{{ server }}/img/exf/velocity-slow.webm" type="video/webm">
	12	+ <source src="{{ server }}/img/exf/velocity-slow.mp4" type="video/mp4">
12	13	</div>
13	14	<img class="single-column-option"
14	15	src="{{ server }}/img/slow-velocity-icon.png" /> Lento
15	16	</div>
16	17	<div class="single-column-option-container">
17	18	<div class="single-column-option">
18		- <video src="{{ server }}/img/exf/velocity-normal.webm"
	19	+ <video
19	20	preload="metadata" value="normal"
20	21	class="video-panel-option selection-panel-option" autoplay loop>
21		- <source type="video/webm">
	22	+ <source src="{{ server }}/img/exf/velocity-normal.webm" type="video/webm">
	23	+ <source src="{{ server }}/img/exf/velocity-normal.mp4" type="video/mp4">
22	24	</div>
23	25	<img class="single-column-option"
24	26	src="{{ server }}/img/normal-velocity-icon.png" /> Normal
25	27	</div>
26	28	<div class="single-column-option-container">
27	29	<div class="single-column-option">
28		- <video src="{{ server }}/img/exf/velocity-fast.webm"
	30	+ <video
29	31	preload="metadata" value="rapido"
30	32	class="video-panel-option selection-panel-option" autoplay loop>
31		- <source type="video/webm">
	33	+ <source src="{{ server }}/img/exf/velocity-fast.webm" type="video/webm">
	34	+ <source src="{{ server }}/img/exf/velocity-fast.mp4" type="video/mp4">
32	35	</div>
33	36	<img class="single-column-option"
34	37	src="{{ server }}/img/fast-velocity-icon.png" /> Rápido
...	...
...	...	@@ -5,36 +5,30 @@
5	5	</div>
6	6	<div class="selection-panel-inner-body">
7	7	<ul class="rig columns-2">
8		- <li><video src="{{ server }}/img/mov/PONTUAL.webm"
	8	+ <li><video
9	9	preload="metadata" value="pontual"
10	10	class="video-panel-option selection-panel-option" autoplay loop>
11		- <source type="video/webm">
	11	+ <source src="{{ server }}/img/mov/PONTUAL.webm" type="video/webm">
	12	+ <source src="{{ server }}/img/mov/PONTUAL.mp4" type="video/mp4">
12	13	</video> Pontual</li>
13		- <li><video src="{{ server }}/img/mov/RETILINEO.webm"
	14	+ <li><video
14	15	preload="metadata" value="retilineo"
15	16	class="video-panel-option selection-panel-option" autoplay loop>
16		- <source type="video/webm">
	17	+ <source src="{{ server }}/img/mov/RETILINEO.webm" type="video/webm">
	18	+ <source src="{{ server }}/img/mov/RETILINEO.mp4" type="video/mp4">
17	19	</video> Retilíneo</li>
18		- <li><video src="{{ server }}/img/mov/CIRCULAR.webm"
	20	+ <li><video
19	21	preload="metadata" value="circular"
20	22	class="video-panel-option selection-panel-option" autoplay loop>
21		- <source type="video/webm">
	23	+ <source src="{{ server }}/img/mov/CIRCULAR.webm" type="video/webm">
	24	+ <source src="{{ server }}/img/mov/CIRCULAR.mp4" type="video/mp4">
22	25	</video> Circular</li>
23		- <li><video src="{{ server }}/img/mov/SEMICIRCULAR.webm"
	26	+ <li><video
24	27	preload="metadata" value="semicircular"
25	28	class="video-panel-option selection-panel-option" autoplay loop>
26		- <source type="video/webm">
	29	+ <source src="{{ server }}/img/mov/SEMICIRCULAR.webm" type="video/webm">
	30	+ <source src="{{ server }}/img/mov/SEMICIRCULAR.mp4" type="video/mp4">
27	31	</video> Semi-Circular</li>
28		- <!--
29		- <li><img class="video-panel-option selection-panel-option"
30		- src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>
31		- <li><img class="video-panel-option selection-panel-option"
32		- src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>
33		- <li><img class="video-panel-option selection-panel-option"
34		- src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>
35		- <li><img class="video-panel-option selection-panel-option"
36		- src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>
37		- -->
38	32	</ul>
39	33	</div>
40	34	</div>
...	...
...	...	@@ -6,76 +6,76 @@
6	6	<div class="selection-panel-inner-body">
7	7	<ul class="rig columns-2">
8	8	<li><video
9		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.webm"
10	9	preload="metadata" value="baixo-esquerda"
11	10	class="box-panel-option selection-panel-option" autoplay>
12		- <source type="video/webm">
	11	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.webm" type="video/webm">
	12	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-esquerda.mp4" type="video/mp4">
13	13	</video>Baixo - Direita</li>
14	14	<li><video
15		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.webm"
16	15	preload="metadata" value="cima-direita"
17	16	class="box-panel-option selection-panel-option" autoplay>
18		- <source type="video/webm">
	17	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.webm" type="video/webm">
	18	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-direita.mp4" type="video/mp4">
19	19	</video>Cima - Esquerda</li>
20	20	<li><video
21		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.webm"
22	21	preload="metadata" value="direita-baixo"
23	22	class="box-panel-option selection-panel-option" autoplay>
24		- <source type="video/webm">
	23	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.webm" type="video/webm">
	24	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-baixo.mp4" type="video/mp4">
25	25	</video>Esquerda - Baixo</li>
26	26	<li><video
27		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.webm"
28	27	preload="metadata" value="esquerda-cima"
29	28	class="box-panel-option selection-panel-option" autoplay>
30		- <source type="video/webm">
	29	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.webm" type="video/webm">
	30	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-cima.mp4" type="video/mp4">
31	31	</video>Direita - Cima</li>
32	32	<li><video
33		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.webm"
34	33	preload="metadata" value="baixo-tras"
35	34	class="box-panel-option selection-panel-option" autoplay>
36		- <source type="video/webm">
	35	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.webm" type="video/webm">
	36	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-baixo-tras.mp4" type="video/mp4">
37	37	</video>Baixo - Trás</li>
38	38	<li><video
39		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.webm"
40	39	preload="metadata" value="cima-frente"
41	40	class="box-panel-option selection-panel-option" autoplay>
42		- <source type="video/webm">
	41	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.webm" type="video/webm">
	42	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-cima-frente.mp4" type="video/mp4">
43	43	</video>Cima - Frente</li>
44	44	<li><video
45		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.webm"
46	45	preload="metadata" value="frente-baixo"
47	46	class="box-panel-option selection-panel-option" autoplay>
48		- <source type="video/webm">
	47	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.webm" type="video/webm">
	48	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-baixo.mp4" type="video/mp4">
49	49	</video>Frente - Baixo</li>
50	50	<li><video
51		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.webm"
52	51	preload="metadata" value="tras-cima"
53	52	class="box-panel-option selection-panel-option" autoplay>
54		- <source type="video/webm">
	53	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.webm" type="video/webm">
	54	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-cima.mp4" type="video/mp4">
55	55	</video>Trás - Cima</li>
56	56	<li><video
57		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.webm"
58	57	preload="metadata" value="frente-direita"
59	58	class="box-panel-option selection-panel-option" autoplay>
60		- <source type="video/webm">
	59	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.webm" type="video/webm">
	60	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-frente-direita.mp4" type="video/mp4">
61	61	</video>Frente - Esquerda</li>
62	62	<li><video
63		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.webm"
64	63	preload="metadata" value="tras-esquerda"
65	64	class="box-panel-option selection-panel-option" autoplay>
66		- <source type="video/webm">
	65	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.webm" type="video/webm">
	66	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-tras-esquerda.mp4" type="video/mp4">
67	67	</video>Trás - Direita</li>
68	68	<li><video
69		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.webm"
70	69	preload="metadata" value="direita-tras"
71	70	class="box-panel-option selection-panel-option" autoplay>
72		- <source type="video/webm">
	71	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.webm" type="video/webm">
	72	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-direita-tras.mp4" type="video/mp4">
73	73	</video>Esquerda - Trás</li>
74	74	<li><video
75		- src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.webm"
76	75	preload="metadata" value="esquerda-frente"
77	76	class="box-panel-option selection-panel-option" autoplay>
78		- <source type="video/webm">
	77	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.webm" type="video/webm">
	78	+ <source src="{{ server }}/img/{{ movement-name }}/{{ hand-folder }}/plano-esquerda-frente.mp4" type="video/mp4">
79	79	</video>Direita - Frente</li>
80	80	</ul>
81	81	</div>
...	...