Webcam fixes

Fixed: Maximized webcam stream doesn't care about browser height. #26 Fixed: cannot access FullScreen webcam plugin with "Hide Main Camera" checked/buggy pop-out action if unchecked #18
LazeMSS · Dec 13, 2020 · 08593b5 · 08593b5
1 parent 68083b7
commit 08593b5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/octoprint_uicustomizer/static/css/uicustomizer.css b/octoprint_uicustomizer/static/css/uicustomizer.css
@@ -640,6 +640,10 @@ body.UICResponsiveMode select{
 }
 
 /* webcam zoom/float */
+/* fixes problem with fullscreen plugin*/
+body.inlineFullscreen .UICWebCamClick{
+    display: none;
+}
 .UICWebCamClick{
     position: absolute;
     right: 0px;

diff --git a/octoprint_uicustomizer/static/js/uicustomizer.js b/octoprint_uicustomizer/static/js/uicustomizer.js
@@ -436,12 +436,13 @@ $(function() {
                         self.startHLSstream(video,streamURL);
                     }else{
                         var rotated = $('#webcam_rotator').hasClass('webcam_rotated');
+                        var imgsrc = obj.find('img')[0];
                         if (rotated){
-                            var nHeight = $('#webcam_image')[0].naturalWidth;
-                            var nWidth = $('#webcam_image')[0].naturalHeight;
+                            var nHeight = imgsrc.naturalWidth;
+                            var nWidth = imgsrc.naturalHeight;
                         }else{
-                            var nWidth = $('#webcam_image')[0].naturalWidth;
-                            var nHeight = $('#webcam_image')[0].naturalHeight;
+                            var nWidth = imgsrc.naturalWidth;
+                            var nHeight = imgsrc.naturalHeight;
                         }
                         var aspect = nWidth/nHeight;
                         nWidth -= 100;
@@ -460,6 +461,7 @@ $(function() {
 
                         // Clone to fix rotation etc.
                         var clone = $('#webcam_rotator').clone();
+                        clone.find('>div:not(:first-child)').remove();
                         clone.attr('id','UICWebCamFullInnerDIV');
                         clone.find('*').removeAttr('id');
 
@@ -702,6 +704,7 @@ $(function() {
 
                 // Clone and cleanup
                 var clone = $('#webcam_rotator').clone();
+                clone.find('>div:not(:first-child)').remove();
                 // Avoid any children added
                 clone.find('>div:not(:first-child)').remove();
                 $('#IUCWebcamContainer > div').append(clone).find('*').removeAttr('id');
@@ -736,22 +739,19 @@ $(function() {
                             $('#IUCWebcamContainer div.nowebcam').remove();
                             $('.UICWebCamClick').show();
                             $('#IUCWebcamContainerInner img').show();
+                            var clone = $('#webcam_rotator').clone();
+                            clone.find('>div:not(:first-child)').remove();
                             // Compare content of the containers
-                            if ($('#IUCWebcamContainerInner').clone().wrap('<p/>').parent().find('*').removeAttr('id').removeAttr('src').html().replace(' style=""' ,'').trim() != $('#webcam_rotator').clone().wrap('<p/>').parent().find('*').removeAttr('id').removeAttr('src').html().replace(' style=""','').trim()){
+                            if ($('#IUCWebcamContainerInner').clone().wrap('<p/>').parent().find('*').removeAttr('id').removeAttr('src').html().replace(' style=""' ,'').trim() != clone.wrap('<p/>').parent().find('*').removeAttr('id').removeAttr('src').html().replace(' style=""','').trim()){
                                 self.logToConsole("WebCam updated TOTAL");
                                 $('#IUCWebcamContainerInner').remove();
-                                // Clone and cleanup
-                                var clone = $('#webcam_rotator').clone();
-                                clone.find('>div:not(:first-child)').remove();
                                 $('#IUCWebcamContainer > div').append(clone).find('*').removeAttr('id');
                                 clone.attr('id',"IUCWebcamContainerInner");
                                 // Setup error handling again
                                 webcamLoader();
 
                                 // Fix the fullscreen overlay if present
                                 if ($('#UICWebCamFullInnerDIV').length){
-                                    var clone = $('#webcam_rotator').clone();
-                                    clone.find('>div:not(:first-child)').remove();
                                     clone.attr('id','UICWebCamFullInnerDIV');
                                     $('#UICWebCamFullInnerDIV').html(clone).find('*').removeAttr('id');
                                     $('#UICWebCamFull img').on('load',function(){
@@ -790,6 +790,7 @@ $(function() {
                 // Fix the fullscreen overlay if present
                 if ($('#UICWebCamFullInnerDIV').length){
                     var clone = $('#webcam_rotator').clone();
+                    clone.find('>div:not(:first-child)').remove();
                     clone.attr('id','UICWebCamFullInnerDIV');
                     $('#UICWebCamFullInnerDIV').html(clone).find('*').removeAttr('id');
                     $('#UICWebCamFull img').on('load',function(){