From fc9f5198166e500b85a217125157822a2f45921a Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Tue, 22 Nov 2016 11:03:03 -0400
Subject: Added cue points time matched with video player scrub bar #381

---
 www/index.html                             |  2 ++
 www/js/EventModalCtrl.js                   | 32 +++++++++++++++++-
 www/js/app.js                              |  3 +-
 www/lib/videogular-cuepoints/.bower.json   | 33 +++++++++++++++++++
 www/lib/videogular-cuepoints/LICENSE       | 21 ++++++++++++
 www/lib/videogular-cuepoints/bower.json    | 21 ++++++++++++
 www/lib/videogular-cuepoints/cuepoints.css | 18 +++++++++++
 www/lib/videogular-cuepoints/cuepoints.js  | 52 ++++++++++++++++++++++++++++++
 www/templates/events-modal.html            |  3 ++
 9 files changed, 183 insertions(+), 2 deletions(-)
 create mode 100644 www/lib/videogular-cuepoints/.bower.json
 create mode 100644 www/lib/videogular-cuepoints/LICENSE
 create mode 100644 www/lib/videogular-cuepoints/bower.json
 create mode 100644 www/lib/videogular-cuepoints/cuepoints.css
 create mode 100644 www/lib/videogular-cuepoints/cuepoints.js

(limited to 'www')

diff --git a/www/index.html b/www/index.html
index 301d967e..0c953347 100644
--- a/www/index.html
+++ b/www/index.html
@@ -37,6 +37,7 @@
     <script src="lib/videogular-controls/vg-controls.js"></script>
     <script src="lib/videogular-overlay-play/vg-overlay-play.js"></script>
     <script src="lib/videogular-buffering/vg-buffering.js"></script>
+     <script src="lib/videogular-cuepoints/cuepoints.js"></script>
     <script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script>
     <script src="lib/angular-translate/angular-translate.min.js"></script>
     <script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
@@ -44,6 +45,7 @@
     <script src="lib/moment/min/moment-with-locales.min.js"></script>
     <script src="lib/ng-mfb/src/mfb-directive.js"></script>
     <script src="lib/angular-touch/angular-touch.js"></script>
+
     <!-- unmanaged externals -->
     <script src="external/moment-timezone-with-data.min.js"></script>
     <script src="external/angular-ios9-uiwebview.patch.js"></script>
diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index 62609e5a..544bf127 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -13,6 +13,8 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     $scope.loginData = NVRDataModel.getLogin();
     $scope.currentRate = '-';
     var timeFormat = 'MM/DD/YYYY HH:mm:ss';
+    var event;
+    var gEvent;
 
     var framearray = {
 
@@ -166,6 +168,25 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
             handle.setPlayback(2);
             handle.play();
 
+            // now set up cue points
+            NVRDataModel.debug("Setting cue points..");
+            //console.log ("jEvent=" + JSON.stringify(currentEvent));
+            //var event = $scope.currentEvent.event;
+           // console.log (JSON.stringify(event));
+            var st  = moment(currentEvent.Event.StartTime);
+            for (var l=0; l<currentEvent.Frame.length; l++ )
+            {
+                if (currentEvent.Frame[l].Type=='Alarm')
+                {
+                    var ft = moment(currentEvent.Frame[l].TimeStamp);
+                    var s = st.diff(ft,'seconds');
+                    //console.log("START="+currentEvent.Event.StartTime);
+                    //console.log("END="+currentEvent.Frame[l].TimeStamp);
+                    NVRDataModel.debug ("alarm cue at:"+s+"s");
+                    $scope.videoObject.config.cuepoints.points.push({time:s});
+                }
+            }
+
         }, 400);
 
         // window.stop();
@@ -547,7 +568,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                     .then(function(success)
                         {
 
-                            var event = success.data.event;
+                             event = success.data.event;
 
                             event.Event.BasePath = computeBasePath(event);
                             event.Event.relativePath = computeRelativePath(event);
@@ -856,7 +877,10 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
         $scope.currentFrame = 1;
         $scope.isPaused = false;
+
+        gEvent = $scope.currentEvent;
         //console.log ("CURRENT EVENT " + JSON.stringify($scope.currentEvent));
+        //
         $scope.currentEventDuration = Math.floor($scope.currentEvent.Event.Length);
         //console.log ($scope.event.Event.Frames);
         if (currentEvent && currentEvent.Event)
@@ -1584,6 +1608,12 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                             ],
 
                             theme: "lib/videogular-themes-default/videogular.css",
+                            cuepoints: {
+                                    theme: {
+                                        url:"lib/videogular-cuepoints/cuepoints.css"
+                                    },
+                                    points: [],
+                            }
                         }
                     };
 
diff --git a/www/js/app.js b/www/js/app.js
index c3ef262d..8a146b9b 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -26,7 +26,8 @@ angular.module('zmApp', [
     'ionic-native-transitions',
     'mgo-angular-wizard',
     'pascalprecht.translate',
-    'jett.ionic.scroll.sista'
+    'jett.ionic.scroll.sista',
+    'uk.ac.soton.ecs.videogular.plugins.cuepoints'
 
 ])
 
