#606 allow event-modal to move from snapshot to play for better moment control

1 files changed, 24 insertions, 13 deletions

diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 7d59995b..f070fe9b 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -2,23 +2,32 @@
     <!-- 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-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" delegate-handle="imgscroll" on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" overflow-scroll="false">
                 <div id="full-screen-event" style="height: 100vh;">
                     <!--<div>-->
                     <!-- route via ZMS -->
-                    <div ng-if="( (defaultVideo=='') || (loginData.enableh264==false)) && (loginData.useNphZmsForEvents==true)">
+                    <div ng-if="defaultVideo=='' || isSnapShot()">
                         <!--<div style="color:white">connkey:{{connKey}}</div>-->
                         <div style="width:100vw; height:100vh;">
-                            <img ng-if="!liveFeedMid" image-spinner-src="{{loginData.streamingurl}}/nph-zms?source=event&mode=jpeg&event={{eventId}}&frame=1&replay={{currentStreamMode}}&rate=100&connkey={{connKey}}&scale={{singleImageQuality}}{{$root.authSession}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();"
-                            img-spinner-w="1024" img-spinner-h="768"
-                            onload="imageLoaded()"
+
+                                <div ng-if="isSnapShot()" class="event-modal-play">
+                                        <button class="button button-assertive icon ion-play" ng-click="convertSnapShotToStream()">&nbsp;{{'kPlay'|translate}}</button>
+                                </div>
+
+                            <img ng-if="!liveFeedMid" image-spinner-src="{{constructStream()}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();"
+                            img-spinner-w="1024" img-spinner-h="768" image-spinner-loader="lines" 
+                            onload="modalImageLoaded()"
                             />
 
 
                             <div ng-if="liveFeedMid">
                                 <img  image-spinner-src="{{loginData.streamingurl}}/nph-zms?mode=jpeg&monitor={{liveFeedMid}}&connkey={{connKey}}{{$root.authSession}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();"
                                 img-spinner-w="1024" img-spinner-h="768"
-                                onload="imageLoaded()"
+                                image-spinner-loader="lines"
+                                onload="modalImageLoaded()"
                                 />
                                 <div class="events-range-modal-text"><span class="events-range-modal-warning-text">{{eventWarning}}</span> </div>
                             </div>
@@ -31,12 +40,9 @@
                         </div>
                     </div>
                     <!-- no default video -->
-                    <div ng-if="defaultVideo!==undefined && defaultVideo!='' && loginData.enableh264 == true">
+                    <div ng-if="defaultVideo!==undefined && defaultVideo!='' && !isSnapShot()">
                         <div ng-if="videoIsReady">
-
-                            
-
-
+                        
                             <div style="height:{{$root.devHeight}}px; width:{{$root.devWidth}}px;">
                             
                             <!--
@@ -82,7 +88,9 @@
                 </div>
                 <!-- 100vh -->
             </ion-scroll>
-            <div ng-if="( (defaultVideo=='') || (loginData.enableh264==false)) && (loginData.useNphZmsForEvents==true) && !liveFeedMid">
+
+            
+            <div ng-show="defaultVideo=='' && !liveFeedMid && !isSnapShot()">
                 <div id="event_canvas">
                     <canvas style="padding-left:23px;
                         padding-right:23px;" id="eventchart" width="auto" height="20"></canvas>
@@ -98,11 +106,14 @@
                 </div>
             </div>
             
+          
+        
         </ion-content>
     </ion-modal-view>
 
   
-    <div ng-if="!liveFeedMid">
+   
+    <div ng-show="!liveFeedMid && !isSnapShot()">
         <nav mfb-menu position="tr" effect="zoomin" label="{{'kCollapse'|translate}}" active-icon="ion-chevron-up" resting-icon="ion-chevron-down" toggling-method="click">
             <a mfb-button icon="ion-arrow-right-c" label="{{'kNextEvent'|translate}}" ng-click="jumpToEvent(nextId,1);"></a>
             <a mfb-button icon="ion-arrow-left-c" label="{{'kPrevEvent'|translate}}" ng-click="jumpToEvent(prevId,-1);"></a>
@@ -135,5 +146,5 @@
                 </li>
             </ul>
         </div>
-    </div> <!-- not live feed -->
+    </div> <!-- not live feed or snapshot -->
 </div>