nits

1 files changed, 338 insertions, 285 deletions

diff --git a/www/templates/events.html b/www/templates/events.html
index 41e5b104..25ef3e78 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -1,310 +1,363 @@
 <ion-view cache-view="false">
-    <ion-nav-title>{{scrollPosition();}}</ion-nav-title>
-    <ion-nav-buttons side="left">
-        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()">
-        </button>
-        <button class="button button-icon icon ion-ios-minus-outline" ng-click="eventList.showDelete = !eventList.showDelete;"></button>
-        <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
-    </ion-nav-buttons>
-    <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-search" ng-href="" ng-click="searchClicked();"> </a>
-    </ion-nav-buttons>
-    <div ng-if="showSearch">
-        <ion-header-bar class="bar bar-subheader item-input-inset">
-            <label class="item-input-wrapper">
-                <i class="icon ion-ios7-search placeholder-icon"></i>
-                <input type="search" placeholder="{{'kSearch'|translate}}" ng-model="search.text" autocorrect="off" autocomplete="off">
-            </label>
-        </ion-header-bar>
-    </div>
-    <!-- collection repeat forces js scrolling, thing to remember -->
-    <ion-content scroll-sista ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll>
-        <!-- needed for header-shrink so first item doesn't go below header-->
-        <!-- <div style="height: 64px;"></div>-->
-        <!-- lets make sure the events list is not empty as collection repeat needs height -->
-        <div ng-if="!eventsBeingLoaded">
-            <ion-list show-delete="eventList.showDelete">
-                <ion-item force-refresh-images="true" collection-repeat="event in events| filter:search.text |  eventListFilter
+  <ion-nav-title>{{scrollPosition();}}</ion-nav-title>
+  <ion-nav-buttons side="left">
+    <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()">
+    </button>
+    <button class="button button-icon icon ion-ios-minus-outline" ng-click="eventList.showDelete = !eventList.showDelete;"></button>
+    <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
+      ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
+  </ion-nav-buttons>
+  <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-search" ng-href="" ng-click="searchClicked();"> </a>
+  </ion-nav-buttons>
+  <div ng-if="showSearch">
+    <ion-header-bar class="bar bar-subheader item-input-inset">
+      <label class="item-input-wrapper">
+        <i class="icon ion-ios7-search placeholder-icon"></i>
+        <input type="search" placeholder="{{'kSearch'|translate}}" ng-model="search.text" autocorrect="off" autocomplete="off">
+      </label>
+    </ion-header-bar>
+  </div>
+  <!-- collection repeat forces js scrolling, thing to remember -->
+  <ion-content scroll-sista ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll>
+    <!-- needed for header-shrink so first item doesn't go below header-->
+    <!-- <div style="height: 64px;"></div>-->
+    <!-- lets make sure the events list is not empty as collection repeat needs height -->
+    <div ng-if="!eventsBeingLoaded">
+      <ion-list show-delete="eventList.showDelete">
+        <ion-item force-refresh-images="true" collection-repeat="event in events| filter:search.text |  eventListFilter
                 " item-height="event.Event.height" id="item-{{$index}}" on-swipe-left="checkSwipe($index);">
-                    <span style="float:left;margin-top:-18px;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-calendar"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;</span>&nbsp;&nbsp;
-                    <span style="float:left;margin-top:-18px;background-color:#fff;color:#888;font-size:11px;opacity:1;">&nbsp;&nbsp;<i class="ion-arrow-right-b"></i>&nbsp;{{event.Event.humanizeTime}} <span ng-if="!event.Event.EndTime">(<span translate="kRecordingProgress"></span>)</span>
-                    </span>
-                    <span style="float:right;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}}
-                        &nbsp;{{tzAbbr}}&nbsp;</span>
-                    <div class="row">
-                        <div class="col col-left">
-                            <!-- this ngswitch displays different icons
+          <span style="float:left;margin-top:-18px;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;
+            <i class="ion-calendar"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;</span>&nbsp;&nbsp;
+          <span style="float:left;margin-top:-18px;background-color:#fff;color:#888;font-size:11px;opacity:1;">&nbsp;&nbsp;
+            <i class="ion-arrow-right-b"></i>&nbsp;{{event.Event.humanizeTime}}
+            <span ng-if="!event.Event.EndTime">(
+              <span translate="kRecordingProgress"></span>)</span>
+          </span>
+          <span style="float:right;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;
+            <i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;
+          </span>
+          <div class="row">
+            <div class="col col-left">
+              <!-- this ngswitch displays different icons
                                         depending on the cause of the event -->
