@brandbrigade/ott-bb-player 1.0.5 → 1.0.6

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 (6) hide show
  1. package/README.md +3 -0
  2. package/js/OTTPlayer.prod.js +1 -1
  3. package/package.json +1 -1
  4. package/sample.html +123 -67
  5. package/wmc.prod.js +1 -0
  6. package/wmc_new.prod.js +1 -1
package/sample.html CHANGED
@@ -1,10 +1,12 @@
1
1
  <!DOCTYPE html>
2
2
  <script type="text/javascript">
3
3
  var globalConfig = {
4
- url:"https://nbablpng.akamaized.net/live/hls-itc/bbtest49/v0-121.m3u8?stSecret=rj12sw543terw32422334swees",
5
- gameId:"arena_nba_BB_test_Lakers_long",
6
- channel:"nba"
4
+ url:"https://nbablpng.akamaized.net/live/hls-itc/bbtestexternal/index.m3u8?ISO3166=US&sessionId=2249876534844428711287488243568748000000457785884432&stSecret=rj12sw543terw32422334swees",
5
+ gameId:"arena_nba_BB_test_Lakers_long", //does not take effect from now. Taking this param from MK
6
+ channel:"nba",//does not take effect from now. Taking this param from MK
7
+ MKsync: "yes"
7
8
  };
9
+
8
10
  </script>
9
11
  <html lang="en">
10
12
  <head>
@@ -15,38 +17,54 @@
15
17
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
18
  <title>MK Player & BB OTT</title>
17
19
 
18
- <script src="wmc_new.prod.js"></script>
20
+ <!--<script src="js/lib/wmc.prod.js"></script>-->
21
+ <script src="wmc.prod.js"></script>
19
22
  <script src="js/OTTPlayer.prod.js"></script>
20
23
 
21
24
  <style>
22
- body {
23
- margin: 0;
24
- }
25
-
26
- #player_container {
27
- width: 100%;
28
- height: 100%;
29
- }
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ height: 100vh; /* Ensure the body takes up the full viewport height */
31
+ flex-direction: column;
32
+ }
33
+ #personName{
34
+ text-align: center;
35
+ }
36
+ #player_container {
37
+ /* Width and height as needed */
38
+ text-align: center;
39
+ position: relative; /* Ensure positioning relative to the body */
40
+ height: 90%;
41
+ }
30
42
 
31
43
  #player_container > * {
44
+ /* Styles for child elements */
32
45
  position: absolute;
33
- text-align: center;
34
- width: 100%;
46
+ top: 50%;
47
+ left: 50%;
48
+ transform: translate(-50%, -50%);
49
+ height: 90%;
50
+ /* Other styles as needed */
35
51
  }
36
52
  </style>
37
53
  </head>
38
54
  <body>
39
55
  <br/>
40
- <br/>
41
- <button id="toggleBtn" onclick="toggleBBPlayer()">Toggle ott player OFF</button>
42
- <br/>
43
- <div id="debugText2"></div>
56
+ <div id="personName"></div>
44
57
  <div id="player_container">
45
58
  <video id="video_element" poster="" crossOrigin controls></video>
46
59
  </div>
47
60
  <canvas id="canvas" style="display: none;"></canvas>
48
61
  <script type="text/javascript">
49
- const video = document.getElementById("video_element");
62
+
63
+
64
+
65
+ function doAllStuff()
66
+ {
67
+ const video = document.getElementById("video_element");
50
68
  const wmcEvents = amc.AmcEvents;
51
69
  const wmcConstants = amc.AmcConstants;
52
70
 
@@ -59,46 +77,39 @@
59
77
  app_id: "1023",
60
78
  authorization_token: "AuthToken1jZHLbtswEEW_xtpJIIcPkQstVDd1giIIkCbZ8zGK2ciSS1Jx3K8v7SYtULRFAGI4uLx3BjjsFx9wcthtc96nFetX8KmciOMxTI97E_Ox2cfZm2aypsnPzI3z4hs374qrukppwfhHNuX0n8jJ-9vqtrgzqXnZjWk2-2aOj0U9pFKAEFGucwkepxzysbRuNGF3ep_MDrsl1URb4_1AaiqFqbkgulbck9qAG1qrEVrPqjuczJSvfOdxMMuYq34c5wP6Nz39erhPGIvvvYN75-blPJmZ1hoErIW1vOa-bWutBdZKAPHOusERrD7-3PK65F2Rv_LaBRfnNA_5leobMXUiJv9BLM4jdmmxycVgMVb9krdzDN9NDvN0bdJTR4WmnHEmpKCU0RYEV7oFYFRzIrUCKZViQLnQUoEQVFCQWiiilRQEKDANjBPKSi9a4KBEgdeCqi5e9iFiupk6KjUIDYrQah3RZPRnUemyukSrz3jcLKH8lLUeEHntiLcFDkCtvSW1ciAtmJLgorq87tdfLnsQsrsPcRzaFVjycF9q6A9rnOD29oF_fVabp-WuiBf98uFmO_TfNn0xMf8D"
61
79
  }
