@adtogether/web-sdk 0.1.8 → 0.1.9
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/CHANGELOG.md +6 -0
- package/dist/react/index.js +30 -0
- package/dist/react/index.mjs +30 -0
- package/package.json +1 -1
- package/src/react/AdTogetherInterstitial.tsx +30 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
## 0.1.9
|
|
2
|
+
|
|
3
|
+
* **Feature**: Added `onAdLoaded` and `onAdFailedToLoad` callback support to React components.
|
|
4
|
+
* **Responsive**: Improved responsiveness for both Banner and Interstitial ad components.
|
|
5
|
+
* **Standardization**: Updated API signatures to match the unified AdTogether SDK standard.
|
|
6
|
+
|
|
1
7
|
## 0.1.7
|
|
2
8
|
|
|
3
9
|
* Documentation improvements.
|
package/dist/react/index.js
CHANGED
|
@@ -402,10 +402,38 @@ var AdTogetherInterstitial = ({
|
|
|
402
402
|
from { opacity: 0; transform: scale(0.9); }
|
|
403
403
|
to { opacity: 1; transform: scale(1); }
|
|
404
404
|
}
|
|
405
|
+
.adtogether-interstitial-card {
|
|
406
|
+
display: flex;
|
|
407
|
+
flex-direction: column;
|
|
408
|
+
}
|
|
409
|
+
.adtogether-interstitial-img-wrapper {
|
|
410
|
+
width: 100%;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
@media (orientation: landscape) and (max-height: 600px) {
|
|
414
|
+
.adtogether-interstitial-card {
|
|
415
|
+
flex-direction: row;
|
|
416
|
+
max-height: 90vh;
|
|
417
|
+
}
|
|
418
|
+
.adtogether-interstitial-img-wrapper {
|
|
419
|
+
width: 50%;
|
|
420
|
+
flex-shrink: 0;
|
|
421
|
+
display: flex;
|
|
422
|
+
}
|
|
423
|
+
.adtogether-interstitial-img-wrapper img {
|
|
424
|
+
height: 100% !important;
|
|
425
|
+
aspect-ratio: auto !important;
|
|
426
|
+
}
|
|
427
|
+
.adtogether-interstitial-content {
|
|
428
|
+
width: 50%;
|
|
429
|
+
overflow-y: auto;
|
|
430
|
+
}
|
|
431
|
+
}
|
|
405
432
|
` }),
|
|
406
433
|
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "#fff", fontSize: "18px" }, children: "Loading Ad..." }) : adData ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
407
434
|
"div",
|
|
408
435
|
{
|
|
436
|
+
className: "adtogether-interstitial-card",
|
|
409
437
|
style: {
|
|
410
438
|
position: "relative",
|
|
411
439
|
maxWidth: "800px",
|
|
@@ -461,6 +489,7 @@ var AdTogetherInterstitial = ({
|
|
|
461
489
|
adData.imageUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
462
490
|
"div",
|
|
463
491
|
{
|
|
492
|
+
className: "adtogether-interstitial-img-wrapper",
|
|
464
493
|
style: { cursor: "pointer", position: "relative" },
|
|
465
494
|
onClick: handleAdClick,
|
|
466
495
|
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
@@ -481,6 +510,7 @@ var AdTogetherInterstitial = ({
|
|
|
481
510
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
482
511
|
"div",
|
|
483
512
|
{
|
|
513
|
+
className: "adtogether-interstitial-content",
|
|
484
514
|
style: { padding: "20px", cursor: "pointer" },
|
|
485
515
|
onClick: handleAdClick,
|
|
486
516
|
children: [
|
package/dist/react/index.mjs
CHANGED
|
@@ -295,10 +295,38 @@ var AdTogetherInterstitial = ({
|
|
|
295
295
|
from { opacity: 0; transform: scale(0.9); }
|
|
296
296
|
to { opacity: 1; transform: scale(1); }
|
|
297
297
|
}
|
|
298
|
+
.adtogether-interstitial-card {
|
|
299
|
+
display: flex;
|
|
300
|
+
flex-direction: column;
|
|
301
|
+
}
|
|
302
|
+
.adtogether-interstitial-img-wrapper {
|
|
303
|
+
width: 100%;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
@media (orientation: landscape) and (max-height: 600px) {
|
|
307
|
+
.adtogether-interstitial-card {
|
|
308
|
+
flex-direction: row;
|
|
309
|
+
max-height: 90vh;
|
|
310
|
+
}
|
|
311
|
+
.adtogether-interstitial-img-wrapper {
|
|
312
|
+
width: 50%;
|
|
313
|
+
flex-shrink: 0;
|
|
314
|
+
display: flex;
|
|
315
|
+
}
|
|
316
|
+
.adtogether-interstitial-img-wrapper img {
|
|
317
|
+
height: 100% !important;
|
|
318
|
+
aspect-ratio: auto !important;
|
|
319
|
+
}
|
|
320
|
+
.adtogether-interstitial-content {
|
|
321
|
+
width: 50%;
|
|
322
|
+
overflow-y: auto;
|
|
323
|
+
}
|
|
324
|
+
}
|
|
298
325
|
` }),
|
|
299
326
|
isLoading ? /* @__PURE__ */ jsx2("div", { style: { color: "#fff", fontSize: "18px" }, children: "Loading Ad..." }) : adData ? /* @__PURE__ */ jsxs2(
|
|
300
327
|
"div",
|
|
301
328
|
{
|
|
329
|
+
className: "adtogether-interstitial-card",
|
|
302
330
|
style: {
|
|
303
331
|
position: "relative",
|
|
304
332
|
maxWidth: "800px",
|
|
@@ -354,6 +382,7 @@ var AdTogetherInterstitial = ({
|
|
|
354
382
|
adData.imageUrl && /* @__PURE__ */ jsx2(
|
|
355
383
|
"div",
|
|
356
384
|
{
|
|
385
|
+
className: "adtogether-interstitial-img-wrapper",
|
|
357
386
|
style: { cursor: "pointer", position: "relative" },
|
|
358
387
|
onClick: handleAdClick,
|
|
359
388
|
children: /* @__PURE__ */ jsx2(
|
|
@@ -374,6 +403,7 @@ var AdTogetherInterstitial = ({
|
|
|
374
403
|
/* @__PURE__ */ jsxs2(
|
|
375
404
|
"div",
|
|
376
405
|
{
|
|
406
|
+
className: "adtogether-interstitial-content",
|
|
377
407
|
style: { padding: "20px", cursor: "pointer" },
|
|
378
408
|
onClick: handleAdClick,
|
|
379
409
|
children: [
|
package/package.json
CHANGED
|
@@ -188,12 +188,40 @@ export const AdTogetherInterstitial: React.FC<AdTogetherInterstitialProps> = ({
|
|
|
188
188
|
from { opacity: 0; transform: scale(0.9); }
|
|
189
189
|
to { opacity: 1; transform: scale(1); }
|
|
190
190
|
}
|
|
191
|
+
.adtogether-interstitial-card {
|
|
192
|
+
display: flex;
|
|
193
|
+
flex-direction: column;
|
|
194
|
+
}
|
|
195
|
+
.adtogether-interstitial-img-wrapper {
|
|
196
|
+
width: 100%;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@media (orientation: landscape) and (max-height: 600px) {
|
|
200
|
+
.adtogether-interstitial-card {
|
|
201
|
+
flex-direction: row;
|
|
202
|
+
max-height: 90vh;
|
|
203
|
+
}
|
|
204
|
+
.adtogether-interstitial-img-wrapper {
|
|
205
|
+
width: 50%;
|
|
206
|
+
flex-shrink: 0;
|
|
207
|
+
display: flex;
|
|
208
|
+
}
|
|
209
|
+
.adtogether-interstitial-img-wrapper img {
|
|
210
|
+
height: 100% !important;
|
|
211
|
+
aspect-ratio: auto !important;
|
|
212
|
+
}
|
|
213
|
+
.adtogether-interstitial-content {
|
|
214
|
+
width: 50%;
|
|
215
|
+
overflow-y: auto;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
191
218
|
`}</style>
|
|
192
219
|
|
|
193
220
|
{isLoading ? (
|
|
194
221
|
<div style={{ color: '#fff', fontSize: '18px' }}>Loading Ad...</div>
|
|
195
222
|
) : adData ? (
|
|
196
223
|
<div
|
|
224
|
+
className="adtogether-interstitial-card"
|
|
197
225
|
style={{
|
|
198
226
|
position: 'relative',
|
|
199
227
|
maxWidth: '800px',
|
|
@@ -253,6 +281,7 @@ export const AdTogetherInterstitial: React.FC<AdTogetherInterstitialProps> = ({
|
|
|
253
281
|
{/* Ad Image */}
|
|
254
282
|
{adData.imageUrl && (
|
|
255
283
|
<div
|
|
284
|
+
className="adtogether-interstitial-img-wrapper"
|
|
256
285
|
style={{ cursor: 'pointer', position: 'relative' }}
|
|
257
286
|
onClick={handleAdClick}
|
|
258
287
|
>
|
|
@@ -271,6 +300,7 @@ export const AdTogetherInterstitial: React.FC<AdTogetherInterstitialProps> = ({
|
|
|
271
300
|
|
|
272
301
|
{/* Ad Content */}
|
|
273
302
|
<div
|
|
303
|
+
className="adtogether-interstitial-content"
|
|
274
304
|
style={{ padding: '20px', cursor: 'pointer' }}
|
|
275
305
|
onClick={handleAdClick}
|
|
276
306
|
>
|