created a class for seekbar, it's not impletmented yet

railsjack · Aug 27, 2019 · 6c147ae · 6c147ae
1 parent da00dd7
commit 6c147ae
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -8,10 +8,14 @@
 
 <body>
 
+    <div id="custom-seekbar">
+        <span></span>
+    </div>
+
     <div class="tutorial-player">
         <div class="list-wrapper">
             <select id="tutorialList" class="list"></select>
-            <button id="selectListBtn" class="list-load-button" >...</button>
+            <button id="selectListBtn" class="list-load-button">...</button>
         </div>
         <div class="player-wrapper">
             <div id="video_title" class="video-title"></div>
@@ -20,6 +24,9 @@
                 <track kind="captions" id="playerCaption" src="" srclang="en" label="English">
                 </track>
             </video>
+            <div id="seekbar" class="seekbar">
+                <span id="seekbar_pos" class="seekbar-pos"></span>
+            </div>
         </div>
     </div>
 

diff --git a/player/custom.css b/player/custom.css
@@ -17,6 +17,7 @@ html, body {
             border: solid 1px #aaa;
             width: 25px; height: 25px; float: right;}
     .tutorial-player .player-wrapper {
+        position: relative;
         width: 100%; height: calc(100% - 33px); }
         .tutorial-player .player-wrapper .video-title {
             width: 80%; 
@@ -26,3 +27,16 @@ html, body {
             text-align: center;
             background: rgba(0,0,0,0.5);
             margin: 0 auto;}
+        .tutorial-player .player-wrapper .seekbar {
+            width: calc(100% - 65px); height: 5px;
+            background-color: #ddd; cursor: pointer;
+            border-radius: 3px;
+            margin: 0 auto;
+            position: relative;
+            bottom: 30px; }
+            .tutorial-player .player-wrapper .seekbar .seekbar-pos {
+                position: absolute; left: calc(0% - 7px); top: -5px;
+                width: 15px; height: 15px;
+                border-radius: 50%; 
+                background-color: white; }
+
diff --git a/player/custom.js b/player/custom.js
@@ -194,12 +194,52 @@ class TutorialList {
     }
 }
 
+class Seekbar {
+
+    constructor() {
+        this.UI = document.getElementById("seekbar");
+        this.posUI = document.getElementById("seekbar_pos");
+        this.UI.ontimeupdate = function () {
+            var percentage = (vid.currentTime / vid.duration) * 100;
+            $("#custom-seekbar span").css("width", percentage + "%");
+        };
+
+        this.drag_started = false;
+
+        this.posUI.onmousedown = (e) => {
+            console.log('onmousedown...');
+            this.drag_started = true;
+        };
+        this.UI.onmousemove = (e) => {
+            if (this.drag_started) {
+                console.log('onmousemove...');
+                this.posUI.style.left = e.pageX;
+            }
+        };
+        this.UI.onmouseup = (e) => {
+            console.log('onmouseup...');
+            this.drag_started = false;
+        };
+        this.posUI.onmouseup = (e) => {
+            console.log('onmouseup...');
+            this.drag_started = false;
+        };
+    }
+
+
+    bindEvents = (evName, callback) => {
+        this.UI.addEventListener(evName, callback)
+        this.UI[evName] = callback
+    }
+
+};
 
 
 document.ready(async (event) => {
 
     const tutorialList = new TutorialList()
     const player = new Player()
+
     await tutorialList.load()
 
     tutorialList.bindEvents('change', (e) => {