62
- let bbPlayer = null;
63
80
  let fps = 0;
64
81
 
65
82
 
66
-
83
+ function processEventPlay(eventObj) {
84
+ switch (eventObj.eventType) {
85
+ case wmcEvents.AMC_EVENT_STATE_CHANGED:
86
+ console.log("!!!!!!!!!!!!!!!!!!!!!!!! 123");
87
+ // start the VOD/LIVE playback
88
+ //wmcMgr.createPlayer(config.playback_mode, config.media_id, config.app_id);
89
+ //if (eventObj.value1==2)
90
+ // playing=true;
91
+ console.log("!!!!!!!!!!!!!!!!!!!!!!!! AMC_EVENT_STATE_CHANGED");
92
+ break;
93
+ default:
94
+ }
95
+
96
+ }
97
+
67
98
  function processEvent(eventObj) {
68
99
  switch (eventObj.eventType) {
69
100
  case wmcEvents.AMC_EVENT_METRICS_UPDATE:
70
101
  console.log("AMC_EVENT_METRICS_UPDATE");
71
102
  break;
72
103
  case wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK:
73
-
74
- if (typeof eventObj.mediaInfo.frameRate != "undefined"){
75
- console.log("FPS=", eventObj.mediaInfo.frameRate );
76
- if(bbPlayer)
77
- {
78
- bbPlayer.SetFps(eventObj.mediaInfo.frameRate);
79
- }
80
- }
81
104
  break;
82
105
 
83
106
  case wmcEvents.AMC_EVENT_PLAY_READY:
107
+ var logTextBox = document.getElementById('editable-element');
108
+
109
+
84
110
  wmcMgr.setContainer(video);
85
111
  wmcMgr.start();
86
- // init BB OTT player
87
- bbPlayer = new BB.OTTPlayer(video /*video tag */,60000/1001 /* frame rate */,{
88
- gameId:globalConfig.gameId,
89
- augmentation:{
90
- channelName: globalConfig.channel
91
- }
92
- });
93
- //bbPlayer.Toggle(true/false)// to enable/disable - sample below
94
- function onNewMetadata(eventObj) {
95
- bbPlayer.onNewMetadata(eventObj)
96
- };
97
- function onNewSegment(eventObj) {
98
- bbPlayer.onNewSegment(eventObj);
99
- };
100
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA, onNewMetadata);
101
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK, onNewSegment);
112
+
102
113
  break;
103
114
  case wmcEvents.AMC_EVENT_PLAYER_METADATA:
104
115
 
@@ -113,6 +124,7 @@
113
124
  wmcMgr.createPlayer(config.playback_mode, config.media_id, config.app_id);
114
125
 
115
126
  break;
127
+
116
128
  case wmcEvents.AMC_EVENT_ERROR:
117
129
  console.error(eventObj.code + ":" + ((eventObj.message) ? eventObj.message : eventObj.message.error));
118
130
  break;
@@ -121,6 +133,10 @@
121
133
  }
122
134
 
123
135
  const wmcMgr = new amc.AmcManager(config.server_url, config.owner_Uid);
136
+ //<!-- enable brandBrigade -->
137
+ // when this flag is enabled sdk will initialise the brandBrigade player with the required information and will make the necessary calls on the appropriate player callbacks
138
+ wmcMgr.enableBrandBrigade(true);
139
+
124
140
  wmcMgr.setSTSToken(config.authorization_token);
125
141
  wmcMgr.setLogLevel(wmcConstants.IMC_LOG_DEBUG);
126
142
 
@@ -136,51 +152,91 @@ function onPlaybackControlBlock(eventObj) {
136
152
  wmcMgr.setNativeHlsParsing(true);
137
153
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROGRAM_RESTRICTIONS, onPlaybackControlBlock);
138
154
 
