merged frame template with main; fixed full-screen frame authentication

issue

diff --git a/src/handlers.py b/src/handlers.py
index 8c2df6359f4ae6031981565013644f778cccb677..af8ecbfa7eb39a991b9f54d8e9ccc309810af640 100644 (file)
--- a/src/handlers.py
+++ b/src/handlers.py
@@ -146,6 +146,7 @@ class MainHandler(BaseHandler):
             timezones = pytz.common_timezones
 
         self.render('main.html',
+                frame=False,
                 version=motioneye.VERSION,
                 wpa_supplicant=settings.WPA_SUPPLICANT_CONF,
                 enable_reboot=settings.ENABLE_REBOOT,
@@ -757,29 +758,33 @@ class PictureHandler(BaseHandler):
             
             remote.list_media(camera_config, media_type='picture', prefix=self.get_argument('prefix', None), callback=on_response)
 
-    @BaseHandler.auth()
     def frame(self, camera_id):
         camera_config = config.get_camera(camera_id)
         
         if utils.local_camera(camera_config) or self.get_argument('title', None) is not None:
-            self.render('frame.html',
+            self.render('main.html',
+                    frame=True,
                     camera_id=camera_id,
                     camera_config=camera_config,
-                    title=self.get_argument('title', camera_config.get('@name', '')))
+                    title=self.get_argument('title', camera_config.get('@name', '')),
+                    admin_username=config.get_main().get('@admin_username'))
 
         else: # remote camera, we need to fetch remote config
             def on_response(remote_ui_config=None, error=None):
                 if error:
-                    return self.render('frame.html',
+                    return self.render('main.html',
+                            frame=True,
                             camera_id=camera_id,
                             camera_config=camera_config,
                             title=self.get_argument('title', ''))
 
                 remote_config = config.camera_ui_to_dict(remote_ui_config)
-                self.render('frame.html',
+                self.render('main.html',
+                        frame=True,
                         camera_id=camera_id,
                         camera_config=remote_config,
-                        title=self.get_argument('title', remote_config['@name']))
+                        title=self.get_argument('title', remote_config['@name']),
+                        admin_username=config.get_main().get('@admin_username'))
 
             remote.get_config(camera_config, on_response)
 

diff --git a/static/css/frame.css b/static/css/frame.css
index db630c6f40ca734d6d524992d1fa5bc3c6860415..ff0b35f3aff4b8c96bf590d6013b3f901e236169 100644 (file)
--- a/static/css/frame.css
+++ b/static/css/frame.css
@@ -2,53 +2,20 @@
 
     /* basic */
 
-* {
-    padding: 0px;
-    border: 0px solid black;
-    margin: 0px;
-    outline: 0px;
-    border-spacing: 0px;
-    border-collapse: separate;
-}
-
-html {
-    height: 100%;
-}
-
 body {
-    height: 100%;
     color: #dddddd;
     background-color: #212121;
 }
 
 
-    /* layout */
-
-img.main-loading-progress {
-    display: block;
-    margin: auto;
-    margin-top: 50px;
-}
-
-div.add-camera-message {
-    text-align: center;
-    margin-top: 30px;
-}
-
-
     /* camera frame */
 
 div.camera-frame {
     position: relative;
+    padding: 0px;
+    margin: 0px;
     width: 100%;
     height: 100%;
-    transition: all 0.2s, opacity 0s;
-    opacity: 0;
-    vertical-align: top;
-}
-
-div.camera-frame.motion-detected {
-    background-color: #712727;
 }
 
 div.camera-container {
@@ -58,58 +25,19 @@ div.camera-container {
 }
 
 img.camera {
-    width: 100%;
     height: auto;
-    transition: opacity 0.2s linear;
-    opacity: 1;
+    margin: auto;
 }
 
 img.camera.error,
 img.camera.loading {
-    opacity: 0;
     height: 100% !important;
 }
 
 div.camera-placeholder {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    text-align: center;
-    transition: opacity 0.2s linear;
     overflow: hidden;
 }
 
-img.no-camera {
-    padding-top: 20%;
-    width: 30%;
-    opacity: 0.8;
-}
-
 div.camera-progress {
-    background: rgba(0, 0, 0, 0.001); /* otherwise IE would not extend this as expected */
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    opacity: 0;
-    transition: all 0.2s linear;
-    text-align: center;
-}
-
-div.camera-progress.visible {
-    opacity: 0.4;
-}
-
-img.camera-progress {
-    border: 10px solid white;
-    border-radius: 10px;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    bottom: 0px;
-    right: 0px;
-    margin: auto;
+    cursor: default;
 }

diff --git a/static/js/frame.js b/static/js/frame.js
index ce07f24a07a8994e3f3de9566ca459298c6cd540..932e7c355fec95e99d2b0f9cad367c67ca960fbc 100644 (file)
--- a/static/js/frame.js
+++ b/static/js/frame.js
@@ -1,54 +1,5 @@
 
 var refreshDisabled = false;
-var inProgress = false;
-var refreshInterval = 50; /* milliseconds */
-
-
-    /* utils */
-
-function getCookie(name) {
-    if (document.cookie.length <= 0) {
-        return null;
-    }
-
-    var start = document.cookie.indexOf(name + '=');
-    if (start == -1) {
-        return null;
-    }
-     
-    var start = start + name.length + 1;
-    var end = document.cookie.indexOf(';', start);
-    if (end == -1) {
-        end = document.cookie.length;
-    }
-    
-    return unescape(document.cookie.substring(start, end));
-}
-
-    
-    /* progress */
-
-function beginProgress() {
-    if (inProgress) {
-        return; /* already in progress */
-    }
-
-    inProgress = true;
-    
-    /* show the camera progress indicator */
-    $('div.camera-progress').addClass('visible');
-}
-
-function endProgress() {
-    if (!inProgress) {
-        return; /* not in progress */
-    }
-    
-    inProgress = false;
-    
-    /* hide the camera progress indicator */
-    $('div.camera-progress').removeClass('visible');
-}
 
 
     /* camera frame */
@@ -158,6 +109,7 @@ function refreshCameraFrame() {
                 uri += '&width=' + img.width;
             }
             
+            uri = addAuthParams('GET', uri);
             img.src = uri;
             img.loading = 1;
             
@@ -168,27 +120,11 @@ function refreshCameraFrame() {
     setTimeout(refreshCameraFrame, refreshInterval);
 }
 
-function checkCameraErrors() {
-    /* properly triggers the onerror event on the cameras whose imgs were not successfully loaded,
-     * but the onerror event hasn't been triggered, for some reason (seems to happen in Chrome) */
-    var cameraFrame = $('div.camera-frame').find('img.camera');
-    
-    cameraFrame.each(function () {
-        if (this.complete === true && this.naturalWidth === 0 && !this.error && this.src) {
-            $(this).error();
-        }
-    });
-    
-    setTimeout(checkCameraErrors, 500);
-}
-
 
     /* startup function */
 
 $(document).ready(function () {
-    beginProgress();
     setupCameraFrame();
     refreshCameraFrame();
-    checkCameraErrors();
 });
 

diff --git a/static/js/main.js b/static/js/main.js
index f2b4507b491b7a5fb4720c3ddfb5a631979a987d..e0fa8e009b41554a9ec1e4b88613ddeccf5ded08 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -4,8 +4,8 @@ var refreshDisabled = {}; /* dictionary indexed by cameraId, tells if refresh is
 var fullScreenCameraId = null;
 var inProgress = false;
 var refreshInterval = 50; /* milliseconds */
-var username = null;
-var password = null;
+var username = '';
+var password = '';
 
 
     /* utils */
@@ -1861,7 +1861,7 @@ function runLoginDialog(retry) {
     $('body').append(tempFrame);
     
     var form = 
-            $('<form action="version/" target="temp" method="POST"><table class="login-dialog">' +
+            $('<form action="' + baseUri + 'login/" target="temp" method="POST"><table class="login-dialog">' +
                 '<tr>' +
                     '<td class="dialog-item-label"><span class="dialog-item-label">Username</span></td>' +
                     '<td class="dialog-item-value"><input type="text" name="username" class="styled" id="usernameEntry"></td>' +
@@ -2854,7 +2854,8 @@ function addCameraFrameUi(cameraConfig) {
     
     fullScreenButton.click(function (cameraId) {
         return function () {
-            window.open(window.location.href + 'picture/' + cameraId + '/frame/', '_blank');
+            var url = window.location.href + 'picture/' + cameraId + '/frame/';
+            window.open(url, '_blank');
         };
     }(cameraId));
     
@@ -3100,10 +3101,22 @@ function checkCameraErrors() {
     /* startup function */
 
 $(document).ready(function () {
+    /* detect base uri */
+    if (frame) {
+        baseUri = qualifyUri('../../../');
+
+    }
+    else {
+        baseUri = qualifyUri('');
+
+        /* restore the username from cookie */
+        window.username = getCookie('username');
+    }
+    
     /* open/close settings */
     $('div.settings-button').click(function () {
         if (isSettingsOpen()) {
-             closeSettings();
+            closeSettings();
         }
         else {
             openSettings();
@@ -3124,14 +3137,13 @@ $(document).ready(function () {
         }
     });
     
-    /* restore the username from cookie */
-    window.username = getCookie('username');
-    
     initUI();
     beginProgress();
     
-    ajax('GET', 'login/', null, function () {
-        fetchCurrentConfig(endProgress);
+    ajax('GET', baseUri + 'login/', null, function () {
+        if (!frame) {
+            fetchCurrentConfig(endProgress);
+        }
     });
     
     refreshCameraFrames();

diff --git a/static/js/ui.js b/static/js/ui.js
index 49edb6964a2437b0d35fb2063f8f9c0f3a374ec9..1f711fa7c5098435617c80f09277933d7dc6d3a2 100644 (file)
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -5,6 +5,10 @@ var _modalDialogContexts = [];
     /* UI widgets */
 
 function makeCheckBox($input) {
+    if (!$input.length) {
+        return;
+    }
+    
     var mainDiv = $('<div class="check-box"></div>');
     var buttonDiv = $('<div class="check-box-button"></div>');
     var text = $('<span class="check-box-text"><span>');
@@ -64,6 +68,10 @@ function makeCheckBox($input) {
 }
 
 function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decimals, unit) {
+    if (!$input.length) {
+        return;
+    }
+
     unit = unit || '';
     
     var slider = $('<div class="slider"></div>');
@@ -301,6 +309,10 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
     /* validators */
 
 function makeTextValidator($input, required) {
+    if (!$input.length) {
+        return;
+    }
+    
     if (required == null) {
         required = true;
     }
@@ -345,6 +357,10 @@ function makeTextValidator($input, required) {
 }
 
 function makeComboValidator($select, required) {
+    if (!$select.length) {
+        return;
+    }
+    
     if (required == null) {
         required = true;
     }
@@ -389,6 +405,10 @@ function makeComboValidator($select, required) {
 }
 
 function makeNumberValidator($input, minVal, maxVal, floating, sign, required) {
+    if (!$input.length) {
+        return;
+    }
+    
     if (minVal == null) {
         minVal = -Infinity;
     }
@@ -483,6 +503,10 @@ function makeNumberValidator($input, minVal, maxVal, floating, sign, required) {
 }
 
 function makeTimeValidator($input) {
+    if (!$input.length) {
+        return;
+    }
+    
     function isValid(strVal) {
         if (!$input.is(':visible')) {
             return true; /* an invisible element is considered always valid */
@@ -524,6 +548,10 @@ function makeTimeValidator($input) {
 }
 
 function makeUrlValidator($input) {
+    if (!$input.length) {
+        return;
+    }
+    
     function isValid(strVal) {
         if (!$input.is(':visible')) {
             return true; /* an invisible element is considered always valid */
@@ -560,6 +588,10 @@ function makeUrlValidator($input) {
 }
 
 function makeProgressBar($div) {
+    if (!$div.length) {
+        return;
+    }
+    
     $div.addClass('progress-bar-container');
     var fillDiv = $('<div class="progress-bar-fill"></div>');
     var textSpan = $('<span class="progress-bar-text"></span>');

diff --git a/templates/frame.html b/templates/frame.html
deleted file mode 100644 (file)
index 386f15c..0000000
--- a/templates/frame.html
+++ /dev/null
@@ -1,24 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}{{title}}{% endblock %}
-
-{% block style %}
-    {{super()}}
-    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/frame.css" />
-{% endblock %}
-
-{% block script %}
-    {{super()}}
-    <script type="text/javascript" src="{{STATIC_URL}}js/frame.js"></script>
-{% endblock %}
-
-{% block body %}
-    <div class="camera-frame" id="camera{{camera_id}}"
-            streaming_framerate="{{camera_config['stream_maxrate']}}" streaming_server_resize="{{camera_config['@webcam_server_resize']}}">
-        
-        <div class="camera-container">
-            <div class="camera-placeholder"><img class="no-camera" src="{{STATIC_URL}}img/no-camera.svg"></div><img
-                class="camera"><div class="camera-progress"><img class="camera-progress"></div>
-        </div>
-    </div>
-{% endblock %}

diff --git a/templates/main.html b/templates/main.html
index 136a7eb2f5e4789c6438dd2f46b0ac2793dfeba5..51bbd6a8e5f648ad608e9d53f9c367463c9e5e0e 100644 (file)
--- a/templates/main.html
+++ b/templates/main.html
@@ -1,24 +1,32 @@
 {% extends "base.html" %}
 
-{% block title %}motionEye{% endblock %}
+{% block title %}{% if title %}{{title}}{% else %}motionEye{% endif %}{% endblock %}
 
 {% block style %}
     {{super()}}
     <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/ui.css" />
     <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/main.css" />
+    {% if frame %}
+        <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/frame.css" />
+    {% endif %}
 {% endblock %}
 
 {% block script %}
     {{super()}}
     <script type="text/javascript" src="{{STATIC_URL}}js/ui.js"></script>
     <script type="text/javascript" src="{{STATIC_URL}}js/main.js"></script>
-
+    {% if frame %}
+        <script type="text/javascript" src="{{STATIC_URL}}js/frame.js"></script>
+    {% endif %}
     <script type="text/javascript">
         var adminUsername = '{{admin_username}}';
+        var frame = {% if frame %}true{% else %}false{% endif %};
+        var baseUri = null;
     </script>
 {% endblock %}
 
 {% block body %}
+    {% if not frame %}
     <div class="header">
         <div class="header-container">
             <div class="settings-top-bar closed">
@@ -38,6 +46,8 @@
             </div>
         </div>
     </div>
+    {% endif %}
+    {% if not frame %}
     <div class="page">
         <div class="settings closed">
             <div class="settings-container">
@@ -613,6 +623,16 @@
             <div class="copyright-note">copyright &copy; Calin Crisan</div>
         </div> 
     </div>
+    {% else %}
+        <div class="camera-frame" id="camera{{camera_id}}"
+                streaming_framerate="{{camera_config['stream_maxrate']}}" streaming_server_resize="{{camera_config['@webcam_server_resize']}}">
+            
+            <div class="camera-container">
+                <div class="camera-placeholder"><img class="no-camera" src="{{STATIC_URL}}img/no-camera.svg"></div><img
+                    class="camera"><div class="camera-progress"><img class="camera-progress"></div>
+            </div>
+        </div>
+    {% endif %}
     <div class="modal-glass"></div>
     <div class="modal-container"></div>
     <div class="popup-message-container"></div>