WpStream – Live Streaming, Video on Demand, Pay Per View / 4.4.10

WpStream – Live Streaming, Video on Demand, Pay Per View v4.4.10

wpstream / public / js / wpstream-player.js

wpstream-player.js in WpStream – Live Streaming, Video on Demand, Pay Per View 4.4.10, at public/js/wpstream-player.js

528 lines 15.3 KB

Raw Download Zip

1	/*
2	* To change this license header, choose License Headers in Project Properties.
3	* To change this template file, choose Tools \| Templates
4	* and open the template in the editor.
5	* player,'.$live_event_uri_final.','.$live_conect_views.'
6	*/
7
8	window.WebSocket = window.WebSocket \|\| window.MozWebSocket;
9	if (!window.WebSocket) {
10	console.log("Sorry, but your browser does not support WebSockets");
11	}
12
13	function wpstream_player_initialize(id,hlsUri,statsUri,autoplay){
14
15	var is_autoplay=true;
16	if(autoplay !== 'autoplay'){
17	is_autoplay=false;
18	}
19
20
21	let player = new WpstreamPlayer(id, hlsUri, statsUri, is_autoplay);
22	}
23
24	class WpstreamPlayer {
25	// id;
26	// hlsUri;
27	// statsUri;
28	// autoplay;
29	// ruler = 0; //0 - basic; 1 - ajax; 2 - ws
30	// state = -1; //-1 - unknown; 0 - idle; 1 - starting; 2 - started; 5 - paused; 7 - live
31	// liveConnect;
32	// wrapper;
33	// counter;
34	// chat;
35
36	constructor(id, hlsUri, statsUri, autoplay){
37	console.log("[]WpstreamPlayer: ", id, hlsUri, statsUri, autoplay);
38	this.id = id;
39	this.hlsUri = hlsUri;
40	this.statsUri = statsUri;
41	this.autoplay = autoplay;
42	this.liveConnect = new LiveConnect(this);
43	this.wrapper = jQuery('#wpstream_live_player_wrapper' + id);
44	console.log("wrapper: ", this.wrapper)
45	this.channelId = this.wrapper.attr('data-product-id');
46	console.log("channelId: ", this.channelId)
47	this.playback = new WpstreamPlayback(this, id, autoplay);
48	this.counter = new LiveCounter(this.wrapper, id);
49	this.liveMessage = new WpstreamLiveMessage(this.wrapper, id);
50	this.chat = new WpstreamChat();
51	this.setRuler(1);
52	}
53
54	setRuler(ruler){
55	console.log("setRuler: " + ruler);
56	let oldRuler = this.ruler;
57	this.ruler = ruler;
58	switch (ruler){
59	case 1:
60	if (oldRuler != 1){
61	this.getDynamicSettings();
62	}
63	clearTimeout(this.retrieveDynamicSettingsTimeout);
64	let self = this;
65	this.retrieveDynamicSettingsTimeout = setTimeout(() => self.getDynamicSettings(), 30 * 1000)
66	break;
67	case 2:
68	clearTimeout(this.retrieveDynamicSettingsTimeout);
69	break;
70	}
71	}
72
73	getDynamicSettings(){
74	console.log("getDynamicSettings()");
75	let ajaxurl = wpstream_player_vars.admin_url + 'admin-ajax.php';
76	let owner = this;
77	jQuery.ajax({
78	type: 'POST',
79	url: ajaxurl,
80	dataType: 'json',
81	data: {
82	'action' : 'wpstream_player_check_status',
83	'channel_id' : this.channelId
84	},
85	success: function (data) {
86
87	console.log("dynamicSettings: ", data);
88	if (data == 0){
89	owner.setState(0);
90	}
91	else if (data.started == "no"){
92	owner.setState(1);
93	owner.chat.disconnect();
94
95	}
96	else if (data.started == "yes"){
97	let liveConnectUri = data.live_conect_views;
98	owner.liveConnect.setup(liveConnectUri);
99	let hlsUri = data.event_uri;
100	owner.setSrc(hlsUri);
101	owner.setState(2);
102	owner.chat.connect(data.chat_url);
103	}
104	},
105	error: function (error) {
106	console.log("dynamicSettingsError: ", error)
107	}
108	});
109	if (this.ruler <= 1){
110	this.setRuler(1);
111	}
112	}
113
114	setSrc(uri){
115	this.playback.setSrc(uri);
116	}
117
118	setState(state){
119	console.log("setState: ", state);
120	this.state = state;
121	switch(state){
122	case 0:
123	case 1:
124	this.liveMessage.showOriginalMessage();
125	break;
126	case 2:
127	this.liveMessage.hide();
128	break;
129	case 5:
130	this.liveMessage.showPausedMessage();
131	this.playback.pause();
132	break;
133	case 7:
134	this.liveMessage.hide();
135	this.playback.play();
136	break;
137	}
138	}
139
140	onLiveConnectActive(isActive){
141	console.log("onLiveConnectActive: ", isActive);
142	this.setRuler(isActive ? 2 : 1);
143	if (!isActive){
144	this.counter.hide();
145	}
146	}
147
148	updateViewerCount(count){
149	console.log("updateViewerCount: ", count)
150	this.counter.show();
151	this.counter.setCount(count);
152	}
153	}
154
155	class WpstreamPlayback {
156	// player;
157	// timeQueue = [];
158	// master;
159	// paused = false;
160	// played = false;
161
162
163	constructor(master, id, autoplay){
164	this.timeQueue = [];
165	this.paused = false;
166	this.played = false;
167
168	this.master = master;
169	this.setupBasePlayer(id, autoplay);
170	this.runWatchdog();
171	}
172
173	setupBasePlayer(id, autoplay){
174	console.log("setupBasePlayer: ", id, autoplay);
175	this.player = videojs('wpstream-video' + id, {
176	html5: {
177	vhs: {
178	useBandwidthFromLocalStorage: true,
179	overrideNative: !videojs.browser.IS_SAFARI,
180	}
181	},
182	errorDisplay: false,
183	autoplay:autoplay,
184	preload:"auto",
185	//muted : true
186	});
187	let owner = this;
188	this.player.on('play', function(event) {
189	console.log("Play");
190	owner.played = true;
191	});
192	this.player.on('pause', function(event) {
193	console.log("Pause");
194	});
195	console.log("src: ", this.player.currentSrc());
196	}
197
198
199
200	setSrc(src, force){
201	console.log("setSrc: ", src, force);
202	console.log("currentSrc: ", this.player.currentSrc());
203	console.log("paused: ", this.player.paused());
204	console.log("currentTime: ", this.player.currentTime());
205	if (src != this.player.currentSrc() \|\| force){
206	console.log("setting src...")
207	this.player.src({
208	src: src != null ? src : this.player.currentSrc(),
209	type: "application/x-mpegURL"
210	});
211	}
212	this.player.controlBar.show();
213	this.player.loadingSpinner.show();
214	}
215
216	play(forced){
217	console.log("play() ", forced);
218	this.paused = false;
219	console.log("player.paused: ", this.player.paused());
220	console.log("currentTime: ", this.player.currentTime());
221
222	if (this.player.paused() \|\| forced){
223	this.player.src({
224	src: this.player.currentSrc(),
225	type: "application/x-mpegURL"
226	});
227	console.log("autoplay: ", this.player.autoplay());
228	this.player.currentTime(0);
229	console.log("played: ", this.played);
230	if (this.played){
231	var promise = this.player.play();
232	// console.log("promise: ", promise);
233	let player = this.player;
234	if (promise !== undefined) {
235	promise.then(function() {
236	console.log("Autoplay started ;)");
237	}).catch(function(error) {
238	console.log("Autoplay did not work ", error);
239	});
240	}
241	console.log("no promise")
242	}
243	}
244	this.player.controlBar.show();
245	this.player.loadingSpinner.show();
246	}
247
248	pause(){
249	console.log("pause()");
250	this.paused = true;
251	this.player.pause();
252	console.log("paused: ", this.player.paused());
253	console.log("currentTime: ", this.player.currentTime());
254	this.player.controlBar.hide();
255	this.player.loadingSpinner.hide();
256	}
257
258	runWatchdog(){
259	//console.log("runWatchdog()");
260	this.timeQueue.push(this.player.currentTime());
261	if (this.timeQueue.length > 30){
262	this.timeQueue.shift();
263	if (this.timeQueue[0] === this.timeQueue[this.timeQueue.length -1]){
264	console.log("queue: ", this.timeQueue[0], this.timeQueue[this.timeQueue.length -1]);
265	console.log("paused: ", this.paused);
266	console.log("ruler: ", this.master.ruler);
267	console.log("state: ", this.master.state);
268	console.log("player paused: ", this.player.paused());
269	console.log("currentTime: ", this.player.currentTime());
270
271	if (this.master.ruler == 2){
272	if (!this.player.paused()){
273	this.play(true);
274	}
275	}
276	else if (this.master.state > 1) {
277	if (!this.player.paused() \|\| this.player.currentTime() === 0){
278	this.play(true);
279	}
280	}
281	this.timeQueue = [];
282	}
283	}
284	let self = this;
285	setTimeout(() => self.runWatchdog(), 1 * 1000)
286	}
287	}
288
289	class WpstreamChat {
290	// connected = '';
291
292	constructor(){
293	this.connected = '';
294	}
295
296	connect(url){
297	this.connected = 'yes';
298	if(typeof(connect)==='function' ){
299	connect(url);
300	}
301	}
302
303	disconnect(){
304	if( typeof(showChat) === 'function' && this.connected === 'yes' ){
305	showChat('info', null, wpstream_player_vars.chat_not_connected);
306	this.connected='no';
307	}
308	}
309	}
310
311	class WpstreamLiveMessage {
312	// element;
313	// msg;
314	// originalMessage;
315	// customMessage;
316	// state = -1; // -1 - unknown; 0 - hidden; 1 - showing original msg; 3 - showing paused msg; 5 - showing custom msg
317
318	constructor(wrapper, id){
319	this.state = -1;
320	this.element = wrapper.find('.wpstream_not_live_mess');
321	this.msg = wrapper.find('.wpstream_not_live_mess_mess');
322	this.originalMessage = this.msg.text();
323	console.log("originalMessage: ", this.originalMessage);
324	var playerElement = jQuery('#wpstream-video' + id);
325	this.element.appendTo(playerElement);
326	}
327
328	setCustomMessage(msg){
329	this.customMessage = msg;
330	if (this.state == 3 \|\| this.state == 5){
331	this.showPausedMessage();
332	}
333	}
334
335	showPausedMessage(){
336	if (this.customMessage != null){
337	this.msg.text(this.customMessage);
338	this.state = 5;
339	}
340	else {
341	this.msg.text(wpstream_player_vars.server_up);
342	this.state = 3;
343	}
344	this.show();
345	}
346
347	showOriginalMessage(){
348	this.msg.text(this.originalMessage)
349	this.show();
350	this.state = 1;
351	}
352
353	//public
354	hide(){
355	this.element.hide();
356	this.state = 0;
357	}
358
359	//private
360	show(){
361	this.element.show();
362	}
363
364
365	}
366
367	class LiveCounter {
368	// element;
369	constructor(wrapper, id){
370	console.log("[]LiveCounter: ", wrapper, id);
371	this.element = wrapper.find('.wpestream_live_counting');
372	this.element.css("background-color","rgb(174 69 69 / 90%)");
373	//var playerElement = wrapper.find('.wpstream-video' + id);
374	var playerElement = jQuery('#wpstream-video' + id);
375	console.log("playerElement: ", playerElement);
376	this.element.appendTo(playerElement);
377	this.hide();
378	}
379
380	show(){
381	this.element.show();
382	}
383
384	hide(){
385	this.element.hide();
386	}
387	setCount(count){
388	this.element.html( count + " Viewers");
389	}
390	}
391
392	class LiveConnect {
393	// master;
394	// wsUri;
395	// ws;
396	// connectCount = 0;
397	// connected = false;
398	// pendingConnect = false;
399
400	constructor(master){
401	this.connectCount = 0;
402	this.connected = false;
403	this.pendingConnect = false;
404	this.master = master;
405	}
406
407	setup(wsUri){
408	console.log("setup: ", wsUri);
409	this.close();
410	this.wsUri = wsUri;
411	this.connect();
412	}
413
414	close(){
415	if (this.ws != null){
416	this.ws.close();
417	}
418	this.ws = null;
419	}
420
421	connect(){
422	let connectAttempt = ++ this.connectCount;
423	console.log("connect() ", connectAttempt);
424	this.pendingConnect = true;
425	this.ws = new WebSocket(this.wsUri);
426	let owner = this;
427	this.ws.onopen = function () {
428	console.log("connected. ", connectAttempt);
429	owner.pendingConnect = false;
430	owner.master.onLiveConnectActive(true);
431	//socket_connection.send(`{"type":"register","data":"${now}"}`);
432	};
433	this.ws.onclose = function(){
434	console.log("onclose.. ", connectAttempt);
435	owner.master.onLiveConnectActive(false);
436	}
437	this.ws.onerror = function (error) {
438	console.log("onerror: ", connectAttempt, error);
439	owner.master.onLiveConnectActive(false);
440	};
441	this.ws.onmessage = function (message) {
442	console.log("onmessage: ", connectAttempt, message.data);
443	owner.processMessage(message.data);
444	}
445	}
446
447	processMessage(msg){
448	console.log("processMessage: ", msg);
449	var json;
450	try {
451	json = JSON.parse(msg);
452	} catch (e) {
453	console.log("Invalid JSON: ", msg);
454	return;
455	}
456	if (json.type){
457	switch(json.type){
458	case "viewerCount":
459	this.master.updateViewerCount(json.data);
460	break;
461	case "onair":
462	this.master.setState(json.data ? 7 : 5);
463	break;
464	case "status":
465	this.master.liveMessage.setCustomMessage(json.data);
466	break;
467	default:
468	console.log("invalid type: ", json.type);
469	}
470	}
471	}
472	}
473
474	function wpstream_read_websocket_info(event_id,player, player_wrapper, socket_wss_live_conect_views_uri, event_uri){
475	console.log("wpstream_read_websocket_info: ", event_id, player, player_wrapper, socket_wss_live_conect_views_uri, event_uri);
476	//do nothing
477	}
478
479	jQuery(document).ready(function ($) {
480	console.log("ready!")
481	var event_id;
482	var player_wrapper;
483	jQuery('.wpstream_live_player_wrapper').each(function(){
484	console.log("wrapper: ", this, $(this));
485	if($(this).hasClass('wpstream_low_latency')){
486	return;
487	}
488	event_id = jQuery(this).attr('data-product-id');
489	player_wrapper = jQuery(this);
490
491	//wpstream_check_player_status_ticker(player_wrapper,event_id);
492	});
493
494	});
495
496
497
498
499
500	function initPlayer(playerID,low_latency_uri,muted,autoplay){
501	var is_muted = false;
502	var is_autoplay = true;
503	if(muted === 'muted'){
504	is_muted=true;
505	}
506
507	if(autoplay !== 'autoplay'){
508	is_autoplay=false;
509	}
510
511	console.log('is_muted '+is_muted + '/ '+is_autoplay);
512
513	sldpPlayer = SLDP.init({
514	container: playerID,
515	stream_url: low_latency_uri,
516	buffering: 500,
517	autoplay: is_autoplay,
518	height: "parent",
519	width: "parent",
520	muted: is_muted,
521	});
522
523	};
524
525	function removePlayer(){
526	sldpPlayer.destroy();
527	}
528