blob: 3458fb2e73c002f67e22df38301d4bd94d6043bf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<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" 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>-->
<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> {{'kPaused' | translate}}
</div>
</div>
</div>
<!-- no default video -->
<div ng-if="defaultVideo!==undefined && defaultVideo!='' && loginData.enableh264 == true">
<div ng-if="videoIsReady">
<div style="height:{{$root.devHeight}}px; width:{{$root.devWidth}}px;">
<!--
<br/><br/><br/><br/><br/><br/>
Falback testing:{{ video_url | trusted}}
<video controls>
<source ng-src="{{video_url | trusted}}" type="video/mp4" />
Your browser does not support the video tag.
</video>
-->
<videogular vg-can-play="onCanPlay()" vg-native-fullscreen="videoObject.config.nativeFullScreen" vg-player-ready="onPlayerReady($API)"
vg-update-playback="onPlaybackUpdate($playBack)"
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-error="onVideoError($event)">
<vg-media vg-src="videoObject.config.sources" vg-native-controls="videoObject.config.nativeControls">
</vg-media>
<vg-controls>
<vg-playback-button></vg-playback-button>
<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-cuepoints vg-cuepoints-config="videoObject.config.cuepoints"
vg-cuepoints-theme="videoObject.config.cuepoints.theme.url">
</vg-cuepoints>
</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>
</videogular>
</div>
</div>
<!--<div id="event_canvas_video">
<canvas id="eventchart" width="100%" height="20px"></canvas>
</div>-->
</div>
</div>
<!-- 100vh -->
</ion-scroll>
<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="20"></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 id="event_rate_text">
@{{currentRate}}x {{'kAt' | translate}}:{{currentProgress.progress}}s
</div>
</div>
</ion-content>
</ion-modal-view>
<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>
<a mfb-button icon="ion-arrow-resize" label="{{imageFit? ('kFillScreen' | translate):('kFitScreen' | translate)}}" ng-click="scaleImage();"></a>
<a mfb-button icon="ion-close" label="{{'kExitEventView' | translate}}" ng-click="closeModal()"> </a>
</nav>
<nav ng-if="loginData.useNphZmsForEvents && defaultVideo==''" mfb-menu position="br" effect="zoomin" label="{{'kCollapse' | translate}}" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
<a mfb-button icon="ion-skip-backward" label="{{'kFastRewind'|translate}}" ng-click="adjustSpeed('fr');"></a>
<a mfb-button icon="ion-skip-forward" label="{{'kFastForward'|translate}}" ng-click="adjustSpeed('ff');"></a>
<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}} <i class="ion-arrow-right-b"></i> {{videoDynamicTime}} ({{humanizeTime}}) [{{d_eventId}}] <span class="events-range-modal-warning-text">{{eventWarning}}</span> </div>
<div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px">
<ul>
<li>
<a href="" ng-click="toggleListMenu()"> <i ng-class="(isToggleListMenu) ? 'icon ion-chevron-left': 'icon ion-chevron-right'"></i></a>
</li>
<li ng-if="defaultVideo=='' && isToggleListMenu">
<a href="" ng-click="toggleGapless()"> <i class="ion-ios-loop-strong"></i>-{{loginData.gapless? ('kOn' | translate): ('kOff' | translate)}}</a>
</li>
<li ng-if="defaultVideo=='' && isToggleListMenu">
<a href="" ng-click="saveEventImageToPhoneWithPerms(false)"> <i class="ion-ios-camera"></i></a>
</li>
<li ng-if="defaultVideo=='' && isToggleListMenu">
<a href="" ng-click="saveEventImageToPhoneWithPerms(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>
|
