gapless playback - inital code - #48 and #49

3 files changed, 70 insertions, 7 deletions

diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 8436ed8e..5e9cff09 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -37,6 +37,8 @@ angular.module('zmApp.controllers')
         $scope.eventsBeingLoaded = true;
         $scope.FrameArray = []; // will hold frame info from detailed Events API
         
+        var currentEvent = "";
+        
         
     // --------------------------------------------------------
     // Handling of back button in case modal is open should
@@ -629,13 +631,48 @@ angular.module('zmApp.controllers')
             // console.log ("***ION RANGE CHANGED");
 
             $scope.mycarousel.index = parseInt($scope.ionRange.index) - 1;
+            
         });
 
         $scope.$watch('mycarousel.index', function () {
 
             $scope.ionRange.index = ($scope.mycarousel.index + 1).toString();
+            //console.log ("Carousel index is " + $scope.ionRange.index);
+            if (currentEvent && $scope.ionRange.index == parseInt(currentEvent.Event.Frames))
+            {
+                playbackFinished();
+            }
         });
-
+        
+        //-------------------------------------------------------------------------
+        // Called when rncarousel or video player finished playing event
+        //-------------------------------------------------------------------------     
+        
+       $scope.playbackFinished = function()
+       {
+           playbackFinished();
+       };
+
+        function playbackFinished()
+        {
+            // currentEvent is updated with the currently playing event in prepareModalEvent()
+            ZMDataModel.zmLog ("Playback of event " + currentEvent.Event.Id + " is finished");
+            neighborEvents(currentEvent.Event.Id)
+                            .then(function (success) {
+                
+                                    // lets give a second before gapless transition to the next event
+                                    $timeout ( function() {
+                                    $scope.nextId = success.next;
+                                    $scope.prevId = success.prev;
+                                    ZMDataModel.zmDebug ("Gapless move to event " + $scope.nextId);
+                                    jumpToEvent($scope.nextId, 1);
+                                    },1000);
+                                },
+                                function (error) {
+                                    ZMDataModel.zmDebug("Error in neighbor call " + JSON.stringify(error));
+                                });
+            
+        }
 
         //-------------------------------------------------------------------------
         // This function is called when a user enables or disables
@@ -647,6 +684,8 @@ angular.module('zmApp.controllers')
         };
 
         function toggleGroup(event, ndx, frames) {
+            
+            console.log ("*** TOGGLE: " + event.Event.DefaultVideo);
 
             // If we are here and there is a record of a previous scroll
             // then we need to scroll back to hide that view
@@ -669,6 +708,7 @@ angular.module('zmApp.controllers')
             if (event.Event.ShowScrub == true) // turn on display now
             {
                 ZMDataModel.zmDebug("EventCtrl: Scrubbing will turn on now");
+                currentEvent = "";
                 //$ionicScrollDelegate.freezeScroll(true);
                 $ionicSideMenuDelegate.canDragContent(false);
                 $scope.slider_options = {
@@ -1141,6 +1181,8 @@ angular.module('zmApp.controllers')
         $scope.controlEventStream = function (cmd) {
             controlEventStream(cmd, true);
         };
+        
+        
 
         // This function returns neighbor events if applicable
         function neighborEvents(eid) {
@@ -1190,6 +1232,13 @@ angular.module('zmApp.controllers')
         //--------------------------------------------------------
 
         $scope.jumpToEvent = function (eid, dirn) {
+            
+            jumpToEvent(eid, dirn);
+
+        };
+        
+        function jumpToEvent (eid, dirn)
+        {
             ZMDataModel.zmLog("Event jump called with:" + eid);
             if (eid == "") {
                 $ionicLoading.show({
@@ -1232,8 +1281,7 @@ angular.module('zmApp.controllers')
                 $scope.animationInProgress = false;
             }
 
-
-        };
+        }
         
         //--------------------------------------------------------
         // utility function
@@ -1308,6 +1356,7 @@ angular.module('zmApp.controllers')
 
 
                         var event = success.data.event;
+                        currentEvent = event;
 
                         event.Event.BasePath = computeBasePath(event);
                         event.Event.relativePath = computeRelativePath(event);
@@ -1320,11 +1369,12 @@ angular.module('zmApp.controllers')
                         $scope.eventDur = Math.round(event.Event.Length);
                         $scope.loginData = ZMDataModel.getLogin();
 
-                        console.log("**** VIDEO STATE IS " + event.Event.DefaultVideo);
+                        //console.log("**** VIDEO STATE IS " + event.Event.DefaultVideo);
                         if (typeof event.Event.DefaultVideo === 'undefined')
                             event.Event.DefaultVideo = "";
 
                         $scope.defaultVideo = event.Event.DefaultVideo;
+                        
 
                         neighborEvents(event.Event.Id)
                             .then(function (success) {
@@ -1467,6 +1517,8 @@ angular.module('zmApp.controllers')
 
 
             ZMDataModel.setAwake(ZMDataModel.getKeepAwake());
+            
+            currentEvent = event;
 
             prepareModalEvent(event.Event.Id);
 
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index a57e2bcf..dc0d448b 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -37,8 +37,19 @@
 
                     <div ng-if="defaultVideo!='' && loginData.enableh264 == true">
                         <div>
-                            <videogular vg-theme="videoObject.config.theme">
-                                <vg-media vg-src="videoObject.config.sources" vg-native-controls="true">
+                            <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>
diff --git a/www/templates/events.html b/www/templates/events.html
index 88737207..af2bc915 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -160,7 +160,7 @@
 
 
                                 <div class="videogular-container">
-                                    <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true">
+                                    <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true" >
                                         <vg-controls>
                                             <vg-play-pause-button></vg-play-pause-button>
                                             <vg-scrub-bar>