diff options
| -rw-r--r-- | www/index.html | 2 | ||||
| -rw-r--r-- | www/js/EventModalCtrl.js | 32 | ||||
| -rw-r--r-- | www/js/app.js | 3 | ||||
| -rw-r--r-- | www/lib/videogular-cuepoints/.bower.json | 33 | ||||
| -rw-r--r-- | www/lib/videogular-cuepoints/LICENSE | 21 | ||||
| -rw-r--r-- | www/lib/videogular-cuepoints/bower.json | 21 | ||||
| -rw-r--r-- | www/lib/videogular-cuepoints/cuepoints.css | 18 | ||||
| -rw-r--r-- | www/lib/videogular-cuepoints/cuepoints.js | 52 | ||||
| -rw-r--r-- | www/templates/events-modal.html | 3 |
9 files changed, 183 insertions, 2 deletions
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> |