diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/css/style.css | 41 | ||||
| -rw-r--r-- | www/js/EventModalCtrl.js | 25 | ||||
| -rw-r--r-- | www/templates/events-modal.html | 282 |
3 files changed, 144 insertions, 204 deletions
diff --git a/www/css/style.css b/www/css/style.css index 05e4907b..0261e6e2 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -975,21 +975,35 @@ body { font-family: sans-serif; } position:absolute; width: 80%; height: 20px; - bottom:70px; + bottom:80px; left:20px; opacity:1; z-index:99; } + +#event_canvas_video { + position:absolute; + width: 100%; + height: 20px; + bottom:140px; + left:0px; + opacity:1; + z-index:99; + +} + + + #event_slider { position:absolute; width: 80%; height: 20px; - bottom:50px; + bottom:60px; left:20px; opacity:1; - z-index:100; + z-index:9999; } @@ -997,32 +1011,15 @@ body { font-family: sans-serif; } #event_rate_text { position:absolute; width: 80%; - bottom:10px; + bottom:20px; left:43px; opacity:1; color:#fff; - z-index:100; + z-index:9998; } -/* -#event_slider { - width: 100%; - height: 100%; - position: absolute; - top: 50%; - left: 0; -} -#event_canvas -{ -position:absolute; - bottom:30px; - left:30px; - z-index:99; - opacity:1; - width:100%; -}*/ diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js index f6c7fe2a..0d33254c 100644 --- a/www/js/EventModalCtrl.js +++ b/www/js/EventModalCtrl.js @@ -146,6 +146,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro { //console.log ("Event timer"); //console.log ("Event timer"); + $scope.checkEventOn = true; if ($scope.defaultVideo !== undefined && $scope.defaultVideo !='') { console.log ("playing video, not using zms, skipping event commands"); @@ -228,6 +229,12 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro function processEvent(cmd,connkey) { + + if ($scope.blockSlider) + { + console.log ("Not doing ZMS Command as slider is depressed..."); + return; + } var loginData = ZMDataModel.getLogin(); console.log ("sending process Event command to " + loginData.url); @@ -346,12 +353,19 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro }; + $scope.enableSliderBlock = function() + { + $scope.blockSlider = true; + }; $scope.youChangedSlider = function() { + console.log("YOU changed " + $scope.sliderProgress.progress); $scope.currentProgress.progress = $scope.sliderProgress.progress; $timeout( function () { sendCommand('14',$scope.connKey, '&offset='+$scope.currentProgress.progress);},500); + // give this command some time to complete + $timeout (function(){$scope.blockSlider = false;},1500); }; @@ -710,6 +724,8 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro $scope.loginData = ZMDataModel.getLogin(); $scope.singleImageQuality = ld.singleImageQuality; + $scope.blockSlider = false; + $scope.checkEventOn = false; //$scope.singleImageQuality = 100; @@ -814,16 +830,13 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro $scope.$on('modal.removed', function (e,m) { - + $interval.cancel(eventQueryHandle); if (m.id != 'footage') return; - //console.log ("************** MODAL INSIDE FOOTAGE CLOSED"); + $scope.isModalActive = false; - - //console.log("**MODAL REMOVED: Stopping modal timer"); - $interval.cancel(eventQueryHandle); - //$timeout.cancel(eventQueryHandle); + ZMDataModel.zmDebug ("Modal removed - killing connkey"); sendCommand(17,$scope.connKey); //$timeout (function(){ZMDataModel.stopNetwork("Modal removed inside EventModalCtrl");},400); diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html index 51b389f1..bc3d40ac 100644 --- a/www/templates/events-modal.html +++ b/www/templates/events-modal.html @@ -1,203 +1,133 @@ - <div ng-controller="EventModalCtrl"> +<div ng-controller="EventModalCtrl"> <!-- 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" style="width: 100%; " delegate-handle="imgscroll" on-swipe-left="onSwipeEvent(nextId,1)" - on-swipe-right="onSwipeEvent(prevId,-1)"> - <div id="full-screen-event" style="height: 100vh;"> - - - <!--<div ng-if="(defaultVideo=='' || loginData.enableh264==false) && !loginData.useNphZmsForEvents"> - - - <ul rn-carousel rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{eventSpeed}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}" rn-carousel-buffered > - - - <li ng-repeat="slide in slides"> - <div ng-if="!animationInProgress"> - <img style="width:100vw; height:100vh" imageonload="finishedLoadingImage($index)" - image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}{{$root.authSession}}" - image-spinner-loader="lines" - ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" - - /> - </div> - <div ng-if="animationInProgress"> - <img style="width:100vw; height:100vh" imageonload="finishedLoadingImage($index)" - image-spinner-src="img/pausevideo.png" - image-spinner-loader="lines" - class="object-fit_contain" /> - </div> - - - - - </li> - </ul> - </div>--> - + <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)"> + <div id="full-screen-event" style="height: 100vh;"> + + + + <!-- route via ZMS --> - + <div ng-if="( (defaultVideo=='') || (loginData.enableh264==false)) && (loginData.useNphZmsForEvents==true)"> - + <!--<div style="color:white">connkey:{{connKey}}</div>--> - <div style="width:100vw; height:100vh;" > - <img 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();"/> - - <div ng-if="isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;z-index:999" - class="header-paused"> - <i class="ion-pause"></i> - paused + <div style="width:100vw; height:100vh;"> + <img 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();" /> + + <div ng-if="isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;z-index:999" class="header-paused"> + <i class="ion-pause"></i> paused </div> - + </div> - - + + </div> - + <!-- no default video --> - + <div ng-if="defaultVideo!==undefined && defaultVideo!='' && loginData.enableh264 == true"> - <div on-double-tap="closeModal();"> + <div on-double-tap="closeModal();"> <videogular vg-theme="videoObject.config.theme" vg-complete="playbackFinished()"> - <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-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="videoObject.config.sources" vg-native-controls="false"> </vg-media> </videogular> </div> - + <div id="event_canvas_video"> + <canvas id="eventchart" width="100%" height="20px"></canvas> + </div> + </div> - - </div> - <!-- 100vh --> - </ion-scroll> - - </ion-content> + </div> + <!-- 100vh --> + </ion-scroll> - <!-- <div class="range"> - <input type="range" ng-model="ionRange.index" min="0" max="{{eFramesNum-1}}" > - </div>--> - - -</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"> - - <a mfb-button icon="ion-arrow-right-c" label="next event" ng-click="jumpToEvent(nextId,1);"></a> - <a mfb-button icon="ion-arrow-left-c" label="prev. event" ng-click="jumpToEvent(prevId,-1);"></a> - <a mfb-button icon="ion-arrow-resize" label="{{imageFit?'fill screen':'fit screen'}}" ng-click="scaleImage();"></a> - - <a mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"> </a> - -</nav> - - -<!--<nav ng-if="!loginData.useNphZmsForEvents" mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> - - <a mfb-button icon="icon-super-speed" label="super speed" ng-click="adjustSpeed('super');"></a> - <a mfb-button icon="icon-normal-speed" label="normal speed" ng-click="adjustSpeed('normal');"></a> - <a mfb-button icon="icon-faster" label="faster" ng-click="adjustSpeed('faster');"></a> - - <a mfb-button icon="icon-slower" label="slower" ng-click="adjustSpeed('slower');"> </a> - -</nav>--> - - -<nav ng-if="loginData.useNphZmsForEvents" mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> - - - <a mfb-button icon="ion-skip-backward" label="fast rewind" ng-click="adjustSpeed('fr');"></a> - <a mfb-button icon="ion-skip-forward" label="fast forward" ng-click="adjustSpeed('ff');"></a> - <a mfb-button icon="ion-play" label="normal play" ng-click="adjustSpeed('np');"></a> - - <a mfb-button icon="ion-pause" label="pause" ng-click="adjustSpeed('p');"> </a> - -</nav> - - - -<div class="events-range-modal-text" >showing event: {{d_eventId}}</div> - - -<div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px"> - <ul> - <li ng-if="defaultVideo==''"> - <a href="" ng-click="toggleGapless()"> <i class="ion-ios-loop-strong"></i>-{{loginData.gapless?"on":"off"}}</a> - </li> - - <li ng-if="defaultVideo==''"> - <a href="" ng-click="saveEventImageToPhone(false)"> <i class="ion-ios-camera"></i></a> - </li> - - <li ng-if="defaultVideo==''"> - <a href="" ng-click="saveEventImageToPhone(true)"> <i class="ion-android-notifications"></i></a> - </li> - - <li ng-if="$root.isAlarm"> - <a data-badge="{{$root.alarmCount}}" class="notification-badge animated infinite tada" href="" ng-click="handleAlarms()"><i class="ion-ios-bell"></i></a> - </li> - - - - </ul> - -</div> - - - - - <div id="event_canvas"> - <canvas style="padding-left:23px; - padding-right:23px;" id="eventchart" width="auto" height="20px"></canvas> - </div> - - <div id="event_slider"> - <div class="range" > - <input ng-change="youChangedSlider()" type="range" min="0" max="{{currentEventDuration}}" ng-model="sliderProgress.progress"> - </div> - </div> - - <div id="event_rate_text"> - @{{currentRate}}x at:{{currentProgress.progress}}s - </div> - - <!--<div class="row"> - - - + <div ng-if="( (defaultVideo=='') || (loginData.enableh264==false)) && (loginData.useNphZmsForEvents==true)"> <div id="event_canvas"> <canvas style="padding-left:23px; - padding-right:23px;" id="eventchart" width="auto" height="20px"></canvas> - - <div id="event_slider"> - <div class="range" > - <input ng-change="youChangedSlider()" type="range" min="0" max="{{currentEventDuration}}" ng-model="sliderProgress.progress"> - </div> + padding-right:23px;" id="eventchart" width="auto" height="20px"></canvas> + </div> + <div ng-if="checkEventOn" id="event_slider" data-tap-disabled="false"> + <div class="range"> + <input on-drag="enableSliderBlock()" on-release="youChangedSlider()" type="range" min="0" max="{{currentEventDuration}}" ng-model="sliderProgress.progress"> </div> </div> - - - </div> - <div class="col col-25" style="line-height:70px"> - - @{{currentRate}}x - at:{{currentProgress.progress}}s - </div> - </div>--> -</div> + <div id="event_rate_text"> + @{{currentRate}}x at:{{currentProgress.progress}}s + </div> + </div> + + </ion-content> + + + + </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"> + + <a mfb-button icon="ion-arrow-right-c" label="next event" ng-click="jumpToEvent(nextId,1);"></a> + <a mfb-button icon="ion-arrow-left-c" label="prev. event" ng-click="jumpToEvent(prevId,-1);"></a> + <a mfb-button icon="ion-arrow-resize" label="{{imageFit?'fill screen':'fit screen'}}" ng-click="scaleImage();"></a> + + <a mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"> </a> + + </nav> + + <nav ng-if="loginData.useNphZmsForEvents" mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> + + + <a mfb-button icon="ion-skip-backward" label="fast rewind" ng-click="adjustSpeed('fr');"></a> + <a mfb-button icon="ion-skip-forward" label="fast forward" ng-click="adjustSpeed('ff');"></a> + <a mfb-button icon="ion-play" label="normal play" ng-click="adjustSpeed('np');"></a> + + <a mfb-button icon="ion-pause" label="pause" ng-click="adjustSpeed('p');"> </a> + + </nav> + + + + <div class="events-range-modal-text">showing event: {{d_eventId}}</div> + + <div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px"> + <ul> + <li ng-if="defaultVideo==''"> + <a href="" ng-click="toggleGapless()"> <i class="ion-ios-loop-strong"></i>-{{loginData.gapless?"on":"off"}}</a> + </li> + + <li ng-if="defaultVideo==''"> + <a href="" ng-click="saveEventImageToPhone(false)"> <i class="ion-ios-camera"></i></a> + </li> + + <li ng-if="defaultVideo==''"> + <a href="" ng-click="saveEventImageToPhone(true)"> <i class="ion-android-notifications"></i></a> + </li> + + <li ng-if="$root.isAlarm"> + <a data-badge="{{$root.alarmCount}}" class="notification-badge animated infinite tada" href="" ng-click="handleAlarms()"><i class="ion-ios-bell"></i></a> + </li> + + + + </ul> + + </div> + +</div>
\ No newline at end of file |