Pre-beta release

David Guilherme
Showing 14 changed files with 555 additions and 0 deletions Show diff stats
.gitignore
README.md
VLibrasWeb/Images/acessibilidade-ico.jpeg
VLibrasWeb/Images/acessibilidade-ico.png
VLibrasWeb/Images/close.png
VLibrasWeb/Images/fullscreen.png
VLibrasWeb/Images/minimize.png
VLibrasWeb/Images/play.png
VLibrasWeb/Images/subtitle-inactive.png
VLibrasWeb/Images/subtitle.png
VLibrasWeb/vlibras-player.js
VLibrasWeb/vlibras-web.css
VLibrasWeb/vlibras-web.js
index.html
+++ a/.gitignore
@@ -0,0 +1,2 @@
+VLibrasWeb/Player/*
+*.zip
 \ No newline at end of file
+++ a/README.md
@@ -0,0 +1,46 @@
+VLibras Web
+===========
+
+Instalação
+-------------
+
+1. Adicione o seguinte trecho HTML:
+
+```html
+<div class="vlibras-widget">
+  <img class="vw-btn-access" src="VLibrasWeb/Images/acessibilidade-ico.png" />
+
+  <div class="vw-player">
+    <div class="vw-topbar">
+      <span class="vw-btn-side"><</span>
+      <span class="vw-btn-close">X</span>
+    </div>
+
+    <canvas class="vw-canvas emscripten"></canvas>
+  </div>
+</div>
+```
+
+2. Adicione os arquivos `.css` e `.js` na página:
+
+```html
+<head>
+  <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css" />
+</head>
+<body>
+  ...
+  <script src="VLibrasWeb/vlibras-web.js"></script>
+</body>
+```
+
+3. Finalmente, inicialize o VLibrasWeb
+
+```js
+// Default: Se a pasta VLibrasWeb estiver na mesma pasta do arquivo index
+VLibrasWeb.init();
+
+// Custom:  Passe o caminho da pasta VLibrasWeb
+VLibrasWeb.init('another/path');
+```
+
+** Enjoy **
 \ No newline at end of file
+++ a/VLibrasWeb/vlibras-player.js
@@ -0,0 +1,93 @@
+(function (window, document) {
+  function VLibrasPlayer() {
+    this.loaded      = false;
+    this.glosa       = undefined;
+    this.canvas      = document.querySelector('#vlibras-canvas');
+    this.initialized = false;
+  }
+
+  VLibrasPlayer.prototype.translate = function (text) {
+    var self = this;
+    text = encodeURI(text);
+
+    getGlosa('http://150.165.204.30/glosa?texto=' + text,
+      function (status, response) {
+        self.glosa = response || decodeURI(text).toUpperCase();
+        self.play();
+      });
+  };
+
+  VLibrasPlayer.prototype.play = function () {
+    if (this.glosa !== undefined && this.loaded === true) {
+      window.SendMessage('PlayerManager', 'catchGlosa', this.glosa);
+    }
+  };
+
+  VLibrasPlayer.prototype.setSpeed = function (speed) {
+    window.SendMessage('PlayerManager', 'setSlider', speed);
+  };
+
+  VLibrasPlayer.prototype.switchSubtitle = function () {
+    window.SendMessage('PlayerManager', 'switchSubtitleStatus');
+  };
+
+  VLibrasPlayer.prototype.addProgressListener = function (callback) {
+    this.onprogress = callback;
+  };
+
+  VLibrasPlayer.prototype.load = function () {
+    this.loaded = true;
+    this.play();
+  };
+
+  VLibrasPlayer.prototype.getCanvasElement = function () {
+    return this.canvas;
+  };
+
+  VLibrasPlayer.prototype.getPath = function () {
+    return this.path;
+  };
+
+  VLibrasPlayer.prototype.initialize = function (path, canvas, callback) {
+    var noop = function () {};
+
+    if (this.initialized) {
+      (callback || noop)();
+      return;
+    }
+
+    this.canvas = canvas;
+    this.path   = path;
+
+    var script = document.createElement('script');
+    script.src = path + '/Player/Release/Setup.js';
+    document.body.appendChild(script);
+
+    script.onload = (callback || noop);
+
+    this.initialized = true;
+  };
+
+  window.onLoadPlayer = function () {
+    this.VLibrasPlayer.load();
+  };
+
+  window.updateProgress = function (progress) {
+    var noop = function () {};
+    (this.VLibrasPlayer.onprogress || noop)(progress);
+  };
+
+  window.VLibrasPlayer = new VLibrasPlayer();
+
+  function getGlosa(url, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState != 4) return;
+      callback(xhr.status, xhr.responseText);
+    };
+
+    xhr.send();
+  };
+})(window, document);
 \ No newline at end of file
+++ a/VLibrasWeb/vlibras-web.css
@@ -0,0 +1,207 @@
+.vlibras-widget {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  margin-top: -225px;
+  z-index: 9999;
+  display: none;
+}
+
+.vlibras-widget.active {
+  display: block;
+}
+
+.vlibras-widget.maximize {
+  bottom: 40px;
+  margin-top 0;
+  top: initial;
+  right: 50%;
+  margin-right: -275px;
+}
+
+.vlibras-widget.maximize .vw-player {
+  height: 550px;
+  width: 550px !important;
+}
+
+.vlibras-widget.maximize .vw-canvas-wrapper {
+  height: 468px;
+}
+
+.vlibras-widget.left {
+  left: 0;
+  right: initial;
+}
+
+.vlibras-widget.left .vw-player {
+  float: left;
+}
+
+.vlibras-widget .vw-btn-access {
+  width: 70px;
+  padding: 5px;
+  text-align: center;
+
+  -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+}
+
+.vw-btn-access img {
+  margin-bottom: 5px;
+  width: 70px;
+  height: 70px;
+}
+
+.vw-btn-access span {
+  font-size: 15px;
+  color: #004088;
+}
+
+.vlibras-widget .vw-btn-access.inactive {
+  display: none;
+}
+
+.vlibras-widget .vw-player {
+  display: none;
+  width: 0;
+  height: 450px;
+  float: right;
+
+  -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
+}
+
+.vlibras-widget .vw-player.active {
+  width: 320px;
+  display: block;
+}
+
+.vw-player .vw-canvas-wrapper {
+  position: relative;
+  width: 100%;
+  height: 370px;
+  background-color: #ebebeb;
+}
+
+.vw-canvas-wrapper .vw-subtitle {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+}
+
+.vw-subtitle .vw-subtitle-off, .vw-subtitle.active .vw-subtitle-on {
+  display: block;
+}
+
+.vw-subtitle .vw-subtitle-on, .vw-subtitle.active .vw-subtitle-off {
+  display: none;
+}
+
+.vw-canvas-wrapper .vw-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.vw-player .vw-topbar {
+  padding: 8.5px 10px;
+  height: 20px;
+  background-color: #004088;
+  color: #fff;
+}
+
+.vw-player .vw-btn-close {
+  float: right;
+  height: 100%;
+}
+
+.vw-player .vw-btn-side {
+  float: left;
+  border: 1px solid #fff;
+  background-color: #fff;
+  width: 2em;
+  margin: 0;
+}
+
+.vw-btn-side .vw-arrow {
+  background-color: #004088;
+  float: right;
+  width: 50%;
+  text-align: center;
+}
+
+.vw-btn-side .vw-arrow:after {
+  content: "<";
+}
+
+.vlibras-widget.left .vw-arrow {
+  float: left;
+}
+
+.vlibras-widget.left .vw-arrow:after {
+  content: ">";
+}
+
+.vlibras-widget .vw-controls {
+  width: 100%;
+  padding: 8.5px 10px;
+  background-color: #fff;
+
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+
+  display: -webkit-flex;
+  display: flex;
+  align-items: center;
+}
+
+.vw-controls .vw-play {
+  height: 28px;
+}
+
+.vw-play img {
+  height: 100%;
+}
+
+.vw-controls .vw-progressbar {
+  margin: 0 13px;
+  width: 100%;
+  height: 3px;
+  background-color: #000;
+}
+
+.vw-progressbar .vw-progress {
+  background-color: #ff2323;
+  width: 0;
+  height: 100%;
+}
+
+.vw-controls .vw-speed {
+  padding: 3px;
+  margin-right: 10px;
+  font-size: 19px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.vw-controls .vw-speed:before {
+  content: "x";
+}
+
+.vw-controls .vw-window {
+  height: 28px;
+}
+
+.vw-window .vw-maximize, .vw-window.active .vw-minimize {
+  display: block;
+}
+
+.vw-window .vw-minimize, .vw-window.active .vw-maximize {
+  display: none;
+}
+
+.wc-text:hover, .wc-text.active {
+  background-color: rgba(255, 102, 0, 0.5);
+}
 \ No newline at end of file
+++ a/VLibrasWeb/vlibras-web.js
@@ -0,0 +1,153 @@
+(function (window, document) {
+  VLibrasWeb = {
+    path: 'VLibrasWeb'
+  };
+
+  VLibrasWeb.init = function (path) {
+    if (path) this.path = path + '/VLibrasWeb';
+
+    var player = document.createElement('script');
+    player.src = this.path + '/vlibras-player.js';
+
+    player.onload = function () {
+      document.querySelector('.vlibras-widget').classList.add('active');
+      VLibrasWeb.run(window.VLibrasPlayer);
+    }
+
+    document.body.appendChild(player);
+  };
+
+  VLibrasWeb.loadPlayer = function (canvas, callback) {
+    window.VLibrasPlayer.initialize(VLibrasWeb.path, canvas, callback);
+  };
+
+  VLibrasWeb.run = function (VLibrasPlayer) {
+    var vw         = document.querySelector('.vlibras-widget');
+    var vwAccess   = vw.querySelector('.vw-btn-access');
+    var vwPlayer   = vw.querySelector('.vw-player');
+
+    var vwClose    = vwPlayer.querySelector('.vw-btn-close');
+    var vwSide     = vwPlayer.querySelector('.vw-btn-side');
+    var vwControls = vwPlayer.querySelector('.vw-controls');
+    var vwCanvas   = vwPlayer.querySelector('.vw-canvas');
+    var vwSubtitle = vwPlayer.querySelector('.vw-subtitle');
+
+    var vwProgress = vwControls.querySelector('.vw-progress');
+    var vwSpeed    = vwControls.querySelector('.vw-speed');
+    var vwWindow   = vwControls.querySelector('.vw-window');
+    var vwPlay     = vwControls.querySelector('.vw-play');
+
+    VLibrasPlayer.addProgressListener(function (progress) {
+      if (progress >= 1) {
+        document.querySelector('.wc-text.active').classList.remove('active');
+        progress = 0;
+      }
+
+      vwProgress.style.width = (progress * 100) + '%';
+    });
+
+    vwPlay.addEventListener('click', function (e) {
+      e.preventDefault();
+
+      VLibrasPlayer.play();
+    });
+
+    vwSubtitle.addEventListener('click', function (e) {
+      e.preventDefault();
+
+      vwSubtitle.classList.toggle('active');
+      VLibrasPlayer.switchSubtitle();
+    })
+
+    vwWindow.addEventListener('click', function (e) {
+      e.preventDefault();
+
+      vw.classList.toggle('maximize');
+      vwWindow.classList.toggle('active');
+    });
+
+    vwSpeed.addEventListener('click', function (e) {
+      e.preventDefault();
+
+      var actualSpeed = vwSpeed.innerText;
+      var newSpeed = (actualSpeed % 4) + 1;
+
+      VLibrasPlayer.setSpeed(newSpeed * 0.5);
+      this.innerText = newSpeed;
+    });
+
+    vwAccess.addEventListener('click', function () {
+      vwPlayer.classList.add('active');
+      vwAccess.classList.add('inactive');
+
+      VLibrasWeb.loadPlayer(vwCanvas, function () {
+        getAllNodeTexts(document.body, function (node) {
+          if (vw.contains(node)) return;
+
+          var span = document.createElement('span');
+          span.classList.add('wc-text');
+          var parent = node.parentNode;
+
+          parent.insertBefore(span, node);
+          parent.removeChild(node);
+          span.appendChild(node);
+
+          span.addEventListener('click', function (e) {
+            e.preventDefault();
+            window.VLibrasPlayer.translate(this.textContent);
+
+            var actives = document.querySelector('.wc-text.active');
+            if (actives) {
+              actives.classList.remove('active');
+            }
+
+            this.classList.add('active');
+          });
+        });
+      });
+    });
+
+    vwClose.addEventListener('click', function () {
+      vwPlayer.classList.remove('active');
+      vwAccess.classList.remove('inactive');
+      vw.classList.remove('left');
+
+      minimize();
+
+      getAllNodeTexts(document.body, function (node) {
+        if (vw.contains(node)) return;
+
+        var span   = node.parentNode;
+        var parent = span.parentNode;
+
+        span.removeChild(node);
+        parent.insertBefore(node, span);
+        parent.removeChild(span);
+      });
+    });
+
+    vwSide.addEventListener('click', function () {
+      vw.classList.toggle('left');
+
+      minimize();
+    });
+
+    function getAllNodeTexts(root, callback) {
+      var noop = function () {};
+      var walk = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, null);
+
+      while (walk.nextNode()) {
+        var node = walk.currentNode;
+
+        if (node.textContent.trim().length > 0) {
+          (callback || noop)(node);
+        }
+      }
+    }
+
+    function minimize() {
+      vw.classList.remove('maximize');
+      vwWindow.classList.remove('active');
+    }
+  };
+})(window, document);
+++ a/index.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css">
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo odio ratione, numquam. Quisquam ex, nemo ea necessitatibus laudantium, rem natus officiis dignissimos a repudiandae, quam doloribus voluptatibus commodi sed aperiam.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum tempore error molestiae totam provident <a href="">incidunt</a> voluptates iste corrupti sed rerum alias id commodi, suscipit nobis eveniet, possimus consectetur a sapiente?</p>
+
+    <div class="vlibras-widget">
+      <div class="vw-btn-access">
+        <img src="VLibrasWeb/Images/acessibilidade-ico.jpeg" />
+        <span class="vw-text-access">
+          Acessível em Libras
+        </span>
+      </div>
+      <div class="vw-player">
+        <div class="vw-topbar">
+          <div class="vw-btn-side">
+            <span class="vw-arrow"></span>
+          </div>
+
+          <img class="vw-btn-close" src="VLibrasWeb/Images/close.png" />
+        </div>
+
+        <div class="vw-canvas-wrapper">
+          <div class="vw-subtitle active">
+            <img class="vw-subtitle-on" src="VLibrasWeb/Images/subtitle.png" />
+            <img class="vw-subtitle-off" src="VLibrasWeb/Images/subtitle-inactive.png" />
+          </div>
+          <canvas class="vw-canvas emscripten"></canvas>
+        </div>
+
+        <div class="vw-controls">
+          <div class="vw-play">
+            <img src="VLibrasWeb/Images/play.png" />
+          </div>
+          <div class="vw-progressbar">
+            <div class="vw-progress"></div>
+          </div>
+          <span class="vw-speed">2</span>
+          <span class="vw-window">
+            <img class="vw-maximize" src="VLibrasWeb/Images/fullscreen.png" />
+            <img class="vw-minimize" src="VLibrasWeb/Images/minimize.png" />
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <script src="VLibrasWeb/vlibras-web.js"></script>
+    <script>
+      VLibrasWeb.init();
+    </script>
+  </body>
+</html>
 \ No newline at end of file
		1	+++ a/.gitignore
	@@ -0,0 +1,2 @@		@@ -0,0 +1,2 @@
		1	+VLibrasWeb/Player/*
		2	+*.zip
0	\ No newline at end of file	3	\ No newline at end of file
		1	+++ a/README.md
	@@ -0,0 +1,46 @@		@@ -0,0 +1,46 @@
		1	+VLibras Web
		2	+===========
		3	+
		4	+Instalação
		5	+-------------
		6	+
		7	+1. Adicione o seguinte trecho HTML:
		8	+
		9	+```html
		10	+<div class="vlibras-widget">
		11	+ <img class="vw-btn-access" src="VLibrasWeb/Images/acessibilidade-ico.png" />
		12	+
		13	+ <div class="vw-player">
		14	+ <div class="vw-topbar">
		15	+ <span class="vw-btn-side"><</span>
		16	+ <span class="vw-btn-close">X</span>
		17	+ </div>
		18	+
		19	+ <canvas class="vw-canvas emscripten"></canvas>
		20	+ </div>
		21	+</div>
		22	+```
		23	+
		24	+2. Adicione os arquivos `.css` e `.js` na página:
		25	+
		26	+```html
		27	+<head>
		28	+ <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css" />
		29	+</head>
		30	+<body>
		31	+ ...
		32	+ <script src="VLibrasWeb/vlibras-web.js"></script>
		33	+</body>
		34	+```
		35	+
		36	+3. Finalmente, inicialize o VLibrasWeb
		37	+
		38	+```js
		39	+// Default: Se a pasta VLibrasWeb estiver na mesma pasta do arquivo index
		40	+VLibrasWeb.init();
		41	+
		42	+// Custom: Passe o caminho da pasta VLibrasWeb
		43	+VLibrasWeb.init('another/path');
		44	+```
		45	+
		46	+ Enjoy
0	\ No newline at end of file	47	\ No newline at end of file
		1	+++ a/VLibrasWeb/vlibras-player.js
	@@ -0,0 +1,93 @@		@@ -0,0 +1,93 @@
		1	+(function (window, document) {
		2	+ function VLibrasPlayer() {
		3	+ this.loaded = false;
		4	+ this.glosa = undefined;
		5	+ this.canvas = document.querySelector('#vlibras-canvas');
		6	+ this.initialized = false;
		7	+ }
		8	+
		9	+ VLibrasPlayer.prototype.translate = function (text) {
		10	+ var self = this;
		11	+ text = encodeURI(text);
		12	+
		13	+ getGlosa('http://150.165.204.30/glosa?texto=' + text,
		14	+ function (status, response) {
		15	+ self.glosa = response \|\| decodeURI(text).toUpperCase();
		16	+ self.play();
		17	+ });
		18	+ };
		19	+
		20	+ VLibrasPlayer.prototype.play = function () {
		21	+ if (this.glosa !== undefined && this.loaded === true) {
		22	+ window.SendMessage('PlayerManager', 'catchGlosa', this.glosa);
		23	+ }
		24	+ };
		25	+
		26	+ VLibrasPlayer.prototype.setSpeed = function (speed) {
		27	+ window.SendMessage('PlayerManager', 'setSlider', speed);
		28	+ };
		29	+
		30	+ VLibrasPlayer.prototype.switchSubtitle = function () {
		31	+ window.SendMessage('PlayerManager', 'switchSubtitleStatus');
		32	+ };
		33	+
		34	+ VLibrasPlayer.prototype.addProgressListener = function (callback) {
		35	+ this.onprogress = callback;
		36	+ };
		37	+
		38	+ VLibrasPlayer.prototype.load = function () {
		39	+ this.loaded = true;
		40	+ this.play();
		41	+ };
		42	+
		43	+ VLibrasPlayer.prototype.getCanvasElement = function () {
		44	+ return this.canvas;
		45	+ };
		46	+
		47	+ VLibrasPlayer.prototype.getPath = function () {
		48	+ return this.path;
		49	+ };
		50	+
		51	+ VLibrasPlayer.prototype.initialize = function (path, canvas, callback) {
		52	+ var noop = function () {};
		53	+
		54	+ if (this.initialized) {
		55	+ (callback \|\| noop)();
		56	+ return;
		57	+ }
		58	+
		59	+ this.canvas = canvas;
		60	+ this.path = path;
		61	+
		62	+ var script = document.createElement('script');
		63	+ script.src = path + '/Player/Release/Setup.js';
		64	+ document.body.appendChild(script);
		65	+
		66	+ script.onload = (callback \|\| noop);
		67	+
		68	+ this.initialized = true;
		69	+ };
		70	+
		71	+ window.onLoadPlayer = function () {
		72	+ this.VLibrasPlayer.load();
		73	+ };
		74	+
		75	+ window.updateProgress = function (progress) {
		76	+ var noop = function () {};
		77	+ (this.VLibrasPlayer.onprogress \|\| noop)(progress);
		78	+ };
		79	+
		80	+ window.VLibrasPlayer = new VLibrasPlayer();
		81	+
		82	+ function getGlosa(url, callback) {
		83	+ var xhr = new XMLHttpRequest();
		84	+ xhr.open('GET', url, true);
		85	+
		86	+ xhr.onreadystatechange = function() {
		87	+ if (xhr.readyState != 4) return;
		88	+ callback(xhr.status, xhr.responseText);
		89	+ };
		90	+
		91	+ xhr.send();
		92	+ };
		93	+})(window, document);
0	\ No newline at end of file	94	\ No newline at end of file
		1	+++ a/VLibrasWeb/vlibras-web.css
	@@ -0,0 +1,207 @@		@@ -0,0 +1,207 @@
		1	+.vlibras-widget {
		2	+ position: fixed;
		3	+ right: 0;
		4	+ top: 50%;
		5	+ margin-top: -225px;
		6	+ z-index: 9999;
		7	+ display: none;
		8	+}
		9	+
		10	+.vlibras-widget.active {
		11	+ display: block;
		12	+}
		13	+
		14	+.vlibras-widget.maximize {
		15	+ bottom: 40px;
		16	+ margin-top 0;
		17	+ top: initial;
		18	+ right: 50%;
		19	+ margin-right: -275px;
		20	+}
		21	+
		22	+.vlibras-widget.maximize .vw-player {
		23	+ height: 550px;
		24	+ width: 550px !important;
		25	+}
		26	+
		27	+.vlibras-widget.maximize .vw-canvas-wrapper {
		28	+ height: 468px;
		29	+}
		30	+
		31	+.vlibras-widget.left {
		32	+ left: 0;
		33	+ right: initial;
		34	+}
		35	+
		36	+.vlibras-widget.left .vw-player {
		37	+ float: left;
		38	+}
		39	+
		40	+.vlibras-widget .vw-btn-access {
		41	+ width: 70px;
		42	+ padding: 5px;
		43	+ text-align: center;
		44	+
		45	+ -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
		46	+ -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
		47	+ box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
		48	+}
		49	+
		50	+.vw-btn-access img {
		51	+ margin-bottom: 5px;
		52	+ width: 70px;
		53	+ height: 70px;
		54	+}
		55	+
		56	+.vw-btn-access span {
		57	+ font-size: 15px;
		58	+ color: #004088;
		59	+}
		60	+
		61	+.vlibras-widget .vw-btn-access.inactive {
		62	+ display: none;
		63	+}
		64	+
		65	+.vlibras-widget .vw-player {
		66	+ display: none;
		67	+ width: 0;
		68	+ height: 450px;
		69	+ float: right;
		70	+
		71	+ -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
		72	+ -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
		73	+ box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
		74	+}
		75	+
		76	+.vlibras-widget .vw-player.active {
		77	+ width: 320px;
		78	+ display: block;
		79	+}
		80	+
		81	+.vw-player .vw-canvas-wrapper {
		82	+ position: relative;
		83	+ width: 100%;
		84	+ height: 370px;
		85	+ background-color: #ebebeb;
		86	+}
		87	+
		88	+.vw-canvas-wrapper .vw-subtitle {
		89	+ position: absolute;
		90	+ top: 15px;
		91	+ right: 15px;
		92	+}
		93	+
		94	+.vw-subtitle .vw-subtitle-off, .vw-subtitle.active .vw-subtitle-on {
		95	+ display: block;
		96	+}
		97	+
		98	+.vw-subtitle .vw-subtitle-on, .vw-subtitle.active .vw-subtitle-off {
		99	+ display: none;
		100	+}
		101	+
		102	+.vw-canvas-wrapper .vw-canvas {
		103	+ width: 100%;
		104	+ height: 100%;
		105	+}
		106	+
		107	+.vw-player .vw-topbar {
		108	+ padding: 8.5px 10px;
		109	+ height: 20px;
		110	+ background-color: #004088;
		111	+ color: #fff;
		112	+}
		113	+
		114	+.vw-player .vw-btn-close {
		115	+ float: right;
		116	+ height: 100%;
		117	+}
		118	+
		119	+.vw-player .vw-btn-side {
		120	+ float: left;
		121	+ border: 1px solid #fff;
		122	+ background-color: #fff;
		123	+ width: 2em;
		124	+ margin: 0;
		125	+}
		126	+
		127	+.vw-btn-side .vw-arrow {
		128	+ background-color: #004088;
		129	+ float: right;
		130	+ width: 50%;
		131	+ text-align: center;
		132	+}
		133	+
		134	+.vw-btn-side .vw-arrow:after {
		135	+ content: "<";
		136	+}
		137	+
		138	+.vlibras-widget.left .vw-arrow {
		139	+ float: left;
		140	+}
		141	+
		142	+.vlibras-widget.left .vw-arrow:after {
		143	+ content: ">";
		144	+}
		145	+
		146	+.vlibras-widget .vw-controls {
		147	+ width: 100%;
		148	+ padding: 8.5px 10px;
		149	+ background-color: #fff;
		150	+
		151	+ -webkit-box-sizing: border-box;
		152	+ -moz-box-sizing: border-box;
		153	+ box-sizing: border-box;
		154	+
		155	+ display: -webkit-flex;
		156	+ display: flex;
		157	+ align-items: center;
		158	+}
		159	+
		160	+.vw-controls .vw-play {
		161	+ height: 28px;
		162	+}
		163	+
		164	+.vw-play img {
		165	+ height: 100%;
		166	+}
		167	+
		168	+.vw-controls .vw-progressbar {
		169	+ margin: 0 13px;
		170	+ width: 100%;
		171	+ height: 3px;
		172	+ background-color: #000;
		173	+}
		174	+
		175	+.vw-progressbar .vw-progress {
		176	+ background-color: #ff2323;
		177	+ width: 0;
		178	+ height: 100%;
		179	+}
		180	+
		181	+.vw-controls .vw-speed {
		182	+ padding: 3px;
		183	+ margin-right: 10px;
		184	+ font-size: 19px;
		185	+ font-weight: bold;
		186	+ cursor: pointer;
		187	+}
		188	+
		189	+.vw-controls .vw-speed:before {
		190	+ content: "x";
		191	+}
		192	+
		193	+.vw-controls .vw-window {
		194	+ height: 28px;
		195	+}
		196	+
		197	+.vw-window .vw-maximize, .vw-window.active .vw-minimize {
		198	+ display: block;
		199	+}
		200	+
		201	+.vw-window .vw-minimize, .vw-window.active .vw-maximize {
		202	+ display: none;
		203	+}
		204	+
		205	+.wc-text:hover, .wc-text.active {
		206	+ background-color: rgba(255, 102, 0, 0.5);
		207	+}
0	\ No newline at end of file	208	\ No newline at end of file
	1	+++ a/VLibrasWeb/vlibras-web.js
@@ -0,0 +1,153 @@		@@ -0,0 +1,153 @@
	1	+(function (window, document) {
	2	+ VLibrasWeb = {
	3	+ path: 'VLibrasWeb'
	4	+ };
	5	+
	6	+ VLibrasWeb.init = function (path) {
	7	+ if (path) this.path = path + '/VLibrasWeb';
	8	+
	9	+ var player = document.createElement('script');
	10	+ player.src = this.path + '/vlibras-player.js';
	11	+
	12	+ player.onload = function () {
	13	+ document.querySelector('.vlibras-widget').classList.add('active');
	14	+ VLibrasWeb.run(window.VLibrasPlayer);
	15	+ }
	16	+
	17	+ document.body.appendChild(player);
	18	+ };
	19	+
	20	+ VLibrasWeb.loadPlayer = function (canvas, callback) {
	21	+ window.VLibrasPlayer.initialize(VLibrasWeb.path, canvas, callback);
	22	+ };
	23	+
	24	+ VLibrasWeb.run = function (VLibrasPlayer) {
	25	+ var vw = document.querySelector('.vlibras-widget');
	26	+ var vwAccess = vw.querySelector('.vw-btn-access');
	27	+ var vwPlayer = vw.querySelector('.vw-player');
	28	+
	29	+ var vwClose = vwPlayer.querySelector('.vw-btn-close');
	30	+ var vwSide = vwPlayer.querySelector('.vw-btn-side');
	31	+ var vwControls = vwPlayer.querySelector('.vw-controls');
	32	+ var vwCanvas = vwPlayer.querySelector('.vw-canvas');
	33	+ var vwSubtitle = vwPlayer.querySelector('.vw-subtitle');
	34	+
	35	+ var vwProgress = vwControls.querySelector('.vw-progress');
	36	+ var vwSpeed = vwControls.querySelector('.vw-speed');
	37	+ var vwWindow = vwControls.querySelector('.vw-window');
	38	+ var vwPlay = vwControls.querySelector('.vw-play');
	39	+
	40	+ VLibrasPlayer.addProgressListener(function (progress) {
	41	+ if (progress >= 1) {
	42	+ document.querySelector('.wc-text.active').classList.remove('active');
	43	+ progress = 0;
	44	+ }
	45	+
	46	+ vwProgress.style.width = (progress * 100) + '%';
	47	+ });
	48	+
	49	+ vwPlay.addEventListener('click', function (e) {
	50	+ e.preventDefault();
	51	+
	52	+ VLibrasPlayer.play();
	53	+ });
	54	+
	55	+ vwSubtitle.addEventListener('click', function (e) {
	56	+ e.preventDefault();
	57	+
	58	+ vwSubtitle.classList.toggle('active');
	59	+ VLibrasPlayer.switchSubtitle();
	60	+ })
	61	+
	62	+ vwWindow.addEventListener('click', function (e) {
	63	+ e.preventDefault();
	64	+
	65	+ vw.classList.toggle('maximize');
	66	+ vwWindow.classList.toggle('active');
	67	+ });
	68	+
	69	+ vwSpeed.addEventListener('click', function (e) {
	70	+ e.preventDefault();
	71	+
	72	+ var actualSpeed = vwSpeed.innerText;
	73	+ var newSpeed = (actualSpeed % 4) + 1;
	74	+
	75	+ VLibrasPlayer.setSpeed(newSpeed * 0.5);
	76	+ this.innerText = newSpeed;
	77	+ });
	78	+
	79	+ vwAccess.addEventListener('click', function () {
	80	+ vwPlayer.classList.add('active');
	81	+ vwAccess.classList.add('inactive');
	82	+
	83	+ VLibrasWeb.loadPlayer(vwCanvas, function () {
	84	+ getAllNodeTexts(document.body, function (node) {
	85	+ if (vw.contains(node)) return;
	86	+
	87	+ var span = document.createElement('span');
	88	+ span.classList.add('wc-text');
	89	+ var parent = node.parentNode;
	90	+
	91	+ parent.insertBefore(span, node);
	92	+ parent.removeChild(node);
	93	+ span.appendChild(node);
	94	+
	95	+ span.addEventListener('click', function (e) {
	96	+ e.preventDefault();
	97	+ window.VLibrasPlayer.translate(this.textContent);
	98	+
	99	+ var actives = document.querySelector('.wc-text.active');
	100	+ if (actives) {
	101	+ actives.classList.remove('active');
	102	+ }
	103	+
	104	+ this.classList.add('active');
	105	+ });
	106	+ });
	107	+ });
	108	+ });
	109	+
	110	+ vwClose.addEventListener('click', function () {
	111	+ vwPlayer.classList.remove('active');
	112	+ vwAccess.classList.remove('inactive');
	113	+ vw.classList.remove('left');
	114	+
	115	+ minimize();
	116	+
	117	+ getAllNodeTexts(document.body, function (node) {
	118	+ if (vw.contains(node)) return;
	119	+
	120	+ var span = node.parentNode;
	121	+ var parent = span.parentNode;
	122	+
	123	+ span.removeChild(node);
	124	+ parent.insertBefore(node, span);
	125	+ parent.removeChild(span);
	126	+ });
	127	+ });
	128	+
	129	+ vwSide.addEventListener('click', function () {
	130	+ vw.classList.toggle('left');
	131	+
	132	+ minimize();
	133	+ });
	134	+
	135	+ function getAllNodeTexts(root, callback) {
	136	+ var noop = function () {};
	137	+ var walk = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, null);
	138	+
	139	+ while (walk.nextNode()) {
	140	+ var node = walk.currentNode;
	141	+
	142	+ if (node.textContent.trim().length > 0) {
	143	+ (callback \|\| noop)(node);
	144	+ }
	145	+ }
	146	+ }
	147	+
	148	+ function minimize() {
	149	+ vw.classList.remove('maximize');
	150	+ vwWindow.classList.remove('active');
	151	+ }
	152	+ };
	153	+})(window, document);
		1	+++ a/index.html
	@@ -0,0 +1,54 @@		@@ -0,0 +1,54 @@
		1	+<html>
		2	+ <head>
		3	+ <link rel="stylesheet" href="VLibrasWeb/vlibras-web.css">
		4	+ </head>
		5	+ <body>
		6	+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo odio ratione, numquam. Quisquam ex, nemo ea necessitatibus laudantium, rem natus officiis dignissimos a repudiandae, quam doloribus voluptatibus commodi sed aperiam.</p>
		7	+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum tempore error molestiae totam provident <a href="">incidunt</a> voluptates iste corrupti sed rerum alias id commodi, suscipit nobis eveniet, possimus consectetur a sapiente?</p>
		8	+
		9	+ <div class="vlibras-widget">
		10	+ <div class="vw-btn-access">
		11	+ <img src="VLibrasWeb/Images/acessibilidade-ico.jpeg" />
		12	+ <span class="vw-text-access">
		13	+ Acessível em Libras
		14	+ </span>
		15	+ </div>
		16	+ <div class="vw-player">
		17	+ <div class="vw-topbar">
		18	+ <div class="vw-btn-side">
		19	+ <span class="vw-arrow"></span>
		20	+ </div>
		21	+
		22	+ <img class="vw-btn-close" src="VLibrasWeb/Images/close.png" />
		23	+ </div>
		24	+
		25	+ <div class="vw-canvas-wrapper">
		26	+ <div class="vw-subtitle active">
		27	+ <img class="vw-subtitle-on" src="VLibrasWeb/Images/subtitle.png" />
		28	+ <img class="vw-subtitle-off" src="VLibrasWeb/Images/subtitle-inactive.png" />
		29	+ </div>
		30	+ <canvas class="vw-canvas emscripten"></canvas>
		31	+ </div>
		32	+
		33	+ <div class="vw-controls">
		34	+ <div class="vw-play">
		35	+ <img src="VLibrasWeb/Images/play.png" />
		36	+ </div>
		37	+ <div class="vw-progressbar">
		38	+ <div class="vw-progress"></div>
		39	+ </div>
		40	+ <span class="vw-speed">2</span>
		41	+ <span class="vw-window">
		42	+ <img class="vw-maximize" src="VLibrasWeb/Images/fullscreen.png" />
		43	+ <img class="vw-minimize" src="VLibrasWeb/Images/minimize.png" />
		44	+ </span>
		45	+ </div>
		46	+ </div>
		47	+ </div>
		48	+
		49	+ <script src="VLibrasWeb/vlibras-web.js"></script>
		50	+ <script>
		51	+ VLibrasWeb.init();
		52	+ </script>
		53	+ </body>
		54	+</html>
0	\ No newline at end of file	55	\ No newline at end of file