1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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>'
);
}]);
})();
|