-                            <div ng-switch on="event.Event.Cause">
-                                <div ng-switch-when="Motion">
-                                    <i class="ion-android-walk" style="float:left; font-size:200%;"></i>
-                                    <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>
-                                    <br/>
-                                </div>
-                                <div ng-switch-when="Signal">
-                                    <i class="ion-wifi" style="float:left; font-size:200%;"></i>
-                                    <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>
-                                    <br/>
-                                </div>
-                                <div ng-switch-default>
-                                    <i class="ion-ionic" style="float:left; font-size:200%;"></i>
-                                    <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>
-                                    <br/>
-                                </div>
-                            </div>
-                            <!-- ng switch -->
-                            <!-- {{event.Event.Cause}} -->
-                            <br/>
-                            <span style="font-size:80%; color:rgb(110,110,110)">
-                                {{event.Event.Length}}s
-                            </span>
-                        </div>
-                        <!-- col col left-->
-                        <div class="col">
-                            <div class="item-text-wrap">
-                                
-                                <b><i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b> <span ng-if="!loginData.enableThumbs &&event.Event.MaxScoreFrameId">({{event.Event.Id}})</span> &nbsp;
-                                <button ng-if="gifshotSupported && loginData.enableGIFMP4 " class="button button-small button-clear icon gif-icon" ng-click="permissionsDownload(event)"> 
-                            </button>
-
-                          
-
-                            <a ng-if="(event.Event.DefaultVideo!='' && event.Event.DefaultVideo!==undefined) && $root.platformOS=='desktop' && loginData.enableGIFMP4 " class="button button-clear button-small icon mp4-icon" href="{{event.Event.videoPath}}" download="{{event.Event.Id}}-video.mp4" ng-click="mp4warning()"></a>
-
-                             <button ng-if="event.Event.DefaultVideo!='' && event.Event.DefaultVideo!=undefined && $root.platformOS!='desktop' && lpoginData.enableGIFMP4 " class="button button-small button-clear icon mp4-icon" ng-click="downloadFileToDevice(event.Event.videoPath, event.Event.Id)"> 
-                            </button>
-
-                            </div>
-
-
-                            <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
-                            <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
-                            <!--<i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}}-->
-
-                            
-                        </div>
-
-                        <div ng-if="loginData.enableThumbs && event.Event.MaxScoreFrameId" class = "col col-left" style="max-height:150px" >
-                            <!-- thumbnail -->
-                       
-                                    <!--  ng-image-appear transition-duration="0.5s" animation="fillIn" bg-color="#50a4e2"  {{event.Event.thumbWidth}}X{{event.Event.thumbHeight}}-->
-                                    
-                                    <img   ng-image-appear transition-duration="0.3s" animation="fillIn" bg-color="#50a4e2" width="{{event.Event.thumbWidth}}px" height="{{event.Event.thumbHeight}}px" ng-src="{{event.Event.baseURL}}/index.php?view=image&fid={{event.Event.MaxScoreFrameId}}&width={{event.Event.thumbWidth*2}}&height={{event.Event.thumbHeight*2}}" on-tap="showThumbnail(event.Event.baseURL,event.Event.MaxScoreFrameId)" />
-                                    <!--<p>{{event.Event.thumbWidth}}px*{{event.Event.thumbHeight}}px</p>-->
-                            
-                       
-                       </div>
-                    </div>
-                    <!--row-->
-                    <div class="row" style="font-size:80%; color:rgb(110,110,110)">
-                        <div class="item-text-wrap">
-                        <i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}<br/>
-                        <i class="ion-calendar"></i>&nbsp; {{prettify(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;
-                            <br/>
-                            <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
-
-                            <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
-                        </div>
-                    </div>
-                    <span style="float:right">
-                        <div ng-if="event.Event.EndTime || 1">
-                             <button class="button button-stable button-small button-outline icon icon-left ion-stats-bars"
-                                            ng-click="closeIfOpen(event);analyzeEvent(event)" > 
-                                             <span translate="kAnalyze"></span>
-                            </button>
-                            <button class="button button-stable button-outline button-small icon icon-left ion-ios-eye" ng-click="toggleGroupScrub(event,$index,event.Event.Frames)"> <span translate="kScrub"></span>
-                            </button>
-                            <button ng-if="event.Event.AlarmFrames > 0" class="button button-stable button-outline button-small icon icon-left ion-ios-bell" ng-click="toggleGroupAlarms(event,$index,event.Event.Frames)"> <span translate="kAlarms"></span>
-                            </button>
-                            <button class="button button-stable button-outline button-small icon icon-left ion-ios-eye" ng-click="closeIfOpen(event);openModal(event)"> <span translate="kFootage"></span>
-                            </button>
-
-                            
+              <div ng-switch on="event.Event.Cause">
+                <div ng-switch-when="Motion">
+                  <i class="ion-android-walk" style="float:left; font-size:200%;"></i>
+                  <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>
+                  <br/>
+                </div>
+                <div ng-switch-when="Signal">
+                  <i class="ion-wifi" style="float:left; font-size:200%;"></i>
+                  <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>
+                  <br/>
+                </div>
+                <div ng-switch-default>
+                  <i class="ion-ionic" style="float:left; font-size:200%;"></i>
+                  <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>
+                  <br/>
+                </div>
+              </div>
+              <!-- ng switch -->
+              <!-- {{event.Event.Cause}} -->
+              <br/>
+              <span style="font-size:80%; color:rgb(110,110,110)">
+                {{event.Event.Length}}s
+              </span>
+            </div>
+            <!-- col col left-->
+            <div class="col col-left">
+              <div class="item-text-wrap">
+
+                <b>
+                  <i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b>
+                <span ng-if="!loginData.enableThumbs &&event.Event.MaxScoreFrameId">({{event.Event.Id}})</span> &nbsp;
+                <button ng-if="gifshotSupported && loginData.enableGIFMP4 " class="button button-small button-clear icon gif-icon" ng-click="permissionsDownload(event)">
+                </button>
+
+
+
+                <a ng-if="(event.Event.DefaultVideo!='' && event.Event.DefaultVideo!==undefined) && $root.platformOS=='desktop' && loginData.enableGIFMP4 "
+                  class="button button-clear button-small icon mp4-icon" href="{{event.Event.videoPath}}" download="{{event.Event.Id}}-video.mp4"
+                  ng-click="mp4warning()"></a>
+
+                <button ng-if="event.Event.DefaultVideo!='' && event.Event.DefaultVideo!=undefined && $root.platformOS!='desktop' && lpoginData.enableGIFMP4 "
+                  class="button button-small button-clear icon mp4-icon" ng-click="downloadFileToDevice(event.Event.videoPath, event.Event.Id)">
+                </button>
+
+              </div>
+
+
+              <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
+              <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
+              <!--<i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}}-->
 
 
-        </div>
-        </span>
-        <!-- this is the event scrub/alarm frames area -->
-        <div ng-if="isGroupShown(event)">
-            <div ng-if="groupType=='alarms'">
-                <br/>
-                <br/>
-                <div style="height:190px;">
-                    <p>
-                        <!--scroll <i class="icon ion-arrow-left-c"></i> 
-                                <i class="icon ion-arrow-right-c"></i>-->
-                        <button ng-click="toggleTypeOfAlarms()" class="button button-small button-assertive button-stable button-outline">
-                            <span translate="kType"></span>:{{typeOfFrames}}
-                        </button>
-                        <button 
-                         ng-click="toggleMotionOutline()" class="button button-small button-assertive button-stable button-outline">
-                            <span translate="kOutlineMotion"></span>:{{outlineMotion}}
-                        </button>
-                    </p>
-                    
-                   
-                    <ion-scroll direction="x" overflow-scroll="false" >
-                        <span ng-repeat="alarm in alarm_images | selectFrames: typeOfFrames">
-                                                 
-                                            <figure  class = "animated slideInLeft" style="display:inline-block">
-                                                <!--{{event.Event.baseURL}} p:{{event.Event.imageMode}}-->
-                                                <figcaption class="smallnote"><span translate="kFrame"></span>:{{alarm.frameid}},<span translate="kScore"></span>:{{alarm.score}}, <span translate="kTime"></span>: {{prettifyTimeSec(alarm.time)}}</figcaption>
-                        <img ng-if="event.Event.imageMode=='path'" ng-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{outlineMotion? alarm.aname:alarm.fname}}&height=380" fallback-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)" />
-
-                        <img ng-if="event.Event.imageMode=='fid'" ng-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}{{outlineMotionParam}}" fallback-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)" />
-                        </figure>
-                        </span>
-                    </ion-scroll>
-
-                 
-                </div>
             </div>
