Keep track last position/size video

index.html

@@ -43,26 +43,47 @@
   <script src="./renderer.js"></script>
 
   <script>
-    
+
+    var getAbsPosition = function(el){
+        var el2 = el;
+        var curtop = 0;
+        var curleft = 0;
+        if (document.getElementById || document.all) {
+            do  {
+                curleft += el.offsetLeft-el.scrollLeft;
+                curtop += el.offsetTop-el.scrollTop;
+                el = el.offsetParent;
+                el2 = el2.parentNode;
+                while (el2 != el) {
+                    curleft -= el2.scrollLeft;
+                    curtop -= el2.scrollTop;
+                    el2 = el2.parentNode;
+                }
+            } while (el.offsetParent);
+
+        } else if (document.layers) {
+            curtop += el.y;
+            curleft += el.x;
+        }
+        return [curtop, curleft];
+    };
+
+
     $(document).ready(function() {
       let wrapLoca = document.getElementById('wrap')
       $("#wrap").draggable({
         drag: function(e, ui){
-          console.log("Drag - top", wrapLoca.style.top, "left", wrapLoca.style.left)
-          localStorage.setItem('playerTop', wrapLoca.style.top);
-          localStorage.setItem('playerLeft', wrapLoca.style.left);
+          let coords = getAbsPosition(wrapLoca)
+          // console.log("Drag - top", coords[0], "left", coords[1])
+          localStorage.setItem('playerTop', `${coords[0]}px`);
+          localStorage.setItem('playerLeft', `${coords[1]}px`);
         },
-        stop: function(e, ui){
-          // localStorage.setItem('playerTop', wrapLoca.style.top);
-          // localStorage.setItem('playerLeft', wrapLoca.style.left);
-          // console.log("new location save", wrapLoca.style.left, wrapLoca.style.top)
-        }
       }).resizable({
         start: function(e, ui) {
           // alert('resizing started');
         },
         resize: function(e, ui) {
-          console.log("resize - width", wrapLoca.style.width, "height", wrapLoca.style.height)
+          // console.log("resize - width", wrapLoca.style.width, "height", wrapLoca.style.height)
           if(window.onWindowResize) window.onWindowResize(true)
           localStorage.setItem('playerWidth', wrapLoca.style.width);
           localStorage.setItem('playerHeight', wrapLoca.style.height);
@@ -86,6 +107,7 @@
   
   <div id="panel" class="panel is-primary container card">
     <p class="panel-heading">
+      <img src="./assets/domPlayer.png" id="logo">
       DomPlayer Options
     </p>
     <p class="panel-tabs">
@@ -97,14 +119,11 @@
       
     </p>
 
-      
-    <h2 class="title is-5 titles">Mod</h2>
     <a class="panel-block is-active">
       <label class="panel-block">
-        <h2 class="Title 6" style="margin-right:10px">Normal</h2>
         <div class="field">
-          <input id="switchExample" type="checkbox" name="switchExample" class="switch" checked="checked">
-          <label for="switchExample">Half Dome</label>
+          <input id="switchExample" type="checkbox" name="switchExample" class="switch is-small" checked="checked">
+          <label for="switchExample">Half Dome mode</label>
         </div>
       </label>
     </a>
@@ -124,14 +143,6 @@
             <ul id='playlist'><h2 class="title is-5" id="emptyFlag""">Empty...</h2></ul>
           </div>
       </div>
-
-    <a class="panel-block" id="playlistWrap">
-      
-      
-      
-      </div>
-    </a>
-    
     <div class="panel-block">
       <button class="button is-link is-outlined is-fullwidth" onclick="addVideo()">
         Add Video
@@ -152,23 +163,9 @@
           <li>Space - pause/play Video</li>
         </ul>
       </div>
-      <footer class="card-footer">
-        <p class="card-footer-item">
-          <span>
-            View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
-          </span>
-        </p>
-        <p class="card-footer-item">
-          <span>
-            Share on <a href="#">Facebook</a>
-          </span>
-        </p>
-      </footer>
     </div>
-    <!-- <div id="panelWrap" class="">
-      <button class="uk-button uk-button-default uk-button-small" id="addVideo" onclick="addVideo()">Add Video</button>
-
-      <h2 class="uk-divider-icon">Playlist:</h2>
+  </div>
+</div>
 
   <div id="controls">
     

renderer.js

@@ -11,7 +11,7 @@ function centerVideo(){
     wrapLoca.style.top = `calc(50vh - ${wrapLoca.offsetHeight / 2}px)`
     localStorage.setItem('playerTop', wrapLoca.style.top);
     localStorage.setItem('playerLeft', wrapLoca.style.left);
-    console.log("new location save", wrapLoca.style.left, wrapLoca.style.top)
+    // console.log("new location save", wrapLoca.style.left, wrapLoca.style.top)
 }
 
 function addVideo(){
@@ -54,7 +54,7 @@ function addVideo(){
                 window.videoPlayer.play()
             }
             playlist.appendChild(videoNeo)
-            console.log("window.playlist", window.playlist);
+            // console.log("window.playlist", window.playlist);
         })
         
     })