From 5662f1a9c3431f2b695dd5d6e052e6d8aacca0a4 Mon Sep 17 00:00:00 2001 From: railsjack Date: Fri, 9 Aug 2019 22:07:47 -0300 Subject: [PATCH] Converted ES6 Script --- player/custom.js | 210 ++++++++++++++++++++++++++--------------------- 1 file changed, 117 insertions(+), 93 deletions(-) diff --git a/player/custom.js b/player/custom.js index 6c9163a..90b9fb1 100644 --- a/player/custom.js +++ b/player/custom.js @@ -1,121 +1,146 @@ -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] @@ -123,34 +148,33 @@ var TutorialList = function () { 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) + } +})