added video support in view full screen footage modal #60

3 files changed, 267 insertions, 291 deletions

diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 2ba1cf7d..a7cefade 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -15,11 +15,11 @@ angular.module('zmApp.controllers')
         //---------------------------------------------------
         // Controller main
         //---------------------------------------------------
-        
-       
+
+
         var loginData = ZMDataModel.getLogin();
-        
-        
+
+
 
         $scope.hours = [];
         $scope.days = [];
@@ -90,9 +90,8 @@ angular.module('zmApp.controllers')
         $scope.eventCommands = eventCommands;
         $scope.loginData = ZMDataModel.getLogin();
         $scope.playbackURL = $scope.loginData.url;
-        if ($rootScope.platformOS == "unknown")
-        {
-           $scope.playbackURL = zm.desktopUrl;
+        if ($rootScope.platformOS == "unknown") {
+            $scope.playbackURL = zm.desktopUrl;
         }
 
         $scope.mycarousel = {
@@ -119,19 +118,17 @@ angular.module('zmApp.controllers')
 
         console.log("***CALLING EVENTS FACTORY");
         var lData = ZMDataModel.getLogin();
-        
-        var stackState  = $ionicHistory.backTitle();
-        
+
+        var stackState = $ionicHistory.backTitle();
+
         // If you came from Monitors, disregard hidden monitors in montage
-        if (lData.persistMontageOrder && stackState != "Monitors")
-        {
-            var tempMon = message;    
-            $scope.monitors = ZMDataModel.applyMontageMonitorPrefs (tempMon, 2)[0];
-        }
-        else    
+        if (lData.persistMontageOrder && stackState != "Monitors") {
+            var tempMon = message;
+            $scope.monitors = ZMDataModel.applyMontageMonitorPrefs(tempMon, 2)[0];
+        } else
             $scope.monitors = message;
-       // console.log ("********** GOT MONITORS " + JSON.stringify($scope.monitors));
-        
+        // console.log ("********** GOT MONITORS " + JSON.stringify($scope.monitors));
+
         //$scope.monitors = message;
 
         // I am converting monitor ID to monitor Name
@@ -162,15 +159,12 @@ angular.module('zmApp.controllers')
                         ZMDataModel.zmDebug("EventCtrl: success, got " + myevents.length + " events");
                         var loginData = ZMDataModel.getLogin();
                         for (var i = 0; i < myevents.length; i++) {
-                            
+
                             var idfound = true;
-                            if (loginData.persistMontageOrder)
-                            {
+                            if (loginData.persistMontageOrder) {
                                 idfound = false;
-                                for (var ii=0; ii < $scope.monitors.length; ii++)
-                                {
-                                     if ($scope.monitors[ii].Monitor.Id == myevents[i].Event.MonitorId)
-                                    {
+                                for (var ii = 0; ii < $scope.monitors.length; ii++) {
+                                    if ($scope.monitors[ii].Monitor.Id == myevents[i].Event.MonitorId) {
 
                                         //console.log ( $scope.monitors[ii].Monitor.Id + " MATCHES " + myevents[i].Event.MonitorId);
                                         idfound = true;
@@ -178,8 +172,8 @@ angular.module('zmApp.controllers')
                                     }
                                 }
                             }
-                            
-                            
+
+
                             myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId);
                             myevents[i].Event.ShowScrub = false;
                             myevents[i].Event.height = zm.eventsListDetailsHeight;
@@ -211,18 +205,16 @@ angular.module('zmApp.controllers')
                                 hh + "/" +
                                 min + "/" +
                                 sec + "/";
-                        
-                            if (idfound)
-                            {
+
+                            if (idfound) {
                                 $scope.events.push(myevents[i]);
-                            }
-                            else{
+                            } else {
                                 //console.log ("Skipping Event MID = " + myevents[i].Event.MonitorId);
                             }
-                        
+
                         } //for
 
-                        
+
                         //$scope.events = myevents;
                         // we only need to stop the template from loading when the list is empty
                         // so this can be false once we have _some_ content
@@ -284,22 +276,28 @@ angular.module('zmApp.controllers')
             // if you are in the same mid event page $state.go won't work
             $state.go("events", {
                 "id": monitorId
-            }, { reload: true });
+            }, {
+                reload: true
+            });
+        };
+
+        //----------------------------------------------------------------
+        // Alarm notification handling
+        //----------------------------------------------------------------
+        $scope.handleAlarms = function () {
+            $rootScope.isAlarm = !$rootScope.isAlarm;
+            if (!$rootScope.isAlarm) {
+                $rootScope.alarmCount = "0";
+                $ionicHistory.nextViewOptions({
+                    disableBack: true
+                });
+                $state.go("events", {
+                    "id": 0
+                }, {
+                    reload: true
+                });
+            }
         };
-        
-    //----------------------------------------------------------------
-    // Alarm notification handling
-    //----------------------------------------------------------------
-    $scope.handleAlarms = function()
-    {
-        $rootScope.isAlarm=!$rootScope.isAlarm;
-        if (!$rootScope.isAlarm)
-        {
-            $rootScope.alarmCount="0";
-            $ionicHistory.nextViewOptions({disableBack: true});		
-            $state.go("events", {"id": 0}, { reload: true });
-        }
-    };
 
         //--------------------------------------------------------------------------
         // Takes care of deleting individual events
@@ -389,19 +387,16 @@ angular.module('zmApp.controllers')
                     $scope.hours = [];
                     var p = data.results;
                     for (var key in data.results) {
-                        
-                        
-                        
+
+
+
                         if (p.hasOwnProperty(key)) {
-                            
+
                             var idfound = true;
-                            if (ld.persistMontageOrder)
-                            {
+                            if (ld.persistMontageOrder) {
                                 idfound = false;
-                                for (var ii=0; ii<$scope.monitors.length; ii++)
-                                {
-                                    if ($scope.monitors[ii].Monitor.Id == key)
-                                    {
+                                for (var ii = 0; ii < $scope.monitors.length; ii++) {
+                                    if ($scope.monitors[ii].Monitor.Id == key) {
                                         idfound = true;
                                         break;
                                     }
@@ -409,11 +404,11 @@ angular.module('zmApp.controllers')
                             }
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                             if (idfound)
-                            $scope.hours.push({
-                                monitor: ZMDataModel.getMonitorName(key),
-                                events: p[key],
-                                mid: key
-                            });
+                                $scope.hours.push({
+                                    monitor: ZMDataModel.getMonitorName(key),
+                                    events: p[key],
+                                    mid: key
+                                });
 
                         }
                     }
@@ -429,13 +424,10 @@ angular.module('zmApp.controllers')
                     for (var key in data.results) {
                         if (p.hasOwnProperty(key)) {
                             var idfound = true;
-                            if (ld.persistMontageOrder)
-                            {
+                            if (ld.persistMontageOrder) {
                                 idfound = false;
-                                for (var ii=0; ii<$scope.monitors.length; ii++)
-                                {
-                                    if ($scope.monitors[ii].Monitor.Id == key)
-                                    {
+                                for (var ii = 0; ii < $scope.monitors.length; ii++) {
+                                    if ($scope.monitors[ii].Monitor.Id == key) {
                                         idfound = true;
                                         break;
                                     }
@@ -444,7 +436,7 @@ angular.module('zmApp.controllers')
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                             if (idfound)
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
-                            $scope.days.push({
+                                $scope.days.push({
                                 monitor: ZMDataModel.getMonitorName(key),
                                 events: p[key],
                                 mid: key
@@ -464,15 +456,12 @@ angular.module('zmApp.controllers')
                     var p = data.results;
                     for (var key in data.results) {
                         if (p.hasOwnProperty(key)) {
-                            
+
                             var idfound = true;
-                            if (ld.persistMontageOrder)
-                            {
+                            if (ld.persistMontageOrder) {
                                 idfound = false;
-                                for (var ii=0; ii<$scope.monitors.length; ii++)
-                                {
-                                    if ($scope.monitors[ii].Monitor.Id == key)
-                                    {
+                                for (var ii = 0; ii < $scope.monitors.length; ii++) {
+                                    if ($scope.monitors[ii].Monitor.Id == key) {
                                         idfound = true;
                                         break;
                                     }
@@ -481,7 +470,7 @@ angular.module('zmApp.controllers')
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                             if (idfound)
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
-                            $scope.weeks.push({
+                                $scope.weeks.push({
                                 monitor: ZMDataModel.getMonitorName(key),
                                 events: p[key],
                                 mid: key
@@ -500,16 +489,13 @@ angular.module('zmApp.controllers')
                     var p = data.results;
                     for (var key in data.results) {
                         if (p.hasOwnProperty(key)) {
-                            
+
                             var idfound = true;
                             var ld = ZMDataModel.getLogin();
-                            if (ld.persistMontageOrder)
-                            {
+                            if (ld.persistMontageOrder) {
                                 idfound = false;
-                                for (var ii=0; ii<$scope.monitors.length; ii++)
-                                {
-                                    if ($scope.monitors[ii].Monitor.Id == key)
-                                    {
+                                for (var ii = 0; ii < $scope.monitors.length; ii++) {
+                                    if ($scope.monitors[ii].Monitor.Id == key) {
                                         idfound = true;
                                         break;
                                     }
@@ -518,7 +504,7 @@ angular.module('zmApp.controllers')
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                             if (idfound)
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
-                            $scope.months.push({
+                                $scope.months.push({
                                 monitor: ZMDataModel.getMonitorName(key),
                                 events: p[key],
                                 mid: key
@@ -706,30 +692,33 @@ angular.module('zmApp.controllers')
                     });
 
                 }
-                
-                
-                
+
+
+
                 // now get event details to show alarm frames
                 var loginData = ZMDataModel.getLogin();
-                
-                
+
+
                 // grab video details
-                  event.Event.video={};
-                  var videoURL = loginData.url+"/events/"+event.Event.relativePath+event.Event.DefaultVideo;
-                
-                console.log ("************** VIDEO IS " + videoURL);
-                  event.Event.video.config = {
-				sources: [
-					{src:
-                     $sce.trustAsResourceUrl(videoURL), type: "video/mp4"}
-					
+                event.Event.video = {};
+                var videoURL = loginData.url + "/events/" + event.Event.relativePath + event.Event.DefaultVideo;
+
+                console.log("************** VIDEO IS " + videoURL);
+                event.Event.video.config = {
+                    autoPlay: true,
+                    sources: [
+                        {
+                            src: $sce.trustAsResourceUrl(videoURL),
+                            type: "video/mp4"
+                        }
+
 				],
-				
-            theme: "lib/videogular-themes-default/videogular.css",
-				
-			};
-                
-                
+
+                    theme: "lib/videogular-themes-default/videogular.css",
+
+                };
+
+
                 var myurl = loginData.apiurl + '/events/' + event.Event.Id + ".json";
                 ZMDataModel.zmLog("API for event details" + myurl);
                 $http.get(myurl)
@@ -737,7 +726,7 @@ angular.module('zmApp.controllers')
                         $scope.FrameArray = data.event.Frame;
                         //  $scope.slider_options.scale=[];
                         $scope.slider_options.scale = [];
-                    
+
                         var i;
                         for (i = 0; i < data.event.Frame.length; i++) {
                             if (data.event.Frame[i].Type == "Alarm") {
@@ -857,26 +846,25 @@ angular.module('zmApp.controllers')
         $scope.$on('$ionicView.enter', function () {
             console.log("**VIEW ** Events Ctrl Entered");
             ZMDataModel.setAwake(false);
-            
-            EventServer.sendMessage('push', 
-                                            {
-                                             type:'badge',
-                                             badge:0, 
-                                            });
-            
-            
+
+            EventServer.sendMessage('push', {
+                type: 'badge',
+                badge: 0,
+            });
+
+
             //reset badge count
-             if (window.cordova && window.cordova.plugins.notification) {
-             $cordovaBadge.set(0).then(function() {
-                                // You have permission, badge set.
-                              }, function(err) {
-                                ZMDataModel.zmDebug("zmNinja does not have badge permissions. Please check your phone notification settings");
-                                // You do not have permission.
-                              });
-            
-            $cordovaLocalNotification.clearAll();
-             }
-            
+            if (window.cordova && window.cordova.plugins.notification) {
+                $cordovaBadge.set(0).then(function () {
+                    // You have permission, badge set.
+                }, function (err) {
+                    ZMDataModel.zmDebug("zmNinja does not have badge permissions. Please check your phone notification settings");
+                    // You do not have permission.
+                });
+
+                $cordovaLocalNotification.clearAll();
+            }
+
         });
 
         $scope.$on('$ionicView.leave', function () {
@@ -1127,26 +1115,52 @@ angular.module('zmApp.controllers')
         //earlier won't work
         //--------------------------------------------------------
 
-        $scope.openModal = function (eid, ename, edur, eframes, basepath, relativepath) {
+        $scope.openModal = function (eid, ename, edur, eframes, basepath, relativepath, event) {
             ZMDataModel.zmDebug("EventCtrl: Open Modal with Base path " + relativepath);
             $scope.eventName = ename;
             $scope.eventId = eid;
             $scope.eFramesNum = eframes;
             $scope.eventDur = Math.round(edur);
             $scope.loginData = ZMDataModel.getLogin();
-            
+            $scope.defaultVideo = event.Event.DefaultVideo;
+
+
+            event.Event.video = {};
+            var videoURL = $scope.loginData.url + "/events/" + event.Event.relativePath + event.Event.DefaultVideo;
+
+            console.log("************** VIDEO IS " + videoURL);
+            event.Event.video.config = {
+                autoPlay: true,
+                sources: [
+                    {
+                        src: $sce.trustAsResourceUrl(videoURL),
+                        type: "video/mp4"
+                    }
+
+				],
+
+                theme: "lib/videogular-themes-default/videogular.css",
+
+            };
+
+            $scope.videoObject = event.Event.video;
+
             $scope.playbackURL = $scope.loginData.url;
-        if ($rootScope.platformOS == "unknown")
-        {
-           $scope.playbackURL = zm.desktopUrl;
-        }
-            
-            
-            
+            if ($rootScope.platformOS == "unknown") {
+                $scope.playbackURL = zm.desktopUrl;
+            }
+
+
+
+
+
             $scope.eventBasePath = basepath;
             $scope.relativePath = relativepath;
             $rootScope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
 
+
+
+
             $scope.slider_modal_options = {
                 from: 1,
                 to: eframes,
@@ -1210,11 +1224,11 @@ angular.module('zmApp.controllers')
                     $scope.FrameArray = data.event.Frame;
                     //  $scope.slider_options.scale=[];
                     $scope.slider_modal_options.scale = [];
-                
+
                     var i;
                     for (i = 0; i < data.event.Frame.length; i++) {
                         if (data.event.Frame[i].Type == "Alarm") {
-                      
+
                             $scope.slider_modal_options.scale.push({
                                 val: i + 1,
                                 label: ' '
@@ -1370,19 +1384,16 @@ angular.module('zmApp.controllers')
                         var loginData = ZMDataModel.getLogin();
                         console.log("Got new page of events with Page=" + eventsPage);
                         var myevents = data;
-                
+
                         for (var i = 0; i < myevents.length; i++) {
-                            
+
                             var idfound = true;
                             var ld = ZMDataModel.getLogin();
-                            
-                            if (ld.persistMontageOrder)
-                            {
+
+                            if (ld.persistMontageOrder) {
                                 idfound = false;
-                                for (var ii=0; ii < $scope.monitors.length; ii++)
-                                {
-                                     if ($scope.monitors[ii].Monitor.Id == myevents[i].Event.MonitorId)
-                                    {
+                                for (var ii = 0; ii < $scope.monitors.length; ii++) {
+                                    if ($scope.monitors[ii].Monitor.Id == myevents[i].Event.MonitorId) {
 
                                         //console.log ( $scope.monitors[ii].Monitor.Id + " MATCHES " + myevents[i].Event.MonitorId);
                                         idfound = true;
@@ -1390,7 +1401,7 @@ angular.module('zmApp.controllers')
                                     }
                                 }
                             }
-                            
+
 
                             myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId);
                             // now construct base path
@@ -1421,9 +1432,9 @@ angular.module('zmApp.controllers')
                                 min + "/" +
                                 sec + "/";
                             myevents[i].Event.height = zm.eventsListDetailsHeight;
-                        if (idfound) $scope.events = $scope.events.concat(myevents[i]);
+                            if (idfound) $scope.events = $scope.events.concat(myevents[i]);
                         }
-                        
+
                         console.log("Got new page of events");
                         moreEvents = true;
                         $scope.$broadcast('scroll.infiniteScrollComplete');
@@ -1490,20 +1501,17 @@ angular.module('zmApp.controllers')
         function doRefresh() {
             console.log("***Pull to Refresh");
 
-            ZMDataModel.zmDebug ("Reloading monitors");
+            ZMDataModel.zmDebug("Reloading monitors");
             var refresh = ZMDataModel.getMonitors(1);
             refresh.then(function (data) {
-                
-                   var ld = ZMDataModel.getLogin();
-                   if (ld.persistMontageOrder)
-                   {
-                        var tempMon = data;    
-                        $scope.monitors = ZMDataModel.applyMontageMonitorPrefs (tempMon, 2)[0];
-                   }
-                   else
-                   {
+
+                var ld = ZMDataModel.getLogin();
+                if (ld.persistMontageOrder) {
+                    var tempMon = data;
+                    $scope.monitors = ZMDataModel.applyMontageMonitorPrefs(tempMon, 2)[0];
+                } else {
                     $scope.monitors = data;
-                   }
+                }
 
 
                 $scope.events = [];
@@ -1521,18 +1529,15 @@ angular.module('zmApp.controllers')
                             //var events = [];
                             var myevents = data;
                             for (var i = 0; i < myevents.length; i++) {
-                                
-                                 var idfound = true;
-                                
+
+                                var idfound = true;
+
                                 var ld = ZMDataModel.getLogin();
-                                if (ld.persistMontageOrder)
-                                {
+                                if (ld.persistMontageOrder) {
                                     idfound = false;
-                            
-                                    for (var ii=0; ii < $scope.monitors.length; ii++)
-                                    {
-                                         if ($scope.monitors[ii].Monitor.Id == myevents[i].Event.MonitorId)
-                                        {
+
+                                    for (var ii = 0; ii < $scope.monitors.length; ii++) {
+                                        if ($scope.monitors[ii].Monitor.Id == myevents[i].Event.MonitorId) {
 
                                             //console.log ( $scope.monitors[ii].Monitor.Id + " MATCHES " + myevents[i].Event.MonitorId);
                                             idfound = true;
@@ -1575,14 +1580,13 @@ angular.module('zmApp.controllers')
 
                                 myevents[i].Event.ShowScrub = false;
                                 myevents[i].Event.height = zm.eventsListDetailsHeight;
-                                
-                                if (idfound)
-                                {
+
+                                if (idfound) {
                                     //console.log ("***********************PUSHING RELOAD EVENT " + JSON.stringify(myevents));
                                     $scope.events.push(myevents[i]);
                                 }
                             }
-                           // $scope.events = myevents;
+                            // $scope.events = myevents;
                             loadMore();
                         });
 
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 5b96c65f..f0d32d52 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -1,33 +1,42 @@
 <div ng-controller="ModalCtrl">
     <!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
-    <ion-modal-view cache-view="false" >
-        <ion-content style="background-color:#444444"  ng-cloak>
+    <ion-modal-view cache-view="false">
+        <ion-content style="background-color:#444444" ng-cloak>
 
-            <ion-scroll has-bouncing=false min-zoom=1 zooming="true"
-                        direction="xy" style="width: 100%; ">
+            <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; ">
                 <div style="height: 100vh;">
 
-                     <ul rn-carousel  rn-carousel-buffered
-                    rn-carousel-transition="none" rn-swipe-disabled="true"
-                    rn-carousel-index="mycarousel.index"
-                    rn-carousel-auto-slide="{{calcMsTimer(eFramesNum, eventDur)/1000.0}}" rn-carousel-pause-on-hover >
 
-                    <li ng-repeat="slide in slides">
+                    <div ng-if="defaultVideo==''">
+                        <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{calcMsTimer(eFramesNum, eventDur)/1000.0}}" rn-carousel-pause-on-hover>
 
-                         <img imageonload="finishedLoadingImage($index)"
-                                         image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale=100"
-                                             image-spinner-loader="lines"
-                                             ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}"/>
+                            <li ng-repeat="slide in slides">
 
-                            <!--<img id="hello" imageonload="finishedLoadingImage($index)"
+                                <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale=100" image-spinner-loader="lines" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" />
+
+                                <!--<img id="hello" imageonload="finishedLoadingImage($index)"
                                 image-spinner-src="{{eventBasePath}}{{slide.img}}?rand={{rand}}"
                                 image-spinner-loader="lines"
                                 ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}";/>-->
 
-                    </li>
-                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <!-- no default video -->
+
+                    <div ng-if="defaultVideo!=''">
+                        <div>
+                            <videogular vg-theme="videoObject.config.theme">
+                                <vg-media vg-src="videoObject.config.sources" vg-native-controls="true">
+                                </vg-media>
+                            </videogular>
+                        </div>
+
+                    </div>
+
 
                 </div>
+                <!-- 100vh -->
             </ion-scroll>
 
 
@@ -35,39 +44,35 @@
         </ion-content>
 
 
-      <!-- <div class="range">
+        <!-- <div class="range">
         <input type="range"  ng-model="ionRange.index" min="0"  max="{{eFramesNum-1}}" >
       </div>-->
-        </div>
+</div>
 
-    </ion-modal-view>
+</ion-modal-view>
 
 
-<nav mfb-menu position="tr" effect="zoomin" label="collapse"
-         active-icon="ion-chevron-up" resting-icon="ion-chevron-down"
-         toggling-method="click">
+<nav mfb-menu position="tr" effect="zoomin" label="collapse" active-icon="ion-chevron-up" resting-icon="ion-chevron-down" toggling-method="click">
 
-        <a mfb-button icon="ion-arrow-resize" label="fit image"
-           ng-click="scaleImage();"></a>
-        <!--<a mfb-button icon="ion-reply" label="previous event"
+    <a mfb-button icon="ion-arrow-resize" label="fit image" ng-click="scaleImage();"></a>
+    <!--<a mfb-button icon="ion-reply" label="previous event"
            ng-click="controlEventStream(eventCommands.previous)"></a>
         <a mfb-button icon="ion-forward" label="next event"
            ng-click="controlEventStream(eventCommands.next)"></a>-->
-        <a mfb-button icon="ion-close"
-                label="exit event view" ng-click="closeModal()"> </a>
+    <a mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"> </a>
 
-    </nav>
+</nav>
+
+<div class="events-range-modal" ng-if="defaultVideo==''">
+
+    <div style="width:90%">
+        <input ng-model="ionRange.index" type="text" id="mySlider2" slider options="slider_modal_options" />
+    </div>
 
-         <div class="events-range-modal" >
 
-        <div style="width:90%">
-            <input ng-model="ionRange.index" type="text" id="mySlider2" slider options="slider_modal_options" />
-        </div>
-             
-             
-        </div>
-             
-        <span class="event-modal-alarm-badge">
+</div>
+
+<span class="event-modal-alarm-badge">
             <a data-badge="{{$root.alarmCount}}" class="animated infinite tada button icon  ion-ios-bell notification-badge button-assertive" 
                     ng-click="handleAlarms();" ng-if="$root.isAlarm" ></a>
         </span>
@@ -98,5 +103,4 @@
 
     <progress max="{{totalEventTime}}" value="{{currentEventTime}}"
               class="eventprogress"></progress>
--->
-
+-->
\ No newline at end of file
diff --git a/www/templates/events.html b/www/templates/events.html
index 5f1bafd0..ef6bf0d0 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -12,11 +12,7 @@
 
     <ion-nav-buttons side="right">
         <a style="" class="button button-icon icon ion-android-more-vertical" ng-click="popover.show($event)" ;>&nbsp;&nbsp;&nbsp;</a>
-        <!--
-        <a style="" class="button button-icon icon ion-stats-bars"
-           ng-href="#events-graphs"> </a>
-        <a style="" class="button button-icon icon ion-refresh" ng-href=""
-           ng-click="doRefresh();"> </a>-->
+        
         <a style="" class="button button-icon icon ion-search" ng-href="" ng-click="searchClicked();"> </a>
     </ion-nav-buttons>
 
@@ -35,10 +31,7 @@
 
 
     <ion-content on-tap="tapped();" delegate-handle="mainScroll" lazy-scroll has-subheader="true">
-        <!--<ion-refresher
-                       pulling-text="Tap <i class='ion-android-more-vertical'></i> and <i class='ion-refresh'></i> to refresh"
-                spinner="bubbles" on-refresh="dummyDoRefresh();">
-        </ion-refresher>-->
+     
 
         <!-- lets make sure the events list is not empty as collection repeat needs height -->
         <div ng-if="!eventsBeingLoaded">
@@ -62,21 +55,21 @@
 
                                         <i class="ion-android-walk" style="float:left; font-size:200%;"></i>
                                         <div ng-if="event.Event.DefaultVideo!=''">
-                                            <i class="ion-ios-videocam"  style="float:left; padding-left:5px; font-size:200%;"></i>
+                                            <i class="ion-ios-videocam" style="float:left; padding-left:5px; font-size:200%;"></i>
                                         </div>
                                         <br/>
                                     </div>
                                     <div ng-switch-when="Signal">
                                         <i class="ion-wifi" style="float:left; font-size:200%;"></i>
                                         <div ng-if="event.Event.DefaultVideo!=''">
-                                            <i class="ion-ios-videocam"  style="float:left; padding-left:5px;font-size:200%;"></i>
+                                            <i class="ion-ios-videocam" style="float:left; padding-left:5px;font-size:200%;"></i>
                                         </div>
                                         <br/>
                                     </div>
                                     <div ng-switch-default>
                                         <i class="ion-ionic" style="float:left; font-size:200%;"></i>
                                         <div ng-if="event.Event.DefaultVideo!=''">
-                                            <i class="ion-ios-videocam"  style="float:left; padding-left:5px;font-size:200%;"></i>
+                                            <i class="ion-ios-videocam" style="float:left; padding-left:5px;font-size:200%;"></i>
                                         </div>
                                         <br/>
                                     </div>
@@ -107,7 +100,7 @@
                             <div class="item-text-wrap"><i class="ion-calendar"></i>&nbsp; {{prettify(event.Event.StartTime)}}
                                 <br/>
                                 <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
-                               <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
+                                <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
                             </div>
                         </div>
                         <span style="float:right">
@@ -118,7 +111,7 @@
 
 
                         <button class="button button-small icon icon-left ion-ios-eye"
-                                ng-click="closeIfOpen(event);openModal(event.Event.Id, event.Event.Name, event.Event.Length,event.Event.Frames, event.Event.BasePath, event.Event.relativePath)" > View Footage
+                                ng-click="closeIfOpen(event);openModal(event.Event.Id, event.Event.Name, event.Event.Length,event.Event.Frames, event.Event.BasePath, event.Event.relativePath, event)" > View Footage
                     </button>
                     </span>
 
@@ -127,83 +120,58 @@
 
                         <!-- this is the event scrub area -->
                         <div ng-if="isGroupShown(event)">
-                           
+
                             <div ng-if="event.Event.DefaultVideo==''">
-                        
 
-                            <br/>
-                            <br/>
-                            <br/>
 
-                            <div style="width:90%">
-                                <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" />
-                            </div>
-                            <br/>
-
-
-                            <!-- <div class="range" style="width:90%">
-                            <span class="events-alarm-line"></span>
-                            <input type="range"  ng-model="ionRange.index"
-                                   min="1"  max="{{event.Event.Frames}}"
-                                   step="1" list="steplist">
-                                <datalist id="steplist">
-                                    <option>0</option>
-                                    <option>10</option>
-                                    <option>15</option>
-                                    <option>20</option>
-                                    <option>25</option>
-                                </datalist>
-
-                        </div>-->
-                            <p>{{mycarousel.index+1}}/{{event.Event.Frames}} Type: {{FrameArray[mycarousel.index].Type}}</p>
-
-                            <div style="height:190px">
-                                <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{calcMsTimer(event.Event.Frames, event.Event.Length)/1000.0}}" rn-carousel-pause-on-hover>
-                                    <li ng-repeat="slide in slides">
-                                        <!-- Linwood scaling -->
-                                        <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/>
-                                        <br/>
+                                <br/>
+                                <br/>
+                                <br/>
+
+                                <div style="width:90%">
+                                    <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" />
+                                </div>
+                                <br/>
 
 
-                                        <!-- <img image-spinner-src="{{loginData.url}}cgi-bin/nph-zms?source=event&mode=jpeg&event={{eventId}}&frame=1&scale=100&rate=100&maxfps=5&replay=single&user={{loginData.username}}&pass={{loginData.password}}" height="190px;"
-                           image-spinner-loader="lines"
-                         />-->
+                               
+                                <p>{{mycarousel.index+1}}/{{event.Event.Frames}} Type: {{FrameArray[mycarousel.index].Type}}</p>
+
+                                <div style="height:190px">
+                                    <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{calcMsTimer(event.Event.Frames, event.Event.Length)/1000.0}}" rn-carousel-pause-on-hover>
+                                        <li ng-repeat="slide in slides">
+                                            <!-- Linwood scaling -->
+                                            <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/>
+                                            <br/>
 
-                                        <!--<img imageonload="finishedLoadingImage($index)"
-                                         image-spinner-src="{{event.Event.BasePath}}{{slide.img}}?rand={{rand}}"
-                                             image-spinner-loader="lines"
-                                             height="190px";/>-->
 
-                                    </li>
-                                </ul>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
-                            </div> <!-- no DefaultVideo -->
-                            
-                        
+                            <!-- no DefaultVideo -->
+
+
                             <div ng-if="event.Event.DefaultVideo!=''">
-                                <!--<br/>events/{{event.Event.relativePath}}{{event.Event.DefaultVideo}}<br/>-->
                                 
-                              <!--  <video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="http://173.228.105.6/zm/events/2/15/11/01/01/54/03/754-video.mp4" type="video/mp4"/></video>-->
-                                <br/><br/><br/>
+                                <br/>
+                                <br/>
+                                <br/>
                                 <div class="videogular-container">
-                                <videogular vg-theme="event.Event.video.config.theme">
-		<vg-media vg-src="event.Event.video.config.sources"
-				  
-				  vg-native-controls="true">
-		</vg-media>
-	</videogular>
-                                    </div>
-                               
-                            </div> <!-- DefaultVideo -->
-                        </div> <!-- isGroupShown -->
+                                    <videogular vg-theme="event.Event.video.config.theme">
+                                        <vg-media vg-src="event.Event.video.config.sources" vg-native-controls="true">
+                                        </vg-media>
+                                    </videogular>
+                                </div>
+
+                            </div>
+                            <!-- DefaultVideo -->
+                        </div>
+                        <!-- isGroupShown -->
 
                         <ion-delete-button class="ion-minus-circled" ng-click="deleteEvent(event.Event.Id, $index)">
                         </ion-delete-button>
-                        <!-- 
-                    <ion-option-button class="button-assertive"
-                       ng-click="deleteEvent(event.Event.Id, $index)">
-      &nbsp;&nbsp;&nbsp;Delete&nbsp;&nbsp;&nbsp;
-    </ion-option-button>-->
+                        
 
                     </div>
                 </ion-item>