diff --git a/.gitignore b/.gitignore index 0a21c3d..2fab4f3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ -VLibrasWeb/Player/* +VLibrasWeb/Player/Release/* +!VLibrasWeb/Player/Release/Setup.js *.zip \ No newline at end of file diff --git a/README.md b/README.md index 3f9e9c5..c10754c 100644 --- a/README.md +++ b/README.md @@ -8,15 +8,45 @@ Instalação ```html
``` diff --git a/VLibrasWeb/Images/acessibilidade-ico.png b/VLibrasWeb/Images/acessibilidade-ico.png deleted file mode 100644 index 7290eb2..0000000 Binary files a/VLibrasWeb/Images/acessibilidade-ico.png and /dev/null differ diff --git a/VLibrasWeb/Images/loading.gif b/VLibrasWeb/Images/loading.gif new file mode 100644 index 0000000..dfaad2a Binary files /dev/null and b/VLibrasWeb/Images/loading.gif differ diff --git a/VLibrasWeb/Player/Release/Setup.js b/VLibrasWeb/Player/Release/Setup.js new file mode 100644 index 0000000..4b9be7d --- /dev/null +++ b/VLibrasWeb/Player/Release/Setup.js @@ -0,0 +1,374 @@ +//====================== Player Configuration =========================== +// connect to canvas +var Module = { + TOTAL_MEMORY: 314572800, + filePackagePrefixURL: VLibrasPlayer.getPath() + '/Player/Release/', + memoryInitializerPrefixURL: VLibrasPlayer.getPath() + '/Player/Release/', + preRun: [], + postRun: [], + print: (function() { + return function(text) { + console.log (text); + }; + })(), + printErr: function(text) { + console.error (text); + }, + canvas: VLibrasPlayer.getCanvasElement(), + progress: null, + setStatus: function(text) { + if (this.progress == null) + { + if (typeof UnityProgress != 'function') + return; + this.progress = new UnityProgress (canvas); + } + if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' }; + if (text === Module.setStatus.text) return; + this.progress.SetMessage (text); + var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/); + if (m) + this.progress.SetProgress (parseInt(m[2])/parseInt(m[4])); + if (text === "") + this.progress.Clear() + }, + totalDependencies: 0, + monitorRunDependencies: function(left) { + this.totalDependencies = Math.max(this.totalDependencies, left); + Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.'); + } +}; +Module.setStatus('Downloading (0.0/1)'); + +//============ FileLoader ===================== + + + +var Module; + +if (typeof Module === 'undefined') Module = eval('(function() { try { return Module || {} } catch(e) { return {} } })()'); + +if (!Module.expectedDataFileDownloads) { + Module.expectedDataFileDownloads = 0; + Module.finishedDataFileDownloads = 0; +} +Module.expectedDataFileDownloads++; +(function() { + var loadPackage = function(metadata) { + + var PACKAGE_PATH; + if (typeof window === 'object') { + PACKAGE_PATH = window['encodeURIComponent'](window.location.pathname.toString().substring(0, window.location.pathname.toString().lastIndexOf('/')) + '/'); + } else if (typeof location !== 'undefined') { + // worker + PACKAGE_PATH = encodeURIComponent(location.pathname.toString().substring(0, location.pathname.toString().lastIndexOf('/')) + '/'); + } else { + throw 'using preloaded data can only be done on a web page or in a web worker'; + } + var PACKAGE_NAME = 'rnp_webgl_DC_ON_AA0x_VsyncOFF.data'; + var REMOTE_PACKAGE_BASE = 'rnp_webgl_DC_ON_AA0x_VsyncOFF.data'; + if (typeof Module['locateFilePackage'] === 'function' && !Module['locateFile']) { + Module['locateFile'] = Module['locateFilePackage']; + Module.printErr('warning: you defined Module.locateFilePackage, that has been renamed to Module.locateFile (using your locateFilePackage for now)'); + } + var REMOTE_PACKAGE_NAME = typeof Module['locateFile'] === 'function' ? + Module['locateFile'](REMOTE_PACKAGE_BASE) : + ((Module['filePackagePrefixURL'] || '') + REMOTE_PACKAGE_BASE); + + var REMOTE_PACKAGE_SIZE = 44246212; + var PACKAGE_UUID = '01d51089-f5b6-48dc-a9e7-50b8522039d5'; + + function fetchRemotePackage(packageName, packageSize, callback, errback) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', packageName, true); + xhr.responseType = 'arraybuffer'; + xhr.onprogress = function(event) { + var url = packageName; + var size = packageSize; + if (event.total) size = event.total; + if (event.loaded) { + if (!xhr.addedTotal) { + xhr.addedTotal = true; + if (!Module.dataFileDownloads) Module.dataFileDownloads = {}; + Module.dataFileDownloads[url] = { + loaded: event.loaded, + total: size + }; + } else { + Module.dataFileDownloads[url].loaded = event.loaded; + } + var total = 0; + var loaded = 0; + var num = 0; + for (var download in Module.dataFileDownloads) { + var data = Module.dataFileDownloads[download]; + total += data.total; + loaded += data.loaded; + num++; + } + total = Math.ceil(total * Module.expectedDataFileDownloads/num); + if (Module['setStatus']) Module['setStatus']('Downloading data... (' + loaded + '/' + total + ')'); + } else if (!Module.dataFileDownloads) { + if (Module['setStatus']) Module['setStatus']('Downloading data...'); + } + }; + xhr.onload = function(event) { + var packageData = xhr.response; + callback(packageData); + }; + xhr.send(null); + }; + + function handleError(error) { + console.error('package error:', error); + }; + + function runWithFS() { + + function assert(check, msg) { + if (!check) throw msg + new Error().stack; + } +Module['FS_createPath']('/', 'Il2CppData', true, true); +Module['FS_createPath']('/Il2CppData', 'Metadata', true, true); +Module['FS_createPath']('/', 'Resources', true, true); + + function DataRequest(start, end, crunched, audio) { + this.start = start; + this.end = end; + this.crunched = crunched; + this.audio = audio; + } + DataRequest.prototype = { + requests: {}, + open: function(mode, name) { + this.name = name; + this.requests[name] = this; + Module['addRunDependency']('fp ' + this.name); + }, + send: function() {}, + onload: function() { + var byteArray = this.byteArray.subarray(this.start, this.end); + + this.finish(byteArray); + + }, + finish: function(byteArray) { + var that = this; + Module['FS_createPreloadedFile'](this.name, null, byteArray, true, true, function() { + Module['removeRunDependency']('fp ' + that.name); + }, function() { + if (that.audio) { + Module['removeRunDependency']('fp ' + that.name); // workaround for chromium bug 124926 (still no audio with this, but at least we don't hang) + } else { + Module.printErr('Preloading file ' + that.name + ' failed'); + } + }, false, true); // canOwn this data in the filesystem, it is a slide into the heap that will never change + this.requests[this.name] = null; + }, + }; + + new DataRequest(0, 50564, 0, 0).open('GET', '/mainData'); + new DataRequest(50564, 50732, 0, 0).open('GET', '/methods_pointedto_by_uievents.xml'); + new DataRequest(50732, 39552116, 0, 0).open('GET', '/sharedassets0.assets'); + new DataRequest(39552116, 41855056, 0, 0).open('GET', '/Il2CppData/Metadata/global-metadata.dat'); + new DataRequest(41855056, 43742480, 0, 0).open('GET', '/Resources/unity_default_resources'); + new DataRequest(43742480, 44246212, 0, 0).open('GET', '/Resources/unity_builtin_extra'); + + var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; + var IDB_RO = "readonly"; + var IDB_RW = "readwrite"; + var DB_NAME = 'EM_PRELOAD_CACHE'; + var DB_VERSION = 1; + var METADATA_STORE_NAME = 'METADATA'; + var PACKAGE_STORE_NAME = 'PACKAGES'; + function openDatabase(callback, errback) { + try { + var openRequest = indexedDB.open(DB_NAME, DB_VERSION); + } catch (e) { + return errback(e); + } + openRequest.onupgradeneeded = function(event) { + var db = event.target.result; + + if(db.objectStoreNames.contains(PACKAGE_STORE_NAME)) { + db.deleteObjectStore(PACKAGE_STORE_NAME); + } + var packages = db.createObjectStore(PACKAGE_STORE_NAME); + + if(db.objectStoreNames.contains(METADATA_STORE_NAME)) { + db.deleteObjectStore(METADATA_STORE_NAME); + } + var metadata = db.createObjectStore(METADATA_STORE_NAME); + }; + openRequest.onsuccess = function(event) { + var db = event.target.result; + callback(db); + }; + openRequest.onerror = function(error) { + errback(error); + }; + }; + + /* Check if there's a cached package, and if so whether it's the latest available */ + function checkCachedPackage(db, packageName, callback, errback) { + var transaction = db.transaction([METADATA_STORE_NAME], IDB_RO); + var metadata = transaction.objectStore(METADATA_STORE_NAME); + + var getRequest = metadata.get(packageName); + getRequest.onsuccess = function(event) { + var result = event.target.result; + if (!result) { + return callback(false); + } else { + return callback(PACKAGE_UUID === result.uuid); + } + }; + getRequest.onerror = function(error) { + errback(error); + }; + }; + + function fetchCachedPackage(db, packageName, callback, errback) { + var transaction = db.transaction([PACKAGE_STORE_NAME], IDB_RO); + var packages = transaction.objectStore(PACKAGE_STORE_NAME); + + var getRequest = packages.get(packageName); + getRequest.onsuccess = function(event) { + var result = event.target.result; + callback(result); + }; + getRequest.onerror = function(error) { + errback(error); + }; + }; + + function cacheRemotePackage(db, packageName, packageData, packageMeta, callback, errback) { + var transaction = db.transaction([PACKAGE_STORE_NAME, METADATA_STORE_NAME], IDB_RW); + var packages = transaction.objectStore(PACKAGE_STORE_NAME); + var metadata = transaction.objectStore(METADATA_STORE_NAME); + + var putPackageRequest = packages.put(packageData, packageName); + putPackageRequest.onsuccess = function(event) { + var putMetadataRequest = metadata.put(packageMeta, packageName); + putMetadataRequest.onsuccess = function(event) { + callback(packageData); + }; + putMetadataRequest.onerror = function(error) { + errback(error); + }; + }; + putPackageRequest.onerror = function(error) { + errback(error); + }; + }; + + function processPackageData(arrayBuffer) { + Module.finishedDataFileDownloads++; + assert(arrayBuffer, 'Loading data file failed.'); + var byteArray = new Uint8Array(arrayBuffer); + var curr; + + // Reuse the bytearray from the XHR as the source for file reads. + DataRequest.prototype.byteArray = byteArray; + DataRequest.prototype.requests["/mainData"].onload(); + DataRequest.prototype.requests["/methods_pointedto_by_uievents.xml"].onload(); + DataRequest.prototype.requests["/sharedassets0.assets"].onload(); + DataRequest.prototype.requests["/Il2CppData/Metadata/global-metadata.dat"].onload(); + DataRequest.prototype.requests["/Resources/unity_default_resources"].onload(); + DataRequest.prototype.requests["/Resources/unity_builtin_extra"].onload(); + Module['removeRunDependency']('datafile_rnp_webgl_DC_ON_AA0x_VsyncOFF.data'); + + }; + Module['addRunDependency']('datafile_rnp_webgl_DC_ON_AA0x_VsyncOFF.data'); + + if (!Module.preloadResults) Module.preloadResults = {}; + + function preloadFallback(error) { + console.error(error); + console.error('falling back to default preload behavior'); + fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE, processPackageData, handleError); + }; + + openDatabase( + function(db) { + checkCachedPackage(db, PACKAGE_PATH + PACKAGE_NAME, + function(useCached) { + Module.preloadResults[PACKAGE_NAME] = {fromCache: useCached}; + if (useCached) { + console.info('loading ' + PACKAGE_NAME + ' from cache'); + fetchCachedPackage(db, PACKAGE_PATH + PACKAGE_NAME, processPackageData, preloadFallback); + } else { + console.info('loading ' + PACKAGE_NAME + ' from remote'); + fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE, + function(packageData) { + cacheRemotePackage(db, PACKAGE_PATH + PACKAGE_NAME, packageData, {uuid:PACKAGE_UUID}, processPackageData, + function(error) { + console.error(error); + processPackageData(packageData); + }); + } + , preloadFallback); + } + } + , preloadFallback); + } + , preloadFallback); + + if (Module['setStatus']) Module['setStatus']('Downloading...'); + + } + if (Module['calledRun']) { + runWithFS(); + } else { + if (!Module['preRun']) Module['preRun'] = []; + Module["preRun"].push(runWithFS); // FS is not initialized yet, wait for it + } + + } + loadPackage(); + +})(); + + + +//============== Load ======================== + +if (!(!Math.fround)) { + var script = document.createElement('script'); + script.src = VLibrasPlayer.getPath() + '/Player/Release/rnp_webgl_DC_ON_AA0x_VsyncOFF.js'; + document.body.appendChild(script); +} else { + var codeXHR = new XMLHttpRequest(); + codeXHR.open('GET', VLibrasPlayer.getPath() + '/Player/Release/rnp_webgl_DC_ON_AA0x_VsyncOFF.js', true); + codeXHR.onload = function() { + var code = codeXHR.responseText; + if (!Math.fround) { +try { + console.log('optimizing out Math.fround calls'); + var m = /var ([^=]+)=global\.Math\.fround;/.exec(code); + var minified = m[1]; + if (!minified) throw 'fail'; + var startAsm = code.indexOf('// EMSCRIPTEN_START_FUNCS'); + var endAsm = code.indexOf('// EMSCRIPTEN_END_FUNCS'); + var asm = code.substring(startAsm, endAsm); + do { + var moar = false; // we need to re-do, as x(x( will not be fixed + asm = asm.replace(new RegExp('[^a-zA-Z0-9\\$\\_]' + minified + '\\(', 'g'), function(s) { moar = true; return s[0] + '(' }); + } while (moar); + code = code.substring(0, startAsm) + asm + code.substring(endAsm); + code = code.replace("'use asm'", "'almost asm'"); +} catch(e) { console.log('failed to optimize out Math.fround calls ' + e) } + } + + var blob = new Blob([code], { type: 'text/javascript' }); + codeXHR = null; + var src = URL.createObjectURL(blob); + var script = document.createElement('script'); + script.src = URL.createObjectURL(blob); + script.onload = function() { + URL.revokeObjectURL(script.src); + }; + document.body.appendChild(script); + }; + codeXHR.send(null); +} \ No newline at end of file diff --git a/VLibrasWeb/vlibras-player.js b/VLibrasWeb/vlibras-player.js index a3b674a..7f50c75 100644 --- a/VLibrasWeb/vlibras-player.js +++ b/VLibrasWeb/vlibras-player.js @@ -2,16 +2,20 @@ function VLibrasPlayer() { this.loaded = false; this.glosa = undefined; - this.canvas = document.querySelector('#vlibras-canvas'); + this.canvas = undefined; this.initialized = false; } + var noop = function () {}; + VLibrasPlayer.prototype.translate = function (text) { var self = this; text = encodeURI(text); + (self.onTranslateStart || noop)(); getGlosa('http://150.165.204.30/glosa?texto=' + text, function (status, response) { + (self.onTranslateEnd || noop)(); self.glosa = response || decodeURI(text).toUpperCase(); self.play(); }); @@ -32,11 +36,24 @@ }; VLibrasPlayer.prototype.addProgressListener = function (callback) { - this.onprogress = callback; + this.onProgress = callback; + }; + + VLibrasPlayer.prototype.addLoadListener = function (callback) { + this.onLoad = callback; + }; + + VLibrasPlayer.prototype.addTranslateStartListener = function (callback) { + this.onTranslateStart = callback; + }; + + VLibrasPlayer.prototype.addTranslateEndListener = function (callback) { + this.onTranslateEnd = callback; }; VLibrasPlayer.prototype.load = function () { this.loaded = true; + this.onLoad(); this.play(); }; @@ -49,8 +66,6 @@ }; VLibrasPlayer.prototype.initialize = function (path, canvas, callback) { - var noop = function () {}; - if (this.initialized) { (callback || noop)(); return; @@ -73,8 +88,7 @@ }; window.updateProgress = function (progress) { - var noop = function () {}; - (this.VLibrasPlayer.onprogress || noop)(progress); + (this.VLibrasPlayer.onProgress || noop)(progress); }; window.VLibrasPlayer = new VLibrasPlayer(); diff --git a/VLibrasWeb/vlibras-web.css b/VLibrasWeb/vlibras-web.css index dd9f8ec..c54ee51 100644 --- a/VLibrasWeb/vlibras-web.css +++ b/VLibrasWeb/vlibras-web.css @@ -3,7 +3,7 @@ right: 0; top: 50%; margin-top: -225px; - z-index: 9999; + z-index: 1000; display: none; } @@ -190,10 +190,6 @@ content: "x"; } -.vw-controls .vw-window { - height: 28px; -} - .vw-window .vw-maximize, .vw-window.active .vw-minimize { display: block; } @@ -202,6 +198,28 @@ display: none; } -.wc-text:hover, .wc-text.active { +.vw-text:hover, .vw-text.active { background-color: rgba(255, 102, 0, 0.5); +} + +.vw-loading { + position: absolute; + top: 50%; + left: 50%; + margin-left: -50px; + margin-top: -25px; + width: 100px; + height: 50px; + z-index: 1001; + display: none; + text-align: center; +} + +.vw-loading img { + width: 50px; + height: 50px; +} + +.vw-loading.active { + display: block; } \ No newline at end of file diff --git a/VLibrasWeb/vlibras-web.js b/VLibrasWeb/vlibras-web.js index c23653d..33cff6e 100644 --- a/VLibrasWeb/vlibras-web.js +++ b/VLibrasWeb/vlibras-web.js @@ -31,6 +31,7 @@ var vwControls = vwPlayer.querySelector('.vw-controls'); var vwCanvas = vwPlayer.querySelector('.vw-canvas'); var vwSubtitle = vwPlayer.querySelector('.vw-subtitle'); + var vwLoading = vwPlayer.querySelector('.vw-loading'); var vwProgress = vwControls.querySelector('.vw-progress'); var vwSpeed = vwControls.querySelector('.vw-speed'); @@ -39,13 +40,25 @@ VLibrasPlayer.addProgressListener(function (progress) { if (progress >= 1) { - document.querySelector('.wc-text.active').classList.remove('active'); + document.querySelector('.vw-text.active').classList.remove('active'); progress = 0; } vwProgress.style.width = (progress * 100) + '%'; }); + VLibrasPlayer.addTranslateStartListener(function () { + vwLoading.classList.add('active'); + }); + + VLibrasPlayer.addLoadListener(function () { + vwLoading.classList.remove('active'); + }); + + VLibrasPlayer.addTranslateEndListener(function () { + vwLoading.classList.remove('active'); + }); + vwPlay.addEventListener('click', function (e) { e.preventDefault(); @@ -85,7 +98,7 @@ if (vw.contains(node)) return; var span = document.createElement('span'); - span.classList.add('wc-text'); + span.classList.add('vw-text'); var parent = node.parentNode; parent.insertBefore(span, node); @@ -96,7 +109,7 @@ e.preventDefault(); window.VLibrasPlayer.translate(this.textContent); - var actives = document.querySelector('.wc-text.active'); + var actives = document.querySelector('.vw-text.active'); if (actives) { actives.classList.remove('active'); } diff --git a/index.html b/index.html index 021f898..b312fc8 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,9 @@