Download as
Browse Code »

Commit ccb6255451215885c13f3cee99c129851ee9d86f

Authored by David Guilherme
1 parent 810245ff
Exists in master

Beta Release

Showing 9 changed files with 474 additions and 21 deletions   Show diff stats
1 -VLibrasWeb/Player/* 1 +VLibrasWeb/Player/Release/*
  2 +!VLibrasWeb/Player/Release/Setup.js
2 *.zip 3 *.zip
3 \ No newline at end of file 4 \ No newline at end of file
@@ -8,15 +8,45 @@ Instalação @@ -8,15 +8,45 @@ Instalação
8 8
9 ```html 9 ```html
10 <div class="vlibras-widget"> 10 <div class="vlibras-widget">
11 - <img class="vw-btn-access" src="VLibrasWeb/Images/acessibilidade-ico.png" />  
12 - 11 + <div class="vw-btn-access">
  12 + <img src="VLibrasWeb/Images/acessibilidade-ico.jpeg" />
  13 + <span class="vw-text-access">
  14 + Acessível em Libras
  15 + </span>
  16 + </div>
13 <div class="vw-player"> 17 <div class="vw-player">
14 <div class="vw-topbar"> 18 <div class="vw-topbar">
15 - <span class="vw-btn-side"><</span>  
16 - <span class="vw-btn-close">X</span> 19 + <div class="vw-btn-side">
  20 + <span class="vw-arrow"></span>
  21 + </div>
  22 +
  23 + <img class="vw-btn-close" src="VLibrasWeb/Images/close.png" />
17 </div> 24 </div>
18 25
19 - <canvas class="vw-canvas emscripten"></canvas> 26 + <div class="vw-canvas-wrapper">
  27 + <div class="vw-loading active">
  28 + <img src="VLibrasWeb/Images/loading.gif" />
  29 + </div>
  30 + <div class="vw-subtitle active">
  31 + <img class="vw-subtitle-on" src="VLibrasWeb/Images/subtitle.png" />
  32 + <img class="vw-subtitle-off" src="VLibrasWeb/Images/subtitle-inactive.png" />
  33 + </div>
  34 + <canvas class="vw-canvas emscripten"></canvas>
  35 + </div>
  36 +
  37 + <div class="vw-controls">
  38 + <div class="vw-play">
  39 + <img src="VLibrasWeb/Images/play.png" />
  40 + </div>
  41 + <div class="vw-progressbar">
  42 + <div class="vw-progress"></div>
  43 + </div>
  44 + <span class="vw-speed">2</span>
  45 + <span class="vw-window">
  46 + <img class="vw-maximize" src="VLibrasWeb/Images/fullscreen.png" />
  47 + <img class="vw-minimize" src="VLibrasWeb/Images/minimize.png" />
  48 + </span>
  49 + </div>
20 </div> 50 </div>
21 </div> 51 </div>
22 ``` 52 ```
VLibrasWeb/Images/acessibilidade-ico.png
View file @810245f

1.55 KB
VLibrasWeb/Images/loading.gif 0 → 100644
View file @ccb6255

47.4 KB
VLibrasWeb/Player/Release/Setup.js 0 → 100644
  Diff comments   View file @ccb6255
@@ -0,0 +1,374 @@ @@ -0,0 +1,374 @@
  1 +//====================== Player Configuration ===========================
  2 +// connect to canvas
  3 +var Module = {
  4 + TOTAL_MEMORY: 314572800,
  5 + filePackagePrefixURL: VLibrasPlayer.getPath() + '/Player/Release/',
  6 + memoryInitializerPrefixURL: VLibrasPlayer.getPath() + '/Player/Release/',
  7 + preRun: [],
  8 + postRun: [],
  9 + print: (function() {
  10 + return function(text) {
  11 + console.log (text);
  12 + };
  13 + })(),
  14 + printErr: function(text) {
  15 + console.error (text);
  16 + },
  17 + canvas: VLibrasPlayer.getCanvasElement(),
  18 + progress: null,
  19 + setStatus: function(text) {
  20 + if (this.progress == null)
  21 + {
  22 + if (typeof UnityProgress != 'function')
  23 + return;
  24 + this.progress = new UnityProgress (canvas);
  25 + }
  26 + if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
  27 + if (text === Module.setStatus.text) return;
  28 + this.progress.SetMessage (text);
  29 + var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
  30 + if (m)
  31 + this.progress.SetProgress (parseInt(m[2])/parseInt(m[4]));
  32 + if (text === "")
  33 + this.progress.Clear()
  34 + },
  35 + totalDependencies: 0,
  36 + monitorRunDependencies: function(left) {
  37 + this.totalDependencies = Math.max(this.totalDependencies, left);
  38 + Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
  39 + }
  40 +};
  41 +Module.setStatus('Downloading (0.0/1)');
  42 +
  43 +//============ FileLoader =====================
  44 +
  45 +
  46 +
  47 +var Module;
  48 +
  49 +if (typeof Module === 'undefined') Module = eval('(function() { try { return Module || {} } catch(e) { return {} } })()');
  50 +
  51 +if (!Module.expectedDataFileDownloads) {
  52 + Module.expectedDataFileDownloads = 0;
  53 + Module.finishedDataFileDownloads = 0;
  54 +}
  55 +Module.expectedDataFileDownloads++;
  56 +(function() {
  57 + var loadPackage = function(metadata) {
  58 +
  59 + var PACKAGE_PATH;
  60 + if (typeof window === 'object') {
  61 + PACKAGE_PATH = window['encodeURIComponent'](window.location.pathname.toString().substring(0, window.location.pathname.toString().lastIndexOf('/')) + '/');
  62 + } else if (typeof location !== 'undefined') {
  63 + // worker
  64 + PACKAGE_PATH = encodeURIComponent(location.pathname.toString().substring(0, location.pathname.toString().lastIndexOf('/')) + '/');
  65 + } else {
  66 + throw 'using preloaded data can only be done on a web page or in a web worker';
  67 + }
  68 + var PACKAGE_NAME = 'rnp_webgl_DC_ON_AA0x_VsyncOFF.data';
  69 + var REMOTE_PACKAGE_BASE = 'rnp_webgl_DC_ON_AA0x_VsyncOFF.data';
  70 + if (typeof Module['locateFilePackage'] === 'function' && !Module['locateFile']) {
  71 + Module['locateFile'] = Module['locateFilePackage'];
  72 + Module.printErr('warning: you defined Module.locateFilePackage, that has been renamed to Module.locateFile (using your locateFilePackage for now)');
  73 + }
  74 + var REMOTE_PACKAGE_NAME = typeof Module['locateFile'] === 'function' ?
  75 + Module['locateFile'](REMOTE_PACKAGE_BASE) :
  76 + ((Module['filePackagePrefixURL'] || '') + REMOTE_PACKAGE_BASE);
  77 +
  78 + var REMOTE_PACKAGE_SIZE = 44246212;
  79 + var PACKAGE_UUID = '01d51089-f5b6-48dc-a9e7-50b8522039d5';
  80 +
  81 + function fetchRemotePackage(packageName, packageSize, callback, errback) {
  82 + var xhr = new XMLHttpRequest();
  83 + xhr.open('GET', packageName, true);
  84 + xhr.responseType = 'arraybuffer';
  85 + xhr.onprogress = function(event) {
  86 + var url = packageName;
  87 + var size = packageSize;
  88 + if (event.total) size = event.total;
  89 + if (event.loaded) {
  90 + if (!xhr.addedTotal) {
  91 + xhr.addedTotal = true;
  92 + if (!Module.dataFileDownloads) Module.dataFileDownloads = {};
  93 + Module.dataFileDownloads[url] = {
  94 + loaded: event.loaded,
  95 + total: size
  96 + };
  97 + } else {
  98 + Module.dataFileDownloads[url].loaded = event.loaded;
  99 + }
  100 + var total = 0;
  101 + var loaded = 0;
  102 + var num = 0;
  103 + for (var download in Module.dataFileDownloads) {
  104 + var data = Module.dataFileDownloads[download];
  105 + total += data.total;
  106 + loaded += data.loaded;
  107 + num++;
  108 + }
  109 + total = Math.ceil(total * Module.expectedDataFileDownloads/num);
  110 + if (Module['setStatus']) Module['setStatus']('Downloading data... (' + loaded + '/' + total + ')');
  111 + } else if (!Module.dataFileDownloads) {
  112 + if (Module['setStatus']) Module['setStatus']('Downloading data...');
  113 + }
  114 + };
  115 + xhr.onload = function(event) {
  116 + var packageData = xhr.response;
  117 + callback(packageData);
  118 + };
  119 + xhr.send(null);
  120 + };
  121 +
  122 + function handleError(error) {
  123 + console.error('package error:', error);
  124 + };
  125 +
  126 + function runWithFS() {
  127 +
  128 + function assert(check, msg) {
  129 + if (!check) throw msg + new Error().stack;
  130 + }
  131 +Module['FS_createPath']('/', 'Il2CppData', true, true);
  132 +Module['FS_createPath']('/Il2CppData', 'Metadata', true, true);
  133 +Module['FS_createPath']('/', 'Resources', true, true);
  134 +
  135 + function DataRequest(start, end, crunched, audio) {
  136 + this.start = start;
  137 + this.end = end;
  138 + this.crunched = crunched;
  139 + this.audio = audio;
  140 + }
  141 + DataRequest.prototype = {
  142 + requests: {},
  143 + open: function(mode, name) {
  144 + this.name = name;
  145 + this.requests[name] = this;
  146 + Module['addRunDependency']('fp ' + this.name);
  147 + },
  148 + send: function() {},
  149 + onload: function() {
  150 + var byteArray = this.byteArray.subarray(this.start, this.end);
  151 +
  152 + this.finish(byteArray);
  153 +
  154 + },
  155 + finish: function(byteArray) {
  156 + var that = this;
  157 + Module['FS_createPreloadedFile'](this.name, null, byteArray, true, true, function() {
  158 + Module['removeRunDependency']('fp ' + that.name);
  159 + }, function() {
  160 + if (that.audio) {
  161 + Module['removeRunDependency']('fp ' + that.name); // workaround for chromium bug 124926 (still no audio with this, but at least we don't hang)
  162 + } else {
  163 + Module.printErr('Preloading file ' + that.name + ' failed');
  164 + }
  165 + }, false, true); // canOwn this data in the filesystem, it is a slide into the heap that will never change
  166 + this.requests[this.name] = null;
  167 + },
  168 + };
  169 +
  170 + new DataRequest(0, 50564, 0, 0).open('GET', '/mainData');
  171 + new DataRequest(50564, 50732, 0, 0).open('GET', '/methods_pointedto_by_uievents.xml');
  172 + new DataRequest(50732, 39552116, 0, 0).open('GET', '/sharedassets0.assets');
  173 + new DataRequest(39552116, 41855056, 0, 0).open('GET', '/Il2CppData/Metadata/global-metadata.dat');
  174 + new DataRequest(41855056, 43742480, 0, 0).open('GET', '/Resources/unity_default_resources');
  175 + new DataRequest(43742480, 44246212, 0, 0).open('GET', '/Resources/unity_builtin_extra');
  176 +
  177 + var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
  178 + var IDB_RO = "readonly";
  179 + var IDB_RW = "readwrite";
  180 + var DB_NAME = 'EM_PRELOAD_CACHE';
  181 + var DB_VERSION = 1;
  182 + var METADATA_STORE_NAME = 'METADATA';
  183 + var PACKAGE_STORE_NAME = 'PACKAGES';
  184 + function openDatabase(callback, errback) {
  185 + try {
  186 + var openRequest = indexedDB.open(DB_NAME, DB_VERSION);
  187 + } catch (e) {
  188 + return errback(e);
  189 + }
  190 + openRequest.onupgradeneeded = function(event) {
  191 + var db = event.target.result;
  192 +
  193 + if(db.objectStoreNames.contains(PACKAGE_STORE_NAME)) {
  194 + db.deleteObjectStore(PACKAGE_STORE_NAME);
  195 + }
  196 + var packages = db.createObjectStore(PACKAGE_STORE_NAME);
  197 +
  198 + if(db.objectStoreNames.contains(METADATA_STORE_NAME)) {
  199 + db.deleteObjectStore(METADATA_STORE_NAME);
  200 + }
  201 + var metadata = db.createObjectStore(METADATA_STORE_NAME);
  202 + };
  203 + openRequest.onsuccess = function(event) {
  204 + var db = event.target.result;
  205 + callback(db);
  206 + };
  207 + openRequest.onerror = function(error) {
  208 + errback(error);
  209 + };
  210 + };
  211 +
  212 + /* Check if there's a cached package, and if so whether it's the latest available */
  213 + function checkCachedPackage(db, packageName, callback, errback) {
  214 + var transaction = db.transaction([METADATA_STORE_NAME], IDB_RO);
  215 + var metadata = transaction.objectStore(METADATA_STORE_NAME);
  216 +
  217 + var getRequest = metadata.get(packageName);
  218 + getRequest.onsuccess = function(event) {
  219 + var result = event.target.result;
  220 + if (!result) {
  221 + return callback(false);
  222 + } else {
  223 + return callback(PACKAGE_UUID === result.uuid);
  224 + }
  225 + };
  226 + getRequest.onerror = function(error) {
  227 + errback(error);
  228 + };
  229 + };
  230 +
  231 + function fetchCachedPackage(db, packageName, callback, errback) {
  232 + var transaction = db.transaction([PACKAGE_STORE_NAME], IDB_RO);
  233 + var packages = transaction.objectStore(PACKAGE_STORE_NAME);
  234 +
  235 + var getRequest = packages.get(packageName);
  236 + getRequest.onsuccess = function(event) {
  237 + var result = event.target.result;
  238 + callback(result);
  239 + };
  240 + getRequest.onerror = function(error) {
  241 + errback(error);
  242 + };
  243 + };
  244 +
  245 + function cacheRemotePackage(db, packageName, packageData, packageMeta, callback, errback) {
  246 + var transaction = db.transaction([PACKAGE_STORE_NAME, METADATA_STORE_NAME], IDB_RW);
  247 + var packages = transaction.objectStore(PACKAGE_STORE_NAME);
  248 + var metadata = transaction.objectStore(METADATA_STORE_NAME);
  249 +
  250 + var putPackageRequest = packages.put(packageData, packageName);
  251 + putPackageRequest.onsuccess = function(event) {
  252 + var putMetadataRequest = metadata.put(packageMeta, packageName);
  253 + putMetadataRequest.onsuccess = function(event) {
  254 + callback(packageData);
  255 + };
  256 + putMetadataRequest.onerror = function(error) {
  257 + errback(error);
  258 + };
  259 + };
  260 + putPackageRequest.onerror = function(error) {
  261 + errback(error);
  262 + };
  263 + };
  264 +
  265 + function processPackageData(arrayBuffer) {
  266 + Module.finishedDataFileDownloads++;
  267 + assert(arrayBuffer, 'Loading data file failed.');
  268 + var byteArray = new Uint8Array(arrayBuffer);
  269 + var curr;
  270 +
  271 + // Reuse the bytearray from the XHR as the source for file reads.
  272 + DataRequest.prototype.byteArray = byteArray;
  273 + DataRequest.prototype.requests["/mainData"].onload();
  274 + DataRequest.prototype.requests["/methods_pointedto_by_uievents.xml"].onload();
  275 + DataRequest.prototype.requests["/sharedassets0.assets"].onload();
  276 + DataRequest.prototype.requests["/Il2CppData/Metadata/global-metadata.dat"].onload();
  277 + DataRequest.prototype.requests["/Resources/unity_default_resources"].onload();
  278 + DataRequest.prototype.requests["/Resources/unity_builtin_extra"].onload();
  279 + Module['removeRunDependency']('datafile_rnp_webgl_DC_ON_AA0x_VsyncOFF.data');
  280 +
  281 + };
  282 + Module['addRunDependency']('datafile_rnp_webgl_DC_ON_AA0x_VsyncOFF.data');
  283 +
  284 + if (!Module.preloadResults) Module.preloadResults = {};
  285 +
  286 + function preloadFallback(error) {
  287 + console.error(error);
  288 + console.error('falling back to default preload behavior');
  289 + fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE, processPackageData, handleError);
  290 + };
  291 +
  292 + openDatabase(
  293 + function(db) {
  294 + checkCachedPackage(db, PACKAGE_PATH + PACKAGE_NAME,
  295 + function(useCached) {
  296 + Module.preloadResults[PACKAGE_NAME] = {fromCache: useCached};
  297 + if (useCached) {
  298 + console.info('loading ' + PACKAGE_NAME + ' from cache');
  299 + fetchCachedPackage(db, PACKAGE_PATH + PACKAGE_NAME, processPackageData, preloadFallback);
  300 + } else {
  301 + console.info('loading ' + PACKAGE_NAME + ' from remote');
  302 + fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE,
  303 + function(packageData) {
  304 + cacheRemotePackage(db, PACKAGE_PATH + PACKAGE_NAME, packageData, {uuid:PACKAGE_UUID}, processPackageData,
  305 + function(error) {
  306 + console.error(error);
  307 + processPackageData(packageData);
  308 + });
  309 + }
  310 + , preloadFallback);
  311 + }
  312 + }
  313 + , preloadFallback);
  314 + }
  315 + , preloadFallback);
  316 +
  317 + if (Module['setStatus']) Module['setStatus']('Downloading...');
  318 +
  319 + }
  320 + if (Module['calledRun']) {
  321 + runWithFS();
  322 + } else {
  323 + if (!Module['preRun']) Module['preRun'] = [];
  324 + Module["preRun"].push(runWithFS); // FS is not initialized yet, wait for it
  325 + }
  326 +
  327 + }
  328 + loadPackage();
  329 +
  330 +})();
  331 +
  332 +
  333 +
  334 +//============== Load ========================
  335 +
  336 +if (!(!Math.fround)) {
  337 + var script = document.createElement('script');
  338 + script.src = VLibrasPlayer.getPath() + '/Player/Release/rnp_webgl_DC_ON_AA0x_VsyncOFF.js';
  339 + document.body.appendChild(script);
  340 +} else {
  341 + var codeXHR = new XMLHttpRequest();
  342 + codeXHR.open('GET', VLibrasPlayer.getPath() + '/Player/Release/rnp_webgl_DC_ON_AA0x_VsyncOFF.js', true);
  343 + codeXHR.onload = function() {
  344 + var code = codeXHR.responseText;
  345 + if (!Math.fround) {
  346 +try {
  347 + console.log('optimizing out Math.fround calls');
  348 + var m = /var ([^=]+)=global\.Math\.fround;/.exec(code);
  349 + var minified = m[1];
  350 + if (!minified) throw 'fail';
  351 + var startAsm = code.indexOf('// EMSCRIPTEN_START_FUNCS');
  352 + var endAsm = code.indexOf('// EMSCRIPTEN_END_FUNCS');
  353 + var asm = code.substring(startAsm, endAsm);
  354 + do {
  355 + var moar = false; // we need to re-do, as x(x( will not be fixed
  356 + asm = asm.replace(new RegExp('[^a-zA-Z0-9\\$\\_]' + minified + '\\(', 'g'), function(s) { moar = true; return s[0] + '(' });
  357 + } while (moar);
  358 + code = code.substring(0, startAsm) + asm + code.substring(endAsm);
  359 + code = code.replace("'use asm'", "'almost asm'");
  360 +} catch(e) { console.log('failed to optimize out Math.fround calls ' + e) }
  361 + }
  362 +
  363 + var blob = new Blob([code], { type: 'text/javascript' });
  364 + codeXHR = null;
  365 + var src = URL.createObjectURL(blob);
  366 + var script = document.createElement('script');
  367 + script.src = URL.createObjectURL(blob);
  368 + script.onload = function() {
  369 + URL.revokeObjectURL(script.src);
  370 + };
  371 + document.body.appendChild(script);
  372 + };
  373 + codeXHR.send(null);
  374 +}
