Blue Turtle - The Refactoring

web/libs/css/main.dash2.css

@@ -6,7 +6,7 @@
    position: relative;
    min-height: 1px;
    padding-right: 15px;
-   padding-left: 15px; 
+   padding-left: 15px;
 }
 
 .col-5ths {
@@ -24,7 +24,7 @@
       -ms-flex: 0 0 20%;
       flex: 0 0 20%;
       max-width: 20%;
-   } 
+   }
 }
 
 @media (min-width: 768px) {
@@ -34,7 +34,7 @@
       -ms-flex: 0 0 20%;
       flex: 0 0 20%;
       max-width: 20%;
-   } 
+   }
 }
 ::-webkit-scrollbar-thumb:hover {
     background-color:#bd9565;
@@ -90,6 +90,9 @@ img{max-width:100%}
 }
 
 .monitor_item .stream-hud{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}
+.monitor_item .stream-hud .camera_cpu_usage{position:absolute;top:0;left:0;width: 100%;}
+.monitor_item .stream-hud .camera_cpu_usage .progress{width: 100%;}
+.monitor_item .stream-hud .camera_cpu_usage:hover .progress{height:20px;transition:0.2s}
 .monitor_item .stream-hud .controls{position:absolute;top:10px;left:10px;}
 .monitor_item .stream-hud:hover{opacity:1}
 .monitor_item .stream-hud .bottom-text{position:absolute;bottom:0;left:0;width:100%;padding:5px;text-shadow: 0 0 10px #333;}
@@ -114,8 +117,7 @@ img{max-width:100%}
 .monitor_item.fullscreen img.stream-element{height:100%;width:auto}
 .monitor_item.fullscreen canvas.stream-element{height:auto;width:auto;background-color:black;}
 .monitor_item .stream-element{border: 0;object-fit: fill;height: 100%;width:100%}
-.monitor_item{position:relative;padding:0;}
-.monitor_item{transition:none;}
+.monitor_item{position:relative;padding:0;transition:none;background:#000}
 .monitor_item .mdl-card{min-height:auto;border:1px solid #272727;border-radius:0px;overflow:hidden}
 .monitor_item .mdl-card__media{position:relative;padding:0!important;display:block!important;background:#000;}
 .monitor_item.selected .stream-element{height:600px}
@@ -124,7 +126,7 @@ img{max-width:100%}
 .monitor_item.detector_triggered .detector-fade{opacity:1}
 .monitor_item .detector-fade{opacity:0}
 .monitor_item .indifference{position:absolute;width:100%;left:0;top:0;transition:0.2s;}
-.monitor_item .indifference .progress{width:100%;background:#333;box-shadow:0;}
+.monitor_item .progress{width:100%;background:#333;box-shadow:0;}
 .monitor_item .indifference:hover .progress{height:20px;transition:0.2s}
 .hide_indifference .indifference{display:none!important}
 .hide_indifference [class_toggle="hide_indifference"]{color:#d9534f!important}
@@ -330,9 +332,16 @@ form.modal-body{margin:0}
 .timelapse_hud .controlBar{position: absolute;background:rgba(22,22,22,0.8);width:100%;left:0;bottom:0;}
 .timelapse_hud .hover-hide{opacity:0}
 .timelapse_hud:hover .hover-hide{opacity:1;z-index:5}
-
+.video_grid{overflow: auto;height: 100%;display: block;}
+.video_grid .col-md-2{padding-left:5px;padding-right:5px;padding-bottom:10px}
+.video_grid .thumb{width:100%;height:150px;display:inline-block;background-size:cover;position:relative;overflow:hidden;border-radius:4px;border:1px solid #000;box-shadow:0 0 10px #151515}
+.video_grid .thumb .title-strip, .video_grid .thumb .button-strip{width:100%;position:absolute;left:0;background:rgba(0,0,0,0.7);color:#fff;padding:4px}
+.video_grid .thumb .title-strip{top:0;opacity:0.5}
+.video_grid .thumb .button-strip{bottom:0;opacity:0}
+.video_grid .thumb:hover .title-strip, .video_grid .thumb:hover .button-strip{opacity:1}
 
 .table-striped>tbody>tr>td{vertical-align:middle}
+.table-striped .thumbnail{width:100px;height:80px;border-radius:5px;margin:0;display:inline-block;}
 #motion_list{height:155px;overflow:auto;border-radius:5px;border:1px solid #444;position:relative;background: #222;margin:0}
 .dark .list-group-item{border-color: #444;background:#222}
 .dark .list-group-item.active{background:#c49a68;border-color:#a7865f}
@@ -456,7 +465,7 @@ ul.msg_list li .message {
 .nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{background:#867560}
 
 .mdl-js-layout.hide-side:not(.is-small-screen){
-    
+
 }
 @media screen and (min-width: 1025px){
     .mdl-js-layout.hide-side:not(.is-small-screen)>.mdl-layout__drawer {
@@ -639,7 +648,7 @@ ul.msg_list li .message {
 }
 
 /*animations*/
-@keyframes blink {  
+@keyframes blink {
   0% { opacity:1 }
   50% { opacity:0 }
   100% { opacity:1 }
@@ -730,4 +739,4 @@ ul.msg_list li .message {
 .bg-hexagon {
     background-color: #054e9f;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23fdfdfd' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
+}

web/libs/css/super-page.css

@@ -0,0 +1,6 @@
+.navbar.bg-primary,.nav.bg-primary {
+    background-color: #903619 !important;
+}
+.navbar.bg-success {
+    background-color: #1f791b !important;
+}

web/libs/js/basic.js

@@ -0,0 +1,36 @@
+var tool = {}
+tool.getVideoImage = function (path, secs, callback) {
+  var me = this, video = document.createElement('video');
+  var backCalled = false
+  var finish = function(err,data){
+      if(!backCalled){
+          backCalled = true
+          callback(err,data)
+          clearTimeout(timeout)
+      }
+  }
+  var timeout = setTimeout(function(){
+      finish(new Error('Failed Getting Snap from Video'))
+  },5000)
+  video.onloadedmetadata = function() {
+      video.play()
+      this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration)
+      video.pause()
+  };
+  video.onseeked = function(e) {
+    var canvas = document.createElement('canvas')
+    canvas.height = video.videoHeight
+    canvas.width = video.videoWidth
+    var ctx = canvas.getContext('2d')
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+    var base64 = canvas.toDataURL()
+    finish(null, base64)
+    delete(ctx)
+    delete(video)
+    delete(canvas)
+  };
+  video.onerror = function(e) {
+      finish(e)
+  };
+  video.src = path;
+}

web/libs/js/extra.js

@@ -0,0 +1,11 @@
+var browserCheck = {}
+browserCheck.forLastPass = function(){
+  var lastpass = navigator.plugins['LastPass'];
+  if (lastpass === undefined) {
+    return false;
+  }
+  return true;
+}
+if(browserCheck.forLastPass){
+    alert('It appears you are using LastPass. Be aware that LastPass is known to cause issues with the form fields.')
+}

web/libs/js/moment.js

@@ -4192,4 +4192,4 @@
 
     return _moment;
 
-}));
+}));

web/libs/js/poseidon.js

@@ -19,7 +19,8 @@ var Poseidon = function () {
             uid: options.uid,
             ke: options.ke,
             id: options.id,
-            channel: options.channel
+            channel: options.channel,
+            errorCallback: options.onError
         };
         _classCallCheck(this, Poseidon);
 
@@ -28,10 +29,11 @@ var Poseidon = function () {
         } else {
             this._callback = function (err, msg) {
                 if (err) {
-                    console.error('Poseidon Error: ' + err);
+                    if(_monitor.errorCallback)_monitor.errorCallback(err)
+                    console.error('Poseidon Error: ' + err,options);
                     return;
                 }
-                console.log('Poseidon Message: ' + msg);
+                console.log('Poseidon Message: ' + msg,options);
             };
         }
         if (!options.video || !(options.video instanceof HTMLVideoElement)) {
@@ -467,7 +469,7 @@ var Poseidon = function () {
     }, {
         key: '_onSocketDisconnect',
         value: function _onSocketDisconnect(event) {
-            this._callback(null, 'socket disconnect "' + event + '"');
+            this._callback(true, 'socket disconnect "' + event + '"');
             this.stop();
         }
     }, {
@@ -502,6 +504,7 @@ var Poseidon = function () {
     }, {
         key: '_onSegment',
         value: function _onSegment(data) {
+            if(!this._mediaSource)this_.socket.disconnect()
             if (this._sourceBuffer.buffered.length) {
                 var lag = this._sourceBuffer.buffered.end(0) - this._video.currentTime;
                 if (lag > 0.5) {
@@ -605,4 +608,4 @@ var Poseidon = function () {
 //first request codec string to test against browser and then feed first into source
 //then request init-segment to feed
 //then request media segments until we run into pause, stop, close, error, buffer not ready, etc
-//change poster on video element based on current status, error, not ready, etc
+//change poster on video element based on current status, error, not ready, etc