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

5 files changed, 145 insertions, 0 deletions

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