streaming urls are now shown as popups

diff --git a/motioneye/static/css/main.css b/motioneye/static/css/main.css
index 4d448fa21713b5622fd3cdafee3b9b95839450d0..52e3601aae9d258a209693f70ceb199cabd4b1be 100644 (file)
--- a/motioneye/static/css/main.css
+++ b/motioneye/static/css/main.css
@@ -1348,6 +1348,10 @@ img.camera-progress {
     div.page-container.stretched {
         font-size: 16px;
     }
+
+    span.url-message-span {
+        font-size: 0.75em;
+    }
 }
 
 @media all and (max-width: 1200px) {

diff --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index 79ca95fc22a53d8a838abe11aa588d195b3ee077..f565d05139b72b3382d319f7eac7e1ad690a5765 100644 (file)
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -827,11 +827,6 @@ function initUI() {
      * if a modal dialog is visible, it should be repositioned */
     $(window).resize(updateModalDialogPosition);
     
-    /* autoselect urls in read-only entries */
-    $('#streamingSnapshotUrlEntry:text, #streamingMjpgUrlEntry:text, #streamingEmbedUrlEntry:text').click(function () {
-        this.select();
-    });
-
     /* show a warning when enabling media files removal */
     var preserveSelects = $('#preservePicturesSelect, #preserveMoviesSelect');
     var rootDirectoryEntry = $('#rootDirectoryEntry');
@@ -2150,13 +2145,13 @@ function dict2CameraUi(dict) {
     $('#streamingPortEntry').val(dict['streaming_port']); markHideIfNull('streaming_port', 'streamingPortEntry');
     $('#streamingAuthModeSelect').val(dict['streaming_auth_mode']); markHideIfNull('streaming_auth_mode', 'streamingAuthModeSelect');
     $('#streamingMotion')[0].checked = dict['streaming_motion']; markHideIfNull('streaming_motion', 'streamingMotion');
-    
+
     var cameraUrl = location.protocol + '//' + location.host + basePath + 'picture/' + dict.id + '/';
-    
+
     var snapshotUrl = null;
     var mjpgUrl = null;
     var embedUrl = null;
-    
+
     if (dict['proto'] == 'mjpeg') {
         mjpgUrl = dict['url'];
         mjpgUrl = mjpgUrl.replace('127.0.0.1', window.location.host.split(':')[0]);
@@ -2178,10 +2173,10 @@ function dict2CameraUi(dict) {
             snapshotUrl = addAuthParams('GET', snapshotUrl);
         }
     }
-    
-    $('#streamingSnapshotUrlEntry').val(snapshotUrl); markHideIfNull(!snapshotUrl, 'streamingSnapshotUrlEntry');
-    $('#streamingMjpgUrlEntry').val(mjpgUrl); markHideIfNull(!mjpgUrl, 'streamingMjpgUrlEntry');
-    $('#streamingEmbedUrlEntry').val(embedUrl); markHideIfNull(!embedUrl, 'streamingEmbedUrlEntry');
+
+    $('#streamingSnapshotUrlHtml').data('url', snapshotUrl); markHideIfNull(!snapshotUrl, 'streamingSnapshotUrlHtml');
+    $('#streamingMjpgUrlHtml').data('url', mjpgUrl); markHideIfNull(!mjpgUrl, 'streamingMjpgUrlHtml');
+    $('#streamingEmbedUrlHtml').data('url', embedUrl); markHideIfNull(!embedUrl, 'streamingEmbedUrlHtml');
 
     /* still images */
     $('#stillImagesEnabledSwitch')[0].checked = dict['still_images']; markHideIfNull('still_images', 'stillImagesEnabledSwitch');
@@ -3007,7 +3002,42 @@ function doAction(cameraId, action, callback) {
             callback();
         }
     });
-}    
+}
+
+function showUrl(url) {
+    var span = $('<span class="url-message-span"></span>');
+    span.html(url);
+    runAlertDialog(span);
+    
+    var range, selection;
+    if (window.getSelection && document.createRange) {
+        selection = window.getSelection();
+        range = document.createRange();
+        range.selectNodeContents(span[0]);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    else if (document.selection && document.body.createTextRange) {
+        range = document.body.createTextRange();
+        range.moveToElementText(span[0]);
+        range.select();
+    }    
+}
+
+function showSnapshotUrl() {
+    var url = $('#streamingSnapshotUrlHtml').data('url');
+    showUrl(url);
+}
+
+function showMjpgUrl() {
+    var url = $('#streamingMjpgUrlHtml').data('url');
+    showUrl(url);
+}
+
+function showEmbedUrl() {
+    var url = $('#streamingEmbedUrlHtml').data('url');
+    showUrl(url);
+}
 
 
     /* fetch & push */

diff --git a/motioneye/templates/main.html b/motioneye/templates/main.html
index cdc7a4b78f664176c239d65ac88fb546ef26b085..9a7cdf0ee569fdc8251ca8d5d415fbb11b739ae4 100644 (file)
--- a/motioneye/templates/main.html
+++ b/motioneye/templates/main.html
@@ -625,18 +625,30 @@
                         <td colspan="100"><div class="settings-item-separator"></div></td>
                     </tr>
                     <tr class="settings-item advanced-setting">
-                        <td class="settings-item-label"><span class="settings-item-label">Snapshot URL</span></td>
-                        <td class="settings-item-value"><input type="text" class="styled streaming camera-config" id="streamingSnapshotUrlEntry" readonly="readonly"></td>
+                        <td class="settings-item-label"><span class="settings-item-label">Useful URLs</span></td>
+                        <td class="settings-item-value">
+                            <div class="html styled streaming camera-config" id="streamingSnapshotUrlHtml">
+                                <a href="javascript:showSnapshotUrl()">Snapshot URL</a>
+                            </div>
+                        </td>
                         <td><span class="help-mark" title="a URL that provides a JPEG image with the most recent snapshot of the camera">?</span></td>
                     </tr>
-                    <tr class="settings-item advanced-setting" depends="videoStreamingEnabled">
-                        <td class="settings-item-label"><span class="settings-item-label">Streaming URL</span></td>
-                        <td class="settings-item-value"><input type="text" class="styled streaming camera-config" id="streamingMjpgUrlEntry" readonly="readonly"></td>
-                        <td><span class="help-mark" title="a URL that provides a MJPEG stream of the camera (there is no password protection for this URL!)">?</span></td>
+                    <tr class="settings-item advanced-setting">
+                        <td class="settings-item-label"></td>
+                        <td class="settings-item-value">
+                            <div class="html styled streaming camera-config" id="streamingMjpgUrlHtml">
+                                <a href="javascript:showMjpgUrl()">Streaming URL</a>
+                            </div>
+                        </td>
+                        <td><span class="help-mark" title="a URL that provides a MJPEG stream of the camera">?</span></td>
                     </tr>
                     <tr class="settings-item advanced-setting">
-                        <td class="settings-item-label"><span class="settings-item-label">Embed URL</span></td>
-                        <td class="settings-item-value"><input type="text" class="styled streaming camera-config" id="streamingEmbedUrlEntry" readonly="readonly"></td>
+                        <td class="settings-item-label"></td>
+                        <td class="settings-item-value">
+                            <div class="html styled streaming camera-config" id="streamingEmbedUrlHtml">
+                                <a href="javascript:showEmbedUrl()">Embed URL</a>
+                            </div>
+                        </td>
                         <td><span class="help-mark" title="a URL that provides a minimal HTML document containing the camera frame, ready to be embedded">?</span></td>
                     </tr>
                     {% for config in camera_sections.get('streaming', {}).get('configs', []) %}