0 \ No newline at end of file 375 \ No newline at end of file
VLibrasWeb/vlibras-player.js
  Diff comments   View file @ccb6255
@@ -2,16 +2,20 @@ @@ -2,16 +2,20 @@
2 function VLibrasPlayer() { 2 function VLibrasPlayer() {
3 this.loaded = false; 3 this.loaded = false;
4 this.glosa = undefined; 4 this.glosa = undefined;
5 - this.canvas = document.querySelector('#vlibras-canvas'); 5 + this.canvas = undefined;
6 this.initialized = false; 6 this.initialized = false;
7 } 7 }
8 8
  9 + var noop = function () {};
  10 +
9 VLibrasPlayer.prototype.translate = function (text) { 11 VLibrasPlayer.prototype.translate = function (text) {
10 var self = this; 12 var self = this;
11 text = encodeURI(text); 13 text = encodeURI(text);
12 14
  15 + (self.onTranslateStart || noop)();
13 getGlosa('http://150.165.204.30/glosa?texto=' + text, 16 getGlosa('http://150.165.204.30/glosa?texto=' + text,
14 function (status, response) { 17 function (status, response) {
  18 + (self.onTranslateEnd || noop)();
15 self.glosa = response || decodeURI(text).toUpperCase(); 19 self.glosa = response || decodeURI(text).toUpperCase();
16 self.play(); 20 self.play();
17 }); 21 });
@@ -32,11 +36,24 @@ @@ -32,11 +36,24 @@
32 }; 36 };
33 37
34 VLibrasPlayer.prototype.addProgressListener = function (callback) { 38 VLibrasPlayer.prototype.addProgressListener = function (callback) {
35 - this.onprogress = callback; 39 + this.onProgress = callback;
  40 + };
  41 +
  42 + VLibrasPlayer.prototype.addLoadListener = function (callback) {
  43 + this.onLoad = callback;
  44 + };
  45 +
  46 + VLibrasPlayer.prototype.addTranslateStartListener = function (callback) {
  47 + this.onTranslateStart = callback;
  48 + };
  49 +
  50 + VLibrasPlayer.prototype.addTranslateEndListener = function (callback) {
  51 + this.onTranslateEnd = callback;
36 }; 52 };
37 53
38 VLibrasPlayer.prototype.load = function () { 54 VLibrasPlayer.prototype.load = function () {
39 this.loaded = true; 55 this.loaded = true;
  56 + this.onLoad();
40 this.play(); 57 this.play();
41 }; 58 };
42 59
@@ -49,8 +66,6 @@ @@ -49,8 +66,6 @@
49 }; 66 };
50 67
51 VLibrasPlayer.prototype.initialize = function (path, canvas, callback) { 68 VLibrasPlayer.prototype.initialize = function (path, canvas, callback) {
52 - var noop = function () {};  
53 -  
54 if (this.initialized) { 69 if (this.initialized) {
55 (callback || noop)(); 70 (callback || noop)();
56 return; 71 return;
@@ -73,8 +88,7 @@ @@ -73,8 +88,7 @@
73 }; 88 };
74 89
75 window.updateProgress = function (progress) { 90 window.updateProgress = function (progress) {
76 - var noop = function () {};  
77 - (this.VLibrasPlayer.onprogress || noop)(progress); 91 + (this.VLibrasPlayer.onProgress || noop)(progress);
78 }; 92 };
79 93
80 window.VLibrasPlayer = new VLibrasPlayer(); 94 window.VLibrasPlayer = new VLibrasPlayer();
VLibrasWeb/vlibras-web.css
  Diff comments   View file @ccb6255
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 right: 0; 3 right: 0;
4 top: 50%; 4 top: 50%;
5 margin-top: -225px; 5 margin-top: -225px;
6 - z-index: 9999; 6 + z-index: 1000;
7 display: none; 7 display: none;
8 } 8 }
9 9
@@ -190,10 +190,6 @@ @@ -190,10 +190,6 @@
190 content: "x"; 190 content: "x";
191 } 191 }
192 192
193 -.vw-controls .vw-window {  
194 - height: 28px;  
195 -}  
196 -  
197 .vw-window .vw-maximize, .vw-window.active .vw-minimize { 193 .vw-window .vw-maximize, .vw-window.active .vw-minimize {
198 display: block; 194 display: block;
199 } 195 }
@@ -202,6 +198,28 @@ @@ -202,6 +198,28 @@
202 display: none; 198 display: none;
203 } 199 }
204 200
205 -.wc-text:hover, .wc-text.active { 201 +.vw-text:hover, .vw-text.active {
206 background-color: rgba(255, 102, 0, 0.5); 202 background-color: rgba(255, 102, 0, 0.5);
  203 +}
  204 +
  205 +.vw-loading {
  206 + position: absolute;
  207 + top: 50%;
  208 + left: 50%;
  209 + margin-left: -50px;
  210 + margin-top: -25px;
  211 + width: 100px;
  212 + height: 50px;
  213 + z-index: 1001;
  214 + display: none;
  215 + text-align: center;
  216 +}
  217 +
  218 +.vw-loading img {
  219 + width: 50px;
  220 + height: 50px;
  221 +}
  222 +
  223 +.vw-loading.active {
  224 + display: block;
207 } 225 }
208 \ No newline at end of file 226 \ No newline at end of file
VLibrasWeb/vlibras-web.js
  Diff comments   View file @ccb6255
