Converted ES6 Script

player/custom.js

@@ -1,156 +1,180 @@
-document.ready = function (callback) {
+document.ready = (callback) =>{
     if (typeof callback === 'function') {
-        var onceCalled = false;
+        var onceCalled = false
         document.addEventListener("DOMContentLoaded", function (event) {
             if (!onceCalled) {
-                onceCalled = true;
-                callback(event);
+                onceCalled = true
+                callback(event)
             }
-        });
+        })
         document.onreadystatechange = function (event) {
             if (document.readyState == "interactive") {
                 if (!onceCalled) {
-                    onceCalled = true;
-                    callback(event);
+                    onceCalled = true
+                    callback(event)
                 }
             }
         }
     }
-};
-
-var Player = function () {
-    var _play = (index, auto_play = true) => {
-        var base_dir = TutorialList.get_dir();
-        video_player.preload = true
-        video_player.src = base_dir + '/' + mp4_files[index]
-        playerCaption.src = base_dir + '/' + vtt_files[index]
-        video_player.textTracks[0].mode = 'showing'
-        video_player.ontimeupdate = () => {
-            if (video_player.currentTime > 0) {
-                localStorage.setItem('currentTime', video_player.currentTime)
+}
+
+class Player {
+    constructor(){
+        this.playerUI = document.getElementById('video_player')
+        this.captionUI = document.getElementById('playerCaption')
+    }
+    play = (index, auto_play = true) => {
+        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.playerUI.ontimeupdate = () => {
+            if (this.playerUI.currentTime > 0) {
+                localStorage.setItem('currentTime', this.playerUI.currentTime)
             }
-        };
-        video_player.focus()
+        }
+
+        this.playerUI.onended = () => {
+            localStorage.setItem('currentTime', 0)
+        }
+
+        this.playerUI.focus()
 
         setTimeout(() => {
-            var currentTime;
+            var currentTime
             if (currentTime = localStorage.getItem('currentTime')) {
-                video_player.currentTime = parseFloat(currentTime)
+                this.playerUI.currentTime = parseFloat(currentTime)
             }
         }, 1000)
 
         if (auto_play) {
-            video_player.play()
+            this.playerUI.play()
         }
     }
-    return {
-        play: _play
+}
+
+class Helper {
+    static validateTitle = (title) => {
+        var ret = title
+        ret = ret.replace(/\.vtt/gi, '')
+        return ret.replace(/\-/gi, ' ')
     }
-}();
 
-var TutorialList = function () {
-    var _validateTitle = function (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()
+        })
+    }
 
-    var _load = function () {
-        tutorialList.addEventListener('change', function (e) {
-            Player.play(e.target.value)
-            localStorage.setItem('playedIndex', tutorialList.selectedIndex)
-        });
-
-        var cached_data_dir = _get_dir();
-        if (cached_data_dir) {
-            _load_script(cached_data_dir + '/list_mp4.js');
-            _load_script(cached_data_dir + '/list_vtt.js');
-            setTimeout(() => {
-                _load_html();
-                var playedIndex;
-                if (playedIndex = localStorage.getItem('playedIndex')) {
-                    tutorialList.selectedIndex = playedIndex;
-                    Player.play(tutorialList.options[playedIndex].value, false);
-                }
-            }, 500)
+    static getListDir = function () {
+        const cached_list_dir = localStorage.getItem('list_dir')
+        return cached_list_dir
+    }
+
+}
+
+
+class TutorialList {
+
+    constructor() {
+        this.UI = document.getElementById('tutorialList')
+    }
+
+    load = async () => {
+
+        this.bindEvents()
+
+        var cached_list_dir = Helper.getListDir()
+        if (cached_list_dir) {
+            await Helper.loadScript(cached_list_dir + '/list_mp4.js')
+            await Helper.loadScript(cached_list_dir + '/list_vtt.js')
+
+            await this.loadOptionTags()
         }
-    };
+        return new Promise((resolve, eject)=>{resolve()})
+    }
 
-    var _load_script = async function (path) {
-        var script = document.createElement('script')
-        script.src = path
-        document.getElementsByTagName('head')[0].appendChild(script);
-    };
+    bindEvents = () => {
+        this.UI.addEventListener('change', function (e) {
+            Player.play(e.target.value)
+            localStorage.setItem('playedIndex', this.UI.selectedIndex)
+        })
+    }
 
-    var _set_dir = function () {
+    setIndex = (index) => {
+        this.UI.selectedIndex = index
+    }
+
+    selectedValue = () => this.UI.options[this.UI.selectedIndex].value
+
+    setDir = function () {
         const app = require('electron').remote.app
-        var basepath = _get_dir() || app.getAppPath();
+        var basepath = Helper.getListDir() || app.getAppPath()
         const dialog = require('electron').remote.dialog
-        const data_dir = dialog.showOpenDialog(null, {
+        const list_dir = dialog.showOpenDialog(null, {
             properties: ['openDirectory'],
             defaultPath: basepath
         })
-        if (data_dir) {
-            localStorage.setItem('data_dir', data_dir)
+        if (list_dir) {
+            localStorage.setItem('list_dir', list_dir)
         }
-        _load();
-    };
-
-    var _get_dir = function () {
-        const cached_data_dir = localStorage.getItem('data_dir')
-        return cached_data_dir;
-    };
+        load()
+    }
 
-    var _clear_html = function () {
-        tutorialList.innerHTML = ''
-    };
+    clearHtml = function () {
+        this.UI.innerHTML = ''
+    }
 
-    var _load_html = function () {
+    loadOptionTags = () => {
 
-        _clear_html();
+        this.clearHtml()
 
-        var temp_vtt_file_dir = '';
-        var optionNode;
+        let temp_vtt_file_dir = ''
+        let optionNode
 
         optionNode = document.createElement('option')
         optionNode.value = ''
         optionNode.innerHTML = "Select a video to play"
-        tutorialList.appendChild(optionNode)
+        this.UI.appendChild(optionNode)
 
         for (var k in vtt_files) {
             var vtt_file = vtt_files[k]
             var vtt_file_dir = vtt_file.split(/\//gi)[0]
 
             if (vtt_file_dir != temp_vtt_file_dir) {
                 optionNode = document.createElement('optgroup')
-                optionNode.label = _validateTitle(vtt_file_dir)
-                tutorialList.appendChild(optionNode)
+                optionNode.label = Helper.validateTitle(vtt_file_dir)
+                this.UI.appendChild(optionNode)
             }
 
             optionNode = document.createElement('option')
             optionNode.value = k
-            optionNode.innerHTML = _validateTitle(vtt_file.replace(vtt_file_dir + "/", '   '))
-            tutorialList.appendChild(optionNode)
+            optionNode.innerHTML = Helper.validateTitle(vtt_file.replace(vtt_file_dir + "/", '   '))
+            this.UI.appendChild(optionNode)
             temp_vtt_file_dir = vtt_file_dir
         }
 
-        tutorialList.appendChild(optionNode)
+        this.UI.appendChild(optionNode)
     }
-    return {
-        load: _load,
-        set_dir: _set_dir,
-        get_dir: _get_dir
-    }
-}();
-
+}
 
 
-document.ready(function (event) {
 
-    TutorialList.load();
+document.ready(async (event) => {
 
+    const tutorialList = new TutorialList()
+    const player = new Player()
+    await tutorialList.load()
 
-});
-
+    if (playedIndex = localStorage.getItem('playedIndex')) {
+        tutorialList.setIndex(parseInt(playedIndex))
+        player.play(tutorialList.selectedValue(), false)
+    }
 
+})