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
|
/**
* @license videogular v1.3.2 http://videogular.com
* Two Fucking Developers http://twofuckingdevelopers.com
* License: MIT
*/
/**
* @ngdoc directive
* @name com.2fdevs.videogular.plugins.overlayplay.directive:vgOverlayPlay
* @restrict E
* @description
* Shows a big play button centered when player is paused or stopped.
*
* <pre>
* <videogular vg-theme="config.theme.url" vg-autoplay="config.autoPlay">
* <vg-media vg-src="sources"></vg-media>
*
* <vg-overlay-play></vg-overlay-play>
* </videogular>
* </pre>
*
*/
"use strict";
angular.module("com.2fdevs.videogular.plugins.overlayplay", [])
.run(
["$templateCache", function ($templateCache) {
$templateCache.put("vg-templates/vg-overlay-play",
'<div class="overlayPlayContainer" ng-click="onClickOverlayPlay()">\
<div class="iconButton" ng-class="overlayPlayIcon"></div>\
</div>');
}]
)
.directive(
"vgOverlayPlay",
["VG_STATES", function (VG_STATES) {
return {
restrict: "E",
require: "^videogular",
scope: {},
templateUrl: function (elem, attrs) {
return attrs.vgTemplate || 'vg-templates/vg-overlay-play';
},
link: function (scope, elem, attr, API) {
scope.onChangeState = function onChangeState(newState) {
switch (newState) {
case VG_STATES.PLAY:
scope.overlayPlayIcon = {};
break;
case VG_STATES.PAUSE:
scope.overlayPlayIcon = {play: true};
break;
case VG_STATES.STOP:
scope.overlayPlayIcon = {play: true};
break;
}
};
scope.onClickOverlayPlay = function onClickOverlayPlay(event) {
API.playPause();
};
scope.overlayPlayIcon = {play: true};
scope.$watch(
function () {
return API.currentState;
},
function (newVal, oldVal) {
scope.onChangeState(newVal);
}
);
}
}
}
]);
|