155
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_INIT_COMPLETE, processEvent);
156
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
157
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAY_READY, processEvent);
158
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_ERROR, processEvent);
159
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEvent);
139
160
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROGRAM_CHANGED, processEvent);
140
161
  // other optional events
162
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
163
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PRELOAD_COMPLETE, processEvent);
164
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED, processEvent);
141
165
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_BIT_RATE_CHANGED, processEvent);
142
166
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_STARTED, processEvent);
143
167
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_QUARTILE, processEvent);
144
168
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_FINISHED, processEvent);
145
169
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_BREAK_START, processEvent);
146
170
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_BREAK_END, processEvent);
171
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA, processEvent);
172
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA_PARSED, processEvent);
147
173
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_TEXT_TRACKS_CHANGED, processEvent);
148
174
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_TEXT_TRACKS_ADDED, processEvent);
149
175
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AUDIO_TRACKS_CHANGED, processEvent);
150
176
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PERIOD_SWITCH, processEvent);
151
177
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PERIOD_SWITCHED, processEvent);
152
178
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_AD_MARKER_DATA, processEvent);
179
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_METRICS_UPDATE, processEvent);
153
180
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYOUT_METRIC_UPDATE, processEvent);
154
181
  wmcMgr.addEventListener(wmcEvents.BEACON_FAIL_OPEN_STATUS, processEvent);
155
182
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROGRAM_QUERY_STATUS, processEvent);
156
183
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_QUALITY_CHANGED, processEvent);
157
184
  wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PROFILING, processEvent);
185
+ //wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK, processEvent);
158
186
 
159
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK, processEvent);
160
187
 
161
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_ERROR, processEvent);
162
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEvent);
163
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED, processEvent);
164
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
165
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
166
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_INIT_COMPLETE, processEvent);
167
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAY_READY, processEvent);
168
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PRELOAD_COMPLETE, processEvent);
169
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA, processEvent);
170
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA_PARSED, processEvent);
171
- wmcMgr.addEventListener(wmcEvents.AMC_EVENT_METRICS_UPDATE, processEvent);
172
- wmcMgr.setPlayerKey("60a31c68-c920-42be-a74a-506d51df7233");
173
- wmcMgr.setExternalSourceParams({ sourceUrl: globalConfig.url, licenseUrl: "" });
174
- wmcMgr.init();
175
- const toggleBtn = document.getElementById("toggleBtn");
176
- function toggleBBPlayer()
177
- {
178
- if(bbPlayer)
188
+
189
+
190
+
191
+
192
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_SEGMENT_PLAYBACK, processEvent);
193
+
194
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_ERROR, processEvent);
195
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEventPlay);
196
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED, processEvent);
197
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
198
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
199
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_INIT_COMPLETE, processEvent);
200
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAY_READY, processEvent);
201
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PRELOAD_COMPLETE, processEvent);
202
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA, processEvent);
203
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAYER_METADATA_PARSED, processEvent);
204
+ wmcMgr.addEventListener(wmcEvents.AMC_EVENT_METRICS_UPDATE, processEvent);
205
+ wmcMgr.setPlayerKey("60a31c68-c920-42be-a74a-506d51df7233");
206
+ wmcMgr.setExternalSourceParams({ sourceUrl: globalConfig.url, licenseUrl: "" });
207
+ wmcMgr.init();
208
+ const toggleBtn = document.getElementById("toggleBtn");
209
+
210
+ }
211
+
212
+ const URLParams = new URL(document.location);
213
+ const CONFIG_NAME = URLParams.searchParams.get("config") || "";
214
+
215
+ async function fetchConfig() {
216
+ if (CONFIG_NAME !== "") {
217
+ try {
218
+ const response = await fetch(CONFIG_NAME);
219
+ if (!response.ok) {
220
+ throw new Error('Network response was not ok');
221
+ }
222
+ const data = await response.json();
223
+ console.log('hls_url:', data.url);
224
+ globalConfig = Object.assign({}, globalConfig, data);
225
+ doAllStuff();
226
+
227
+ } catch (error) {
228
+ console.error('Error fetching JSON:', error);
229
+ }
230
+ }
231
+ else
179
232
  {
180
- bbPlayer.Toggle(!bbPlayer.options.enabled);
181
- toggleBtn.innerText = "Toggle ott player " + (bbPlayer.options.enabled ? "OFF" : "ON");
233
+ doAllStuff();
182
234
  }
183
- }
235
+ }
236
+ fetchConfig(); // Call the async function to initiate the fetch operation
237
+
238
+
239
+
184
240
  </script>
185
241
  </body>
186
242