-            <div ng-if="groupType=='scrub'">
-                <div ng-if="event.Event.DefaultVideo=='' || loginData.enableh264==false">
-                    <br/>
-                    <br/>
-                    <br/>
-                    <div style="width:90%">
-                        <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" />
-                    </div>
-                    <br/>
-                    <p>{{mycarousel.index+1}}/{{event.Event.Frames}} <span translate="kType"></span>: {{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="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}">
-                            <li ng-repeat="slide in slides">
-                                <img ng-if="event.Event.imageMode=='path'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/>
-                                <img ng-if="event.Event.imageMode=='fid'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{slide.id}}" image-spinner-loader="lines" height="190px" ;/>
-                                <br/>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <!-- no DefaultVideo -->
-                <div ng-if="event.Event.DefaultVideo!='' && loginData.enableh264 == true">
-                    <br/>
+
+            <div ng-if="loginData.enableThumbs && event.Event.MaxScoreFrameId" class="col col-left" style="max-height:150px">
+              <!-- thumbnail -->
+
+              <!--  ng-image-appear transition-duration="0.5s" animation="fillIn" bg-color="#50a4e2"  {{event.Event.thumbWidth}}X{{event.Event.thumbHeight}}-->
+
+              <img ng-image-appear transition-duration="0.3s" animation="fillIn" bg-color="#50a4e2" width="{{event.Event.thumbWidth}}px"
+                height="{{event.Event.thumbHeight}}px" ng-src="{{event.Event.baseURL}}/index.php?view=image&fid={{event.Event.MaxScoreFrameId}}&width={{event.Event.thumbWidth*2}}&height={{event.Event.thumbHeight*2}}"
+                on-tap="showThumbnail(event.Event.baseURL,event.Event.MaxScoreFrameId)" />
+              <!--<p>{{event.Event.thumbWidth}}px*{{event.Event.thumbHeight}}px</p>-->
+
+
+            </div>
+          </div>
+          <!--row-->
+          <div class="row" style="font-size:80%; color:rgb(110,110,110)">
+              <div class="col">
+                <div class="item-text-wrap">
+                    <i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}
                     <br/>
+                    <i class="ion-calendar"></i>&nbsp; {{prettify(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;
                     <br/>
-                    <div class="videogular-container">
-                        <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true">
-                            <vg-overlay-play></vg-overlay-play>
-                            <vg-controls>
-                                <vg-play-pause-button></vg-play-pause-button>
-                                <vg-scrub-bar>
-                                    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
-                                </vg-scrub-bar>
-                                <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
-                                <vg-fullscreen-button></vg-fullscreen-button>
-                                <vg-volume>
-                                    <vg-mute-button></vg-mute-button>
-                                </vg-volume>
-                            </vg-controls>
-                            <vg-media vg-src="event.Event.video.config.sources" vg-native-controls="false">
-                            </vg-media>
-                        </videogular>
-                    </div>
+                    <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
+
+                <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
                 </div>
-                <!-- DefaultVideo -->
             </div>
-            <!-- type = scrub -->
-        </div>
-        <!-- isGroupShown -->
-        <ion-delete-button class="ion-minus-circled" ng-click="deleteEvent(event.Event.Id, $index)">
-            </ion-delete-button>
+          </div>
+          <span style="float:right">
+            <div ng-if="event.Event.EndTime || 1">
+              <button class="button button-stable button-small button-outline icon icon-left ion-stats-bars" ng-click="closeIfOpen(event);analyzeEvent(event)">
+                <span translate="kAnalyze"></span>
+              </button>
+              <button class="button button-stable button-outline button-small icon icon-left ion-ios-eye" ng-click="toggleGroupScrub(event,$index,event.Event.Frames)">
+                <span translate="kScrub"></span>
+              </button>
+              <button ng-if="event.Event.AlarmFrames > 0" class="button button-stable button-outline button-small icon icon-left ion-ios-bell"
+                ng-click="toggleGroupAlarms(event,$index,event.Event.Frames)">
+                <span translate="kAlarms"></span>
+              </button>
+              <button class="button button-stable button-outline button-small icon icon-left ion-ios-eye" ng-click="closeIfOpen(event);openModal(event)">
+                <span translate="kFootage"></span>
+              </button>
+
 
-    
-        <ion-option-button  ng-if="event.Event.Archived == 1" class="button-balanced" ng-click= "archiveUnarchiveEvent($index,event.Event.Id)">{{'kUnflag' | translate}}</ion-option-button>
 
-        <ion-option-button ng-if="event.Event.Archived == 0" class="button-assertive" ng-click="archiveUnarchiveEvent($index, event.Event.Id)" >{{'kFlag' | translate}}</ion-option-button>
-      
-            
-             <!-- hack to make sure swipe left displays well
-             if there is no content and our list height is set
-             to a larger height, the swipe display acts weird -->
-             
-             <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 
-            </ion-item>
-            </ion-list>
             </div>
-            <!-- !eventsBeingLoaded-->
+          </span>
+          <!-- this is the event scrub/alarm frames area -->
+          <div ng-if="isGroupShown(event)">
+            <div ng-if="groupType=='alarms'">
+              <br/>
+              <br/>
+              <div style="height:190px;">
+                <p>
+                  <!--scroll <i class="icon ion-arrow-left-c"></i> 
+                                <i class="icon ion-arrow-right-c"></i>-->
+                  <button ng-click="toggleTypeOfAlarms()" class="button button-small button-assertive button-stable button-outline">
+                    <span translate="kType"></span>:{{typeOfFrames}}
+                  </button>
+                  <button ng-click="toggleMotionOutline()" class="button button-small button-assertive button-stable button-outline">
+                    <span translate="kOutlineMotion"></span>:{{outlineMotion}}
+                  </button>
+                </p>
 
 
-            <ion-item ng-show="!events.length">
-                <span translate="kNoEvents"></span>
-            </ion-item>
-            <div ng-if="!eventsBeingLoaded">
-                <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMore()" distance="2%">
-                </ion-infinite-scroll>
-            </div>
-            <canvas id="canvas" class="hiddengifcanvas"></canvas>
+                <ion-scroll direction="x" overflow-scroll="false">
+                  <span ng-repeat="alarm in alarm_images | selectFrames: typeOfFrames">
 
+                    <figure class="animated slideInLeft" style="display:inline-block">
+                      <!--{{event.Event.baseURL}} p:{{event.Event.imageMode}}-->
+                      <figcaption class="smallnote">
+                        <span translate="kFrame"></span>:{{alarm.frameid}},
+                        <span translate="kScore"></span>:{{alarm.score}},
+                        <span translate="kTime"></span>: {{prettifyTimeSec(alarm.time)}}</figcaption>
+                      <img ng-if="event.Event.imageMode=='path'" ng-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{outlineMotion? alarm.aname:alarm.fname}}&height=380"
+                        fallback-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380"
+                        style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)"
+                      />
 
+                      <img ng-if="event.Event.imageMode=='fid'" ng-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}{{outlineMotionParam}}"
+                        fallback-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}" style="width: auto; height: auto;max-width: 100%;max-height: 170px"
+                        on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)"
+                      />
+                    </figure>
+                  </span>
+                </ion-scroll>
 
