From 4ab3eb76d3f790802ed6b2ea99a045e6a2d7e658 Mon Sep 17 00:00:00 2001
From: Moe <github@m03.ca>
Date: Tue, 12 Jul 2022 15:09:14 -0700
Subject: [PATCH] Clean up regular video player ui and fix quick seek by event
 click

---
 web/assets/js/bs5.videoPlayer.js | 72 ++++++++++++++++----------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/web/assets/js/bs5.videoPlayer.js b/web/assets/js/bs5.videoPlayer.js
index 6991492e..f19ff77d 100644
--- a/web/assets/js/bs5.videoPlayer.js
+++ b/web/assets/js/bs5.videoPlayer.js
@@ -1,20 +1,20 @@
-function getVideoPlayerTabId(video){
-    return `videoPlayer-${video.mid}-${moment(video.time).format('YYYY-MM-DD-HH-mm-ss')}`
-}
 $(document).ready(function(){
     var theBlock = $('#tab-videoPlayer')
-    window.createVideoPlayerTab = function(video,timeStart){
+    window.getVideoPlayerTabId = function(video){
+        return `videoPlayer-${video.mid}-${moment(video.time).format('YYYY-MM-DD-HH-mm-ss')}`
+    }
+    window.createVideoPlayerTab = function(video){
         var newTabId = getVideoPlayerTabId(video)
         var humanStartTime = formattedTime(video.time,true)
         var humanEndTime = formattedTime(video.end,true)
         var tabLabel = `<b>${lang['Video']}</b> : ${loadedMonitors[video.mid].name} : ${formattedTime(video.time,true)}`
-        var videoUrl = getApiPrefix(`videos`) + '/' + video.mid + '/' + video.filename
+        var videoUrl = getLocation() + video.href
         var hasRows = video.events && video.events.length > 0
         var loadedEvents = {}
         var eventMatrixHtml = ``
         if(hasRows){
             var objectsFound = {}
-            eventMatrixHtml += `<div class="border-top-dotted border-top-dark pt-2 mt-2"><h3>${lang.Events}</h3></div>`
+            eventMatrixHtml += `<h3>${lang.Events}</h3>`
             $.each(video.events,function(n,theEvent){
                 loadedEvents[new Date(theEvent.time)] = theEvent
                 var objectsFound = {}
@@ -35,46 +35,46 @@ $(document).ready(function(){
             })
             eventMatrixHtml += `</div>`
         }
-        var baseHtml = `<main class="container page-tab tab-videoPlayer" id="tab-${newTabId}" video-id="${video.mid}${video.time}" data-mid="${video.mid}" data-time="${video.time}">
-            <div class="mt-3 ${definitions.Theme.isDark ? 'bg-dark text-white' : 'bg-light text-dark'} rounded shadow-sm" style="overflow:hidden">
-                  <div class="d-flex flex-row">
-                      <div class="flex-grow-1">
-                          <h6 class="video-title border-bottom-dotted border-bottom-dark p-3 mb-0">${tabLabel}</h6>
-                      </div>
-                      <div>
-                          <a class="btn btn-default btn-sm delete-tab-dynamic"><i class="fa fa-times"></i></a>
-                      </div>
+        var baseHtml = `<main class="container page-tab tab-videoPlayer" id="tab-${newTabId}" video-id="${video.mid}${video.time}" data-time="${video.time}" data-mid="${video.mid}">
+            <div class="my-3 ${definitions.Theme.isDark ? 'bg-dark text-white' : 'bg-light text-dark'} rounded shadow-sm">
+                <div class="p-3">
+                    <h6 class="video-title border-bottom-dotted border-bottom-dark pb-2 mb-0">${tabLabel}</h6>
                   </div>
                   <div style="position: relative">
                       <div class="tab-videoPlayer-event-objects" style="position: absolute;width: 100%; height: 100%; z-index: 10"></div>
                       <video class="tab-videoPlayer-video-element" controls autoplay src="${videoUrl}"></video>
                   </div>
-                <div class="d-flex flex-row">
-                    <div class="d-block p-3">
-                        <b class="flex-grow-1">${lang.Started}</b>
-                        <div class="video-time">${humanStartTime}</div>
-                    </div>
-                    <div class="d-block p-3">
-                        <b class="flex-grow-1">${lang.Ended}</b>
-                        <div class="video-end">${humanEndTime}</div>
-                    </div>
-                </div>
-                <div class="mb-3">
-                    ${eventMatrixHtml}
-                </div>
-                <div class="d-flex flex-row">
-                    <div class="flex-grow-1 bg-gradient-blue">
-                        <a class="btn btn-block px-1 py-3 ${definitions.Theme.isDark ? 'text-white' : 'text-dark'}" download href="${videoUrl}"><i class="fa fa-download"></i> ${lang.Download}</a>
-                    </div>
-                    <div class="flex-grow-1 bg-gradient-orange">
-                        <a class="btn btn-block px-1 py-3 delete-video ${definitions.Theme.isDark ? 'text-white' : 'text-dark'}"><i class="fa fa-trash-o"></i> ${lang.Delete}</a>
+                  <div class="p-3">
+                      <div class="row">
+                      <div class="col-md-6">
+                              <div class="row">
+                                  <div class="col-md-6">
+                                      <b class="flex-grow-1">${lang.Started}</b>
+                                      <div class="video-time">${humanStartTime}</div>
+                                  </div>
+                                  <div class="col-md-6">
+                                      <b class="flex-grow-1">${lang.Ended}</b>
+                                      <div class="video-end">${humanEndTime}</div>
+                                  </div>
+                              </div>
+                              <div class="d-block pt-4">
+                                  <div class="btn-group btn-group-justified">
+                                        <a class="btn btn-sm btn-success" download href="${videoUrl}"><i class="fa fa-download"></i> ${lang.Download}</a>
+                                        <a class="btn btn-sm btn-danger delete-video"><i class="fa fa-trash-o"></i> ${lang.Delete}</a>
+                                  </div>
+                              </div>
+                          </div>
+                          <div class="col-md-6">
+                              ${eventMatrixHtml}
+                          </div>
                     </div>
                 </div>
             </div>
         </main>`
         var tabCreateResponse = createNewTab(newTabId,tabLabel,baseHtml,{},null,'videoPlayer')
-        var videoElement = tabCreateResponse.theTab.find('.tab-videoPlayer-video-element')[0]
+        console.log(tabCreateResponse)
         if(!tabCreateResponse.existAlready){
+            var videoElement = tabCreateResponse.theTab.find('.tab-videoPlayer-video-element')[0]
             var videoObjectContainer = tabCreateResponse.theTab.find('.tab-videoPlayer-event-objects')
             var videoHeight = videoObjectContainer.height()
             var videoWidth = videoObjectContainer.width()
@@ -92,7 +92,6 @@ $(document).ready(function(){
                 }
             }
         }
-        if(timeStart)videoElement.currentTime = timeStart;
     }
     window.closeVideoPlayer = function(tabId){
         console.log('closeVideoPlayer')
@@ -155,5 +154,6 @@ $(document).ready(function(){
         var newVideoTimeIndex = timeIndex - videoTime
         console.log(newVideoTimeIndex)
         videoEl[0].currentTime = newVideoTimeIndex
+        videoEl[0].play()
     })
 })