diff --git a/www/lib/videogular-cuepoints/.bower.json b/www/lib/videogular-cuepoints/.bower.json
new file mode 100644
index 00000000..42babc5d
--- /dev/null
+++ b/www/lib/videogular-cuepoints/.bower.json
@@ -0,0 +1,33 @@
+{
+  "name": "videogular-cuepoints",
+  "homepage": "https://github.com/HarryCutts/videogular-cuepoints",
+  "description": "Videogular plugin for displaying marks on a video's scrub bar",
+  "license": "MIT",
+  "authors": [
+    {
+      "name": "Harry Cutts"
+    }
+  ],
+  "main": [
+    "cuepoints.js",
+    "cuepoints.css"
+  ],
+  "dependencies": {
+    "videogular-controls": "1.x"
+  },
+  "ignore": [
+    "**/.*",
+    "**/*.md"
+  ],
+  "version": "2.1.0",
+  "_release": "2.1.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "v2.1.0",
+    "commit": "79d95d226f06eae08c102f50ff623466e89fa30d"
+  },
+  "_source": "https://github.com/HarryCutts/videogular-cuepoints.git",
+  "_target": "~2.1.0",
+  "_originalSource": "videogular-cuepoints",
+  "_direct": true
+}
\ No newline at end of file
diff --git a/www/lib/videogular-cuepoints/LICENSE b/www/lib/videogular-cuepoints/LICENSE
new file mode 100644
index 00000000..98c1d3d2
--- /dev/null
+++ b/www/lib/videogular-cuepoints/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Harry Cutts
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/www/lib/videogular-cuepoints/bower.json b/www/lib/videogular-cuepoints/bower.json
new file mode 100644
index 00000000..b4262999
--- /dev/null
+++ b/www/lib/videogular-cuepoints/bower.json
@@ -0,0 +1,21 @@
+{
+	"name": "videogular-cuepoints",
+	"homepage": "https://github.com/HarryCutts/videogular-cuepoints",
+	"description": "Videogular plugin for displaying marks on a video's scrub bar",
+	"license": "MIT",
+	"authors": [
+		{ "name": "Harry Cutts" }
+	],
+
+	"main": [
+    		"cuepoints.js",
+    		"cuepoints.css"
+  	],
+	"dependencies": {
+		"videogular-controls": "1.x"
+	},
+	"ignore": [
+		"**/.*",
+		"**/*.md"
+	]
+}
diff --git a/www/lib/videogular-cuepoints/cuepoints.css b/www/lib/videogular-cuepoints/cuepoints.css
new file mode 100644
index 00000000..24f1cfc7
--- /dev/null
+++ b/www/lib/videogular-cuepoints/cuepoints.css
@@ -0,0 +1,18 @@
+videogular vg-cuepoints {
+	position: relative;
+
+	display: block;
+	width: 100%;
+	height: 0px;
+}
+
+videogular vg-cuepoints vg-cuepoint {
+	position: absolute;
+	top: -16px;
+
+	display: block;
+	width: 2px;
+	height: 30px;
+
+	background-color: red;
+}
diff --git a/www/lib/videogular-cuepoints/cuepoints.js b/www/lib/videogular-cuepoints/cuepoints.js
new file mode 100644
index 00000000..6bfc3c6f
--- /dev/null
+++ b/www/lib/videogular-cuepoints/cuepoints.js
@@ -0,0 +1,52 @@
+(function(){
+'use strict';
+angular.module('uk.ac.soton.ecs.videogular.plugins.cuepoints', [])
+	.directive(
+		'vgCuepoints',
+		[function() {
+			return {
+				restrict: 'E',
+				require: '^videogular',
+				templateUrl: function(element, attrs) {
+					return attrs.templateUrl || 'videogular-cuepoints/cuepoints.html';
+				},
+				scope: {
+					cuepoints: '=vgCuepointsConfig',
+					theme: '=vgCuepointsTheme',
+				},
+				link: function($scope, elem, attr, API) {
+					// shamelessly stolen from part of videogular's updateTheme function
+					function updateTheme(value) {
+						if (value) {
+							var headElem = angular.element(document).find("head");
+							headElem.append("<link rel='stylesheet' href='" + value + "'>");
+						}
+					}
+
+					var calcLeft = function(cuepoint) {
+						if (API.totalTime === 0) return '-1000';
+
+						var videoLength = API.totalTime / 1000;
+						return (cuepoint.time * 100 / videoLength).toString();
+					};
+
+					$scope.onCuepointClick = function(cuepoint){
+						API.seekTime(cuepoint.time);
+					};
+
+					$scope.cuepointStyle = function(cuepoint) {
+						return {
+							left: calcLeft(cuepoint) + '%'
+						};
+					}
+
+					updateTheme($scope.theme);
+				},
+			};
+		}])
+	.run(['$templateCache', function($templateCache) {
+		$templateCache.put('videogular-cuepoints/cuepoints.html',
+			'<vg-cuepoint ng-repeat="cuepoint in cuepoints.points" ng-click="onCuepointClick(cuepoint)" ng-style="cuepointStyle(cuepoint)"></vg-cuepoint>'
+		);
+	}]);
+})();
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index ddb954c3..fe528561 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -28,6 +28,9 @@
                                         <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>
-- 
cgit v1.2.3