From 4305392af5d9cfa4ac34b66e400b9e182b367d91 Mon Sep 17 00:00:00 2001
From: railsjack <wipying@gmail.com>
Date: Fri, 9 Aug 2019 23:38:31 -0300
Subject: [PATCH] Converted ES6 Script

---
 index.html        |   3 +-
 main.js           |   3 +-
 player/custom.css |   8 +++
 player/custom.js  | 139 +++++++++++++++++++++++++++++++---------------
 4 files changed, 105 insertions(+), 48 deletions(-)

diff --git a/index.html b/index.html
index 4cb98a3..7e82e52 100644
--- a/index.html
+++ b/index.html
@@ -11,9 +11,10 @@
     <div class="tutorial-player">
         <div class="list-wrapper">
             <select id="tutorialList" class="list"></select>
-            <button class="list-load-button" onclick="TutorialList.set_dir()">...</button>
+            <button id="selectListBtn" class="list-load-button" >...</button>
         </div>
         <div class="player-wrapper">
+            <div id="video_title" class="video-title"></div>
             <video id="video_player" class="player" controls width="100%" height="100%" poster="" preload="none">
                 <source src="" type='video/mp4' />
                 <track kind="captions" id="playerCaption" src="" srclang="en" label="English">
diff --git a/main.js b/main.js
index 49b20f9..34f0895 100644
--- a/main.js
+++ b/main.js
@@ -24,7 +24,8 @@ function initialize () {
       height: 840,
       title: app.getName(),
       webPreferences: {
-        nodeIntegration: true
+        nodeIntegration: true,
+        devTools: false
       }
     }
 
diff --git a/player/custom.css b/player/custom.css
index 53debb9..effe3db 100644
--- a/player/custom.css
+++ b/player/custom.css
@@ -18,3 +18,11 @@ html, body {
             width: 25px; height: 25px; float: right;}
     .tutorial-player .player-wrapper {
         width: 100%; height: calc(100% - 33px); }
