From fe2bd530fc35b8915f8c51b001d4a2b4d8c961c1 Mon Sep 17 00:00:00 2001
From: railsjack <wipying@gmail.com>
Date: Sat, 20 Jul 2019 14:34:37 -0300
Subject: [PATCH] Added player UI

---
 index.html        |  3 ++-
 player/custom.css | 23 ++++++++++++++++-------
 player/custom.js  | 23 +++++++++++++++--------
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 46db7dd..a0c382b 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.load()">...</button>
         </div>
         <div class="player-wrapper">
-            <video id="video_player" class="player" controls width="100%" poster="" preload="none">
+            <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">
                 </track>
diff --git a/player/custom.css b/player/custom.css
index 0c1772d..53debb9 100644
--- a/player/custom.css
+++ b/player/custom.css
@@ -1,11 +1,20 @@
+html, body {
+    overflow: hidden;
+    background-color: #333;
+    margin: 0; padding: 0px;
+    width: 100%; height: 100%; }
 .tutorial-player {
-    width: 50%;}
+    width: calc(100% - 4px); height: calc(100% - 4px); }
     .tutorial-player .list-wrapper {
-        width: 100%; }
+        width: 100%; height: 25px; margin-bottom: 5px;}
         .tutorial-player .list-wrapper .list{
+            background-color: #333; color: white;
             font-size: 12pt;
-            padding: 3px;
-            width: 100%;}
-        .tutorial-player .player-wrapper {
-        width: 100%;
-    }
+            padding: 3px; float: left;
+            width: calc(100% - 28px); height: 25px; }
+        .tutorial-player .list-wrapper .list-load-button {
+            background-color: #333; color: white;
+            border: solid 1px #aaa;
+            width: 25px; height: 25px; float: right;}
+    .tutorial-player .player-wrapper {
+        width: 100%; height: calc(100% - 33px); }
diff --git a/player/custom.js b/player/custom.js
index 4048672..b2c936a 100644
--- a/player/custom.js
+++ b/player/custom.js
@@ -38,21 +38,28 @@ var TutorialList = function () {
         return ret.replace(/\-/gi, ' ');
     };
 
-    var _load = function(){
+    var _load = function () {
         _load_list();
     };
 
-    var _load_list = function(){
+    var _load_list = function () {
+        const cached_data_dir = localStorage.getItem('data_dir')
+        alert('localStorage data_dir: '+ cached_data_dir)
+
+        const app = require('electron').remote.app
+        var basepath = app.getAppPath();
         const dialog = require('electron').remote.dialog
-        const files = dialog.showOpenDialog(null, { 
-            properties: [ 'openDirectory' ],
-            defaultPath: '.'
+        const data_dir = dialog.showOpenDialog(null, {
+            properties: ['openDirectory'],
+            defaultPath: basepath
         })
-        console.log(files);
+        if (data_dir){
+            localStorage.setItem('data_dir', data_dir)
+        }
     };
 
     var _load_html = function () {
-    
+
         var temp_vtt_file_dir = '';
         var optionNode;
 
@@ -88,7 +95,7 @@ var TutorialList = function () {
 
 
 document.ready(function (event) {
-    TutorialList.load()
+    
     tutorialList.addEventListener('change', function (e) {
         Player.play(e.target.value)
     });