updates for #379 and #383 - you will now see both an MP4 and a GIF icon. MP4 will show only if you are on desktop and using 264 branch

7 files changed, 73 insertions, 1 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 7812a173..7ddc4374 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -6,6 +6,29 @@
     font-style: normal;
 }
 
+
+.icon.gif-icon {
+  background-repeat: no-repeat;
+  background-position: 50%;
+  height: 100%;
+  /*background-image: url('../img/gif.svg');*/
+  background-image: url('../img/gif-anim.png');
+  background-size:contain;
+}
+
+
+.icon.mp4-icon {
+  background-repeat: no-repeat;
+  background-position: 50%;
+  height: 100%;
+  /*background-image: url('../img/gif.svg');*/
+  background-image: url('../img/mp4.svg');
+  background-size:contain;
+}
+
+
+
+
 .icon-super-speed:before {
     font-family: "fontawesome";
     content: "\f135";
diff --git a/www/img/gif-anim.png b/www/img/gif-anim.png
new file mode 100644
index 00000000..1f7e8e3f
--- /dev/null
+++ b/www/img/gif-anim.png
diff --git a/www/img/gif.svg b/www/img/gif.svg
new file mode 100644
index 00000000..86f92951
--- /dev/null
+++ b/www/img/gif.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024" viewBox="0 0 1024 1024">
+<g id="icomoon-ignore">
+</g>
+<path fill="#000" d="M256.219 320h543.562c53.467 0 96.219 42.963 96.219 95.961v224.078c0 53.009-43.079 95.961-96.219 95.961h-543.562c-53.467 0-96.219-42.963-96.219-95.961v-224.078c0-53.009 43.079-95.961 96.219-95.961zM255.826 352c-35.25 0-63.826 28.806-63.826 63.745v224.511c0 35.205 28.875 63.745 63.826 63.745h544.348c35.25 0 63.826-28.806 63.826-63.745v-224.511c0-35.205-28.875-63.745-63.826-63.745h-544.348zM416 544v64h-64.006c-17.795 0-31.994-14.324-31.994-31.994v-96.012c0-17.795 14.324-31.994 31.994-31.994h96.006v-32h-95.844c-35.432 0-64.156 28.37-64.156 64.189v95.621c0 35.451 28.605 64.189 64.156 64.189h95.844v-128h-96v32h64zM512 448v160h-32v32h96v-32h-32v-160h32v-32h-96v32h32zM640 512v-64h128v-32h-160v224h32v-96h96v-32h-96z"></path>
+</svg>
+
+
diff --git a/www/img/mp4.svg b/www/img/mp4.svg
new file mode 100644
index 00000000..d26f884a
--- /dev/null
+++ b/www/img/mp4.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><g><g><path d="M521.3,393.5h-85.2v85.2h85.2c25.6,0,42.6-17,42.6-42.6S546.9,393.5,521.3,393.5z"/><path d="M862.2,223H137.8C65.4,223,10,278.4,10,350.9v298.3C10,721.6,65.4,777,137.8,777h724.3c72.4,0,127.8-55.4,127.8-127.8V350.9C990,278.4,934.6,223,862.2,223z M350.9,649.1h-42.6v-213l-42.6,85.2h-21.3H223l-42.6-85.2v213h-42.6V350.9h21.3h21.3l63.9,127.8l63.9-127.8h21.3h21.3V649.1z M521.3,521.3h-85.2v127.8h-42.6v-213v-85.2h127.8c46.9,0,85.2,38.3,85.2,85.2C606.5,483,568.2,521.3,521.3,521.3z M862.2,563.9h-42.6v85.2H777v-85.2H649.1v-42.6L777,350.9h42.6v170.4h42.6V563.9z"/><polygon points="777,521.3 777,414.8 700.3,521.3 "/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></g>
+</svg>
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index dc52846e..830cc8d9 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -399,6 +399,13 @@ angular.module('zmApp.controllers')
 
                             }
 
