video automatically fits to screen #358

3 files changed, 29 insertions, 22 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 445bb8ba..7812a173 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -825,7 +825,10 @@ input[type=range]::-webkit-slider-thumb {
     float: left;
 }
 
-.videogular-container-modal-width {
+/* don't need these, responsive is on
+and parent div is hard pixels
+
+ .videogular-container-modal-width {
     height: auto;
     width: 100%;
     margin: auto;
@@ -833,10 +836,11 @@ input[type=range]::-webkit-slider-thumb {
 }
 
 .videogular-container-modal-height {
-    height: 40%;
+    height: 100%;
+    width:auto;
     margin: auto;
-    overflow: hidden;
-}
+ 
+}*/
 
 videogular div.event-time {
     position: absolute;
@@ -873,13 +877,7 @@ videogular div.event-time {
     box-sizing: border-box;
 }
 
-body {
-    font-family: sans-serif;
-}
 
-* {
-    font-family: -apple-system, "Helvetica Neue", sans-serif;
-}
 
 
 /* ---- grid ---- */
@@ -1148,3 +1146,12 @@ body {
         display: none !important;
     }
 }
+
+body {
+    font-family: sans-serif;
+    height:100%;
+}
+
+* {
+    font-family: -apple-system, "Helvetica Neue", sans-serif;
+}
\ No newline at end of file
diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index 628cc1ff..d4dcf3f0 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', '$filter', function ($scope, $rootScope, zm, NVRDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup, $translate, $filter) {
+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', 'SecuredPopups', function ($scope, $rootScope, zm, NVRDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup, $translate, $filter, SecuredPopups) {
 
 
     // from parent scope
@@ -181,7 +181,13 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
     $scope.onVideoError = function (event)
     {
+        if (!$scope.isModalActive) return;
         NVRDataModel.debug ("player reported a video error:"+JSON.stringify(event));
+        $rootScope.zmPopup = SecuredPopups.show('alert', {
+                                title: $translate.instant('kError'),
+                                template: $rootScope.platformOS == 'desktop' ?$translate.instant('kVideoError'):$translate.instant('kVideoErrorMobile')
+                            });
+
     };
 
 
@@ -1487,7 +1493,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                     $scope.videoObject = {
                         config: {
                             autoPlay: true,
-                            responsive:true,
+                            responsive:false,
                             nativeControls:false,
                             
                             playsInline:true,
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 24078df7..f9dd446d 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -2,7 +2,7 @@
     <!-- 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)" overflow-scroll="false">
+            <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>-->
                
@@ -18,15 +18,8 @@
                     </div>
                     <!-- 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="{'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>-->
-
+                        <div ng-if="videoIsReady" >
+                            <div style="height:{{$root.devHeight}}px; width:{{$root.devWidth}}px;">
                             <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>
@@ -45,6 +38,7 @@
                                 </vg-controls>
                                 <!--<vg-buffering></vg-buffering>-->
                             </videogular>
+                            </div>
                         </div>
                         <!--<div id="event_canvas_video">
                             <canvas id="eventchart" width="100%" height="20px"></canvas>