ovenplayer 0.10.48 → 0.10.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/ovenplayer.js +1 -1
  2. package/dist/ovenplayer.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/js/view/components/controls/volumeButton.js +208 -207
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ovenplayer",
3
- "version": "0.10.48",
3
+ "version": "0.10.49",
4
4
  "description": "OvenPlayer is Open-Source HTML5 Player. OvenPlayer supports WebRTC Signaling from OvenMediaEngine for Sub-Second Latency Streaming.",
5
5
  "main": "dist/ovenplayer.js",
6
6
  "scripts": {
package/src/js/view/components/controls/volumeButton.js CHANGED
@@ -1,207 +1,208 @@
1
- /**
2
- * Created by hoho on 2018. 7. 20..
3
- */
4
- import OvenTemplate from "view/engine/OvenTemplate";
5
- import {
6
- READY,
7
- CONTENT_VOLUME,
8
- CONTENT_MUTE
9
- } from "api/constants";
10
- import {PLAYER_PLAY} from "../../../api/constants";
11
-
12
- const VolumeButton = function($container, api){
13
-
14
- let $sliderContainer = "",
15
- $slider = "",
16
- $sliderHandle = "",
17
- $sliderValue = "",
18
- $volumeIconBig = "",
19
- $volumeIconSmall = "",
20
- $volumeIconMute = "";
21
- let mouseDown = false;
22
- let sliderWidth = 70, handleWidth = 12, minRange = 0, maxRange = 0;
23
-
24
- let isMobile = api.getBrowser().os === "iOS" || api.getBrowser().os === "Android";
25
-
26
-
27
- function setVolumeIcon(percentage) {
28
- $volumeIconBig.hide();
29
- $volumeIconSmall.hide();
30
- $volumeIconMute.hide();
31
-
32
- if (percentage >= 70) {
33
- $volumeIconBig.show();
34
- } else if (percentage < 70 && percentage > 0) {
35
- $volumeIconSmall.show();
36
- } else if (percentage == 0) {
37
- $volumeIconMute.show();
38
- }else{
39
- $volumeIconBig.show();
40
- }
41
- }
42
-
43
- function setVolumeUI(percentage) {
44
- if (api.getMute()) {
45
- percentage = 0;
46
- }
47
-
48
- setVolumeIcon(percentage);
49
-
50
- const handlePosition = maxRange * percentage / 100;
51
-
52
-
53
- $sliderHandle.css("left", handlePosition+ "px");
54
- $sliderValue.css("width", handlePosition+ "px");
55
- }
56
-
57
- function calculatePercentage(event) {
58
- const relativeX = (event.pageX || event.touches[0].clientX) - $slider.offset().left;
59
- let percentage = relativeX / sliderWidth * 100;
60
-
61
- if (percentage < 0) {
62
- percentage = 0;
63
- }
64
-
65
- if (percentage > 100) {
66
- percentage = 100;
67
- }
68
- return percentage;
69
- }
70
-
71
-
72
- const onRendered = function($current, template){
73
-
74
- $sliderContainer = $current.find(".op-volume-slider-container");
75
-
76
- if (api.getBrowser().mobile) {
77
- $sliderContainer.hide();
78
- }
79
-
80
- $slider = $current.find(".op-volume-silder");
81
- $sliderHandle = $current.find(".op-volume-slider-handle");
82
- $sliderValue = $current.find(".op-volume-slider-value");
83
-
84
- $volumeIconBig = $current.find( ".op-volume-max");
85
- $volumeIconSmall = $current.find(".op-volume-small");
86
- $volumeIconMute = $current.find(".op-volume-mute");
87
-
88
- //ToDo : Can't read width.
89
- //sliderWidth = $sliderContainer.width();
90
- //handleWidth = $sliderHandle.width();
91
-
92
- maxRange = sliderWidth - (handleWidth/2);
93
-
94
- $sliderHandle.css("left", maxRange+ "px");
95
-
96
- setVolumeUI(api.getVolume());
97
-
98
- api.on(READY, function() {
99
- setVolumeUI(api.getVolume());
100
- }, template);
101
- api.on(CONTENT_VOLUME, function(data) {
102
-
103
- setVolumeUI(data.volume);
104
-
105
- }, template);
106
- api.on(CONTENT_MUTE, function(data) {
107
- if (data.mute) {
108
- setVolumeUI(0);
109
- } else {
110
- setVolumeUI(api.getVolume());
111
- }
112
- }, template);
113
-
114
- };
115
- const onDestroyed = function(template){
116
- api.off(READY, null, template);
117
- api.off(CONTENT_VOLUME, null, template);
118
- api.off(CONTENT_MUTE, null, template);
119
- };
120
- const events = {
121
- "click .op-volume-button" : function(event, $current, template){
122
- event.preventDefault();
123
- if(isMobile){
124
-
125
- }else{
126
- if (api.getVolume() === 0) {
127
- api.setMute(false);
128
- api.setVolume(100);
129
- } else {
130
- api.setMute();
131
- }
132
- }
133
-
134
- },
135
- "mouseenter .op-volume-button" : function(event, $current, template){
136
- event.preventDefault();
137
-
138
- if(!isMobile){
139
- $sliderContainer.addClass("active");
140
- }
141
- },
142
- "mouseleave .op-volume-silder" : function(event, $current, template){
143
- event.preventDefault();
144
-
145
- mouseDown = false;
146
- },
147
- "mousedown .op-volume-silder" : function(event, $current, template){
148
- event.preventDefault();
149
- mouseDown = true;
150
- api.setMute(false);
151
- api.setVolume(calculatePercentage(event));
152
- },
153
- "mouseup .op-volume-silder" : function(event, $current, template){
154
- event.preventDefault();
155
- mouseDown = false;
156
- },
157
- "mousemove .op-volume-silder" : function(event, $current, template){
158
- event.preventDefault();
159
- if (!mouseDown) {
160
- return false;
161
- }
162
-
163
- api.setVolume(calculatePercentage(event));
164
- },
165
- // "touchstart .op-volume-slider-handle" : function(event){
166
- // mouseDown = true;
167
- //
168
- // },
169
- // "touchmove .op-volume-slider-handle" : function(event){
170
- // if(mouseDown){
171
- //
172
- // api.setMute(false);
173
- // api.setVolume(calculatePercentage(event));
174
- // }
175
- // },
176
- // "touchend .op-volume-slider-handle" : function(event){
177
- //
178
- // if(mouseDown){
179
- // mouseDown = false;
180
- // }
181
- // },
182
- "touchstart .op-volume-button" : function(event){
183
- if(isMobile){
184
- if (api.getMute()) {
185
- api.setMute(false);
186
- } else {
187
- api.setMute(true);
188
- }
189
- }
190
- }
191
- };
192
- let that = OvenTemplate($container, "VolumeButton", api.getConfig(), null, events, onRendered, onDestroyed);
193
- that.setMouseDown = (state) => {
194
- mouseDown = state;
195
- };
196
- return that;
197
-
198
- /*or
199
-
200
- return Object.assign(OvenTemplate($container, "VolumeButton", api.getConfig(), null, events, onRendered, onDestroyed), {
201
- setMouseDown: function (state) {
202
- mouseDown = state;
203
- }
204
- });*/
205
- };
206
-
207
- export default VolumeButton;
1
+ /**
2
+ * Created by hoho on 2018. 7. 20..
3
+ */
4
+ import OvenTemplate from "view/engine/OvenTemplate";
5
+ import {
6
+ READY,
7
+ CONTENT_VOLUME,
8
+ CONTENT_MUTE
9
+ } from "api/constants";
10
+ import {PLAYER_PLAY} from "../../../api/constants";
11
+
12
+ const VolumeButton = function($container, api){
13
+
14
+ let $sliderContainer = "",
15
+ $slider = "",
16
+ $sliderHandle = "",
17
+ $sliderValue = "",
18
+ $volumeIconBig = "",
19
+ $volumeIconSmall = "",
20
+ $volumeIconMute = "";
21
+ let mouseDown = false;
22
+ let sliderWidth = 70, handleWidth = 12, minRange = 0, maxRange = 0;
23
+
24
+ let isMobile = api.getBrowser().os === "iOS" || api.getBrowser().os === "Android";
25
+
26
+
27
+ function setVolumeIcon(percentage) {
28
+ $volumeIconBig.hide();
29
+ $volumeIconSmall.hide();
30
+ $volumeIconMute.hide();
31
+
32
+ if (percentage >= 70) {
33
+ $volumeIconBig.show();
34
+ } else if (percentage < 70 && percentage > 0) {
35
+ $volumeIconSmall.show();
36
+ } else if (percentage == 0) {
37
+ $volumeIconMute.show();
38
+ }else{
39
+ $volumeIconBig.show();
40
+ }
41
+ }
42
+
43
+ function setVolumeUI(percentage) {
44
+ if (api.getMute()) {
45
+ percentage = 0;
46
+ }
47
+
48
+ setVolumeIcon(percentage);
49
+
50
+ const handlePosition = maxRange * percentage / 100;
51
+
52
+
53
+ $sliderHandle.css("left", handlePosition+ "px");
54
+ $sliderValue.css("width", handlePosition+ "px");
55
+ }
56
+
57
+ function calculatePercentage(event) {
58
+ const relativeX = (event.pageX || event.touches[0].clientX) - $slider.offset().left;
59
+ let percentage = relativeX / sliderWidth * 100;
60
+
61
+ if (percentage < 0) {
62
+ percentage = 0;
63
+ }
64
+
65
+ if (percentage > 100) {
66
+ percentage = 100;
67
+ }
68
+ return percentage;
69
+ }
70
+
71
+
72
+ const onRendered = function($current, template){
73
+
74
+ $sliderContainer = $current.find(".op-volume-slider-container");
75
+
76
+ if (api.getBrowser().mobile) {
77
+ $sliderContainer.hide();
78
+ }
79
+
80
+ $slider = $current.find(".op-volume-silder");
81
+ $sliderHandle = $current.find(".op-volume-slider-handle");
82
+ $sliderValue = $current.find(".op-volume-slider-value");
83
+
84
+ $volumeIconBig = $current.find( ".op-volume-max");
85
+ $volumeIconSmall = $current.find(".op-volume-small");
86
+ $volumeIconMute = $current.find(".op-volume-mute");
87
+
88
+ //ToDo : Can't read width.
89
+ //sliderWidth = $sliderContainer.width();
90
+ //handleWidth = $sliderHandle.width();
91
+
92
+ maxRange = sliderWidth - (handleWidth/2);
93
+
94
+ $sliderHandle.css("left", maxRange+ "px");
95
+
96
+ setVolumeUI(api.getVolume());
97
+
98
+ api.on(READY, function() {
99
+ setVolumeUI(api.getVolume());
100
+ }, template);
101
+ api.on(CONTENT_VOLUME, function(data) {
102
+
103
+ setVolumeUI(data.volume);
104
+
105
+ }, template);
106
+ api.on(CONTENT_MUTE, function(data) {
107
+ if (data.mute) {
108
+ setVolumeUI(0);
109
+ } else {
110
+ setVolumeUI(api.getVolume());
111
+ }
112
+ }, template);
113
+
114
+ };
115
+ const onDestroyed = function(template){
116
+ api.off(READY, null, template);
117
+ api.off(CONTENT_VOLUME, null, template);
118
+ api.off(CONTENT_MUTE, null, template);
119
+ };
120
+ const events = {
121
+ "click .op-volume-button" : function(event, $current, template){
122
+ event.preventDefault();
123
+ if(isMobile){
124
+
125
+ }else{
126
+ if (api.getVolume() === 0) {
127
+ api.setMute(false);
128
+ api.setVolume(100);
129
+ } else {
130
+ api.setMute();
131
+ }
132
+ }
133
+
134
+ },
135
+ "mouseenter .op-volume-button" : function(event, $current, template){
136
+ event.preventDefault();
137
+
138
+ if(!isMobile){
139
+ $sliderContainer.addClass("active");
140
+ }
141
+ },
142
+ "mouseleave .op-volume-silder" : function(event, $current, template){
143
+ event.preventDefault();
144
+
145
+ mouseDown = false;
146
+ },
147
+ "mousedown .op-volume-silder" : function(event, $current, template){
148
+ event.preventDefault();
149
+ mouseDown = true;
150
+ api.setMute(false);
151
+ api.setVolume(calculatePercentage(event));
152
+ },
153
+ "mouseup .op-volume-silder" : function(event, $current, template){
154
+ event.preventDefault();
155
+ mouseDown = false;
156
+ },
157
+ "mousemove .op-volume-silder" : function(event, $current, template){
158
+ event.preventDefault();
159
+ if (!mouseDown) {
160
+ return false;
161
+ }
162
+
163
+ api.setVolume(calculatePercentage(event));
164
+ },
165
+ // "touchstart .op-volume-slider-handle" : function(event){
166
+ // mouseDown = true;
167
+ //
168
+ // },
169
+ // "touchmove .op-volume-slider-handle" : function(event){
170
+ // if(mouseDown){
171
+ //
172
+ // api.setMute(false);
173
+ // api.setVolume(calculatePercentage(event));
174
+ // }
175
+ // },
176
+ // "touchend .op-volume-slider-handle" : function(event){
177
+ //
178
+ // if(mouseDown){
179
+ // mouseDown = false;
180
+ // }
181
+ // },
182
+ "touchstart .op-volume-button" : function(event){
183
+ if(isMobile){
184
+ if (api.getMute() || api.getVolume() === 0) {
185
+ api.setMute(false);
186
+ api.setVolume(100);
187
+ } else {
188
+ api.setMute(true);
189
+ }
190
+ }
191
+ }
192
+ };
193
+ let that = OvenTemplate($container, "VolumeButton", api.getConfig(), null, events, onRendered, onDestroyed);
194
+ that.setMouseDown = (state) => {
195
+ mouseDown = state;
196
+ };
197
+ return that;
198
+
199
+ /*or
200
+
201
+ return Object.assign(OvenTemplate($container, "VolumeButton", api.getConfig(), null, events, onRendered, onDestroyed), {
202
+ setMouseDown: function (state) {
203
+ mouseDown = state;
204
+ }
205
+ });*/
206
+ };
207
+
208
+ export default VolumeButton;