+                            if (myevents[i].Event.imageMode == 'path')
+                            //if (1)
+                                myevents[i].Event.videoPath = myevents[i].Event.baseURL + "/events/" + myevents[i].Event.relativePath + myevents[i].Event.DefaultVideo;
+                            else
+                                myevents[i].Event.videoPath = myevents[i].Event.baseURL + "/index.php?view=view_video&eid=" + myevents[i].Event.Id;
+
+
                             if (idfound)
                             {
                                 $scope.events.push(myevents[i]);
@@ -526,6 +533,16 @@ angular.module('zmApp.controllers')
 
     }
 
+    $scope.mp4warning = function()
+    {
+          $ionicPopup.alert(
+            {
+                title: $translate.instant('kNote'),
+                template: "{{'kVideoMp4Warning' | translate }}"
+            });
+    };
+    
+
     $scope.showImage = function(p, r, f, fid, e, imode, id, parray, ndx)
     {
         var img;
@@ -2121,6 +2138,15 @@ angular.module('zmApp.controllers')
                         myevents[i].Event.BasePath = computeBasePath(myevents[i]);
                         myevents[i].Event.relativePath = computeRelativePath(myevents[i]);
                         myevents[i].Event.height = eventsListDetailsHeight;
+
+
+                        if (myevents[i].Event.imageMode == 'path')
+                        //if (1)
+                            myevents[i].Event.videoPath = myevents[i].Event.baseURL + "/events/" + myevents[i].Event.relativePath + myevents[i].Event.DefaultVideo;
+                        else
+                            myevents[i].Event.videoPath = myevents[i].Event.baseURL + "/index.php?view=view_video&eid=" + myevents[i].Event.Id;
+
+
                         if (idfound) $scope.events.push(myevents[i]);
                     }
 
diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json
index 008d5e06..cb302ed6 100644
--- a/www/lang/locale-en.json
+++ b/www/lang/locale-en.json
@@ -211,6 +211,7 @@
     "kNoMonitors"                :"No monitors to display",
     "kNoMoreEvents"              :"no more events",
     "kNormalPlay"                :"normal play",
+    "kNote"                      : "Note",
     "kNow"                       :"now",
     "kOff"                       :"off",
     "kOn"                        :"on",
@@ -345,6 +346,7 @@
     "kVideoError"                : "Video not playable.",
     "kVideoErrorMobile"          : "Video not playable. Try enabling 'force image path for events' in Dev Settings. The format may also be incompatible with a mobile system view",
     "kVideoLoading"              : "Loading Video",
+    "kVideoMp4Warning"           : "It is currently not possible to know when video is fully downloaded. Please track file size of download.",
     "kWake"                      :"Wake",
     "kWarningLargeTimeline"      :"A large value can affect timeline performance. If you find timeline performance slow, try reducing the value to 200 and work your way up from there.",
     "kWeek"                      :"Week",
diff --git a/www/templates/events.html b/www/templates/events.html
index cfb6fa0d..849d9e3e 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -64,9 +64,13 @@
                             <div class="item-text-wrap">
                                 <i class="ion-ios-videocam-outline"></i>
                                 <b>{{event.Event.MonitorName}}</b> ({{event.Event.Id}}) &nbsp; &nbsp;
-                                <button ng-if="gifshotSupported" class="button button-small button-outline icon ion-android-download" ng-click="  permissionsDownload(event)"> 
+                                <button ng-if="gifshotSupported" class="button button-small button-clear icon gif-icon" ng-click="permissionsDownload(event)"> 
                             </button>
 
+                          
+
+                            <a ng-if="event.Event.DefaultVideo!='' && $root.platformOS=='desktop' " class="button button-clear button-small icon mp4-icon" href="{{event.Event.videoPath}}" download="{{event.Event.Id}}-video.mp4" ng-click="mp4warning()"></a>
+
                             </div>
                             <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
                             <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;