diff options
Diffstat (limited to 'www/templates/monitors-modal.html')
| -rw-r--r-- | www/templates/monitors-modal.html | 116 |
1 files changed, 30 insertions, 86 deletions
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html index 1cfbfac9..931d9c33 100644 --- a/www/templates/monitors-modal.html +++ b/www/templates/monitors-modal.html @@ -1,77 +1,46 @@ <div ng-controller="MonitorModalCtrl" ng-cloak> - - <ion-modal-view cache-view="false" style="background-color:#444444" > - <ion-content on-double-tap="closeModal();" > - - <ion-scroll delegate-handle="imgscroll" has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%;" overflow-scroll="false" > + <ion-modal-view cache-view="false" style="background-color:#444444"> + <ion-content on-double-tap="closeModal();"> + <ion-scroll delegate-handle="imgscroll" has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%;" overflow-scroll="false"> <!-- android needs this 100vh - otherwise max- does not work --> <!-- --> <div id="monitorimage" style="height: 100vh;" class="main"> - - - <div ng-if="$root.authSession!='undefined'"> - - <div ng-if="!animationInProgress && !isBackground() && connKey"> <!--<span style="color:white">{{currentStreamMode}}</span>--> - - <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" image-spinner-src="{{monitor.Monitor.streamingURL}}/nph-zms?mode={{currentStreamMode}}&monitor={{monitorId}}&scale={{quality}}{{$root.authSession}}&rand={{$root.modalRand}}&connkey={{connKey}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-swipe-left="onSwipe(monitorId,1)" on-swipe-right="onSwipe(monitorId,-1)" on-double-tap="closeModal();" /> - - - - - + <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" image-spinner-src="{{monitor.Monitor.streamingURL}}/nph-zms?mode={{currentStreamMode}}&monitor={{monitorId}}&scale={{quality}}{{$root.authSession}}&rand={{$root.modalRand}}&connkey={{connKey}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-swipe-left="onSwipe(monitorId,1)" on-swipe-right="onSwipe(monitorId,-1)" on-double-tap="closeModal();" /> </div> <div ng-if="animationInProgress || isBackground()"> <img style="width:100vw; height:100vh" ng-src="img/pausevideo.png" class="object-fit_contain" /> </div> - </div> <div ng-if="$root.authSession=='undefined'"> <img id="singlemonitor" ng-src="img/pausevideo.png" style="width:100vw; height:100vh; display:block;" class="object-fit_contain" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" /> </div> </div> </ion-scroll> - </ion-content> - - <div ng-show="isControllable=='1' && showPTZ"> - - - <div class="ptzcentered"> <circular options="ptzRadialMenuOptions"> </circular> </div> - <div ng-if="presetOn" class="ptzpresetbuttons animated fadeInDown" id="presetlist"> <div ng-repeat="preset in ptzPresets track by $index"> <button class="button {{preset.icon}} button-small {{preset.style}}" style="float:left;margin-right:10px;margin-bottom:10px;" ng-click="controlPTZ(monitorId, preset.cmd);">{{preset.name}}</button> </div> </div> - - <div class="ptzcenteredbotbutton"> <div ng-if="canZoom"> <a class="button button-small icon ion-search button-positive" href="" ng-click="controlPTZ(monitorId, zoomInCommand);">+</a> <a class="button button-small icon ion-search button-positive" href="" ng-click="controlPTZ(monitorId, zoomOutCommand);">-</a> <a class="button button-small icon ion-search button-positive" href="" ng-click="controlPTZ(monitorId, zoomStopCommand);">x</a> - </div> <br/> <a class="button button-small icon ion-stop button-assertive" href="" ng-click="controlPTZ(monitorId, ptzStopCommand);"></a> - - <a class="button button-small button-royal" href="" ng-click="togglePresets();">{{controlToggle}}</a> </div> - </div> - - - - </ion-modal-view> <nav mfb-menu position="br" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> <button mfb-button icon="ion-arrow-resize" label="{{imageFit? ('kFitScreen' | translate):('kFillScreen' | translate)}}" ng-click="scaleImage();"> @@ -80,9 +49,7 @@ </button> <button mfb-button icon="ion-arrow-expand" label="{{'kControl'| translate}}" ng-click="togglePTZ();"> </button> - </nav> - <nav mfb-menu position="tr" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-up" resting-icon="ion-chevron-down" toggling-method="click"> <button mfb-button icon="ion-android-arrow-back" label="{{'kPrevMonitor' | translate}} " ng-click="onTap(monitorId,-1);"> </button> @@ -90,58 +57,35 @@ </button> <button mfb-button icon="ion-close" label="{{'kExitLiveView' | translate}}" ng-click="closeModal();"> </button> - </nav> - - - - - <div id="flyoutmenu" style="position:absolute;bottom:80px;left:10px"> - <ul> - - <li> - <a href="" ng-click="saveImageToPhoneWithPerms(monitorId)"> <i class="icon ion-ios-camera"></i></a> - </li> - - <li ng-if="$root.platformOS == 'desktop'"> - <a href="" ng-click="zoomImage(1)"><i class="ion-plus-round"></i></a> - </li> - <li ng-if="$root.platformOS == 'desktop'"> - <a href="" ng-click="zoomImage(-1)"><i class="ion-minus-round"></i></a> - </li> - - <li> - <a href="" ng-click="enableAlarm(monitorId,true)"> <i class="icon ion-flash"></i></a> - </li> - <li> - <a href="" ng-click="enableAlarm(monitorId,false)"> <i class="icon ion-flash-off"></i></a> - - - </li> - <li> - <a href="" ng-click="toggleCycle()"> <i class="icon ion-android-bicycle"></i>-{{cycleText}}</a> - - - </li> - - - <!--<li> + <div id="flyoutmenu" style="position:absolute;bottom:80px;left:10px"> + <ul> + <li> + <a href="" ng-click="saveImageToPhoneWithPerms(monitorId)"> <i class="icon ion-ios-camera"></i></a> + </li> + <li ng-if="$root.platformOS == 'desktop'"> + <a href="" ng-click="zoomImage(1)"><i class="ion-plus-round"></i></a> + </li> + <li ng-if="$root.platformOS == 'desktop'"> + <a href="" ng-click="zoomImage(-1)"><i class="ion-minus-round"></i></a> + </li> + <li> + <a href="" ng-click="enableAlarm(monitorId,true)"> <i class="icon ion-flash"></i></a> + </li> + <li> + <a href="" ng-click="enableAlarm(monitorId,false)"> <i class="icon ion-flash-off"></i></a> + </li> + <li> + <a href="" ng-click="toggleCycle()"> <i class="icon ion-android-bicycle"></i>-{{cycleText}}</a> + </li> + <!--<li> <a href="" ng-click="cast(monitorId, monitor)"> <i class="icon ion-android-funnel"></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> - + <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 class="monitor-modal-text">{{monitorName}} <span style="{{stateColor()}}">{{monStatus}} </span></div> - </div> |