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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
/**
* @license videogular v1.4.4 http://videogular.com
* Two Fucking Developers http://twofuckingdevelopers.com
* License: MIT
*/
/**
* @ngdoc directive
* @name com.2fdevs.videogular.plugins.buffering.directive:vgBuffering
* @restrict E
* @description
* Shows a spinner when Videogular is buffering or preparing the video player.
*
* <pre>
* <videogular vg-theme="config.theme.url" vg-autoplay="config.autoPlay">
* <vg-media vg-src="sources"></vg-media>
*
* <vg-buffering></vg-buffering>
* </videogular>
* </pre>
*
*/
"use strict";
angular.module("com.2fdevs.videogular.plugins.buffering", [])
.run(
["$templateCache", function ($templateCache) {
$templateCache.put("vg-templates/vg-buffering",
'<div class="bufferingContainer">\
<div ng-class="spinnerClass" class="loadingSpinner"></div>\
</div>');
}]
)
.directive(
"vgBuffering",
["VG_STATES", "VG_UTILS", function (VG_STATES, VG_UTILS) {
return {
restrict: "E",
require: "^videogular",
templateUrl: function (elem, attrs) {
return attrs.vgTemplate || 'vg-templates/vg-buffering';
},
link: function (scope, elem, attr, API) {
scope.showSpinner = function showSpinner() {
scope.spinnerClass = {stop: API.isBuffering};
elem.css("display", "block");
};
scope.hideSpinner = function hideSpinner() {
scope.spinnerClass = {stop: API.isBuffering};
elem.css("display", "none");
};
scope.setState = function setState(isBuffering) {
if (isBuffering) {
scope.showSpinner();
}
else {
scope.hideSpinner();
}
};
scope.onStateChange = function onStateChange(state) {
if (state == VG_STATES.STOP) {
scope.hideSpinner();
}
};
scope.onPlayerReady = function onPlayerReady(isReady) {
if (isReady) {
scope.hideSpinner();
}
};
scope.showSpinner();
// Workaround for issue #16: https://github.com/2fdevs/videogular/issues/16
if (VG_UTILS.isMobileDevice()) {
scope.hideSpinner();
}
else {
scope.$watch(
function () {
return API.isReady;
},
function (newVal, oldVal) {
if (API.isReady == true || newVal != oldVal) {
scope.onPlayerReady(newVal);
}
}
);
}
scope.$watch(
function () {
return API.currentState;
},
function (newVal, oldVal) {
if (newVal != oldVal) {
scope.onStateChange(newVal);
}
}
);
scope.$watch(
function () {
return API.isBuffering;
},
function (newVal, oldVal) {
if (newVal != oldVal) {
scope.setState(newVal);
}
}
);
}
}
}
]);
|