-    </ion-content>
-    <div class="events-float-filter" ng-if="isEventFilterOn" on-tap="filterTapped();"><span translate="kFilterOn"></span></div>
-    <div class="bwmode" ng-if="$root.runMode=='lowbw'">
-        <span translate="kLowBWDisplay"></span>
-    </div>
-    <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand">
-        <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0">
-            <i class="icon ion-chevron-up"></i>
-        </ion-pull-up-handle>
-        <ion-pull-up-bar>
-            <h1 class="title" ion-pull-up-trigger><span translate="kLatestEvents"></span></h1>
-        </ion-pull-up-bar>
-        <ion-pull-up-content scroll="true">
-            <div class="list list-inset">
-                <div class="item item-divider"><span translate="k1HourSummary"></span></div>
-                <div ng-repeat="hour in hours|filter:{ monitor: '!'+'(Unknown)'}" id="hour-{{$index}}">
-                    <span style="color:black">
-                    <a class="item item-icon-right" href="" 
-                       ng-click="showEvents('1', 'hour',hour.mid);">
-                        <b>{{hour.monitor}}</b> {{hour.events}} <span translate="kEvents"></span>
-                    <i class="icon ion-android-arrow-dropright"></i>
-                    </a>
-                    </span>
-                </div>
+
+              </div>
             </div>