@@ -31,6 +31,7 @@ @@ -31,6 +31,7 @@
31 var vwControls = vwPlayer.querySelector('.vw-controls'); 31 var vwControls = vwPlayer.querySelector('.vw-controls');
32 var vwCanvas = vwPlayer.querySelector('.vw-canvas'); 32 var vwCanvas = vwPlayer.querySelector('.vw-canvas');
33 var vwSubtitle = vwPlayer.querySelector('.vw-subtitle'); 33 var vwSubtitle = vwPlayer.querySelector('.vw-subtitle');
  34 + var vwLoading = vwPlayer.querySelector('.vw-loading');
34 35
35 var vwProgress = vwControls.querySelector('.vw-progress'); 36 var vwProgress = vwControls.querySelector('.vw-progress');
36 var vwSpeed = vwControls.querySelector('.vw-speed'); 37 var vwSpeed = vwControls.querySelector('.vw-speed');
@@ -39,13 +40,25 @@ @@ -39,13 +40,25 @@
39 40
40 VLibrasPlayer.addProgressListener(function (progress) { 41 VLibrasPlayer.addProgressListener(function (progress) {
41 if (progress >= 1) { 42 if (progress >= 1) {
42 - document.querySelector('.wc-text.active').classList.remove('active'); 43 + document.querySelector('.vw-text.active').classList.remove('active');
43 progress = 0; 44 progress = 0;
44 } 45 }
45 46
46 vwProgress.style.width = (progress * 100) + '%'; 47 vwProgress.style.width = (progress * 100) + '%';
47 }); 48 });
48 49
  50 + VLibrasPlayer.addTranslateStartListener(function () {
  51 + vwLoading.classList.add('active');
  52 + });
  53 +
  54 + VLibrasPlayer.addLoadListener(function () {
  55 + vwLoading.classList.remove('active');
  56 + });
  57 +
  58 + VLibrasPlayer.addTranslateEndListener(function () {
  59 + vwLoading.classList.remove('active');
  60 + });
  61 +
