Added cue points time matched with video player scrub bar #381

1 files changed, 52 insertions, 0 deletions

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>'
+		);
+	}]);
+})();