summaryrefslogtreecommitdiff
path: root/www/templates/events-modal.html
blob: da27116ecc7bbdd382677b666afe9b17a5f0aa26 (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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<div ng-controller="ModalCtrl" ng-cloak>
    <!-- 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">
                        
                        <!--<ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover  rn-platform="{{$root.platformOS}}">-->
                            
                            
<!--Speed:{{eventSpeed}}-->
<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)" 
                                         http-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}" 
                                         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)" 
                                         http-src="img/pausevideo.png" 
                                         image-spinner-loader="lines" 
                                         class="object-fit_contain"  />
                                </div>
                                

                                

                            </li>
                        </ul>
                    </div>
                    <!-- no default video -->

                    <div ng-if="defaultVideo!==undefined && defaultVideo!='' && loginData.enableh264 == true">
                        <div>
                            <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-media vg-src="videoObject.config.sources" vg-native-controls="false">
                                </vg-media>
                            </videogular>
                        </div>
                      
                    </div>
                    

                </div>
                <!-- 100vh -->
            </ion-scroll>

          

        </ion-content>


        <!-- <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 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>
    

<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>

<div class="events-range-modal-text" >showing event: {{eventId}}</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 button-small" 
                    ng-click="handleAlarms();" ng-if="$root.isAlarm" ></a>
</span>


<span class="events-modal-gapless-icon">
        <a ng-class="loginData.gapless? 'button button-small button-stable' : 'button button-small button-assertive' " href="" ng-click="toggleGapless()">gapless: {{loginData.gapless?"on":"off"}}</a>
</span>

<!--
    <nav mfb-menu position="bl" effect="zoomin" label="collapse"
         active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
        <a mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView()"></a>
        <a mfb-button icon="ion-pause" label="pause"
           ng-click="controlEventStream(eventCommands.pause)"></a>
        <a mfb-button icon="ion-play" label="play"
           ng-click="controlEventStream(eventCommands.play)"></a>
    </nav>


    <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-ios-fastforward" label="fast forward"
           ng-click="controlEventStream(eventCommands.fastFwd)"></a>
        <a mfb-button icon="ion-ios-fastforward-outline" label="slow forward"
           ng-click="controlEventStream(eventCommands.slowFwd)"></a>
        <a mfb-button icon="ion-ios-rewind" label="fast rewind"
           ng-click="controlEventStream(eventCommands.fastRev)"></a>
        <a mfb-button icon="ion-ios-rewind-outline" label="slow rewind"
           ng-click="controlEventStream(eventCommands.slowRev)"></a>
    </nav>

    <progress max="{{totalEventTime}}" value="{{currentEventTime}}"
              class="eventprogress"></progress>
-->
    </div>