added video support in view full screen footage modal #60

1 files changed, 43 insertions, 39 deletions

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