added a download button to each media browser entry

diff --git a/doc/todo.txt b/doc/todo.txt
index ddcf181a6575cb80f344731f91d331b03cfa92c4..ca23fecef7ae5b09009c7cb1d9ddc6b5c8436747 100644 (file)
--- a/doc/todo.txt
+++ b/doc/todo.txt
@@ -1,4 +1,4 @@
--> fix remote picture previewer
+-> add support for picture resizing
 -> add a download option in media list
 -> add a previewer for movies
 -> make camera frames positions configurable

diff --git a/src/handlers.py b/src/handlers.py
index eb62cb28adba017cdc306e200c7dcc76dc89163b..fb223a0ecfc3f8854abc908d63fadfba942f57f6 100644 (file)
--- a/src/handlers.py
+++ b/src/handlers.py
@@ -613,7 +613,7 @@ class PictureHandler(BaseHandler):
         
         camera_config = config.get_camera(camera_id)
         if camera_config['@proto'] != 'v4l2':
-            def on_response(remote_list):
+            def on_response(response):
                 camera_url = remote.make_remote_camera_url(
                         camera_config.get('@host'),
                         camera_config.get('@port'),
@@ -621,19 +621,26 @@ class PictureHandler(BaseHandler):
                 
                 camera_full_url = camera_config['@proto'] + '://' + camera_url
                 
-                if remote_list is None:
-                    return self.finish_json({'error': 'Failed to get picture list for %(url)s.' % {
+                if response is None:
+                    return self.finish_json({'error': 'Failed to download picture from %(url)s.' % {
                             'url': camera_full_url}})
 
-                self.finish_json(remote_list)
-            
-            remote.download_picture(
+                pretty_filename = os.path.basename(filename) # no camera name available w/o additional request
+                self.set_header('Content-Type', 'image/jpeg')
+                self.set_header('Content-Disposition', 'attachment; filename=' + pretty_filename + ';')
+                
+                self.finish(response)
+
+            remote.get_media(
                     camera_config.get('@host'),
                     camera_config.get('@port'),
                     camera_config.get('@username'),
                     camera_config.get('@password'),
-                    camera_config.get('@remote_camera_id'), on_response)
-        
+                    camera_config.get('@remote_camera_id'),
+                    on_response,
+                    filename=filename,
+                    media_type='picture')
+            
         else:
             content = mediafiles.get_media_content(camera_config, filename)
             
@@ -663,22 +670,23 @@ class PictureHandler(BaseHandler):
                 camera_full_url = camera_config['@proto'] + '://' + camera_url
                 
                 if response is None:
-                    return self.finish_json({'error': 'Failed to get picture list for %(url)s.' % {
+                    return self.finish_json({'error': 'Failed to get picture preview for %(url)s.' % {
                             'url': camera_full_url}})
 
                 self.set_header('Content-Type', 'image/jpeg')
                 self.finish(response)
             
-            remote.preview_picture(
+            remote.get_media(
                     camera_config.get('@host'),
                     camera_config.get('@port'),
                     camera_config.get('@username'),
                     camera_config.get('@password'),
                     camera_config.get('@remote_camera_id'),
-                    filename,
+                    on_response,
+                    filename=filename,
+                    media_type='picture',
                     width=self.get_argument('width', None),
-                    height=self.get_argument('height', None),
-                    callback=on_response)
+                    height=self.get_argument('height', None))
         
         else:
             content = mediafiles.get_media_content(camera_config, filename)

diff --git a/src/remote.py b/src/remote.py
index 21299da9aedc467970c5d4d64af4f2458ac5b858..7766293634d088e1a4e16e29adbe172c12774b5d 100644 (file)
--- a/src/remote.py
+++ b/src/remote.py
@@ -243,19 +243,22 @@ def list_pictures(host, port, username, password, camera_id, callback):
     http_client.fetch(request, on_response)
 
 
-def preview_picture(host, port, username, password, camera_id, filename, width, height, callback):
-    logging.debug('getting preview for file %(filename)s of remote camera %(id)s on %(host)s:%(port)s' % {
+def get_media(host, port, username, password, camera_id, callback, filename, media_type, width=None, height=None):
+    logging.debug('getting file %(filename)s of remote camera %(id)s on %(host)s:%(port)s' % {
             'filename': filename,
             'id': camera_id,
             'host': host,
             'port': port})
     
-    uri = '/picture/%(id)s/preview/%(filename)s/?' % {
+    uri = '/%(media_type)s/%(id)s/%(op)s/%(filename)s?' % {
+            'media_type': media_type,
+            'op': 'preview' if (width or height) else 'download',
             'id': camera_id,
             'filename': filename}
     
     if width:
         uri += 'width=' + str(width)
+        
     if height:
         uri += 'height=' + str(height)
     
@@ -263,7 +266,7 @@ def preview_picture(host, port, username, password, camera_id, filename, width,
     
     def on_response(response):
         if response.error:
-            logging.error('failed to get preview for file %(filename)s of remote camera %(id)s on %(host)s:%(port)s: %(msg)s' % {
+            logging.error('failed to get media file %(filename)s of remote camera %(id)s on %(host)s:%(port)s: %(msg)s' % {
                     'filename': filename,
                     'id': camera_id,
                     'host': host,

diff --git a/static/css/main.css b/static/css/main.css
index 6c44ffb29c3b490cb914edaca32c002572a62ded..d90e787797ab9e8d0fc931c13b9195d1748ec74b 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -404,6 +404,27 @@ div.media-list-entry-moment {
     white-space: nowrap;
 }
 
+div.media-list-download-button {
+    float: right;
+    height: 1.5em;
+    line-height: 1.5em;
+    text-align: center;
+    margin: 1.2em 0.5em;
+    padding: 0px 0.5em;
+    color: white;
+    background-color: #317CAD;
+    border-radius: 3px;
+    transition: all 0.1s linear;
+}
+
+div.media-list-download-button:HOVER {
+    background-color: #3498db;
+}
+
+div.media-list-download-button:ACTIVE {
+    background-color: #317CAD;
+}
+
 div.picture-dialog-content {
     position: relative;
 }

diff --git a/static/js/main.js b/static/js/main.js
index cb6d00da7101a3b217d1a15f168e4d6f34d66f8e..e58c674fd82577ee8f428c4484fa1e581d87795b 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1393,11 +1393,21 @@ function runMediaDialog(cameraId, mediaType) {
                 var previewImg = $('<img class="media-list-preview" src="/' + mediaType + '/' + cameraId + '/preview' + entry.path + '"/>');
                 entryDiv.append(previewImg);
                 
+                var downloadButton = $('<div class="media-list-download-button button">download</div>');
+                entryDiv.append(downloadButton);
+                
                 var nameDiv = $('<div class="media-list-entry-name">' + entry.name + '</div>');
                 entryDiv.append(nameDiv);
                 
                 var momentDiv = $('<div class="media-list-entry-moment">' + entry.momentStr + '</div>');
                 entryDiv.append(momentDiv);
+                
+                downloadButton.click(function () {
+                    window.location.href = '/picture/' + cameraId + '/download' + entry.path;
+                    
+                    return false;
+                });
+                
                 entryDiv.click(function () {
                     if (mediaType === 'picture') {
                         runPictureDialog(entries, pos);
@@ -1452,7 +1462,7 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
                     '<span class="camera-name"></span>' +
                     '<div class="camera-buttons">' +
                         '<div class="button camera-button mouse-effect media-pictures" title="pictures"></div>' +
-                        '<div class="button camera-button mouse-effect media-movies" title="movies"></div>' +
+//                        '<div class="button camera-button mouse-effect media-movies" title="movies"></div>' +
                         '<div class="button camera-button mouse-effect configure" title="configure"></div>' +
 //                        '<div class="button camera-button mouse-effect full-screen" title="full screen"></div>' +
                     '</div>' +