+        .tutorial-player .player-wrapper .video-title {
+            width: 80%; 
+            position: absolute; top: 30px; left: 10%; 
+            z-index: 100; padding: 5px;
+            line-height: 30px; font-size: 20pt; color: white;
+            text-align: center;
+            background: rgba(0,0,0,0.5);
+            margin: 0 auto;}
diff --git a/player/custom.js b/player/custom.js
index 90b9fb1..0082801 100644
--- a/player/custom.js
+++ b/player/custom.js
@@ -1,4 +1,4 @@
-document.ready = (callback) =>{
+document.ready = (callback) => {
     if (typeof callback === 'function') {
         var onceCalled = false
         document.addEventListener("DOMContentLoaded", function (event) {
@@ -18,32 +18,80 @@ document.ready = (callback) =>{
     }
 }
 
+class Helper {
+    static validateTitle = (title) => {
+        var ret = title
+        ret = ret.replace(/\.vtt/gi, '')
+        return ret.replace(/\-/gi, ' ')
+    }
+
+    static loadScript = async (path) => {
+        let script = document.createElement('script')
+        script.src = path
+        document.getElementsByTagName('head')[0].appendChild(script)
+        return new Promise((resolve, eject) => {
+            script.onload = () => resolve()
+            script.onerror = () => eject()
+        })
+    }
+
+    static getListDir = () => {
+        const cached_list_dir = Helper.getConf('list_dir')
+        return cached_list_dir
+    }
+
+    static getHumanTitle = (path) => {
+        let ret = path.replace(/[\\\/]/g, ' > ')
+        ret = ret.replace(/\.mp4/g, '')
+        ret = ret.replace(/\.vtt/g, '')
+        return ret.replace(/[^A-Za-z0-9\.\>]/g, ' ')
+    }
+
+    static getConf = (key) => {
+        return localStorage.getItem(key)
+    }
+
+    static setConf = (key, value) => {
+        localStorage.setItem(key, value)
+    }
+
+}
+
+
 class Player {
-    constructor(){
+
+    constructor() {
         this.playerUI = document.getElementById('video_player')
         this.captionUI = document.getElementById('playerCaption')
+        this.titleUI = document.getElementById('video_title')
     }
+
+    bindEvents = (evName, callback) => {
+        this.playerUI[evName] = callback
+    }
+
     play = (index, auto_play = true) => {
+        if (index === 0) {
+            return
+        }
         var base_dir = Helper.getListDir()
         this.playerUI.preload = true
         this.playerUI.src = base_dir + '/' + mp4_files[index]
         this.captionUI.src = base_dir + '/' + vtt_files[index]
         this.playerUI.textTracks[0].mode = 'showing'
+        this.titleUI.innerText = Helper.getHumanTitle(mp4_files[index])
+
         this.playerUI.ontimeupdate = () => {
             if (this.playerUI.currentTime > 0) {
-                localStorage.setItem('currentTime', this.playerUI.currentTime)
+                Helper.setConf('currentTime', this.playerUI.currentTime)
             }
         }
 
-        this.playerUI.onended = () => {
-            localStorage.setItem('currentTime', 0)
-        }
-
         this.playerUI.focus()
 
         setTimeout(() => {
             var currentTime
-            if (currentTime = localStorage.getItem('currentTime')) {
+            if (currentTime = Helper.getConf('currentTime')) {
                 this.playerUI.currentTime = parseFloat(currentTime)
             }
         }, 1000)
@@ -54,41 +102,23 @@ class Player {
     }
 }
 
-class Helper {
-    static validateTitle = (title) => {
-        var ret = title
-        ret = ret.replace(/\.vtt/gi, '')
-        return ret.replace(/\-/gi, ' ')
-    }
-
-    static loadScript = async (path) => {
-        let script = document.createElement('script')
-        script.src = path
-        document.getElementsByTagName('head')[0].appendChild(script)
-        return new Promise((resolve, eject) => {
-            script.onload = () => resolve()
-            script.onerror = () => eject()
-        })
-    }
-
-    static getListDir = function () {
-        const cached_list_dir = localStorage.getItem('list_dir')
-        return cached_list_dir
-    }
-
-}
-
 
 class TutorialList {
 
     constructor() {
         this.UI = document.getElementById('tutorialList')
+        this.selectorButton = document.getElementById('selectListBtn')
+        this.selectorButton.addEventListener('click', (e) => {
+            this.setDir()
+        })
+        this.bindEvents()
     }
 
-    load = async () => {
-
-        this.bindEvents()
+    bindEvents = (evName, callback) => {
+        this.UI.addEventListener(evName, callback)
+    }
 
+    load = async () => {
         var cached_list_dir = Helper.getListDir()
         if (cached_list_dir) {
             await Helper.loadScript(cached_list_dir + '/list_mp4.js')
@@ -96,21 +126,23 @@ class TutorialList {
 
             await this.loadOptionTags()
         }
-        return new Promise((resolve, eject)=>{resolve()})
-    }
-
-    bindEvents = () => {
-        this.UI.addEventListener('change', function (e) {
-            Player.play(e.target.value)
-            localStorage.setItem('playedIndex', this.UI.selectedIndex)
-        })
+        return new Promise((resolve, eject) => { resolve() })
     }
 
     setIndex = (index) => {
         this.UI.selectedIndex = index
     }
 
-    selectedValue = () => this.UI.options[this.UI.selectedIndex].value
+    getIndex = () => this.UI.selectedIndex
+    length = () => this.UI.options.length
+
+    selectedValue = () => {
+        if (this.UI.options[this.UI.selectedIndex]) {
+            return this.UI.options[this.UI.selectedIndex].value
+        } else {
+            return 0
+        }
+    }
 
     setDir = function () {
         const app = require('electron').remote.app
@@ -121,7 +153,7 @@ class TutorialList {
             defaultPath: basepath
         })
         if (list_dir) {
-            localStorage.setItem('list_dir', list_dir)
+            Helper.setConf('list_dir', list_dir)
         }
         load()
     }
@@ -171,7 +203,22 @@ document.ready(async (event) => {
     const player = new Player()
     await tutorialList.load()
 
-    if (playedIndex = localStorage.getItem('playedIndex')) {
+    tutorialList.bindEvents('change', (e) => {
+        Helper.setConf('currentTime', 0)
+        player.play(tutorialList.selectedValue())
+        Helper.setConf('playedIndex', this.UI.selectedIndex)
+    })
+
+    player.bindEvents('onended', (args) => {
+        Helper.setConf('currentTime', 0)
+        let nextIndex = tutorialList.getIndex() + 1
+        if (nextIndex < tutorialList.length()) {
+            tutorialList.setIndex(nextIndex)
+            player.play(tutorialList.selectedValue(), true)
+        }
+    })
+
+    if (playedIndex = Helper.getConf('playedIndex')) {
         tutorialList.setIndex(parseInt(playedIndex))
         player.play(tutorialList.selectedValue(), false)
     }