@smoud/playable-sdk 1.0.0 → 1.0.2
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.
- package/README.md +64 -54
- package/dist/esm/index.js +33 -37
- package/dist/iife/index.js +33 -37
- package/dist/index.js +33 -37
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
# @smoud/playable-sdk
|
|
2
2
|
|
|
3
|
-
[](https://
|
|
4
|
-
[](https://
|
|
3
|
+
[](https://www.npmjs.com/package/@smoud/playable-sdk)
|
|
4
|
+
[](https://www.npmjs.com/package/@smoud/playable-sdk)
|
|
5
|
+
[](https://www.npmjs.com/package/@smoud/playable-sdk)
|
|
6
|
+
[](https://deepscan.io/dashboard#view=project&tid=19616&pid=29066&bid=935410)
|
|
7
|
+
[](https://opensource.org/license/MIT)
|
|
5
8
|
|
|
6
9
|
It's powerful, unified SDK that seamlessly integrates multiple ad network SDKs, including MRAID, Google, Facebook, Vungle, and many more. Designed for effortless playable ad development, it provides a standardized interface, ensuring compatibility, optimization, and easy deployment across various platforms. With @smoud/playable-sdk, you can streamline your workflow, maximize reach, and focus on crafting engaging interactive ads without worrying about SDK fragmentation. 🚀
|
|
7
10
|
|
|
@@ -51,20 +54,61 @@ The SDK automatically detects and adapts to the appropriate ad network protocol:
|
|
|
51
54
|
npm install @smoud/playable-sdk
|
|
52
55
|
```
|
|
53
56
|
|
|
57
|
+
## Quick Start
|
|
58
|
+
|
|
59
|
+
```javascript
|
|
60
|
+
import { sdk } from '@smoud/playable-sdk';
|
|
61
|
+
|
|
62
|
+
// Initialize the SDK as early as possible
|
|
63
|
+
sdk.init((width, height) => {
|
|
64
|
+
// Initialize your game/app with container dimensions
|
|
65
|
+
new Game(width, height);
|
|
66
|
+
});
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
```javascript
|
|
70
|
+
// Listen for events
|
|
71
|
+
sdk.on('resize', (width, height) => {
|
|
72
|
+
game.resize(width, height);
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
sdk.on('pause', game.pause, game);
|
|
76
|
+
sdk.on('resume', game.resume, game);
|
|
77
|
+
sdk.on('volume', game.volume, game);
|
|
78
|
+
sdk.on('finish', game.finish, game);
|
|
79
|
+
|
|
80
|
+
sdk.on('interaction', (count) => {
|
|
81
|
+
console.log(`User interaction count: ${count}`);
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
```javascript
|
|
86
|
+
// Start the playable when resources are loaded
|
|
87
|
+
sdk.start();
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
```javascript
|
|
91
|
+
// Mark playable as complete
|
|
92
|
+
sdk.finish();
|
|
93
|
+
|
|
94
|
+
// Handle install/download action
|
|
95
|
+
installButton.onclick = () => sdk.install();
|
|
96
|
+
```
|
|
97
|
+
|
|
54
98
|
## Build
|
|
55
99
|
|
|
56
|
-
###
|
|
100
|
+
### @smoud/playable-scripts
|
|
57
101
|
|
|
58
|
-
`@smoud/playable-sdk` works best with the
|
|
102
|
+
`@smoud/playable-sdk` works best with the [`@smoud/playable-scripts`](https://www.npmjs.com/package/@smoud/playable-scripts) package, which helps you prepare **playable ad builds** that are ready for multiple ad networks. Using `playable-scripts` provides key benefits:
|
|
59
103
|
|
|
60
104
|
- 🚀 **One-Command Build Process** – Easily generate builds for different ad networks.
|
|
61
105
|
- ⚡ **Automatic Optimizations** – Includes minification, tree-shaking, and dead code elimination.
|
|
62
|
-
- 🎯 **Pre-configured for Major Ad Networks** – Works out of the box with **Google Ads, Meta (Facebook), AppLovin, Unity, IronSource, Vungle, Mintegral, and more**.
|
|
106
|
+
- 🎯 **Pre-configured for Major Ad Networks** – Works out of the box with **Google Ads, Meta (Facebook), AppLovin, Unity, IronSource, Vungle, Mintegral, and many more**.
|
|
63
107
|
- 🛠️ **Customizable** – Extend the default build pipeline as needed.
|
|
64
108
|
|
|
65
109
|
### 🔧 Quick Start
|
|
66
110
|
|
|
67
|
-
#### 1️⃣ Install
|
|
111
|
+
#### 1️⃣ Install `@smoud/playable-scripts`
|
|
68
112
|
|
|
69
113
|
Install the package in your project:
|
|
70
114
|
|
|
@@ -100,6 +144,7 @@ npm run build <ad-network>
|
|
|
100
144
|
```
|
|
101
145
|
|
|
102
146
|
##### Examples:
|
|
147
|
+
|
|
103
148
|
To build for **Applovin**, run:
|
|
104
149
|
|
|
105
150
|
```sh
|
|
@@ -109,7 +154,7 @@ npm run build applovin
|
|
|
109
154
|
To build for **IronSource DAPI**, run:
|
|
110
155
|
|
|
111
156
|
```sh
|
|
112
|
-
npm run build ironsource -- --dapi
|
|
157
|
+
npm run build ironsource -- --protocol dapi
|
|
113
158
|
```
|
|
114
159
|
|
|
115
160
|
Supported **Ad Networks**:
|
|
@@ -120,6 +165,7 @@ Supported **Ad Networks**:
|
|
|
120
165
|
- `ironsource`
|
|
121
166
|
- `facebook`
|
|
122
167
|
- `moloco`
|
|
168
|
+
- `adcolony`
|
|
123
169
|
- `mintegral`
|
|
124
170
|
- `vungle`
|
|
125
171
|
- `tapjoy`
|
|
@@ -133,11 +179,12 @@ Supported **Ad Networks**:
|
|
|
133
179
|
|
|
134
180
|
## Custom Build Pipeline
|
|
135
181
|
|
|
136
|
-
Before setting up a custom pipeline, consider using
|
|
182
|
+
Before setting up a custom pipeline, consider using `@smoud/playable-scripts`. It provides an API to extend the standard build function and simplifies the process. See details [here](https://github.com/smoudjs/playable-scripts).
|
|
137
183
|
|
|
138
184
|
If you still prefer a fully custom build, you need to manage the following aspects yourself:
|
|
139
185
|
|
|
140
186
|
### 1️⃣ Define Required Variables
|
|
187
|
+
|
|
141
188
|
Your build script should replace or define these variables within the `window` object before the rest of your code executes:
|
|
142
189
|
|
|
143
190
|
```ts
|
|
@@ -149,61 +196,23 @@ BUILD_HASH = 'random-build-hash';
|
|
|
149
196
|
```
|
|
150
197
|
|
|
151
198
|
### 2️ Applying Ad-Specific Adjustments
|
|
199
|
+
|
|
152
200
|
Certain networks use different ad protocols. Ensure that your build includes or removes code based on the network.
|
|
153
201
|
|
|
154
202
|
Check [Ad Network Resources & Requirements](#Ad-Network-Resources-&-Requirements) for more details.
|
|
155
203
|
|
|
156
204
|
### 3️⃣ Minification & Optimization
|
|
157
|
-
|
|
205
|
+
|
|
206
|
+
To ensure the best performance, your build should include a **JavaScript minimizer** to remove unnecessary code.
|
|
158
207
|
|
|
159
208
|
#### Recommended Tools:
|
|
209
|
+
|
|
160
210
|
- [Terser](https://github.com/terser/terser) – Best for JS minification.
|
|
161
211
|
- [UglifyJS](https://github.com/mishoo/UglifyJS) – Alternative for JS compression.
|
|
162
212
|
|
|
163
|
-
## Quick Start
|
|
164
|
-
|
|
165
|
-
```javascript
|
|
166
|
-
import { sdk } from '@smoud/playable-sdk';
|
|
167
|
-
|
|
168
|
-
// Initialize the SDK as early as possible
|
|
169
|
-
sdk.init((width, height) => {
|
|
170
|
-
// Initialize your game/app with container dimensions
|
|
171
|
-
new Game(width, height);
|
|
172
|
-
});
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
```javascript
|
|
176
|
-
// Listen for events
|
|
177
|
-
sdk.on('resize', (width, height) => {
|
|
178
|
-
game.resize(width, height);
|
|
179
|
-
});
|
|
180
|
-
|
|
181
|
-
sdk.on('pause', game.pause, game);
|
|
182
|
-
sdk.on('resume', game.resume, game);
|
|
183
|
-
sdk.on('volume', game.volume, game);
|
|
184
|
-
sdk.on('finish', game.finish, game);
|
|
185
|
-
|
|
186
|
-
sdk.on('interaction', (count) => {
|
|
187
|
-
console.log(`User interaction count: ${count}`);
|
|
188
|
-
});
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
```javascript
|
|
192
|
-
// Start the playable when resources are loaded
|
|
193
|
-
sdk.start();
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
```javascript
|
|
197
|
-
// Mark playable as complete
|
|
198
|
-
sdk.finish();
|
|
199
|
-
|
|
200
|
-
// Handle install/download action
|
|
201
|
-
installButton.onclick = () => sdk.install();
|
|
202
|
-
```
|
|
203
|
-
|
|
204
213
|
## SDK API Reference
|
|
205
214
|
|
|
206
|
-
### Lifecycle
|
|
215
|
+
### Lifecycle management & typical usage
|
|
207
216
|
|
|
208
217
|
The SDK provides a comprehensive set of functions to manage the playable ad lifecycle. Functions should be called in the following order:
|
|
209
218
|
|
|
@@ -214,9 +223,6 @@ The SDK provides a comprehensive set of functions to manage the playable ad life
|
|
|
214
223
|
sdk.init((width, height) => {
|
|
215
224
|
// Setup your app with container dimensions
|
|
216
225
|
});
|
|
217
|
-
|
|
218
|
-
// Start playable after resources are loaded
|
|
219
|
-
sdk.start();
|
|
220
226
|
```
|
|
221
227
|
|
|
222
228
|
2. **Listen for needed events**
|
|
@@ -257,7 +263,9 @@ The SDK provides a comprehensive set of functions to manage the playable ad life
|
|
|
257
263
|
ui.showEndScreen();
|
|
258
264
|
});
|
|
259
265
|
```
|
|
266
|
+
|
|
260
267
|
#### Optional events
|
|
268
|
+
|
|
261
269
|
```javascript
|
|
262
270
|
sdk.on('init', () => {
|
|
263
271
|
// Show loading screen while SDK initializes
|
|
@@ -310,7 +318,9 @@ The SDK provides a comprehensive set of functions to manage the playable ad life
|
|
|
310
318
|
```javascript
|
|
311
319
|
// Mark playable as complete
|
|
312
320
|
sdk.finish();
|
|
321
|
+
```
|
|
313
322
|
|
|
323
|
+
```javascript
|
|
314
324
|
// Trigger install/store redirect
|
|
315
325
|
sdk.install();
|
|
316
326
|
```
|
package/dist/esm/index.js
CHANGED
|
@@ -220,10 +220,10 @@ function startDapiProtocol() {
|
|
|
220
220
|
if ("dapi" !== AD_PROTOCOL) return;
|
|
221
221
|
if (!isProtocolInitialized) {
|
|
222
222
|
dapi.removeEventListener("ready", startDapiProtocol);
|
|
223
|
-
|
|
223
|
+
dapi.getAudioVolume();
|
|
224
224
|
dapi.addEventListener("audioVolumeChange", function(volume) {
|
|
225
|
-
var
|
|
226
|
-
if (
|
|
225
|
+
var isAudioEnabled = !!volume;
|
|
226
|
+
if (isAudioEnabled) {
|
|
227
227
|
changeVolume(sdk.volume);
|
|
228
228
|
} else {
|
|
229
229
|
changeVolume(0);
|
|
@@ -254,16 +254,12 @@ function startDefaultProtocol() {
|
|
|
254
254
|
}
|
|
255
255
|
document.addEventListener("visibilitychange", () => {
|
|
256
256
|
if (document.visibilityState === "visible") {
|
|
257
|
-
|
|
258
|
-
handleResume();
|
|
259
|
-
} else {
|
|
260
|
-
bootAd();
|
|
261
|
-
}
|
|
257
|
+
handleResume();
|
|
262
258
|
} else {
|
|
263
259
|
handlePause();
|
|
264
260
|
}
|
|
265
261
|
});
|
|
266
|
-
if (document.readyState === "complete"
|
|
262
|
+
if (document.readyState === "complete") {
|
|
267
263
|
bootAd();
|
|
268
264
|
} else {
|
|
269
265
|
window.addEventListener("load", () => {
|
|
@@ -320,17 +316,17 @@ var _sdk = class _sdk {
|
|
|
320
316
|
/**
|
|
321
317
|
* Initializes the SDK and sets up protocol-specific handlers.
|
|
322
318
|
* This must be called as earlier as possible.
|
|
323
|
-
*
|
|
319
|
+
*
|
|
324
320
|
* @param callback Optional function called when ad container is ready
|
|
325
321
|
* @example
|
|
326
322
|
* // Basic initialization
|
|
327
323
|
* sdk.init();
|
|
328
|
-
*
|
|
324
|
+
*
|
|
329
325
|
* // Initialization with callback
|
|
330
326
|
* sdk.init((width, height) => {
|
|
331
327
|
* new App(width, height)
|
|
332
328
|
* });
|
|
333
|
-
*
|
|
329
|
+
*
|
|
334
330
|
* @fires init When initialization starts
|
|
335
331
|
* @fires boot When the ad begins booting
|
|
336
332
|
* @fires ready When Ad Network is ready and playable ad can be initialized
|
|
@@ -358,11 +354,11 @@ var _sdk = class _sdk {
|
|
|
358
354
|
/**
|
|
359
355
|
* Starts the playable ad experience.
|
|
360
356
|
* Should be called after all resources are loaded and first frame is rendered.
|
|
361
|
-
*
|
|
357
|
+
*
|
|
362
358
|
* @example
|
|
363
359
|
* // Call just after all resources are preloaded and first frame is rendered
|
|
364
360
|
* sdk.start();
|
|
365
|
-
*
|
|
361
|
+
*
|
|
366
362
|
* @fires start When the playable ad starts
|
|
367
363
|
* @fires resize When the ad container is initially sized
|
|
368
364
|
*/
|
|
@@ -379,7 +375,7 @@ var _sdk = class _sdk {
|
|
|
379
375
|
if ("tapjoy" === AD_NETWORK && isTapjoy()) {
|
|
380
376
|
window.TJ_API.setPlayableBuild({
|
|
381
377
|
orientation: this.isLandscape ? "landscape" : "portrait",
|
|
382
|
-
buildID:
|
|
378
|
+
buildID: BUILD_HASH
|
|
383
379
|
});
|
|
384
380
|
}
|
|
385
381
|
_sdk.resize();
|
|
@@ -388,11 +384,11 @@ var _sdk = class _sdk {
|
|
|
388
384
|
/**
|
|
389
385
|
* Marks the playable ad as finished.
|
|
390
386
|
* This triggers network-specific completion handlers.
|
|
391
|
-
*
|
|
387
|
+
*
|
|
392
388
|
* @example
|
|
393
389
|
* // Call when game/experience is complete
|
|
394
390
|
* sdk.finish();
|
|
395
|
-
*
|
|
391
|
+
*
|
|
396
392
|
* @fires finish When the playable ad is marked as finished
|
|
397
393
|
*/
|
|
398
394
|
static finish() {
|
|
@@ -409,11 +405,11 @@ var _sdk = class _sdk {
|
|
|
409
405
|
/**
|
|
410
406
|
* Triggers a retry/restart of the playable ad.
|
|
411
407
|
* Behavior varies by ad network.
|
|
412
|
-
*
|
|
408
|
+
*
|
|
413
409
|
* @example
|
|
414
410
|
* // Allow user to try again
|
|
415
411
|
* retryButton.onclick = () => sdk.retry();
|
|
416
|
-
*
|
|
412
|
+
*
|
|
417
413
|
* @fires retry When a retry is triggered
|
|
418
414
|
*/
|
|
419
415
|
static retry() {
|
|
@@ -427,11 +423,11 @@ var _sdk = class _sdk {
|
|
|
427
423
|
/**
|
|
428
424
|
* Triggers the install/download action for the advertised app.
|
|
429
425
|
* Handles different store opening methods across ad networks.
|
|
430
|
-
*
|
|
426
|
+
*
|
|
431
427
|
* @example
|
|
432
428
|
* // Call when user wants to install
|
|
433
429
|
* installButton.onclick = () => sdk.install();
|
|
434
|
-
*
|
|
430
|
+
*
|
|
435
431
|
* @fires finish If the ad hasn't been marked as finished
|
|
436
432
|
* @fires install When the install action is triggered
|
|
437
433
|
*/
|
|
@@ -456,7 +452,7 @@ var _sdk = class _sdk {
|
|
|
456
452
|
}, 500);
|
|
457
453
|
emitEvent("install");
|
|
458
454
|
if ("mraid" === AD_PROTOCOL && isMraid()) {
|
|
459
|
-
mraid.
|
|
455
|
+
mraid.open(destinationUrl);
|
|
460
456
|
} else if ("dapi" === AD_PROTOCOL && isDapi()) {
|
|
461
457
|
dapi.openStoreUrl();
|
|
462
458
|
} else if ("nucleo" === AD_PROTOCOL && isNucleo()) {
|
|
@@ -480,10 +476,10 @@ var _sdk = class _sdk {
|
|
|
480
476
|
/**
|
|
481
477
|
* Trigger force resize event
|
|
482
478
|
* Useful when container size changes need to be manually propagated.
|
|
483
|
-
*
|
|
479
|
+
*
|
|
484
480
|
* @example
|
|
485
481
|
* sdk.resize();
|
|
486
|
-
*
|
|
482
|
+
*
|
|
487
483
|
* @fires resize With current maxWidth and maxHeight
|
|
488
484
|
*/
|
|
489
485
|
static resize() {
|
|
@@ -491,11 +487,11 @@ var _sdk = class _sdk {
|
|
|
491
487
|
}
|
|
492
488
|
/**
|
|
493
489
|
* Forces the playable ad into a paused state.
|
|
494
|
-
*
|
|
490
|
+
*
|
|
495
491
|
* @example
|
|
496
492
|
* // Pause the experience
|
|
497
493
|
* pauseButton.onclick = () => sdk.pause();
|
|
498
|
-
*
|
|
494
|
+
*
|
|
499
495
|
* @fires pause When the ad enters paused state
|
|
500
496
|
*/
|
|
501
497
|
static pause() {
|
|
@@ -507,11 +503,11 @@ var _sdk = class _sdk {
|
|
|
507
503
|
/**
|
|
508
504
|
* Resumes the playable ad from a forced pause state.
|
|
509
505
|
* Only works if the ad was paused via sdk.pause().
|
|
510
|
-
*
|
|
506
|
+
*
|
|
511
507
|
* @example
|
|
512
508
|
* // Resume from pause
|
|
513
509
|
* resumeButton.onclick = () => sdk.resume();
|
|
514
|
-
*
|
|
510
|
+
*
|
|
515
511
|
* @fires resume When the ad resumes from pause
|
|
516
512
|
*/
|
|
517
513
|
static resume() {
|
|
@@ -522,17 +518,17 @@ var _sdk = class _sdk {
|
|
|
522
518
|
}
|
|
523
519
|
/**
|
|
524
520
|
* Registers an event listener.
|
|
525
|
-
*
|
|
521
|
+
*
|
|
526
522
|
* @param event Name of the event to listen for
|
|
527
523
|
* @param fn Callback function to execute when event occurs
|
|
528
524
|
* @param context Optional 'this' context for the callback
|
|
529
|
-
*
|
|
525
|
+
*
|
|
530
526
|
* @example
|
|
531
527
|
* // Listen for user interactions
|
|
532
528
|
* sdk.on('interaction', (count) => {
|
|
533
529
|
* console.log(`User interaction #${count}`);
|
|
534
530
|
* });
|
|
535
|
-
*
|
|
531
|
+
*
|
|
536
532
|
* // Listen for resize with context
|
|
537
533
|
* sdk.on('resize', function(width, height) {
|
|
538
534
|
* this.updateLayout(width, height);
|
|
@@ -543,11 +539,11 @@ var _sdk = class _sdk {
|
|
|
543
539
|
}
|
|
544
540
|
/**
|
|
545
541
|
* Registers a one-time event listener that removes itself after execution.
|
|
546
|
-
*
|
|
542
|
+
*
|
|
547
543
|
* @param event Name of the event to listen for
|
|
548
544
|
* @param fn Callback function to execute when event occurs
|
|
549
545
|
* @param context Optional 'this' context for the callback
|
|
550
|
-
*
|
|
546
|
+
*
|
|
551
547
|
* @example
|
|
552
548
|
* // Listen for first interaction only
|
|
553
549
|
* sdk.once('interaction', () => {
|
|
@@ -559,16 +555,16 @@ var _sdk = class _sdk {
|
|
|
559
555
|
}
|
|
560
556
|
/**
|
|
561
557
|
* Removes an event listener.
|
|
562
|
-
*
|
|
558
|
+
*
|
|
563
559
|
* @param event Name of the event to stop listening for
|
|
564
560
|
* @param fn Optional callback function to remove (if not provided, removes all listeners for the event)
|
|
565
561
|
* @param context Optional 'this' context to match when removing
|
|
566
|
-
*
|
|
562
|
+
*
|
|
567
563
|
* @example
|
|
568
564
|
* // Remove specific listener
|
|
569
565
|
* const handler = () => console.log('Interaction');
|
|
570
566
|
* sdk.off('interaction', handler);
|
|
571
|
-
*
|
|
567
|
+
*
|
|
572
568
|
* // Remove all listeners for an event
|
|
573
569
|
* sdk.off('interaction');
|
|
574
570
|
*/
|
|
@@ -577,7 +573,7 @@ var _sdk = class _sdk {
|
|
|
577
573
|
}
|
|
578
574
|
};
|
|
579
575
|
/** Current version of the SDK */
|
|
580
|
-
_sdk.version = "1.0.
|
|
576
|
+
_sdk.version = "1.0.1";
|
|
581
577
|
/** Current maximum width of the playable ad container in pixels */
|
|
582
578
|
_sdk.maxWidth = Math.floor(window.innerWidth);
|
|
583
579
|
/** Current maximum height of the playable ad container in pixels */
|
package/dist/iife/index.js
CHANGED
|
@@ -222,10 +222,10 @@
|
|
|
222
222
|
if ("dapi" !== AD_PROTOCOL) return;
|
|
223
223
|
if (!isProtocolInitialized) {
|
|
224
224
|
dapi.removeEventListener("ready", startDapiProtocol);
|
|
225
|
-
|
|
225
|
+
dapi.getAudioVolume();
|
|
226
226
|
dapi.addEventListener("audioVolumeChange", function(volume) {
|
|
227
|
-
var
|
|
228
|
-
if (
|
|
227
|
+
var isAudioEnabled = !!volume;
|
|
228
|
+
if (isAudioEnabled) {
|
|
229
229
|
changeVolume(sdk.volume);
|
|
230
230
|
} else {
|
|
231
231
|
changeVolume(0);
|
|
@@ -256,16 +256,12 @@
|
|
|
256
256
|
}
|
|
257
257
|
document.addEventListener("visibilitychange", () => {
|
|
258
258
|
if (document.visibilityState === "visible") {
|
|
259
|
-
|
|
260
|
-
handleResume();
|
|
261
|
-
} else {
|
|
262
|
-
bootAd();
|
|
263
|
-
}
|
|
259
|
+
handleResume();
|
|
264
260
|
} else {
|
|
265
261
|
handlePause();
|
|
266
262
|
}
|
|
267
263
|
});
|
|
268
|
-
if (document.readyState === "complete"
|
|
264
|
+
if (document.readyState === "complete") {
|
|
269
265
|
bootAd();
|
|
270
266
|
} else {
|
|
271
267
|
window.addEventListener("load", () => {
|
|
@@ -322,17 +318,17 @@
|
|
|
322
318
|
/**
|
|
323
319
|
* Initializes the SDK and sets up protocol-specific handlers.
|
|
324
320
|
* This must be called as earlier as possible.
|
|
325
|
-
*
|
|
321
|
+
*
|
|
326
322
|
* @param callback Optional function called when ad container is ready
|
|
327
323
|
* @example
|
|
328
324
|
* // Basic initialization
|
|
329
325
|
* sdk.init();
|
|
330
|
-
*
|
|
326
|
+
*
|
|
331
327
|
* // Initialization with callback
|
|
332
328
|
* sdk.init((width, height) => {
|
|
333
329
|
* new App(width, height)
|
|
334
330
|
* });
|
|
335
|
-
*
|
|
331
|
+
*
|
|
336
332
|
* @fires init When initialization starts
|
|
337
333
|
* @fires boot When the ad begins booting
|
|
338
334
|
* @fires ready When Ad Network is ready and playable ad can be initialized
|
|
@@ -360,11 +356,11 @@
|
|
|
360
356
|
/**
|
|
361
357
|
* Starts the playable ad experience.
|
|
362
358
|
* Should be called after all resources are loaded and first frame is rendered.
|
|
363
|
-
*
|
|
359
|
+
*
|
|
364
360
|
* @example
|
|
365
361
|
* // Call just after all resources are preloaded and first frame is rendered
|
|
366
362
|
* sdk.start();
|
|
367
|
-
*
|
|
363
|
+
*
|
|
368
364
|
* @fires start When the playable ad starts
|
|
369
365
|
* @fires resize When the ad container is initially sized
|
|
370
366
|
*/
|
|
@@ -381,7 +377,7 @@
|
|
|
381
377
|
if ("tapjoy" === AD_NETWORK && isTapjoy()) {
|
|
382
378
|
window.TJ_API.setPlayableBuild({
|
|
383
379
|
orientation: this.isLandscape ? "landscape" : "portrait",
|
|
384
|
-
buildID:
|
|
380
|
+
buildID: BUILD_HASH
|
|
385
381
|
});
|
|
386
382
|
}
|
|
387
383
|
_sdk.resize();
|
|
@@ -390,11 +386,11 @@
|
|
|
390
386
|
/**
|
|
391
387
|
* Marks the playable ad as finished.
|
|
392
388
|
* This triggers network-specific completion handlers.
|
|
393
|
-
*
|
|
389
|
+
*
|
|
394
390
|
* @example
|
|
395
391
|
* // Call when game/experience is complete
|
|
396
392
|
* sdk.finish();
|
|
397
|
-
*
|
|
393
|
+
*
|
|
398
394
|
* @fires finish When the playable ad is marked as finished
|
|
399
395
|
*/
|
|
400
396
|
static finish() {
|
|
@@ -411,11 +407,11 @@
|
|
|
411
407
|
/**
|
|
412
408
|
* Triggers a retry/restart of the playable ad.
|
|
413
409
|
* Behavior varies by ad network.
|
|
414
|
-
*
|
|
410
|
+
*
|
|
415
411
|
* @example
|
|
416
412
|
* // Allow user to try again
|
|
417
413
|
* retryButton.onclick = () => sdk.retry();
|
|
418
|
-
*
|
|
414
|
+
*
|
|
419
415
|
* @fires retry When a retry is triggered
|
|
420
416
|
*/
|
|
421
417
|
static retry() {
|
|
@@ -429,11 +425,11 @@
|
|
|
429
425
|
/**
|
|
430
426
|
* Triggers the install/download action for the advertised app.
|
|
431
427
|
* Handles different store opening methods across ad networks.
|
|
432
|
-
*
|
|
428
|
+
*
|
|
433
429
|
* @example
|
|
434
430
|
* // Call when user wants to install
|
|
435
431
|
* installButton.onclick = () => sdk.install();
|
|
436
|
-
*
|
|
432
|
+
*
|
|
437
433
|
* @fires finish If the ad hasn't been marked as finished
|
|
438
434
|
* @fires install When the install action is triggered
|
|
439
435
|
*/
|
|
@@ -458,7 +454,7 @@
|
|
|
458
454
|
}, 500);
|
|
459
455
|
emitEvent("install");
|
|
460
456
|
if ("mraid" === AD_PROTOCOL && isMraid()) {
|
|
461
|
-
mraid.
|
|
457
|
+
mraid.open(destinationUrl);
|
|
462
458
|
} else if ("dapi" === AD_PROTOCOL && isDapi()) {
|
|
463
459
|
dapi.openStoreUrl();
|
|
464
460
|
} else if ("nucleo" === AD_PROTOCOL && isNucleo()) {
|
|
@@ -482,10 +478,10 @@
|
|
|
482
478
|
/**
|
|
483
479
|
* Trigger force resize event
|
|
484
480
|
* Useful when container size changes need to be manually propagated.
|
|
485
|
-
*
|
|
481
|
+
*
|
|
486
482
|
* @example
|
|
487
483
|
* sdk.resize();
|
|
488
|
-
*
|
|
484
|
+
*
|
|
489
485
|
* @fires resize With current maxWidth and maxHeight
|
|
490
486
|
*/
|
|
491
487
|
static resize() {
|
|
@@ -493,11 +489,11 @@
|
|
|
493
489
|
}
|
|
494
490
|
/**
|
|
495
491
|
* Forces the playable ad into a paused state.
|
|
496
|
-
*
|
|
492
|
+
*
|
|
497
493
|
* @example
|
|
498
494
|
* // Pause the experience
|
|
499
495
|
* pauseButton.onclick = () => sdk.pause();
|
|
500
|
-
*
|
|
496
|
+
*
|
|
501
497
|
* @fires pause When the ad enters paused state
|
|
502
498
|
*/
|
|
503
499
|
static pause() {
|
|
@@ -509,11 +505,11 @@
|
|
|
509
505
|
/**
|
|
510
506
|
* Resumes the playable ad from a forced pause state.
|
|
511
507
|
* Only works if the ad was paused via sdk.pause().
|
|
512
|
-
*
|
|
508
|
+
*
|
|
513
509
|
* @example
|
|
514
510
|
* // Resume from pause
|
|
515
511
|
* resumeButton.onclick = () => sdk.resume();
|
|
516
|
-
*
|
|
512
|
+
*
|
|
517
513
|
* @fires resume When the ad resumes from pause
|
|
518
514
|
*/
|
|
519
515
|
static resume() {
|
|
@@ -524,17 +520,17 @@
|
|
|
524
520
|
}
|
|
525
521
|
/**
|
|
526
522
|
* Registers an event listener.
|
|
527
|
-
*
|
|
523
|
+
*
|
|
528
524
|
* @param event Name of the event to listen for
|
|
529
525
|
* @param fn Callback function to execute when event occurs
|
|
530
526
|
* @param context Optional 'this' context for the callback
|
|
531
|
-
*
|
|
527
|
+
*
|
|
532
528
|
* @example
|
|
533
529
|
* // Listen for user interactions
|
|
534
530
|
* sdk.on('interaction', (count) => {
|
|
535
531
|
* console.log(`User interaction #${count}`);
|
|
536
532
|
* });
|
|
537
|
-
*
|
|
533
|
+
*
|
|
538
534
|
* // Listen for resize with context
|
|
539
535
|
* sdk.on('resize', function(width, height) {
|
|
540
536
|
* this.updateLayout(width, height);
|
|
@@ -545,11 +541,11 @@
|
|
|
545
541
|
}
|
|
546
542
|
/**
|
|
547
543
|
* Registers a one-time event listener that removes itself after execution.
|
|
548
|
-
*
|
|
544
|
+
*
|
|
549
545
|
* @param event Name of the event to listen for
|
|
550
546
|
* @param fn Callback function to execute when event occurs
|
|
551
547
|
* @param context Optional 'this' context for the callback
|
|
552
|
-
*
|
|
548
|
+
*
|
|
553
549
|
* @example
|
|
554
550
|
* // Listen for first interaction only
|
|
555
551
|
* sdk.once('interaction', () => {
|
|
@@ -561,16 +557,16 @@
|
|
|
561
557
|
}
|
|
562
558
|
/**
|
|
563
559
|
* Removes an event listener.
|
|
564
|
-
*
|
|
560
|
+
*
|
|
565
561
|
* @param event Name of the event to stop listening for
|
|
566
562
|
* @param fn Optional callback function to remove (if not provided, removes all listeners for the event)
|
|
567
563
|
* @param context Optional 'this' context to match when removing
|
|
568
|
-
*
|
|
564
|
+
*
|
|
569
565
|
* @example
|
|
570
566
|
* // Remove specific listener
|
|
571
567
|
* const handler = () => console.log('Interaction');
|
|
572
568
|
* sdk.off('interaction', handler);
|
|
573
|
-
*
|
|
569
|
+
*
|
|
574
570
|
* // Remove all listeners for an event
|
|
575
571
|
* sdk.off('interaction');
|
|
576
572
|
*/
|
|
@@ -579,7 +575,7 @@
|
|
|
579
575
|
}
|
|
580
576
|
};
|
|
581
577
|
/** Current version of the SDK */
|
|
582
|
-
_sdk.version = "1.0.
|
|
578
|
+
_sdk.version = "1.0.1";
|
|
583
579
|
/** Current maximum width of the playable ad container in pixels */
|
|
584
580
|
_sdk.maxWidth = Math.floor(window.innerWidth);
|
|
585
581
|
/** Current maximum height of the playable ad container in pixels */
|
package/dist/index.js
CHANGED
|
@@ -247,10 +247,10 @@ function startDapiProtocol() {
|
|
|
247
247
|
if ("dapi" !== AD_PROTOCOL) return;
|
|
248
248
|
if (!isProtocolInitialized) {
|
|
249
249
|
dapi.removeEventListener("ready", startDapiProtocol);
|
|
250
|
-
|
|
250
|
+
dapi.getAudioVolume();
|
|
251
251
|
dapi.addEventListener("audioVolumeChange", function(volume) {
|
|
252
|
-
var
|
|
253
|
-
if (
|
|
252
|
+
var isAudioEnabled = !!volume;
|
|
253
|
+
if (isAudioEnabled) {
|
|
254
254
|
changeVolume(sdk.volume);
|
|
255
255
|
} else {
|
|
256
256
|
changeVolume(0);
|
|
@@ -281,16 +281,12 @@ function startDefaultProtocol() {
|
|
|
281
281
|
}
|
|
282
282
|
document.addEventListener("visibilitychange", () => {
|
|
283
283
|
if (document.visibilityState === "visible") {
|
|
284
|
-
|
|
285
|
-
handleResume();
|
|
286
|
-
} else {
|
|
287
|
-
bootAd();
|
|
288
|
-
}
|
|
284
|
+
handleResume();
|
|
289
285
|
} else {
|
|
290
286
|
handlePause();
|
|
291
287
|
}
|
|
292
288
|
});
|
|
293
|
-
if (document.readyState === "complete"
|
|
289
|
+
if (document.readyState === "complete") {
|
|
294
290
|
bootAd();
|
|
295
291
|
} else {
|
|
296
292
|
window.addEventListener("load", () => {
|
|
@@ -347,17 +343,17 @@ var _sdk = class _sdk {
|
|
|
347
343
|
/**
|
|
348
344
|
* Initializes the SDK and sets up protocol-specific handlers.
|
|
349
345
|
* This must be called as earlier as possible.
|
|
350
|
-
*
|
|
346
|
+
*
|
|
351
347
|
* @param callback Optional function called when ad container is ready
|
|
352
348
|
* @example
|
|
353
349
|
* // Basic initialization
|
|
354
350
|
* sdk.init();
|
|
355
|
-
*
|
|
351
|
+
*
|
|
356
352
|
* // Initialization with callback
|
|
357
353
|
* sdk.init((width, height) => {
|
|
358
354
|
* new App(width, height)
|
|
359
355
|
* });
|
|
360
|
-
*
|
|
356
|
+
*
|
|
361
357
|
* @fires init When initialization starts
|
|
362
358
|
* @fires boot When the ad begins booting
|
|
363
359
|
* @fires ready When Ad Network is ready and playable ad can be initialized
|
|
@@ -385,11 +381,11 @@ var _sdk = class _sdk {
|
|
|
385
381
|
/**
|
|
386
382
|
* Starts the playable ad experience.
|
|
387
383
|
* Should be called after all resources are loaded and first frame is rendered.
|
|
388
|
-
*
|
|
384
|
+
*
|
|
389
385
|
* @example
|
|
390
386
|
* // Call just after all resources are preloaded and first frame is rendered
|
|
391
387
|
* sdk.start();
|
|
392
|
-
*
|
|
388
|
+
*
|
|
393
389
|
* @fires start When the playable ad starts
|
|
394
390
|
* @fires resize When the ad container is initially sized
|
|
395
391
|
*/
|
|
@@ -406,7 +402,7 @@ var _sdk = class _sdk {
|
|
|
406
402
|
if ("tapjoy" === AD_NETWORK && isTapjoy()) {
|
|
407
403
|
window.TJ_API.setPlayableBuild({
|
|
408
404
|
orientation: this.isLandscape ? "landscape" : "portrait",
|
|
409
|
-
buildID:
|
|
405
|
+
buildID: BUILD_HASH
|
|
410
406
|
});
|
|
411
407
|
}
|
|
412
408
|
_sdk.resize();
|
|
@@ -415,11 +411,11 @@ var _sdk = class _sdk {
|
|
|
415
411
|
/**
|
|
416
412
|
* Marks the playable ad as finished.
|
|
417
413
|
* This triggers network-specific completion handlers.
|
|
418
|
-
*
|
|
414
|
+
*
|
|
419
415
|
* @example
|
|
420
416
|
* // Call when game/experience is complete
|
|
421
417
|
* sdk.finish();
|
|
422
|
-
*
|
|
418
|
+
*
|
|
423
419
|
* @fires finish When the playable ad is marked as finished
|
|
424
420
|
*/
|
|
425
421
|
static finish() {
|
|
@@ -436,11 +432,11 @@ var _sdk = class _sdk {
|
|
|
436
432
|
/**
|
|
437
433
|
* Triggers a retry/restart of the playable ad.
|
|
438
434
|
* Behavior varies by ad network.
|
|
439
|
-
*
|
|
435
|
+
*
|
|
440
436
|
* @example
|
|
441
437
|
* // Allow user to try again
|
|
442
438
|
* retryButton.onclick = () => sdk.retry();
|
|
443
|
-
*
|
|
439
|
+
*
|
|
444
440
|
* @fires retry When a retry is triggered
|
|
445
441
|
*/
|
|
446
442
|
static retry() {
|
|
@@ -454,11 +450,11 @@ var _sdk = class _sdk {
|
|
|
454
450
|
/**
|
|
455
451
|
* Triggers the install/download action for the advertised app.
|
|
456
452
|
* Handles different store opening methods across ad networks.
|
|
457
|
-
*
|
|
453
|
+
*
|
|
458
454
|
* @example
|
|
459
455
|
* // Call when user wants to install
|
|
460
456
|
* installButton.onclick = () => sdk.install();
|
|
461
|
-
*
|
|
457
|
+
*
|
|
462
458
|
* @fires finish If the ad hasn't been marked as finished
|
|
463
459
|
* @fires install When the install action is triggered
|
|
464
460
|
*/
|
|
@@ -483,7 +479,7 @@ var _sdk = class _sdk {
|
|
|
483
479
|
}, 500);
|
|
484
480
|
emitEvent("install");
|
|
485
481
|
if ("mraid" === AD_PROTOCOL && isMraid()) {
|
|
486
|
-
mraid.
|
|
482
|
+
mraid.open(destinationUrl);
|
|
487
483
|
} else if ("dapi" === AD_PROTOCOL && isDapi()) {
|
|
488
484
|
dapi.openStoreUrl();
|
|
489
485
|
} else if ("nucleo" === AD_PROTOCOL && isNucleo()) {
|
|
@@ -507,10 +503,10 @@ var _sdk = class _sdk {
|
|
|
507
503
|
/**
|
|
508
504
|
* Trigger force resize event
|
|
509
505
|
* Useful when container size changes need to be manually propagated.
|
|
510
|
-
*
|
|
506
|
+
*
|
|
511
507
|
* @example
|
|
512
508
|
* sdk.resize();
|
|
513
|
-
*
|
|
509
|
+
*
|
|
514
510
|
* @fires resize With current maxWidth and maxHeight
|
|
515
511
|
*/
|
|
516
512
|
static resize() {
|
|
@@ -518,11 +514,11 @@ var _sdk = class _sdk {
|
|
|
518
514
|
}
|
|
519
515
|
/**
|
|
520
516
|
* Forces the playable ad into a paused state.
|
|
521
|
-
*
|
|
517
|
+
*
|
|
522
518
|
* @example
|
|
523
519
|
* // Pause the experience
|
|
524
520
|
* pauseButton.onclick = () => sdk.pause();
|
|
525
|
-
*
|
|
521
|
+
*
|
|
526
522
|
* @fires pause When the ad enters paused state
|
|
527
523
|
*/
|
|
528
524
|
static pause() {
|
|
@@ -534,11 +530,11 @@ var _sdk = class _sdk {
|
|
|
534
530
|
/**
|
|
535
531
|
* Resumes the playable ad from a forced pause state.
|
|
536
532
|
* Only works if the ad was paused via sdk.pause().
|
|
537
|
-
*
|
|
533
|
+
*
|
|
538
534
|
* @example
|
|
539
535
|
* // Resume from pause
|
|
540
536
|
* resumeButton.onclick = () => sdk.resume();
|
|
541
|
-
*
|
|
537
|
+
*
|
|
542
538
|
* @fires resume When the ad resumes from pause
|
|
543
539
|
*/
|
|
544
540
|
static resume() {
|
|
@@ -549,17 +545,17 @@ var _sdk = class _sdk {
|
|
|
549
545
|
}
|
|
550
546
|
/**
|
|
551
547
|
* Registers an event listener.
|
|
552
|
-
*
|
|
548
|
+
*
|
|
553
549
|
* @param event Name of the event to listen for
|
|
554
550
|
* @param fn Callback function to execute when event occurs
|
|
555
551
|
* @param context Optional 'this' context for the callback
|
|
556
|
-
*
|
|
552
|
+
*
|
|
557
553
|
* @example
|
|
558
554
|
* // Listen for user interactions
|
|
559
555
|
* sdk.on('interaction', (count) => {
|
|
560
556
|
* console.log(`User interaction #${count}`);
|
|
561
557
|
* });
|
|
562
|
-
*
|
|
558
|
+
*
|
|
563
559
|
* // Listen for resize with context
|
|
564
560
|
* sdk.on('resize', function(width, height) {
|
|
565
561
|
* this.updateLayout(width, height);
|
|
@@ -570,11 +566,11 @@ var _sdk = class _sdk {
|
|
|
570
566
|
}
|
|
571
567
|
/**
|
|
572
568
|
* Registers a one-time event listener that removes itself after execution.
|
|
573
|
-
*
|
|
569
|
+
*
|
|
574
570
|
* @param event Name of the event to listen for
|
|
575
571
|
* @param fn Callback function to execute when event occurs
|
|
576
572
|
* @param context Optional 'this' context for the callback
|
|
577
|
-
*
|
|
573
|
+
*
|
|
578
574
|
* @example
|
|
579
575
|
* // Listen for first interaction only
|
|
580
576
|
* sdk.once('interaction', () => {
|
|
@@ -586,16 +582,16 @@ var _sdk = class _sdk {
|
|
|
586
582
|
}
|
|
587
583
|
/**
|
|
588
584
|
* Removes an event listener.
|
|
589
|
-
*
|
|
585
|
+
*
|
|
590
586
|
* @param event Name of the event to stop listening for
|
|
591
587
|
* @param fn Optional callback function to remove (if not provided, removes all listeners for the event)
|
|
592
588
|
* @param context Optional 'this' context to match when removing
|
|
593
|
-
*
|
|
589
|
+
*
|
|
594
590
|
* @example
|
|
595
591
|
* // Remove specific listener
|
|
596
592
|
* const handler = () => console.log('Interaction');
|
|
597
593
|
* sdk.off('interaction', handler);
|
|
598
|
-
*
|
|
594
|
+
*
|
|
599
595
|
* // Remove all listeners for an event
|
|
600
596
|
* sdk.off('interaction');
|
|
601
597
|
*/
|
|
@@ -604,7 +600,7 @@ var _sdk = class _sdk {
|
|
|
604
600
|
}
|
|
605
601
|
};
|
|
606
602
|
/** Current version of the SDK */
|
|
607
|
-
_sdk.version = "1.0.
|
|
603
|
+
_sdk.version = "1.0.1";
|
|
608
604
|
/** Current maximum width of the playable ad container in pixels */
|
|
609
605
|
_sdk.maxWidth = Math.floor(window.innerWidth);
|
|
610
606
|
/** Current maximum height of the playable ad container in pixels */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@smoud/playable-sdk",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "It's unified Playable SDK that supports MRAID, Google, Facebook, Vungle, and many more Ad Networks, simplifying playable ad development with a standardized interface for seamless cross-network compatibility.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
],
|
|
22
22
|
"scripts": {
|
|
23
23
|
"build": "npx tsup src/index.ts --format esm,cjs,iife --out-dir dist --legacy-output --dts --clean",
|
|
24
|
-
"test": "jest"
|
|
24
|
+
"test": "jest",
|
|
25
|
+
"deploy": "npm run test && npm run build && npm publish --access public"
|
|
25
26
|
},
|
|
26
27
|
"author": "Smoud",
|
|
27
28
|
"license": "MIT",
|