Address @PaulAnnekov code review comments.

 - Remove separate needless <source> tag.
 - Add error handling for video playback.
 - Pass mimetype from backend to Javascript.

diff --git a/motioneye/mediafiles.py b/motioneye/mediafiles.py
index 398b62bf6e2339ad96979b4abb978813b0de4f41..6890f1ee6b9fd2d96c72b3ad099382c01a6e9293 100644 (file)
--- a/motioneye/mediafiles.py
+++ b/motioneye/mediafiles.py
@@ -21,6 +21,7 @@ import fcntl
 import functools
 import hashlib
 import logging
+import mimetypes
 import multiprocessing
 import os.path
 import pipes
@@ -291,6 +292,7 @@ def list_media(camera_config, media_type, callback, prefix=None):
             
             pipe.send({
                 'path': path,
+                'mimeType': mimetypes.guess_type(path)[0],
                 '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 --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index fae95cc54371a1e005769e3d298a401e228ea104..98fd6ea7c27dbff45225fd532b7578846c9a6c3b 100644 (file)
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -2920,9 +2920,10 @@ function runPictureDialog(entries, pos, mediaType) {
     var img = $('<img class="picture-dialog-content">');
     content.append(img);
 
-    var video_container = $('<video class="picture-dialog-content" controls="true">');
-    var video_source = $('<source type="video/mp4">')
-    video_container.append(video_source);
+    var video_container = $('<video class="picture-dialog-content" controls="true" type="video/mp4">');
+    video_container.on('error', function(err) {
+      showErrorMessage('Error: Unable to play movie.')
+    });
     video_container.hide()
     content.append(video_container);
  
@@ -2951,8 +2952,8 @@ function runPictureDialog(entries, pos, mediaType) {
         nextArrow.css('display', 'none');
 
         /* Construct a likely mime-type with 'video/' and the file extension, then see if the 
-           browser can play it */       
-        var playable = video_container.get(0).canPlayType('video/' + entry.path.split('.').pop()) != ''
+           browser can play it */
+        var playable = video_container.get(0).canPlayType(entry.mimeType) != ''
         playButton.hide();
         video_container.hide();
         img.show();
@@ -2966,7 +2967,7 @@ function runPictureDialog(entries, pos, mediaType) {
 
         if (playable) {
             playButton.on('click', function() {
-                video_source.attr('src', addAuthParams('GET', basePath + mediaType + '/' + entry.cameraId + '/download' + entry.path));
+                video_container.attr('src', addAuthParams('GET', basePath + mediaType + '/' + entry.cameraId + '/download' + entry.path));
                 video_container.show();
                 video_container.get(0).load();  /* Must call load() after changing <video> source */
                 img.hide();
@@ -3657,6 +3658,7 @@ function runMediaDialog(cameraId, mediaType) {
                 entries.forEach(function (entry) {
                     var media = mediaListByName[entry.name];
                     if (media) {
+                        entry.mimeType = media.mimeType;
                         entry.momentStr = media.momentStr;
                         entry.momentStrShort = media.momentStrShort;
                         entry.sizeStr = media.sizeStr;