-            <div class="list list-inset">
-                <div class="item item-divider"><span translate="k1DaySummary"></span></div>
-                <div ng-repeat="day in days|filter:{ monitor: '!'+'(Unknown)'}" id="day-{{$index}}">
-                    <span style="color:black">
-                    <a class="item item-icon-right" href="" 
-                       ng-click="showEvents('1', 'day',day.mid);">
-                        <b>{{day.monitor}}</b> {{day.events}} <span translate="kEvents"></span>
-                    <i class="icon ion-android-arrow-dropright"></i>
-                    </a>
-                    </span>
+            <div ng-if="groupType=='scrub'">
+              <div ng-if="event.Event.DefaultVideo=='' || loginData.enableh264==false">
+                <br/>
+                <br/>
+                <br/>
+                <div style="width:90%">
+                  <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" />
                 </div>
-            </div>
-            <div class="list list-inset">
-                <div class="item item-divider"><span translate="k1WeekSummary"></span></div>
-                <div ng-repeat="week in weeks|filter:{ monitor: '!'+'(Unknown)'}" id="week-{{$index}}">
-                    <span style="color:black">
-                    <a class="item item-icon-right" href="" 
-                       ng-click="showEvents('1', 'week',week.mid);">
-                        <b>{{week.monitor}}</b> {{week.events}} <span translate="kEvents"></span>
-                    <i class="icon ion-android-arrow-dropright"></i>
-                    </a>
-                    </span>
+                <br/>
+                <p>{{mycarousel.index+1}}/{{event.Event.Frames}}
+                  <span translate="kType"></span>: {{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="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}">
+                    <li ng-repeat="slide in slides">
+                      <img ng-if="event.Event.imageMode=='path'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380"
+                        image-spinner-loader="lines" height="190px" ;/>
+                      <img ng-if="event.Event.imageMode=='fid'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{slide.id}}"
+                        image-spinner-loader="lines" height="190px" ;/>
+                      <br/>
+                    </li>
+                  </ul>
                 </div>
-            </div>
-            <div class="list list-inset">
-                <div class="item item-divider"><span translate="k1MonthSummary"></span></div>
-                <div ng-repeat="month in months|filter:{ monitor: '!'+'(Unknown)'}" id="month-{{$index}}">
-                    <span style="color:black">
-                    <a class="item item-icon-right" href="" 
-                       ng-click="showEvents('1', 'months',month.mid);">
-                        <b>{{month.monitor}}</b> {{month.events}} <span translate="kEvents"></span>
-                    <i class="icon ion-android-arrow-dropright"></i>
-                    </a>
-                    </span>
+              </div>
+              <!-- no DefaultVideo -->
+              <div ng-if="event.Event.DefaultVideo!='' && loginData.enableh264 == true">
+                <br/>
+                <br/>
+                <br/>
+                <div class="videogular-container">
+                  <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true">
+                    <vg-overlay-play></vg-overlay-play>
+                    <vg-controls>
+                      <vg-play-pause-button></vg-play-pause-button>
+                      <vg-scrub-bar>
+                        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
+                      </vg-scrub-bar>
+                      <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
+                      <vg-fullscreen-button></vg-fullscreen-button>
+                      <vg-volume>
+                        <vg-mute-button></vg-mute-button>
+                      </vg-volume>
+                    </vg-controls>
+                    <vg-media vg-src="event.Event.video.config.sources" vg-native-controls="false">
+                    </vg-media>
+                  </videogular>
                 </div>
-
+              </div>
+              <!-- DefaultVideo -->
             </div>
-            <br/>
-            <br/>
-        </ion-pull-up-content>
-    </ion-pull-up-footer>
+            <!-- type = scrub -->
+          </div>
+          <!-- isGroupShown -->
+          <ion-delete-button class="ion-minus-circled" ng-click="deleteEvent(event.Event.Id, $index)">
+          </ion-delete-button>
+
+
+          <ion-option-button ng-if="event.Event.Archived == 1" class="button-balanced" ng-click="archiveUnarchiveEvent($index,event.Event.Id)">{{'kUnflag' | translate}}</ion-option-button>
+
+          <ion-option-button ng-if="event.Event.Archived == 0" class="button-assertive" ng-click="archiveUnarchiveEvent($index, event.Event.Id)">{{'kFlag' | translate}}</ion-option-button>
+
+
+          <!-- hack to make sure swipe left displays well
+             if there is no content and our list height is set
+             to a larger height, the swipe display acts weird -->
+
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+
+        </ion-item>
+      </ion-list>
+    </div>
+    <!-- !eventsBeingLoaded-->
+
+
+    <ion-item ng-show="!events.length">
+      <span translate="kNoEvents"></span>
+    </ion-item>
+    <div ng-if="!eventsBeingLoaded">
+      <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMore()" distance="2%">
+      </ion-infinite-scroll>
+    </div>
+    <canvas id="canvas" class="hiddengifcanvas"></canvas>
+
+
+
+  </ion-content>
+  <div class="events-float-filter" ng-if="isEventFilterOn" on-tap="filterTapped();">
+    <span translate="kFilterOn"></span>
+  </div>
+  <div class="bwmode" ng-if="$root.runMode=='lowbw'">
+    <span translate="kLowBWDisplay"></span>
+  </div>
+  <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized"
+    default-behavior="expand">
+    <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0">
+      <i class="icon ion-chevron-up"></i>
+    </ion-pull-up-handle>
+    <ion-pull-up-bar>
+      <h1 class="title" ion-pull-up-trigger>
+        <span translate="kLatestEvents"></span>
+      </h1>
+    </ion-pull-up-bar>
+    <ion-pull-up-content scroll="true">
+      <div class="list list-inset">
+        <div class="item item-divider">
+          <span translate="k1HourSummary"></span>
+        </div>
+        <div ng-repeat="hour in hours|filter:{ monitor: '!'+'(Unknown)'}" id="hour-{{$index}}">
+          <span style="color:black">
+            <a class="item item-icon-right" href="" ng-click="showEvents('1', 'hour',hour.mid);">
+              <b>{{hour.monitor}}</b> {{hour.events}}
+              <span translate="kEvents"></span>
+              <i class="icon ion-android-arrow-dropright"></i>
+            </a>
+          </span>
+        </div>
+      </div>
+      <div class="list list-inset">
+        <div class="item item-divider">
+          <span translate="k1DaySummary"></span>
+        </div>
+        <div ng-repeat="day in days|filter:{ monitor: '!'+'(Unknown)'}" id="day-{{$index}}">
+          <span style="color:black">
+            <a class="item item-icon-right" href="" ng-click="showEvents('1', 'day',day.mid);">
+              <b>{{day.monitor}}</b> {{day.events}}
+              <span translate="kEvents"></span>
+              <i class="icon ion-android-arrow-dropright"></i>
+            </a>
+          </span>
+        </div>
+      </div>
+      <div class="list list-inset">
+        <div class="item item-divider">
+          <span translate="k1WeekSummary"></span>
+        </div>
+        <div ng-repeat="week in weeks|filter:{ monitor: '!'+'(Unknown)'}" id="week-{{$index}}">
+          <span style="color:black">
+            <a class="item item-icon-right" href="" ng-click="showEvents('1', 'week',week.mid);">
+              <b>{{week.monitor}}</b> {{week.events}}
+              <span translate="kEvents"></span>
+              <i class="icon ion-android-arrow-dropright"></i>
+            </a>
+          </span>
+        </div>
+      </div>
+      <div class="list list-inset">
+        <div class="item item-divider">
+          <span translate="k1MonthSummary"></span>
+        </div>
+        <div ng-repeat="month in months|filter:{ monitor: '!'+'(Unknown)'}" id="month-{{$index}}">
+          <span style="color:black">
+            <a class="item item-icon-right" href="" ng-click="showEvents('1', 'months',month.mid);">
+              <b>{{month.monitor}}</b> {{month.events}}
+              <span translate="kEvents"></span>
+              <i class="icon ion-android-arrow-dropright"></i>
+            </a>
+          </span>
+        </div>
+
+      </div>
+      <br/>
+      <br/>
+    </ion-pull-up-content>
+  </ion-pull-up-footer>
 </ion-view>