Commit b9d6e296 authored by Wesnydy Ribeiro's avatar Wesnydy Ribeiro
Browse files

vlibras web project

Pipeline #8 failed with stages
in 6 seconds
"presets": [
root = true
# Unix-style newlines with a newline ending every file
end_of_line = lf
insert_final_newline = true
[{*.js, *.html, *.json}]
indent_style = space
indent_size = 2
module.exports = {
env: {
browser: true,
es6: true,
extends: [
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
rules: {
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
This version of the GNU Lesser General Public License incorporates
the terms and conditions of version 3 of the GNU General Public
License, supplemented by the additional permissions listed below.
0. Additional Definitions.
As used herein, "this License" refers to version 3 of the GNU Lesser
General Public License, and the "GNU GPL" refers to version 3 of the GNU
General Public License.
"The Library" refers to a covered work governed by this License,
other than an Application or a Combined Work as defined below.
An "Application" is any work that makes use of an interface provided
by the Library, but which is not otherwise based on the Library.
Defining a subclass of a class defined by the Library is deemed a mode
of using an interface provided by the Library.
A "Combined Work" is a work produced by combining or linking an
Application with the Library. The particular version of the Library
with which the Combined Work was made is also called the "Linked
The "Minimal Corresponding Source" for a Combined Work means the
Corresponding Source for the Combined Work, excluding any source code
for portions of the Combined Work that, considered in isolation, are
based on the Application, and not on the Linked Version.
The "Corresponding Application Code" for a Combined Work means the
object code and/or source code for the Application, including any data
and utility programs needed for reproducing the Combined Work from the
Application, but excluding the System Libraries of the Combined Work.
1. Exception to Section 3 of the GNU GPL.
You may convey a covered work under sections 3 and 4 of this License
without being bound by section 3 of the GNU GPL.
2. Conveying Modified Versions.
If you modify a copy of the Library, and, in your modifications, a
facility refers to a function or data to be supplied by an Application
that uses the facility (other than as an argument passed when the
facility is invoked), then you may convey a copy of the modified
a) under this License, provided that you make a good faith effort to
ensure that, in the event an Application does not supply the
function or data, the facility still operates, and performs
whatever part of its purpose remains meaningful, or
b) under the GNU GPL, with none of the additional permissions of
this License applicable to that copy.
3. Object Code Incorporating Material from Library Header Files.
The object code form of an Application may incorporate material from
a header file that is part of the Library. You may convey such object
code under terms of your choice, provided that, if the incorporated
material is not limited to numerical parameters, data structure
layouts and accessors, or small macros, inline functions and templates
(ten or fewer lines in length), you do both of the following:
a) Give prominent notice with each copy of the object code that the
Library is used in it and that the Library and its use are
covered by this License.
b) Accompany the object code with a copy of the GNU GPL and this license
4. Combined Works.
You may convey a Combined Work under terms of your choice that,
taken together, effectively do not restrict modification of the
portions of the Library contained in the Combined Work and reverse
engineering for debugging such modifications, if you also do each of
the following:
a) Give prominent notice with each copy of the Combined Work that
the Library is used in it and that the Library and its use are
covered by this License.
b) Accompany the Combined Work with a copy of the GNU GPL and this license
c) For a Combined Work that displays copyright notices during
execution, include the copyright notice for the Library among
these notices, as well as a reference directing the user to the
copies of the GNU GPL and this license document.
d) Do one of the following:
0) Convey the Minimal Corresponding Source under the terms of this
License, and the Corresponding Application Code in a form
suitable for, and under terms that permit, the user to
recombine or relink the Application with a modified version of
the Linked Version to produce a modified Combined Work, in the
manner specified by section 6 of the GNU GPL for conveying
Corresponding Source.
1) Use a suitable shared library mechanism for linking with the
Library. A suitable mechanism is one that (a) uses at run time
a copy of the Library already present on the user's computer
system, and (b) will operate properly with a modified version
of the Library that is interface-compatible with the Linked
e) Provide Installation Information, but only if you would otherwise
be required to provide such information under section 6 of the
GNU GPL, and only to the extent that such information is
necessary to install and execute a modified version of the
Combined Work produced by recombining or relinking the
Application with a modified version of the Linked Version. (If
you use option 4d0, the Installation Information must accompany
the Minimal Corresponding Source and Corresponding Application
Code. If you use option 4d1, you must provide the Installation
Information in the manner specified by section 6 of the GNU GPL
for conveying Corresponding Source.)
5. Combined Libraries.
You may place library facilities that are a work based on the
Library side by side in a single library together with other library
facilities that are not Applications and are not covered by this
License, and convey such a combined library under terms of your
choice, if you do both of the following:
a) Accompany the combined library with a copy of the same work based
on the Library, uncombined with any other library facilities,
conveyed under the terms of this License.
b) Give prominent notice with the combined library that part of it
is a work based on the Library, and explaining where to find the
accompanying uncombined form of the same work.
6. Revised Versions of the GNU Lesser General Public License.
The Free Software Foundation may publish revised and/or new versions
of the GNU Lesser General Public License from time to time. Such new
versions will be similar in spirit to the present version, but may
differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the
Library as you received it specifies that a certain numbered version
of the GNU Lesser General Public License "or any later version"
applies to it, you have the option of following the terms and
conditions either of that published version or of any later version
published by the Free Software Foundation. If the Library as you
received it does not specify a version number of the GNU Lesser
General Public License, you may choose any version of the GNU Lesser
General Public License ever published by the Free Software Foundation.
If the Library as you received it specifies that a proxy can decide
whether future versions of the GNU Lesser General Public License shall
apply, that proxy's public statement of acceptance of any version is
permanent authorization for you to choose that version for the
<div align="center">
<a href="">
# VLibras Web (Plugins and Widget)
VLibras Web Plugins and Widget are extensions for web browsers and HTML pages.
## Table of Contents
- [Getting Started](#getting-started)
- [System Requirements](#system-requirements)
- [Prerequisites](#prerequisites)
- [Installing](#installing)
- [Compilation](#building)
- [Building the Widget](#building-the-widget)
- [Building the Plugins](#building-the-plugins)
- [Installation](#installation)
- [Installing the Widget](#installing-the-widget)
- [Installing the Plugins](#installing-the-plugins)
- [Contributors](#contributors)
- [License](#license)
## Getting Started
These instructions will get you a copy of the project compiled and running on your local machine for development and testing purposes.
### System Requirements
* OS: Ubuntu 18.04.2 LTS (Bionic Beaver) or Later
### Prerequisites
Before starting the build of the tools, you need to install some prerequisites:
curl -sL | sudo -E bash -
sudo apt install -y nodejs
[VLibras Player WebJS](
VLibras Player WebJS is required at project installation, you just need to clone it in the same path as the root of this project.
### Installing
After installing all the prerequisites, install the project by running the command:
cd vlibras-web-browsers/
npm install
## Building
When the installation is complete, you can now build the Plugins and Widget.
### Building the Widget
npm run gulp build:widget
The compiled file can be found in the `widget/app/` folder. Go to the [Widget installation section](#installing-the-widget) for installation instructions.
### Building the Plugins
To build the plugin you have two different options of building, according to the target browser you wish to build to:
- Firefox/Chrome - the compiled files can be found in the `webextensions` folder.
npm run gulp build:webextensions
- Safari - the compiled files can be found in the `safari.safariextension` folder.
npm run gulp build:safari
> Note: You can also generate all the builds to all targets at once by running the command: `npm run gulp build`
## Installation
### Installing the Widget
The Widget can be installed on your website by inserting a few snippets of code before closing the `<body>` tag of a HTML page:
<body> <!-- Begin of the page body -->
... <!-- Content of the page -->
<div vw class="enabled">
<div vw-access-button class="active"></div>
<div vw-plugin-wrapper>
<div class="vw-plugin-top-wrapper"></div>
<script src="<your-directory-path>/app/vlibras-plugin.js"></script>
new window.VLibras.Widget('<your-directory-path>/app');
</body> <!-- End of the page body -->
> Note: The app folder can be copied to any directory, remember to enter the correct path for it.
#### Adding Customization and Opacity
If you want to place a customization in the Widget, you must enter as a parameter a valid URL for Icaro and Hozana to be personalized:
new window.VLibras.Widget('<your-directory-path>/app', '');
If you want to change the background opacity of the Widget, you can set the values (0, 0.25, 0.50, 0.75, 1) as a parameter. This opaque parameter indicates a number between 0 (fully transparent) and 1 (fully opaque).
new window.VLibras.Widget('<your-directory-path>/app', '', '0.75');
You can also change opacity in the Widget menu.
### Installing the Plugins
VLibras already has official versions of the plugins in the Chrome, Firefox and Safari extensions store.
To use the version of the plugins built in your machine, see the extensions installation instructions
on your browser's official page.
## Contributors
* Mateus Pires - <>
* Suanny Fabyne - <>
* Thiago Filipe - <>
## License
This project is licensed under the LGPLv3 License - see the [LICENSE](LICENSE) file for details.
const gulp = require('gulp');
const nodemon = require('gulp-nodemon');
const webpack = require('webpack-stream');
const mergeStream = require('merge-stream');
const webpackConfig = require('./webpack.config.js');
const options = {
dest: {
webextensions: 'webextensions/app/player',
safari: 'safari.safariextension/app/player',
widget: 'widget/app',
function build(target, {
player = 'node_modules/vlibras/src/target/**/*',
script = 'plugin/index.js',
template = 'plugin/index.html',
} = {}) {
const destPath = options.dest[target];
const webpackCfg = target === 'widget' ? webpackConfig.widgetWebpackConfig : webpackConfig.pluginWebpackConfig;
const playerSrc = gulp.src(player).pipe(gulp.dest(`${destPath}/target`));
const scriptSrc = gulp.src(script).pipe(webpack(webpackCfg))
const templateSrc = gulp.src(template).pipe(gulp.dest(destPath));
const assetsPluginSrc = gulp.src('assets/*', { cwd: 'plugin', base: 'plugin' })
const assetsTargetSrc = gulp.src('assets/*', { cwd: target, base: target })
return mergeStream(
gulp.task('build:webextensions', () => build('webextensions'));
gulp.task('build:widget', () => build('widget', {
script: 'widget/src/index.js',
template: 'widget/src/index.html',
gulp.task('build:safari', () => build('safari'));
gulp.task('build', gulp.series('build:webextensions', 'build:safari', 'build:widget'));
gulp.task('run:widget', (done) => nodemon({
script: 'widget/server.js',
ext: 'html js scss css',
watch: ['plugin', 'widget/src', 'widget/assets'],
tasks: ['build:widget'],
This diff is collapsed.
"name": "vlibras-plugin",
"version": "3.0.1",
"scripts": {
"test": "gulp run:widget",
"test-prod": "MODE='production' gulp run:widget",
"build": "MODE='production' gulp build",
"build-debug": "MODE='development' gulp build",
"gulp": "gulp"
"dependencies": {
"babel-loader": "^8.0.6",
"bootstrap-select": "^1.13.8",
"gulp-install": "^0.6.0",
"inherits": "^2.0.3",
"merge-stream": "^2.0.0",
"nouislider": "^8.3.0",
"select2": "^4.0.6-rc.1",
"superagent": "^4.1.0",
"url-join": "^4.0.0",
"vlibras": "file:../vlibras-player-webjs"
"devDependencies": {
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/node": "^7.6.3",
"@babel/preset-env": "^7.6.3",
"@babel/register": "^7.6.2",
"compression-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"css-url-loader": "^2.0.2",
"es6-promise": "^3.1.2",
"eslint": "^6.5.1",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-plugin-import": "^2.18.2",
"gulp": "^4.0.2",
"gulp-exec": "^2.1.3",
"gulp-nodemon": "^2.4.2",
"node-sass": "^4.12.0",
"raw-loader": "^3.1.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"terser-webpack-plugin": "^2.1.3",
"webpack-stream": "^5.2.1"
var VLibras = require('vlibras');
var Settings = require('components/Settings');
var SettingsBtn = require('components/SettingsBtn');
var InfoScreen = require('components/InfoScreen');
var Dictionary = require('components/Dictionary');
var Controls = require('components/Controls');
var MessageBox = require('components/MessageBox');
var Box = require('components/Box');
var SettingsCloseBtn = require('components/SettingsCloseBtn');
var CloseScreen = require('components/CloseScreen');
var RateButton = require('components/RateButton');
var RateBox = require('components/RateBox');
var SuggestionButton = require('components/SuggestionButton');
var SuggestionScreen = require('components/SuggestionScreen');
var ChangeAvatar = require('components/ChangeAvatar');
var url = require('url-join');
function Plugin(options) {
this.player = new VLibras.Player({
onLoad: options.playWellcome && (() => this.player.playWellcome()),
targetPath: options.rootPath ? url(options.rootPath,'/target') : 'target',
personalization: options.personalization,
opacity: options.opacity,
wrapper: options.wrapper
this.opacity = options.opacity;
this.wrapper = options.wrapper;
if(this.opacity==0.0 || this.opacity==0.25 || this.opacity==0.5 || this.opacity==0.75 || this.opacity==1.0){
this.opacity = parseFloat(this.opacity);
} else {
this.opacity = 0.0;
} else {
this.opacity = 0.0;
this.rootPath = options.rootPath;
this.personalization = options.personalization;
this.element = document.querySelector('[vp]');
this.dictionary = new Dictionary(this.player);
this.controls = new Controls(this.player, this.dictionary);
this.Box = new Box(); = new InfoScreen(this.Box);
this.settings = new Settings(this.player,, this.Box, this.dictionary, options, this.opacity);
this.settingBtnClose = new SettingsCloseBtn();
this.closeScreen = new CloseScreen(this.dictionary,, this.settings, this.settingBtnClose);
this.settingsBtn = new SettingsBtn(this.player, this.settings,this.settingBtnClose ,options);
this.messageBox = new MessageBox();
this.suggestionScreen = new SuggestionScreen();
this.suggestionButton = new SuggestionButton(this.suggestionScreen);
this.rateBox = new RateBox(this.suggestionButton, this.messageBox);
this.rateButton = new RateButton(this.rateBox);
this.ChangeAvatar = new ChangeAvatar(this.player);
this.loadingRef = null;
this.player.on('load', () => {
if (this.personalization == undefined) {
} else {
if (this.wrapper) = `rgba(235,235,235, ${1 - this.opacity})`;
this.settingBtnClose.load(this.element.querySelector('[vp-box]').querySelector('[settings-btn-close]'), this.closeScreen);
this.dictionary.load(this.element.querySelector('[vp-dictionary]'), this.closeScreen);