49 vwPlay.addEventListener('click', function (e) { 62 vwPlay.addEventListener('click', function (e) {
50 e.preventDefault(); 63 e.preventDefault();
51 64
@@ -85,7 +98,7 @@ @@ -85,7 +98,7 @@
85 if (vw.contains(node)) return; 98 if (vw.contains(node)) return;
86 99
87 var span = document.createElement('span'); 100 var span = document.createElement('span');
88 - span.classList.add('wc-text'); 101 + span.classList.add('vw-text');
89 var parent = node.parentNode; 102 var parent = node.parentNode;
90 103
91 parent.insertBefore(span, node); 104 parent.insertBefore(span, node);
@@ -96,7 +109,7 @@ @@ -96,7 +109,7 @@
96 e.preventDefault(); 109 e.preventDefault();
97 window.VLibrasPlayer.translate(this.textContent); 110 window.VLibrasPlayer.translate(this.textContent);
98 111
99 - var actives = document.querySelector('.wc-text.active'); 112 + var actives = document.querySelector('.vw-text.active');
100 if (actives) { 113 if (actives) {
101 actives.classList.remove('active'); 114 actives.classList.remove('active');
102 } 115 }
@@ -23,6 +23,9 @@ @@ -23,6 +23,9 @@
23 </div> 23 </div>
24 24
25 <div class="vw-canvas-wrapper"> 25 <div class="vw-canvas-wrapper">
  26 + <div class="vw-loading active">
  27 + <img src="VLibrasWeb/Images/loading.gif" />
  28 + </div>
26 <div class="vw-subtitle active"> 29 <div class="vw-subtitle active">
27 <img class="vw-subtitle-on" src="VLibrasWeb/Images/subtitle.png" /> 30 <img class="vw-subtitle-on" src="VLibrasWeb/Images/subtitle.png" />
28 <img class="vw-subtitle-off" src="VLibrasWeb/Images/subtitle-inactive.png" /> 31 <img class="vw-subtitle-off" src="VLibrasWeb/Images/subtitle-inactive.png" />