Skip to content

Commit

Permalink
Converted ES6 Script
Browse files Browse the repository at this point in the history
  • Loading branch information
railsjack committed Aug 10, 2019
1 parent 5662f1a commit 4305392
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 48 deletions.
3 changes: 2 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
3 changes: 2 additions & 1 deletion main.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ function initialize () {
height: 840,
title: app.getName(),
webPreferences: {
nodeIntegration: true
nodeIntegration: true,
devTools: false
}
}

Expand Down
8 changes: 8 additions & 0 deletions player/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;}
139 changes: 93 additions & 46 deletions player/custom.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
document.ready = (callback) =>{
document.ready = (callback) => {
if (typeof callback === 'function') {
var onceCalled = false
document.addEventListener("DOMContentLoaded", function (event) {
Expand All @@ -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)
Expand All @@ -54,63 +102,47 @@ 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')
await Helper.loadScript(cached_list_dir + '/list_vtt.js')

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
Expand All @@ -121,7 +153,7 @@ class TutorialList {
defaultPath: basepath
})
if (list_dir) {
localStorage.setItem('list_dir', list_dir)
Helper.setConf('list_dir', list_dir)
}
load()
}
Expand Down Expand Up @@ -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)
}
Expand Down

0 comments on commit 4305392

Please sign in to comment.