Added translate function to lyrics

Settings.ts

@@ -8,6 +8,8 @@ export interface SettingsValues {
     theme: 'dark'|'light';
     fontSize: 'eight-pt'|'ten-pt'|'twelve-pt'|'fourteen-pt'|'sixteen-pt';
     refreshInterval: number;
+    translateLyrics: boolean;
+    translateLang: string;
     closeToTray: boolean;
 }
 
@@ -18,6 +20,8 @@ export const defaultSettings: SettingsValues = {
     theme: 'light',
     fontSize: 'twelve-pt',
     refreshInterval: 5000,
+    translateLyrics: false,
+    translateLang: 'en-US'
     closeToTray: false
 };
 

render/SongRender.ts

@@ -1,5 +1,6 @@
 import Component from 'vue-class-component';
 import {Searcher} from "./Searcher";
+import {Translaters} from "./Translaters";
 import {template} from './template';
 import {SpotifyService} from './SpotifyService';
 
@@ -23,21 +24,25 @@ export class SongRender {
     protected lastSongSync;
     protected service:SpotifyService;
     protected song;
+    protected translatedSong;
     protected shell;
     protected searcher: Searcher;
+    protected translaters: Translaters;
     protected showError;
     protected timer = null;
     protected settings;
 
     data() {
         return {
             song: null,
-            lastSongSync: {},
+            translatedSong: {},
+            lastSongSync: {}
         }
     }
 
     beforeCompile() {
         this.searcher = new Searcher();
+        this.translaters = new Translaters();
     }
 
 
@@ -68,6 +73,7 @@ export class SongRender {
             } else {
                 console.log('is not last song searching by title and artist');
                 song.lyric = 'Loading Lyrics...';
+                this.translatedSong = {};
                 this.displaySong(song);
                 this.saveLastSong(song);
                 this.searcher.search(song.title, song.artist, (err, result) => {
@@ -147,6 +153,40 @@ export class SongRender {
         this.shell.openExternal(url);
     }
 
+    translateLyrics() {
+        console.log("Language: " + this.settings.translateLang);
+        this.translatedSong = {
+            lyrics: 'Searching translated lyrics...',
+            sourceName: '',
+            sourceUrl: ''
+        };
+
+        this['$nextTick'](() => {
+            document.getElementById("lyricBox").scrollTop = 0;
+        });
+
+        this.translaters.translate(this.song.title, this.song.artist, (err, result) => {
+            if(!err) {
+                try{
+                    result.translated.forEach((translated) => {
+                        if(translated.lang == this.settings.translateLang){
+                            console.log("Founded translated lyrics");
+                            this.translatedSong = translated;
+                            this.translatedSong.sourceName = result.sourceName;
+                            this.translatedSong.sourceUrl = result.sourceUrl;
+                        }
+                    });
+                } catch(e) {
+                    this.translatedSong = {
+                        lyrics: 'Translated lyrics not founded.',
+                        sourceName: '',
+                        sourceUrl: ''
+                    };
+                }
+            }
+        });
+    }
+
     resizeOnLyricsHide() {
         if (!this.settings.hideLyrics) {
             return;

render/Translaters.ts

@@ -0,0 +1,61 @@
+import {TranslatersLyrics} from './plugins/TranslatersLyrics';
+import {TranslateVagalume} from "./plugins/TranslateVagalume";
+
+import {NormalizeTitles} from "./NormalizeTitles";
+const request = require('request').defaults({timeout: 5000});
+
+const async = require('async');
+const plugins = [TranslateVagalume];
+
+interface Result {
+    sourceName: string;
+    sourceUrl: string;
+    translated: [{
+        lang: string,
+        lyrics: string
+    }];
+}
+
+export class Translaters {
+
+    protected plugins:TranslatersLyrics[];
+    protected normalizer : NormalizeTitles;
+
+    constructor() {
+        this.normalizer = new NormalizeTitles();
+        this.loadPlugins();
+    }
+
+    loadPlugins() {
+        this.plugins = plugins.map(Plugin => new Plugin(request));
+    }
+
+    translate(title:string, artist:string, cb : (error : any, result : Result) => void){
+        const from:Result = {sourceName: '', sourceUrl: '', translated: null};
+        const normalizedTitle = this.normalizer.normalize(title);
+
+        const tasks = this.plugins.map((plugin : TranslatersLyrics) => {
+            return (callback) => {
+                console.log('Translating with', plugin, 'normalizedTitle', normalizedTitle, 'artist', artist);
+                plugin.search(normalizedTitle, artist, (err, result) => {
+                    console.warn('Result with', plugin, 'normalizedTitle', normalizedTitle, 'artist', artist, 'err', err, 'result', result);
+                    if (err) {
+                        return callback(err);
+                    }
+                    from.translated = result.translated;
+                    from.sourceName = plugin.name;
+                    from.sourceUrl = result.url;
+                    callback(null, from);
+                })
+            }
+        });
+        async.parallel(async.reflectAll(tasks), (err, results) => {
+            const result = results.find(x => !x.error);
+            if (result) {
+                cb(null, result.value);
+            } else {
+                cb(err, null);
+            }
+        });
+    }
+}

render/less/views/lyric.less

@@ -1,3 +1,7 @@
+body {
+    overflow: hidden;
+}
+
 .eight-pt {
     font-size: 8pt;
 }
@@ -72,7 +76,7 @@
 .header {
     position: relative;
     overflow: hidden;
-    min-height: 8rem;
+    min-height: 10rem;
     box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
 
     &::before {
@@ -126,14 +130,36 @@
     }
 }
 
-.lyrics {
+.lyrics-left {
+    white-space: pre-wrap;
+    flex: 1;
+    overflow: auto;
+    padding: 1rem;
+    line-height: 1.75;
+    position: relative;
+    user-select: all;
+    float: left;
+    width: 90%;
+
+    &:first-letter {
+        text-transform: capitalize;
+    }
+}
+
+.resized40{
+    width: 40%;
+}
+
+.lyrics-right {
     white-space: pre-wrap;
     flex: 1;
     overflow: auto;
     padding: 1rem;
     line-height: 1.75;
     position: relative;
     user-select: all;
+    float: right;
+    width: 40%;
 
     &:first-letter {
         text-transform: capitalize;

render/plugins/TranslateVagalume.ts

@@ -0,0 +1,62 @@
+import {TranslatersLyrics} from './TranslatersLyrics';
+
+const API_KEY = "";
+const lang = {
+    1: "pt-BR",
+    2: "en-US",
+    3: "es-ES",
+    4: "fr-FR",
+    5: "de-DE",
+    6: "it-ELE",
+    7: "nl-NL",
+    8: "ja-JA",
+    9: "pt-PT",
+    999999: "other"
+}
+
+export class TranslateVagalume extends TranslatersLyrics {
+
+    public name  = 'Vagalume';
+
+    public search(title: string, artist: string, cb: (error?: any, lyrics?) => void) {
+        let url = `https://api.vagalume.com.br/search.php?art=${encodeURIComponent(artist)}&mus=${encodeURIComponent(title)}&apikey=`;
+
+        this.doReq(url, (err, res, body) => {
+            if(!err){
+                let json = JSON.parse(body);
+
+                return this.parseResult(json, cb);
+            } else return cb('Vagalume fail');
+        });
+    }
+
+    protected parseResult(json, cb) {
+        if(json.mus && json.mus.length > 0){
+            let mus = json.mus[0];
+
+            if(mus.translate && mus.translate.length > 0){
+                let translate = mus.translate;
+                let translated = [];
+
+                for(let i = 0; i < translate.length; i++){
+                    translated.push({
+                        lang: this.checkLang(translate[i].lang),
+                        lyrics: translate[i].text
+                    });
+                }
+
+                return cb(null, {
+                    url: mus.url,
+                    translated: translated
+                });
+            }
+        }
+        return cb('Lyrics not found');
+    }
+
+    protected checkLang(langId: number){
+        if(lang[langId]) return lang[langId];
+
+        return "other";
+    }
+}

render/plugins/TranslatersLyrics.ts

@@ -0,0 +1,40 @@
+
+interface TranslateResult {
+    url: string;
+    translated: [{
+        lang: string,
+        lyrics: string
+    }];
+}
+
+export class TranslatersLyrics {
+    protected req;
+    public name  = 'Generic';
+
+    public constructor(req = null) {
+        this.req = req;
+    }
+
+    protected doReq(url, cb) {
+        let opt = {
+            jar: true,
+            method: 'GET',
+            uri: url,
+            gzip: true,
+            followRedirect: true,
+            maxRedirects: 10,
+            resolveWithFullResponse: true,
+            headers: {
+                'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36',
+                'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
+                'Accept-Encoding': 'gzip, deflate, sdch',
+                'Accept-Language': 'es,en-US;q=0.8,en;q=0.6,pt;q=0.4',
+            }
+        };
+        return this.req(opt, cb);
+    }
+
+    public search(title: string, artist: string, cb: (error?: any, result?: TranslateResult) => void) {
+
+    }
+}

render/views/Settings.html

@@ -65,6 +65,28 @@ <h1>
                     </li>
                 </ol>
             </fieldset>
+            <fieldset>
+                <legend>Translate</legend>
+                <ol>
+                    <li>
+                        <label>
+                            <input type="checkbox" v-model="settings.translateLyrics" @change="onChangeSettings()"> Enable translate to lyrics
+                        </label>
+                    </li>
+                    <li>
+                        <label>
+                            <span>Language</span>
+                            <select v-model="settings.translateLang" @change="onChangeSettings()">
+                                <option value="en-US">English (en-US)</option>
+                                <option value="pt-BR">Portuguese (pt-BR)</option>
+                                <option value="pt-PT">Portuguese (pt-PT)</option>
+                                <option value="es-ES">Spanish (es-ES)</option>
+                                <option value="fr-FR">French (fr-FR)</option>
+                            </select>
+                        </label>
+                    </li>
+                </ol>
+            </fieldset>
         </form>
     </div>
 </div>

render/views/Song.html

@@ -20,9 +20,17 @@ <h1>lyricfier</h1>
             <h3>{{ song.title }}</h3>
             <h4>{{ song.artist }}</h4>
         </header>
-        <div v-if="!settings.hideLyrics" id="lyricBox" class="lyrics" :class="settings.fontSize">{{ song.lyric }}</div>
 
-        <div v-if="!settings.hideLyrics && song.sourceName" class="credits-source">Source:  <a href="#" @click.prevent="openExternal(song.sourceUrl)">{{song.sourceName}}</a></div>
+        <div id="lyricBox" style="overflow: auto;">
+            <div v-if="!settings.hideLyrics" class="lyrics-left" :class="settings.fontSize" v-bind:class="{'resized40': translatedSong.lyrics}">{{ song.lyric }}</div>
+            <div v-if="!settings.hideLyrics && translatedSong.lyrics" class="lyrics-right" :class="settings.fontSize">{{ translatedSong.lyrics }}</div>
+        </div>
+
+        <div v-if="!settings.hideLyrics" class="credits-source" >
+            <span v-if="song.sourceName">Source:  <a href="#" @click.prevent="openExternal(song.sourceUrl)">{{song.sourceName}}</a></span>
+            <span v-if="song.sourceName && settings.translateLyrics" style="cursor: pointer;" @click.prevent="translateLyrics()"> | Translate lyrics</span>
+            <a href="#" v-if="settings.translateLyrics" @click.prevent="openExternal(translatedSong.sourceUrl)">{{translatedSong.sourceName}}</a>
+        </div>
 
     </div>
     <div v-else class="full-vertical-flex">