Merge remote-tracking branch 'upstream/dev' into html5-video-playback

 - fix conflicts
 - use js video playback from upstream/dev but try to preload video to better support of remote cameras
 - some css tweaks

diff --cc motioneye/mediafiles.py
index 89d88f812ebb2ada901356be8fadc7579775344b,64c035c1ea9bddcec16e03073d3d620bdccbfcab..fc548cc02765107b11db7aea4b7c76f570f92111
--- 1/motioneye/mediafiles.py
--- 2/motioneye/mediafiles.py
+++ b/motioneye/mediafiles.py
@@@ -388,7 -388,7 +389,7 @@@ def list_media(camera_config, media_typ
  
              pipe.send({
                  'path': path,
-                 'mimeType': mimetypes.guess_type(path)[0] or 'video/mpeg',
 -                'mimeType': mimetypes.guess_type(path)[0],
++                'mimeType': mimetypes.guess_type(path)[0] if mimetypes.guess_type(path)[0] is not None else 'video/mpeg',
                  'momentStr': utils.pretty_date_time(datetime.datetime.fromtimestamp(timestamp)),
                  'momentStrShort': utils.pretty_date_time(datetime.datetime.fromtimestamp(timestamp), short=True),
                  'sizeStr': utils.pretty_size(size),

diff --cc motioneye/static/css/main.css
index f912b9e0b52610dc64eca8d37a679d456b1bf77e,ca1a69533b73ca4b360539eed396237e7e8038fd..04d472a1dae1215f3b534b53fb6f982cd168ffb0
--- 1/motioneye/static/css/main.css
--- 2/motioneye/static/css/main.css
+++ b/motioneye/static/css/main.css
@@@ -766,12 -766,11 +766,12 @@@ div.picture-dialog-content 
  }
  
  div.picture-dialog-prev-arrow,
- div.picture-dialog-next-arrow {
+ div.picture-dialog-next-arrow,
+ div.picture-dialog-play {
      position: absolute;
 -    top: 45%;
 +    top: 50%;
 +    margin-top: -1.5em;
      background-color: rgba(0, 0, 0, 0.6);
-     background-image: url(../img/arrows.svg);
      background-size: cover;
      width: 3em;
      height: 3em;

diff --cc motioneye/static/js/main.js
index 2341aa9d0c807893370a8367718a1fe87f78799f,6f706b2a4e065844cc09b2dfab3fd3c7c007b4e9..d1d5a3fb1fb97542cdb15b426cf1741a27745bb6
--- 1/motioneye/static/js/main.js
--- 2/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@@ -3450,52 -3450,47 +3450,48 @@@ function runLoginDialog(retry) 
  
  function runPictureDialog(entries, pos, mediaType) {
      var content = $('<div class="picture-dialog-content"></div>');
-     var video = videoEl = videoLoader = vProgressImg = null;
+     
      var img = $('<img class="picture-dialog-content">');
- 
-     if (mediaType == 'movie') {
-         video = $('<video class="picture-dialog-content" preload="metadata" style="display:none;" controls="controls" >');
-         if (video.get(0).canPlayType) {
-             content.append(video);
-             videoEl = video.get(0);
-             videoLoader = $('<img>');
-             vProgressImg = $('<div class="video-loading" style="display:none;">');
-             vProgressImg.on('click', function() {
-                 displayVideoError(videoEl.error);
-             });
-         }
-     }
      content.append(img);
-     
-     var prevArrow = $('<div class="picture-dialog-prev-arrow button mouse-effect" title="previous picture"></div>');
-     content.append(prevArrow);
-     
-     var nextArrow = $('<div class="picture-dialog-next-arrow button mouse-effect" title="next picture"></div>');
-     content.append(nextArrow);
-     
-     var progressImg = $('<img class="picture-dialog-progress" src="' + staticPath + 'img/modal-progress.gif">');
-     
-     function displayVideoError(e) {
-         var errMsg;
-         if (e == null)
-             return;
-         switch (e.code) {
-             case e.MEDIA_ERR_ABORTED:
-                 errMsg = 'Video download aborted';
+ 
+     var video_container = $('<video class="picture-dialog-content" controls="true">');
++    var video_loader = $('<img>');
+     video_container.on('error', function(err) {
 -      var msg = '';
 -
 -      /* Reference: https://html.spec.whatwg.org/multipage/embedded-content.html#error-codes */
 -      switch (err.target.error.code) {
 -        case err.target.error.MEDIA_ERR_ABORTED:
 -          msg = 'You aborted the video playback.';
 -          break;
 -        case err.target.error.MEDIA_ERR_NETWORK:
 -          msg = 'A network error occurred.';
 -          break;
 -        case err.target.error.MEDIA_ERR_DECODE:
 -          msg = 'Media decode error or unsupported media features.';
 -          break;
 -        case err.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
 -          msg = 'Media format unsupported or otherwise unavilable/unsuitable for playing.';
 -          break;
 -        default:
 -          msg = 'Unknown error occurred.'
 -      }
 -
 -      showErrorMessage('Error: ' + msg);
++        var msg = '';
++
++        /* Reference: https://html.spec.whatwg.org/multipage/embedded-content.html#error-codes */
++        switch (err.target.error.code) {
++            case err.target.error.MEDIA_ERR_ABORTED:
++                msg = 'You aborted the video playback.';
 +                break;
-             case e.MEDIA_ERR_NETWORK:
-                 errMsg = 'Video download failed - network connection error';
++            case err.target.error.MEDIA_ERR_NETWORK:
++                msg = 'A network error occurred.';
 +                break;
-             case e.MEDIA_ERR_DECODE:
-                 errMsg = 'Video cannot be played due to error while decoding - video file may be corrupt';
++            case err.target.error.MEDIA_ERR_DECODE:
++                msg = 'Media decode error or unsupported media features.';
++                break;
++            case err.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
++                msg = 'Media format unsupported or otherwise unavilable/unsuitable for playing.';
 +                break;
-             case e.MEDIA_ERR_SRC_NOT_SUPPORTED:
 +            default:
-                 errMsg = 'Video encoding format not compatable with this browser - try viewing on a different browser or another type of device';
++                msg = 'Unknown error occurred.'
 +        }
-         alert(errMsg);
-     }
-     
++
++        showErrorMessage('Error: ' + msg);
+     });
+     video_container.hide();
+     content.append(video_container);
+ 
+     var prevArrow = $('<div class="picture-dialog-prev-arrow button mouse-effect" title="previous picture"></div>');
+     content.append(prevArrow);
+ 
+     var playButton = $('<div class="picture-dialog-play button mouse-effect" title="play"></div>');
+     content.append(playButton);
+ 
+     var nextArrow = $('<div class="picture-dialog-next-arrow button mouse-effect" title="next picture"></div>');
+     content.append(nextArrow);
 -    var progressImg = $('<img class="picture-dialog-progress" src="' + staticPath + 'img/modal-progress.gif">');
++    var progressImg = $('<div class="picture-dialog-progress">');
+ 
      function updatePicture() {
          var entry = entries[pos];
  
@@@ -3510,40 -3505,45 +3506,47 @@@
          prevArrow.css('display', 'none');
          nextArrow.css('display', 'none');
  
-         if (videoEl != null) {
-             if (videoEl.currentTime != 0) {
-                 videoEl.pause();
-                 videoEl.currentTime = 0;
-             }
-             video.hide();
-             img.show();
-             videoLoader.removeAttr('src');
-             vProgressImg.removeClass('video-loaderror');
-         }
+         var playable = video_container.get(0).canPlayType(entry.mimeType) != ''
+         playButton.hide();
+         video_container.hide();
+         img.show();
  
-         updateModalDialogPosition();
          img.parent().append(progressImg);
-         progressImg.css('left', (img.parent().width() - progressImg.width()) / 2);
-         progressImg.css('top', (img.parent().height() - progressImg.height()) / 2);
+         updateModalDialogPosition();
 -        progressImg.css('left', (img.parent().width() - progressImg.width()) / 2);
 -        progressImg.css('top', (img.parent().height() - progressImg.height()) / 2);
          
-         function mediaLoaded(naturalWidth, naturalHeight) {
-             var aspectRatio = naturalWidth / naturalHeight;
+         img.attr('src', addAuthParams('GET', basePath + mediaType + '/' + entry.cameraId + '/preview' + entry.path));
+ 
+         if (playable) {
++            video_loader.attr('src', addAuthParams('GET', basePath + mediaType + '/' + entry.cameraId + '/playback' + entry.path));
+             playButton.on('click', function() {
 -                video_container.attr('src', addAuthParams('GET', basePath + mediaType + '/' + entry.cameraId + '/download' + entry.path));
++                video_container.attr('src', addAuthParams('GET', basePath + mediaType + '/' + entry.cameraId + '/playback' + entry.path));
+                 video_container.show();
+                 video_container.get(0).load();  /* Must call load() after changing <video> source */
+                 img.hide();
+                 playButton.hide();
+                 video_container.on('canplay', function() {
+                    video_container.get(0).play();  /* Automatically play the video once the browser is ready */
+                 });
+             });
+ 
+             playButton.show();
+         }
+ 
+         img.load(function () {
+             var aspectRatio = this.naturalWidth / this.naturalHeight;
              var sizeWidth = width * width / aspectRatio;
              var sizeHeight = height * aspectRatio * height;
 -            
 +
 +            img.width('').height('');
-             if (videoEl != null)
-                 video.width('').height('');
++            video_container.width('').height('');
 +
              if (sizeWidth < sizeHeight) {
                  img.width(width);
-                 if (videoEl != null)
-                     video.width(width);
 -                video_container.width(width);
++                video_container.width(width).height(parseInt(width/aspectRatio));
              }
              else {
                  img.height(height);
-                 if (videoEl != null)
-                     video.height(height);
 -                video_container.height(height);
++                video_container.width(parseInt(height*aspectRatio)).height(height);
              }
              updateModalDialogPosition();
              prevArrow.css('display', pos < entries.length - 1 ? '' : 'none');