-
Notifications
You must be signed in to change notification settings - Fork 3
/
text-track.js
68 lines (62 loc) · 1.87 KB
/
text-track.js
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/**
* Text track plugin for Videogular v0.4.0 http://videogular.com
* Farhan Anggawie https://github.com/farhan-repo
* License: MIT
*/
"use strict";
angular.module("videogular.texttrack", [])
.directive("vgText", [function() {
return {
require: "^videogular",
restrict: "E",
scope: {
textTracks: "=vgTextSrc"
},
template:
'<span class="glyphicon glyphicon-subtitles"></span>' + // Still using Glyphicons Bootstrap icon
'<ul ng-show="selectorVisibility">' +
'<li ng-repeat="track in textTracks" ng-click="changeCaption(track)">{{track.label}}</li>' +
'<li ng-click="changeCaption()">Off</li>' +
'</ul>',
controller: ["$scope", function($scope) {
var activeTrack;
$scope.changeCaption = function(track) {
var tag = $scope.trackTag[0];
if (track) {
if (!activeTrack || track != activeTrack) {
activeTrack = track;
tag.src = "";
tag.src = activeTrack.src;
tag.kind = activeTrack.kind;
tag.srclang = activeTrack.srclang;
tag.label = activeTrack.label;
}
if (tag.track.mode != "showing")
tag.track.mode = "showing";
} else {
tag.track.mode = "hidden";
}
}
}],
link: function(scope, elem, attr, API) {
scope.trackTag = angular.element(API.videoElement).find("track");
function onMouseOverCaptions() {
scope.selectorVisibility = true;
scope.$apply();
}
function onMouseLeaveCaptions() {
scope.selectorVisibility = false;
scope.$apply();
}
function onCaptionSourceChange(newValue, oldValue) {
if (!oldValue || newValue != oldValue) {
elem.css("display", (newValue ? "table-cell" : "none"));
scope.changeCaption();
}
}
elem.bind("mouseover", onMouseOverCaptions);
elem.bind("mouseleave", onMouseLeaveCaptions);
scope.$watch("textTracks", onCaptionSourceChange);
}
}
}]);