From 7eb5a9281ff24f13e50c0cd068df96660b1a1d81 Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Wed, 9 Nov 2016 14:32:36 -0500
Subject: Added event time progression to video #362

---
 www/js/EventModalCtrl.js        | 25 +++++++++++++++++++++++--
 www/templates/events-modal.html | 16 +++++++++++-----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index abdf5052..94c11e25 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -6,7 +6,7 @@
 
 
 
-angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$rootScope', 'zm', 'NVRDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', '$translate', function ($scope, $rootScope, zm, NVRDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup, $translate) {
+angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$rootScope', 'zm', 'NVRDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', '$translate', '$filter', function ($scope, $rootScope, zm, NVRDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup, $translate, $filter) {
 
 
     // from parent scope
@@ -775,7 +775,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     $scope.scaleImage = function () {
 
         $scope.imageFit = !$scope.imageFit;
-        // console.log("Switching image style to " + $scope.imageFit);
+         console.log("Switching image style to " + $scope.imageFit);
     };
 
     $scope.$on('$ionicView.enter', function () {
@@ -907,6 +907,25 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
         });
     }
 
+    $scope.videoTime = function(s,c)
+    {
+        var a,o;
+        if (NVRDataModel.getLogin().useLocalTimeZone)
+        {
+            a = moment.tz(s, NVRDataModel.getTimeZoneNow()).tz(moment.tz.guess());
+
+        }
+        else
+        {
+            a = moment(s);
+        }
+         a.add(c);
+
+        o = a.format("MMM Do "+NVRDataModel.getTimeFormatSec());
+        $scope.videoDynamicTime = o;
+        //return a.format("MMM Do "+o);
+
+    };
 
     $scope.$on('modal.removed', function (e, m) {
         console.log ("************* REMOVE CALLED");
@@ -1467,6 +1486,8 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                     $scope.videoObject = {
                         config: {
                             autoPlay: true,
+                            responsive:true,
+                            nativeControls:false,
                             
                             playsInline:true,
                             sources: [
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 58573026..caa87e9e 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -4,6 +4,8 @@
         <ion-content style="background-color:#444444" ng-cloak>
             <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; " 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 style="color:white">connkey:{{connKey}}</div>-->
@@ -17,17 +19,21 @@
                     <!-- no default video -->
                     <div ng-if="defaultVideo!==undefined && defaultVideo!='' && loginData.enableh264 == true">
                         <!--<div ng-if="videoIsReady" class="videogular-full-container">-->
-                        <div ng-if="videoIsReady" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" >
+                        <!--<div ng-if="videoIsReady" ng-class="{'videogular-container-modal-width':imageFit==true, 'videogular-container-modal-height':imageFit==false}"  >-->
+
+                        <div ng-if="videoIsReady" ng-class="imageFit?'videogular-container-modal-width':'videogular-container-modal-height'">
                             <!--<video width="320" height="240" controls>
                                 <source src="" dynamic-url dynamic-url-src="{{video_url}}">
                                 
                         </video>-->
-                            <videogular vg-error="onVideoError($event)" vg-can-play = "onCanPlay()" vg-player-ready="onPlayerReady($API)" vg-plays-inline="videoObject.config.playsInline" vg-theme="videoObject.config.theme" vg-complete="playbackFinished()" on-double-tap="closeModal();" vg-autoplay="videoObject.config.autoPlay" vg-responsive="true" >
-                                <<vg-media vg-src="videoObject.config.sources" vg-native-controls="false">
-                                </vg-media>-
+
+                            <videogular vg-error="onVideoError($event)" vg-can-play = "onCanPlay()" vg-player-ready="onPlayerReady($API)" vg-plays-inline="videoObject.config.playsInline" vg-theme="videoObject.config.theme" vg-complete="playbackFinished()" on-double-tap="closeModal();" vg-autoplay="videoObject.config.autoPlay" vg-responsive="videoObject.config.responsive" vg-update-time="videoTime(event.Event.StartTime,$currentTime)" >
+                                <vg-media vg-src="videoObject.config.sources" vg-native-controls="videoObject.config.nativeControls">
+                                </vg-media>
                                 
                                 <vg-controls>
                                     <vg-play-pause-button></vg-play-pause-button>
+                                    <vg-time-display>{{ videoTime(event.Event.StartTime, currentTime ); }}</vg-time-display>
                                     <vg-scrub-bar>
                                         <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                                     </vg-scrub-bar>
@@ -75,7 +81,7 @@
         <a mfb-button icon="ion-play" label="{{'kNormalPlay'|translate}}" ng-click="adjustSpeed('np');"></a>
         <a mfb-button icon="ion-pause" label="{{'kPause'|translate}}" ng-click="adjustSpeed('p');"> </a>
     </nav>
-    <div class="events-range-modal-text">{{mName}}&nbsp;<i class="ion-arrow-right-b"></i>&nbsp;{{humanizeTime}} ({{d_eventId}}) </div>
+    <div class="events-range-modal-text">{{mName}}&nbsp;<i class="ion-arrow-right-b"></i>&nbsp;{{videoDynamicTime}} ({{humanizeTime}}) [{{d_eventId}}] </div>
     <div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px">
         <ul>
             <li ng-if="defaultVideo==''">
-- 
cgit v1.2.3