@betarena/ad-engine 0.0.77 → 0.1.0

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 (3) hide show
  1. package/dist/index.js +57 -49
  2. package/package.json +1 -1
  3. package/src/lib/Advert-Slide-Child.svelte +166 -178
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@betarena/ad-engine",
3
- "version": "0.0.77",
3
+ "version": "0.1.0",
4
4
  "private": false,
5
5
  "description": "Betarena ad-engine widget",
6
6
  "keywords": [
package/src/lib/Advert-Slide-Child.svelte CHANGED
@@ -48,7 +48,6 @@
48
48
  import { storeSession } from './store/session.js';
49
49
 
50
50
  import iconClose from './assets/icon-close.svg';
51
- import iconArrow from './assets/icon-external-link.svg';
52
51
  import { logger } from './utils/debug.js';
53
52
 
54
53
  import type { AdsCreativeMain } from '@betarena/scores-lib/types/v8/_HASURA-0.js';
@@ -88,7 +87,7 @@
88
87
  * @example
89
88
  * => 10000 (10 seconds)
90
89
  */
91
- timeoutForAdvertShow = 10000,
90
+ timeoutForAdvertShow = 0,
92
91
  /**
93
92
  * @description
94
93
  * 📝 number of `milliseconds` for advert close action show
@@ -232,146 +231,153 @@
232
231
  out:fly={{ y: 500, duration: 500 }}
233
232
  class:dark-theme={isDarkTheme}
234
233
  >
234
+ <div
235
+ style=
236
+ "
237
+ position: relative;
238
+ height: 280px;
239
+ width: auto;
240
+ margin: 20px 19.5px 0 19.5px;
241
+ "
242
+ >
235
243
 
236
- <!--
237
- ╭─────
238
- │ ➤ (image) close
239
- ╰─────
240
- -->
241
- {#if isAdvertCloseBtnShown}
242
- <img
243
- id='close'
244
- src={iconClose}
245
- alt='icon-close'
246
- title='icon-close'
247
- loading='lazy'
248
- class=
249
- "
250
- cursor-pointer
251
- "
252
- on:click=
253
- {
254
- () =>
244
+ <!--
245
+ ╭─────
246
+ │ ➤ (image) close
247
+ ╰─────
248
+ -->
249
+ {#if isAdvertCloseBtnShown}
250
+ <img
251
+ id='close'
252
+ src={iconClose}
253
+ alt='icon-close'
254
+ title='icon-close'
255
+ loading='lazy'
256
+ class=
257
+ "
258
+ cursor-pointer
259
+ "
260
+ on:click=
255
261
  {
256
- betarenaAdEngineStore.updateData
257
- (
258
- [
259
- ['toggleAdShownState', undefined]
260
- ]
261
- );
262
- document.body.classList.remove
263
- (
264
- 'disable-scroll'
265
- );
266
- return;
262
+ () =>
263
+ {
264
+ betarenaAdEngineStore.updateData
265
+ (
266
+ [
267
+ ['toggleAdShownState', undefined]
268
+ ]
269
+ );
270
+ document.body.classList.remove
271
+ (
272
+ 'disable-scroll'
273
+ );
274
+ return;
275
+ }
267
276
  }
268
- }
269
- />
270
- {/if}
277
+ />
278
+ {/if}
271
279
 
272
- <!--
273
- ╭─────
274
- │ ➤ (image) banner image
275
- ╰─────
276
- -->
277
- {#if ((adData.type == 1 || adData.type == 4) && adData.data?.media)}
278
- <a
279
- href={adData.data.video_link}
280
- target="_blank"
281
- rel=
282
- "
283
- noopener
284
- noreferrer
285
- "
286
- on:click=
287
- {
288
- () =>
280
+ <!--
281
+ ╭─────
282
+ │ ➤ (image) banner image
283
+ ╰─────
284
+ -->
285
+ {#if ((adData.type == 1 || adData.type == 4) && adData.data?.media)}
286
+ <a
287
+ href={adData.data.video_link}
288
+ target="_blank"
289
+ rel=
290
+ "
291
+ noopener
292
+ noreferrer
293
+ "
294
+ on:click=
289
295
  {
290
- new ServiceAdEngine
291
- (
292
- betarenaEndpoint
293
- ).updateAdEngineClickCounter
294
- (
295
- {
296
- query: {
297
- creativeId: adData.id
298
- },
299
- body: {}
300
- }
301
- );
302
- return;
296
+ () =>
297
+ {
298
+ new ServiceAdEngine
299
+ (
300
+ betarenaEndpoint
301
+ ).updateAdEngineClickCounter
302
+ (
303
+ {
304
+ query: {
305
+ creativeId: adData.id
306
+ },
307
+ body: {}
308
+ }
309
+ );
310
+ return;
311
+ }
303
312
  }
304
- }
305
- >
306
- <!--
307
- <iframe
313
+ >
314
+ <!--
315
+ <iframe
316
+ width=250
317
+ height=250
318
+ src={adData.data?.media}
319
+ />
320
+ -->
321
+ <video
322
+ id="banner"
308
323
  width=250
309
324
  height=250
310
- src={adData.data?.media}
325
+ src={adData.data.media}
326
+ autoplay={true}
327
+ muted={true}
328
+ playsinline={true}
329
+ loop={true}
311
330
  />
312
- -->
313
- <video
314
- id="banner"
315
- width=250
316
- height=250
317
- src={adData.data.media}
318
- autoplay={true}
319
- muted={true}
320
- playsinline={true}
321
- loop={true}
322
- />
323
- </a>
331
+ </a>
324
332
 
325
- {:else if adData.type == 3 && adData.data?.code}
333
+ {:else if adData.type == 3 && adData.data?.code}
326
334
 
327
- <!--
328
- sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
329
- referrerpolicy="no-referrer-when-downgrade"
330
- -->
335
+ <!--
336
+ sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
337
+ referrerpolicy="no-referrer-when-downgrade"
338
+ -->
331
339
 
332
- <div
333
- style="
334
- position: relative;
335
- height: 336px;
336
- width: 100%;
337
- background-color: black;
338
- "
339
- >
340
- <iframe
341
- title="ad"
342
- srcdoc='
343
- <!doctype html>
344
- <html
345
- style="
346
- overflow: scroll;
347
- overflow-x: hidden;
348
- "
349
- >
350
- <head>
351
- <meta charset="utf-8">
352
- </head>
353
- <body
354
- style="
355
- margin:0;
340
+
341
+ <iframe
342
+ title="ad"
343
+ srcdoc='
344
+ <!doctype html>
345
+ <html
346
+ style=
347
+ "
348
+ overflow: scroll;
349
+ overflow-x: hidden;
350
+ height: 280px;
351
+ width: 336px;
356
352
  "
357
353
  >
358
- {adData.data.code}
359
- </body>
360
- </html>
361
- '
354
+ <head>
355
+ <meta charset="utf-8">
356
+ </head>
357
+ <body
358
+ style=
359
+ "
360
+ margin:0;
361
+ "
362
+ >
363
+ {adData.data.code}
364
+ </body>
365
+ </html>
366
+ '
367
+ />
368
+
369
+ {:else if (adData.type == 2)}
370
+ <img
371
+ id='banner'
372
+ src={adData.data?.media}
373
+ alt=''
374
+ title=''
375
+ loading='lazy'
362
376
  />
363
- </div>
364
377
 
365
- {:else if (adData.type == 2)}
366
- <img
367
- id='banner'
368
- src={adData.data?.media}
369
- alt=''
370
- title=''
371
- loading='lazy'
372
- />
378
+ {/if}
373
379
 
374
- {/if}
380
+ </div>
375
381
 
376
382
  <!--
377
383
  ╭─────
@@ -391,11 +397,12 @@
391
397
  id="title"
392
398
  class=
393
399
  "
394
- s-20
395
- w-600
400
+ s-18
401
+ w-700
396
402
  m-0
397
403
  m-b-20
398
404
  text-center
405
+ color-white
399
406
  "
400
407
  >
401
408
  {@html adData.data?.title}
@@ -414,6 +421,10 @@
414
421
  noopener
415
422
  noreferrer
416
423
  "
424
+ style=
425
+ "
426
+ justify-content: center;
427
+ "
417
428
  on:click=
418
429
  {
419
430
  () =>
@@ -435,29 +446,22 @@
435
446
  }
436
447
  >
437
448
  <button
449
+ class=
450
+ "
451
+ btn-primary
452
+ "
438
453
  >
439
454
  <span
440
455
  class=
441
456
  "
442
- s-18
457
+ s-16
443
458
  w-500
459
+ color-dark-theme-1-7-shade
460
+ uppercase
444
461
  "
445
462
  >
446
463
  {adData.data?.cta_title ?? 'Recieve Bonus'}
447
464
  </span>
448
- <img
449
- id=''
450
- src={iconArrow}
451
- alt='icon-arrow'
452
- title='icon-arrow'
453
- loading='lazy'
454
- class=
455
- "
456
- m-l-10
457
- "
458
- width="12"
459
- height="12"
460
- />
461
465
  </button>
462
466
  </a>
463
467
 
@@ -494,17 +498,25 @@
494
498
  left: 0;
495
499
  /* 🎨 style */
496
500
  overflow: hidden;
497
- border-radius: 40px 40px 0px 0px;
498
- background-color: var(--white);
501
+ border-radius: 20px 20px 0px 0px;
502
+ background-color: #232323;
499
503
 
500
504
  @mixin banner
501
505
  {
502
506
  /* 🎨 style */
503
- max-height: 355px;
504
- min-height: 355px;
505
- width: 100%;
506
- background-color: black;
507
+ min-height: unset;
508
+ max-height: unset;
509
+ height: 280px;
510
+ border: none;
511
+ width: 336px;
507
512
  object-fit: cover;
513
+
514
+ /* 📌 position */
515
+ position: absolute;
516
+ top: 50%;
517
+ left: 50%;
518
+ transform: translate(-50%, -50%);
519
+ margin: 0;
508
520
  }
509
521
 
510
522
  img
@@ -529,30 +541,6 @@
529
541
  {
530
542
  /* 🎨 style */
531
543
  @include banner;
532
- border: none;
533
- height: 280px;
534
- min-height: unset;
535
- max-height: unset;
536
- width: fit-content;
537
-
538
- /* 📌 position */
539
- position: absolute;
540
- top: 50%;
541
- left: 50%;
542
- transform: translate(-50%, -50%);
543
- margin: 0;
544
-
545
- // & > *
546
- // {
547
- // ::-webkit-scrollbar {
548
- // width: 0; /* Remove scrollbar space */
549
- // background: transparent; /* Optional: just make scrollbar invisible */
550
- // }
551
- // /* Optional: show position indicator in red */
552
- // ::-webkit-scrollbar-thumb {
553
- // background: #FF0000;
554
- // }
555
- // }
556
544
  }
557
545
 
558
546
  video
@@ -564,7 +552,7 @@
564
552
  div#main-box
565
553
  {
566
554
  /* 🎨 style */
567
- padding: 20px 20px 35px 20px;
555
+ padding: 20px 12.5px 60px 12.5px;
568
556
 
569
557
  p
570
558
  {
@@ -578,13 +566,13 @@
578
566
  button
579
567
  {
580
568
  /* 🎨 style */
581
- border-radius: 7.57px;
582
- max-height: 50px;
583
- min-height: 50px;
569
+ border-radius: 8px;
570
+ max-height: 48px;
571
+ min-height: 48px;
584
572
  width: 100%;
585
- padding: 10px;
586
- background: radial-gradient(97.9% 290.93% at 11.52% 99.71%, #2E6514 0%, #66BE3C 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
587
- color: var(--white);
573
+ padding: 12px;
574
+ // background: radial-gradient(97.9% 290.93% at 11.52% 99.71%, #2E6514 0%, #66BE3C 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
575
+ color: var(--dark-theme-1-7-shade);
588
576
  }
589
577
  }
590
578