playkit-sdk 1.2.0-beta → 1.2.1-beta.1
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/dist/playkit-sdk.cjs.js +606 -539
- package/dist/playkit-sdk.cjs.js.map +1 -1
- package/dist/playkit-sdk.d.ts +23 -0
- package/dist/playkit-sdk.esm.js +606 -539
- package/dist/playkit-sdk.esm.js.map +1 -1
- package/dist/playkit-sdk.umd.js +606 -539
- package/dist/playkit-sdk.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/playkit-sdk.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* playkit-sdk v1.2.
|
|
2
|
+
* playkit-sdk v1.2.1-beta.1
|
|
3
3
|
* PlayKit SDK for JavaScript
|
|
4
4
|
* @license SEE LICENSE IN LICENSE
|
|
5
5
|
*/
|
|
@@ -452,84 +452,84 @@ class AuthFlowManager extends EventEmitter {
|
|
|
452
452
|
// Create modal container
|
|
453
453
|
this.modal = document.createElement('div');
|
|
454
454
|
this.modal.className = 'playkit-auth-modal';
|
|
455
|
-
this.modal.innerHTML = `
|
|
456
|
-
<div class="playkit-auth-overlay"></div>
|
|
457
|
-
<div class="playkit-auth-container">
|
|
458
|
-
<!-- Identifier Panel -->
|
|
459
|
-
<div class="playkit-auth-panel" id="playkit-identifier-panel">
|
|
460
|
-
<div class="playkit-auth-header">
|
|
461
|
-
<h2>${this.t('signIn')}</h2>
|
|
462
|
-
<p>${this.t('signInSubtitle')}</p>
|
|
463
|
-
</div>
|
|
464
|
-
|
|
465
|
-
<div class="playkit-auth-toggle">
|
|
466
|
-
<label class="playkit-toggle-option">
|
|
467
|
-
<input type="radio" name="auth-type" value="email" checked>
|
|
468
|
-
<span>${this.t('email')}</span>
|
|
469
|
-
</label>
|
|
470
|
-
<label class="playkit-toggle-option">
|
|
471
|
-
<input type="radio" name="auth-type" value="phone">
|
|
472
|
-
<span>${this.t('phone')}</span>
|
|
473
|
-
</label>
|
|
474
|
-
</div>
|
|
475
|
-
|
|
476
|
-
<div class="playkit-auth-input-group">
|
|
477
|
-
<div class="playkit-input-wrapper">
|
|
478
|
-
<svg class="playkit-input-icon" id="playkit-identifier-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
479
|
-
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
480
|
-
<polyline points="22,6 12,13 2,6"></polyline>
|
|
481
|
-
</svg>
|
|
482
|
-
<input
|
|
483
|
-
type="text"
|
|
484
|
-
id="playkit-identifier-input"
|
|
485
|
-
placeholder="${this.t('emailPlaceholder')}"
|
|
486
|
-
autocomplete="off"
|
|
487
|
-
>
|
|
488
|
-
</div>
|
|
489
|
-
</div>
|
|
490
|
-
|
|
491
|
-
<button class="playkit-auth-button" id="playkit-send-code-btn">
|
|
492
|
-
${this.t('sendCode')}
|
|
493
|
-
</button>
|
|
494
|
-
|
|
495
|
-
<div class="playkit-auth-error" id="playkit-error-text"></div>
|
|
496
|
-
</div>
|
|
497
|
-
|
|
498
|
-
<!-- Verification Panel -->
|
|
499
|
-
<div class="playkit-auth-panel" id="playkit-verification-panel" style="display: none;">
|
|
500
|
-
<div class="playkit-auth-header">
|
|
501
|
-
<button class="playkit-back-button" id="playkit-back-btn">
|
|
502
|
-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
503
|
-
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
|
504
|
-
</svg>
|
|
505
|
-
</button>
|
|
506
|
-
<h2>${this.t('enterCode')}</h2>
|
|
507
|
-
<p>${this.t('enterCodeSubtitle')} <span id="playkit-identifier-display"></span></p>
|
|
508
|
-
</div>
|
|
509
|
-
|
|
510
|
-
<div class="playkit-auth-input-group">
|
|
511
|
-
<div class="playkit-code-inputs">
|
|
512
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="0">
|
|
513
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="1">
|
|
514
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="2">
|
|
515
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="3">
|
|
516
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="4">
|
|
517
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="5">
|
|
518
|
-
</div>
|
|
519
|
-
</div>
|
|
520
|
-
|
|
521
|
-
<button class="playkit-auth-button" id="playkit-verify-btn">
|
|
522
|
-
${this.t('verify')}
|
|
523
|
-
</button>
|
|
524
|
-
|
|
525
|
-
<div class="playkit-auth-error" id="playkit-verify-error-text"></div>
|
|
526
|
-
</div>
|
|
527
|
-
|
|
528
|
-
<!-- Loading Overlay -->
|
|
529
|
-
<div class="playkit-loading-overlay" id="playkit-loading-overlay" style="display: none;">
|
|
530
|
-
<div class="playkit-spinner"></div>
|
|
531
|
-
</div>
|
|
532
|
-
</div>
|
|
455
|
+
this.modal.innerHTML = `
|
|
456
|
+
<div class="playkit-auth-overlay"></div>
|
|
457
|
+
<div class="playkit-auth-container">
|
|
458
|
+
<!-- Identifier Panel -->
|
|
459
|
+
<div class="playkit-auth-panel" id="playkit-identifier-panel">
|
|
460
|
+
<div class="playkit-auth-header">
|
|
461
|
+
<h2>${this.t('signIn')}</h2>
|
|
462
|
+
<p>${this.t('signInSubtitle')}</p>
|
|
463
|
+
</div>
|
|
464
|
+
|
|
465
|
+
<div class="playkit-auth-toggle">
|
|
466
|
+
<label class="playkit-toggle-option">
|
|
467
|
+
<input type="radio" name="auth-type" value="email" checked>
|
|
468
|
+
<span>${this.t('email')}</span>
|
|
469
|
+
</label>
|
|
470
|
+
<label class="playkit-toggle-option">
|
|
471
|
+
<input type="radio" name="auth-type" value="phone">
|
|
472
|
+
<span>${this.t('phone')}</span>
|
|
473
|
+
</label>
|
|
474
|
+
</div>
|
|
475
|
+
|
|
476
|
+
<div class="playkit-auth-input-group">
|
|
477
|
+
<div class="playkit-input-wrapper">
|
|
478
|
+
<svg class="playkit-input-icon" id="playkit-identifier-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
479
|
+
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
480
|
+
<polyline points="22,6 12,13 2,6"></polyline>
|
|
481
|
+
</svg>
|
|
482
|
+
<input
|
|
483
|
+
type="text"
|
|
484
|
+
id="playkit-identifier-input"
|
|
485
|
+
placeholder="${this.t('emailPlaceholder')}"
|
|
486
|
+
autocomplete="off"
|
|
487
|
+
>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
|
|
491
|
+
<button class="playkit-auth-button" id="playkit-send-code-btn">
|
|
492
|
+
${this.t('sendCode')}
|
|
493
|
+
</button>
|
|
494
|
+
|
|
495
|
+
<div class="playkit-auth-error" id="playkit-error-text"></div>
|
|
496
|
+
</div>
|
|
497
|
+
|
|
498
|
+
<!-- Verification Panel -->
|
|
499
|
+
<div class="playkit-auth-panel" id="playkit-verification-panel" style="display: none;">
|
|
500
|
+
<div class="playkit-auth-header">
|
|
501
|
+
<button class="playkit-back-button" id="playkit-back-btn">
|
|
502
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
503
|
+
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
|
504
|
+
</svg>
|
|
505
|
+
</button>
|
|
506
|
+
<h2>${this.t('enterCode')}</h2>
|
|
507
|
+
<p>${this.t('enterCodeSubtitle')} <span id="playkit-identifier-display"></span></p>
|
|
508
|
+
</div>
|
|
509
|
+
|
|
510
|
+
<div class="playkit-auth-input-group">
|
|
511
|
+
<div class="playkit-code-inputs">
|
|
512
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="0">
|
|
513
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="1">
|
|
514
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="2">
|
|
515
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="3">
|
|
516
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="4">
|
|
517
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="5">
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
|
|
521
|
+
<button class="playkit-auth-button" id="playkit-verify-btn">
|
|
522
|
+
${this.t('verify')}
|
|
523
|
+
</button>
|
|
524
|
+
|
|
525
|
+
<div class="playkit-auth-error" id="playkit-verify-error-text"></div>
|
|
526
|
+
</div>
|
|
527
|
+
|
|
528
|
+
<!-- Loading Overlay -->
|
|
529
|
+
<div class="playkit-loading-overlay" id="playkit-loading-overlay" style="display: none;">
|
|
530
|
+
<div class="playkit-spinner"></div>
|
|
531
|
+
</div>
|
|
532
|
+
</div>
|
|
533
533
|
`;
|
|
534
534
|
// Add styles and load VanillaOTP
|
|
535
535
|
this.addStyles();
|
|
@@ -564,285 +564,285 @@ class AuthFlowManager extends EventEmitter {
|
|
|
564
564
|
return;
|
|
565
565
|
const style = document.createElement('style');
|
|
566
566
|
style.id = styleId;
|
|
567
|
-
style.textContent = `
|
|
568
|
-
.playkit-auth-modal {
|
|
569
|
-
position: fixed;
|
|
570
|
-
top: 0;
|
|
571
|
-
left: 0;
|
|
572
|
-
right: 0;
|
|
573
|
-
bottom: 0;
|
|
574
|
-
z-index: 999999;
|
|
575
|
-
display: flex;
|
|
576
|
-
justify-content: center;
|
|
577
|
-
align-items: center;
|
|
578
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
579
|
-
}
|
|
580
|
-
|
|
581
|
-
.playkit-auth-overlay {
|
|
582
|
-
position: absolute;
|
|
583
|
-
top: 0;
|
|
584
|
-
left: 0;
|
|
585
|
-
right: 0;
|
|
586
|
-
bottom: 0;
|
|
587
|
-
background: rgba(0, 0, 0, 0.48);
|
|
588
|
-
backdrop-filter: blur(8px);
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
.playkit-auth-container {
|
|
592
|
-
position: relative;
|
|
593
|
-
background: #FFFFFF;
|
|
594
|
-
border-radius: 4px;
|
|
595
|
-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
596
|
-
width: 90%;
|
|
597
|
-
max-width: 420px;
|
|
598
|
-
overflow: hidden;
|
|
599
|
-
}
|
|
600
|
-
|
|
601
|
-
.playkit-auth-panel {
|
|
602
|
-
padding: 40px 32px;
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
.playkit-auth-header {
|
|
606
|
-
text-align: center;
|
|
607
|
-
margin-bottom: 32px;
|
|
608
|
-
position: relative;
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
.playkit-auth-header h2 {
|
|
612
|
-
margin: 0 0 8px 0;
|
|
613
|
-
font-size: 28px;
|
|
614
|
-
font-weight: 600;
|
|
615
|
-
color: #000000;
|
|
616
|
-
}
|
|
617
|
-
|
|
618
|
-
.playkit-auth-header p {
|
|
619
|
-
margin: 0;
|
|
620
|
-
font-size: 14px;
|
|
621
|
-
color: #666666;
|
|
622
|
-
line-height: 1.5;
|
|
623
|
-
}
|
|
624
|
-
|
|
625
|
-
.playkit-back-button {
|
|
626
|
-
position: absolute;
|
|
627
|
-
left: 0;
|
|
628
|
-
top: 0;
|
|
629
|
-
background: transparent;
|
|
630
|
-
border: none;
|
|
631
|
-
cursor: pointer;
|
|
632
|
-
padding: 4px;
|
|
633
|
-
border-radius: 2px;
|
|
634
|
-
color: #666666;
|
|
635
|
-
transition: background-color 0.15s ease, color 0.15s ease;
|
|
636
|
-
}
|
|
637
|
-
|
|
638
|
-
.playkit-back-button:hover {
|
|
639
|
-
background: #F6F6F6;
|
|
640
|
-
color: #000000;
|
|
641
|
-
}
|
|
642
|
-
|
|
643
|
-
.playkit-auth-toggle {
|
|
644
|
-
display: flex;
|
|
645
|
-
background: #F6F6F6;
|
|
646
|
-
border-radius: 2px;
|
|
647
|
-
padding: 2px;
|
|
648
|
-
margin-bottom: 24px;
|
|
649
|
-
gap: 2px;
|
|
650
|
-
}
|
|
651
|
-
|
|
652
|
-
.playkit-toggle-option {
|
|
653
|
-
flex: 1;
|
|
654
|
-
display: flex;
|
|
655
|
-
justify-content: center;
|
|
656
|
-
align-items: center;
|
|
657
|
-
padding: 10px 16px;
|
|
658
|
-
border-radius: 2px;
|
|
659
|
-
cursor: pointer;
|
|
660
|
-
transition: background-color 0.15s ease;
|
|
661
|
-
}
|
|
662
|
-
|
|
663
|
-
.playkit-toggle-option input {
|
|
664
|
-
display: none;
|
|
665
|
-
}
|
|
666
|
-
|
|
667
|
-
.playkit-toggle-option span {
|
|
668
|
-
font-size: 14px;
|
|
669
|
-
font-weight: 500;
|
|
670
|
-
color: #666666;
|
|
671
|
-
transition: color 0.15s ease;
|
|
672
|
-
}
|
|
673
|
-
|
|
674
|
-
.playkit-toggle-option input:checked + span {
|
|
675
|
-
color: #FFFFFF;
|
|
676
|
-
}
|
|
677
|
-
|
|
678
|
-
.playkit-toggle-option:has(input:checked) {
|
|
679
|
-
background: #276EF1;
|
|
680
|
-
}
|
|
681
|
-
|
|
682
|
-
.playkit-auth-input-group {
|
|
683
|
-
margin-bottom: 24px;
|
|
684
|
-
}
|
|
685
|
-
|
|
686
|
-
.playkit-input-wrapper {
|
|
687
|
-
position: relative;
|
|
688
|
-
display: flex;
|
|
689
|
-
align-items: center;
|
|
690
|
-
}
|
|
691
|
-
|
|
692
|
-
.playkit-input-icon {
|
|
693
|
-
position: absolute;
|
|
694
|
-
left: 12px;
|
|
695
|
-
color: #999999;
|
|
696
|
-
pointer-events: none;
|
|
697
|
-
}
|
|
698
|
-
|
|
699
|
-
.playkit-input-wrapper input {
|
|
700
|
-
width: 100%;
|
|
701
|
-
padding: 12px 12px 12px 44px;
|
|
702
|
-
border: 1px solid #CCCCCC;
|
|
703
|
-
border-radius: 2px;
|
|
704
|
-
font-size: 14px;
|
|
705
|
-
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
706
|
-
box-sizing: border-box;
|
|
707
|
-
background: #FFFFFF;
|
|
708
|
-
}
|
|
709
|
-
|
|
710
|
-
.playkit-input-wrapper input:hover {
|
|
711
|
-
border-color: #999999;
|
|
712
|
-
}
|
|
713
|
-
|
|
714
|
-
.playkit-input-wrapper input:focus {
|
|
715
|
-
outline: none;
|
|
716
|
-
border-color: #276EF1;
|
|
717
|
-
box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.1);
|
|
718
|
-
}
|
|
719
|
-
|
|
720
|
-
.playkit-code-inputs {
|
|
721
|
-
display: flex;
|
|
722
|
-
gap: 8px;
|
|
723
|
-
justify-content: center;
|
|
724
|
-
}
|
|
725
|
-
|
|
726
|
-
.playkit-code-input {
|
|
727
|
-
width: 48px !important;
|
|
728
|
-
height: 56px;
|
|
729
|
-
text-align: center;
|
|
730
|
-
font-size: 24px;
|
|
731
|
-
font-weight: 600;
|
|
732
|
-
border: 1px solid #CCCCCC !important;
|
|
733
|
-
border-radius: 2px;
|
|
734
|
-
padding: 0 !important;
|
|
735
|
-
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
736
|
-
background: #FFFFFF;
|
|
737
|
-
-moz-appearance: textfield;
|
|
738
|
-
}
|
|
739
|
-
|
|
740
|
-
.playkit-code-input::-webkit-outer-spin-button,
|
|
741
|
-
.playkit-code-input::-webkit-inner-spin-button {
|
|
742
|
-
-webkit-appearance: none;
|
|
743
|
-
margin: 0;
|
|
744
|
-
}
|
|
745
|
-
|
|
746
|
-
.playkit-code-input:hover {
|
|
747
|
-
border-color: #999999 !important;
|
|
748
|
-
}
|
|
749
|
-
|
|
750
|
-
.playkit-code-input:focus {
|
|
751
|
-
outline: none;
|
|
752
|
-
border-color: #276EF1 !important;
|
|
753
|
-
box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.1);
|
|
754
|
-
}
|
|
755
|
-
|
|
756
|
-
.playkit-auth-button {
|
|
757
|
-
width: 100%;
|
|
758
|
-
padding: 12px 16px;
|
|
759
|
-
background: #276EF1;
|
|
760
|
-
color: #FFFFFF;
|
|
761
|
-
border: none;
|
|
762
|
-
border-radius: 2px;
|
|
763
|
-
font-size: 14px;
|
|
764
|
-
font-weight: 500;
|
|
765
|
-
cursor: pointer;
|
|
766
|
-
transition: background-color 0.15s ease;
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
.playkit-auth-button:hover:not(:disabled) {
|
|
770
|
-
background: #174EB6;
|
|
771
|
-
}
|
|
772
|
-
|
|
773
|
-
.playkit-auth-button:active:not(:disabled) {
|
|
774
|
-
background: #0F3A8A;
|
|
775
|
-
}
|
|
776
|
-
|
|
777
|
-
.playkit-auth-button:disabled {
|
|
778
|
-
background: #CCCCCC;
|
|
779
|
-
cursor: not-allowed;
|
|
780
|
-
}
|
|
781
|
-
|
|
782
|
-
.playkit-auth-error {
|
|
783
|
-
margin-top: 16px;
|
|
784
|
-
padding: 12px 16px;
|
|
785
|
-
background: #FEF0F0;
|
|
786
|
-
border: 1px solid #FDD;
|
|
787
|
-
border-radius: 2px;
|
|
788
|
-
color: #CC3333;
|
|
789
|
-
font-size: 13px;
|
|
790
|
-
text-align: left;
|
|
791
|
-
display: none;
|
|
792
|
-
}
|
|
793
|
-
|
|
794
|
-
.playkit-auth-error.show {
|
|
795
|
-
display: block;
|
|
796
|
-
}
|
|
797
|
-
|
|
798
|
-
.playkit-loading-overlay {
|
|
799
|
-
position: absolute;
|
|
800
|
-
top: 0;
|
|
801
|
-
left: 0;
|
|
802
|
-
right: 0;
|
|
803
|
-
bottom: 0;
|
|
804
|
-
background: rgba(255, 255, 255, 0.96);
|
|
805
|
-
display: flex;
|
|
806
|
-
justify-content: center;
|
|
807
|
-
align-items: center;
|
|
808
|
-
border-radius: 4px;
|
|
809
|
-
}
|
|
810
|
-
|
|
811
|
-
.playkit-spinner {
|
|
812
|
-
width: 40px;
|
|
813
|
-
height: 40px;
|
|
814
|
-
border: 3px solid #F0F0F0;
|
|
815
|
-
border-top: 3px solid #276EF1;
|
|
816
|
-
border-radius: 50%;
|
|
817
|
-
animation: playkit-spin 0.8s linear infinite;
|
|
818
|
-
}
|
|
819
|
-
|
|
820
|
-
@keyframes playkit-spin {
|
|
821
|
-
0% { transform: rotate(0deg); }
|
|
822
|
-
100% { transform: rotate(360deg); }
|
|
823
|
-
}
|
|
824
|
-
|
|
825
|
-
@media (max-width: 480px) {
|
|
826
|
-
.playkit-auth-container {
|
|
827
|
-
width: 95%;
|
|
828
|
-
max-width: none;
|
|
829
|
-
border-radius: 2px;
|
|
830
|
-
}
|
|
831
|
-
|
|
832
|
-
.playkit-auth-panel {
|
|
833
|
-
padding: 32px 24px;
|
|
834
|
-
}
|
|
835
|
-
|
|
836
|
-
.playkit-code-input {
|
|
837
|
-
width: 40px !important;
|
|
838
|
-
height: 48px;
|
|
839
|
-
font-size: 20px;
|
|
840
|
-
}
|
|
841
|
-
|
|
842
|
-
.playkit-code-inputs {
|
|
843
|
-
gap: 6px;
|
|
844
|
-
}
|
|
845
|
-
}
|
|
567
|
+
style.textContent = `
|
|
568
|
+
.playkit-auth-modal {
|
|
569
|
+
position: fixed;
|
|
570
|
+
top: 0;
|
|
571
|
+
left: 0;
|
|
572
|
+
right: 0;
|
|
573
|
+
bottom: 0;
|
|
574
|
+
z-index: 999999;
|
|
575
|
+
display: flex;
|
|
576
|
+
justify-content: center;
|
|
577
|
+
align-items: center;
|
|
578
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
.playkit-auth-overlay {
|
|
582
|
+
position: absolute;
|
|
583
|
+
top: 0;
|
|
584
|
+
left: 0;
|
|
585
|
+
right: 0;
|
|
586
|
+
bottom: 0;
|
|
587
|
+
background: rgba(0, 0, 0, 0.48);
|
|
588
|
+
backdrop-filter: blur(8px);
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.playkit-auth-container {
|
|
592
|
+
position: relative;
|
|
593
|
+
background: #FFFFFF;
|
|
594
|
+
border-radius: 4px;
|
|
595
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
596
|
+
width: 90%;
|
|
597
|
+
max-width: 420px;
|
|
598
|
+
overflow: hidden;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.playkit-auth-panel {
|
|
602
|
+
padding: 40px 32px;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.playkit-auth-header {
|
|
606
|
+
text-align: center;
|
|
607
|
+
margin-bottom: 32px;
|
|
608
|
+
position: relative;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.playkit-auth-header h2 {
|
|
612
|
+
margin: 0 0 8px 0;
|
|
613
|
+
font-size: 28px;
|
|
614
|
+
font-weight: 600;
|
|
615
|
+
color: #000000;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
.playkit-auth-header p {
|
|
619
|
+
margin: 0;
|
|
620
|
+
font-size: 14px;
|
|
621
|
+
color: #666666;
|
|
622
|
+
line-height: 1.5;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.playkit-back-button {
|
|
626
|
+
position: absolute;
|
|
627
|
+
left: 0;
|
|
628
|
+
top: 0;
|
|
629
|
+
background: transparent;
|
|
630
|
+
border: none;
|
|
631
|
+
cursor: pointer;
|
|
632
|
+
padding: 4px;
|
|
633
|
+
border-radius: 2px;
|
|
634
|
+
color: #666666;
|
|
635
|
+
transition: background-color 0.15s ease, color 0.15s ease;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.playkit-back-button:hover {
|
|
639
|
+
background: #F6F6F6;
|
|
640
|
+
color: #000000;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
.playkit-auth-toggle {
|
|
644
|
+
display: flex;
|
|
645
|
+
background: #F6F6F6;
|
|
646
|
+
border-radius: 2px;
|
|
647
|
+
padding: 2px;
|
|
648
|
+
margin-bottom: 24px;
|
|
649
|
+
gap: 2px;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
.playkit-toggle-option {
|
|
653
|
+
flex: 1;
|
|
654
|
+
display: flex;
|
|
655
|
+
justify-content: center;
|
|
656
|
+
align-items: center;
|
|
657
|
+
padding: 10px 16px;
|
|
658
|
+
border-radius: 2px;
|
|
659
|
+
cursor: pointer;
|
|
660
|
+
transition: background-color 0.15s ease;
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
.playkit-toggle-option input {
|
|
664
|
+
display: none;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
.playkit-toggle-option span {
|
|
668
|
+
font-size: 14px;
|
|
669
|
+
font-weight: 500;
|
|
670
|
+
color: #666666;
|
|
671
|
+
transition: color 0.15s ease;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
.playkit-toggle-option input:checked + span {
|
|
675
|
+
color: #FFFFFF;
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
.playkit-toggle-option:has(input:checked) {
|
|
679
|
+
background: #276EF1;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.playkit-auth-input-group {
|
|
683
|
+
margin-bottom: 24px;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
.playkit-input-wrapper {
|
|
687
|
+
position: relative;
|
|
688
|
+
display: flex;
|
|
689
|
+
align-items: center;
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
.playkit-input-icon {
|
|
693
|
+
position: absolute;
|
|
694
|
+
left: 12px;
|
|
695
|
+
color: #999999;
|
|
696
|
+
pointer-events: none;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
.playkit-input-wrapper input {
|
|
700
|
+
width: 100%;
|
|
701
|
+
padding: 12px 12px 12px 44px;
|
|
702
|
+
border: 1px solid #CCCCCC;
|
|
703
|
+
border-radius: 2px;
|
|
704
|
+
font-size: 14px;
|
|
705
|
+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
706
|
+
box-sizing: border-box;
|
|
707
|
+
background: #FFFFFF;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.playkit-input-wrapper input:hover {
|
|
711
|
+
border-color: #999999;
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
.playkit-input-wrapper input:focus {
|
|
715
|
+
outline: none;
|
|
716
|
+
border-color: #276EF1;
|
|
717
|
+
box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.1);
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
.playkit-code-inputs {
|
|
721
|
+
display: flex;
|
|
722
|
+
gap: 8px;
|
|
723
|
+
justify-content: center;
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
.playkit-code-input {
|
|
727
|
+
width: 48px !important;
|
|
728
|
+
height: 56px;
|
|
729
|
+
text-align: center;
|
|
730
|
+
font-size: 24px;
|
|
731
|
+
font-weight: 600;
|
|
732
|
+
border: 1px solid #CCCCCC !important;
|
|
733
|
+
border-radius: 2px;
|
|
734
|
+
padding: 0 !important;
|
|
735
|
+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
736
|
+
background: #FFFFFF;
|
|
737
|
+
-moz-appearance: textfield;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
.playkit-code-input::-webkit-outer-spin-button,
|
|
741
|
+
.playkit-code-input::-webkit-inner-spin-button {
|
|
742
|
+
-webkit-appearance: none;
|
|
743
|
+
margin: 0;
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
.playkit-code-input:hover {
|
|
747
|
+
border-color: #999999 !important;
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
.playkit-code-input:focus {
|
|
751
|
+
outline: none;
|
|
752
|
+
border-color: #276EF1 !important;
|
|
753
|
+
box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.1);
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.playkit-auth-button {
|
|
757
|
+
width: 100%;
|
|
758
|
+
padding: 12px 16px;
|
|
759
|
+
background: #276EF1;
|
|
760
|
+
color: #FFFFFF;
|
|
761
|
+
border: none;
|
|
762
|
+
border-radius: 2px;
|
|
763
|
+
font-size: 14px;
|
|
764
|
+
font-weight: 500;
|
|
765
|
+
cursor: pointer;
|
|
766
|
+
transition: background-color 0.15s ease;
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
.playkit-auth-button:hover:not(:disabled) {
|
|
770
|
+
background: #174EB6;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.playkit-auth-button:active:not(:disabled) {
|
|
774
|
+
background: #0F3A8A;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.playkit-auth-button:disabled {
|
|
778
|
+
background: #CCCCCC;
|
|
779
|
+
cursor: not-allowed;
|
|
780
|
+
}
|
|
781
|
+
|
|
782
|
+
.playkit-auth-error {
|
|
783
|
+
margin-top: 16px;
|
|
784
|
+
padding: 12px 16px;
|
|
785
|
+
background: #FEF0F0;
|
|
786
|
+
border: 1px solid #FDD;
|
|
787
|
+
border-radius: 2px;
|
|
788
|
+
color: #CC3333;
|
|
789
|
+
font-size: 13px;
|
|
790
|
+
text-align: left;
|
|
791
|
+
display: none;
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
.playkit-auth-error.show {
|
|
795
|
+
display: block;
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
.playkit-loading-overlay {
|
|
799
|
+
position: absolute;
|
|
800
|
+
top: 0;
|
|
801
|
+
left: 0;
|
|
802
|
+
right: 0;
|
|
803
|
+
bottom: 0;
|
|
804
|
+
background: rgba(255, 255, 255, 0.96);
|
|
805
|
+
display: flex;
|
|
806
|
+
justify-content: center;
|
|
807
|
+
align-items: center;
|
|
808
|
+
border-radius: 4px;
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
.playkit-spinner {
|
|
812
|
+
width: 40px;
|
|
813
|
+
height: 40px;
|
|
814
|
+
border: 3px solid #F0F0F0;
|
|
815
|
+
border-top: 3px solid #276EF1;
|
|
816
|
+
border-radius: 50%;
|
|
817
|
+
animation: playkit-spin 0.8s linear infinite;
|
|
818
|
+
}
|
|
819
|
+
|
|
820
|
+
@keyframes playkit-spin {
|
|
821
|
+
0% { transform: rotate(0deg); }
|
|
822
|
+
100% { transform: rotate(360deg); }
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
@media (max-width: 480px) {
|
|
826
|
+
.playkit-auth-container {
|
|
827
|
+
width: 95%;
|
|
828
|
+
max-width: none;
|
|
829
|
+
border-radius: 2px;
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
.playkit-auth-panel {
|
|
833
|
+
padding: 32px 24px;
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
.playkit-code-input {
|
|
837
|
+
width: 40px !important;
|
|
838
|
+
height: 48px;
|
|
839
|
+
font-size: 20px;
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
.playkit-code-inputs {
|
|
843
|
+
gap: 6px;
|
|
844
|
+
}
|
|
845
|
+
}
|
|
846
846
|
`;
|
|
847
847
|
document.head.appendChild(style);
|
|
848
848
|
}
|
|
@@ -863,14 +863,14 @@ class AuthFlowManager extends EventEmitter {
|
|
|
863
863
|
: this.t('phonePlaceholder');
|
|
864
864
|
// Update icon
|
|
865
865
|
if (isEmail) {
|
|
866
|
-
identifierIcon.innerHTML = `
|
|
867
|
-
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
868
|
-
<polyline points="22,6 12,13 2,6"></polyline>
|
|
866
|
+
identifierIcon.innerHTML = `
|
|
867
|
+
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
868
|
+
<polyline points="22,6 12,13 2,6"></polyline>
|
|
869
869
|
`;
|
|
870
870
|
}
|
|
871
871
|
else {
|
|
872
|
-
identifierIcon.innerHTML = `
|
|
873
|
-
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
|
872
|
+
identifierIcon.innerHTML = `
|
|
873
|
+
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
|
874
874
|
`;
|
|
875
875
|
}
|
|
876
876
|
};
|
|
@@ -1923,168 +1923,168 @@ class RechargeManager extends EventEmitter {
|
|
|
1923
1923
|
return;
|
|
1924
1924
|
}
|
|
1925
1925
|
this.styleElement = document.createElement('style');
|
|
1926
|
-
this.styleElement.textContent = `
|
|
1927
|
-
.playkit-recharge-overlay {
|
|
1928
|
-
position: fixed;
|
|
1929
|
-
top: 0;
|
|
1930
|
-
left: 0;
|
|
1931
|
-
right: 0;
|
|
1932
|
-
bottom: 0;
|
|
1933
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
1934
|
-
backdrop-filter: blur(4px);
|
|
1935
|
-
display: flex;
|
|
1936
|
-
justify-content: center;
|
|
1937
|
-
align-items: center;
|
|
1938
|
-
z-index: 999999;
|
|
1939
|
-
animation: playkit-recharge-fadeIn 0.2s ease-out;
|
|
1940
|
-
}
|
|
1941
|
-
|
|
1942
|
-
@keyframes playkit-recharge-fadeIn {
|
|
1943
|
-
from {
|
|
1944
|
-
opacity: 0;
|
|
1945
|
-
}
|
|
1946
|
-
to {
|
|
1947
|
-
opacity: 1;
|
|
1948
|
-
}
|
|
1949
|
-
}
|
|
1950
|
-
|
|
1951
|
-
.playkit-recharge-modal {
|
|
1952
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
1953
|
-
border-radius: 16px;
|
|
1954
|
-
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
1955
|
-
padding: 32px;
|
|
1956
|
-
max-width: 400px;
|
|
1957
|
-
width: 90%;
|
|
1958
|
-
position: relative;
|
|
1959
|
-
animation: playkit-recharge-slideUp 0.3s ease-out;
|
|
1960
|
-
}
|
|
1961
|
-
|
|
1962
|
-
@keyframes playkit-recharge-slideUp {
|
|
1963
|
-
from {
|
|
1964
|
-
transform: translateY(20px);
|
|
1965
|
-
opacity: 0;
|
|
1966
|
-
}
|
|
1967
|
-
to {
|
|
1968
|
-
transform: translateY(0);
|
|
1969
|
-
opacity: 1;
|
|
1970
|
-
}
|
|
1971
|
-
}
|
|
1972
|
-
|
|
1973
|
-
.playkit-recharge-title {
|
|
1974
|
-
font-size: 24px;
|
|
1975
|
-
font-weight: bold;
|
|
1976
|
-
color: #ffffff;
|
|
1977
|
-
margin: 0 0 16px 0;
|
|
1978
|
-
text-align: center;
|
|
1979
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
1980
|
-
}
|
|
1981
|
-
|
|
1982
|
-
.playkit-recharge-message {
|
|
1983
|
-
font-size: 16px;
|
|
1984
|
-
color: rgba(255, 255, 255, 0.9);
|
|
1985
|
-
margin: 0 0 24px 0;
|
|
1986
|
-
text-align: center;
|
|
1987
|
-
line-height: 1.5;
|
|
1988
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
1989
|
-
}
|
|
1990
|
-
|
|
1991
|
-
.playkit-recharge-balance {
|
|
1992
|
-
background: rgba(255, 255, 255, 0.15);
|
|
1993
|
-
border-radius: 12px;
|
|
1994
|
-
padding: 16px;
|
|
1995
|
-
margin: 0 0 24px 0;
|
|
1996
|
-
text-align: center;
|
|
1997
|
-
backdrop-filter: blur(10px);
|
|
1998
|
-
}
|
|
1999
|
-
|
|
2000
|
-
.playkit-recharge-balance-label {
|
|
2001
|
-
font-size: 14px;
|
|
2002
|
-
color: rgba(255, 255, 255, 0.8);
|
|
2003
|
-
margin: 0 0 8px 0;
|
|
2004
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2005
|
-
}
|
|
2006
|
-
|
|
2007
|
-
.playkit-recharge-balance-value {
|
|
2008
|
-
font-size: 32px;
|
|
2009
|
-
font-weight: bold;
|
|
2010
|
-
color: #ffffff;
|
|
2011
|
-
margin: 0;
|
|
2012
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2013
|
-
}
|
|
2014
|
-
|
|
2015
|
-
.playkit-recharge-balance-unit {
|
|
2016
|
-
font-size: 16px;
|
|
2017
|
-
color: rgba(255, 255, 255, 0.8);
|
|
2018
|
-
margin-left: 8px;
|
|
2019
|
-
}
|
|
2020
|
-
|
|
2021
|
-
.playkit-recharge-buttons {
|
|
2022
|
-
display: flex;
|
|
2023
|
-
gap: 12px;
|
|
2024
|
-
justify-content: center;
|
|
2025
|
-
}
|
|
2026
|
-
|
|
2027
|
-
.playkit-recharge-button {
|
|
2028
|
-
flex: 1;
|
|
2029
|
-
padding: 12px 24px;
|
|
2030
|
-
border: none;
|
|
2031
|
-
border-radius: 8px;
|
|
2032
|
-
font-size: 16px;
|
|
2033
|
-
font-weight: 600;
|
|
2034
|
-
cursor: pointer;
|
|
2035
|
-
transition: all 0.2s ease;
|
|
2036
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2037
|
-
}
|
|
2038
|
-
|
|
2039
|
-
.playkit-recharge-button-primary {
|
|
2040
|
-
background: #ffffff;
|
|
2041
|
-
color: #667eea;
|
|
2042
|
-
}
|
|
2043
|
-
|
|
2044
|
-
.playkit-recharge-button-primary:hover {
|
|
2045
|
-
transform: translateY(-2px);
|
|
2046
|
-
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
|
|
2047
|
-
}
|
|
2048
|
-
|
|
2049
|
-
.playkit-recharge-button-primary:active {
|
|
2050
|
-
transform: translateY(0);
|
|
2051
|
-
}
|
|
2052
|
-
|
|
2053
|
-
.playkit-recharge-button-secondary {
|
|
2054
|
-
background: rgba(255, 255, 255, 0.15);
|
|
2055
|
-
color: #ffffff;
|
|
2056
|
-
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
2057
|
-
}
|
|
2058
|
-
|
|
2059
|
-
.playkit-recharge-button-secondary:hover {
|
|
2060
|
-
background: rgba(255, 255, 255, 0.25);
|
|
2061
|
-
}
|
|
2062
|
-
|
|
2063
|
-
.playkit-recharge-button-secondary:active {
|
|
2064
|
-
background: rgba(255, 255, 255, 0.15);
|
|
2065
|
-
}
|
|
2066
|
-
|
|
2067
|
-
@media (max-width: 480px) {
|
|
2068
|
-
.playkit-recharge-modal {
|
|
2069
|
-
padding: 24px;
|
|
2070
|
-
}
|
|
2071
|
-
|
|
2072
|
-
.playkit-recharge-title {
|
|
2073
|
-
font-size: 20px;
|
|
2074
|
-
}
|
|
2075
|
-
|
|
2076
|
-
.playkit-recharge-message {
|
|
2077
|
-
font-size: 14px;
|
|
2078
|
-
}
|
|
2079
|
-
|
|
2080
|
-
.playkit-recharge-balance-value {
|
|
2081
|
-
font-size: 28px;
|
|
2082
|
-
}
|
|
2083
|
-
|
|
2084
|
-
.playkit-recharge-buttons {
|
|
2085
|
-
flex-direction: column;
|
|
2086
|
-
}
|
|
2087
|
-
}
|
|
1926
|
+
this.styleElement.textContent = `
|
|
1927
|
+
.playkit-recharge-overlay {
|
|
1928
|
+
position: fixed;
|
|
1929
|
+
top: 0;
|
|
1930
|
+
left: 0;
|
|
1931
|
+
right: 0;
|
|
1932
|
+
bottom: 0;
|
|
1933
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
1934
|
+
backdrop-filter: blur(4px);
|
|
1935
|
+
display: flex;
|
|
1936
|
+
justify-content: center;
|
|
1937
|
+
align-items: center;
|
|
1938
|
+
z-index: 999999;
|
|
1939
|
+
animation: playkit-recharge-fadeIn 0.2s ease-out;
|
|
1940
|
+
}
|
|
1941
|
+
|
|
1942
|
+
@keyframes playkit-recharge-fadeIn {
|
|
1943
|
+
from {
|
|
1944
|
+
opacity: 0;
|
|
1945
|
+
}
|
|
1946
|
+
to {
|
|
1947
|
+
opacity: 1;
|
|
1948
|
+
}
|
|
1949
|
+
}
|
|
1950
|
+
|
|
1951
|
+
.playkit-recharge-modal {
|
|
1952
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
1953
|
+
border-radius: 16px;
|
|
1954
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
1955
|
+
padding: 32px;
|
|
1956
|
+
max-width: 400px;
|
|
1957
|
+
width: 90%;
|
|
1958
|
+
position: relative;
|
|
1959
|
+
animation: playkit-recharge-slideUp 0.3s ease-out;
|
|
1960
|
+
}
|
|
1961
|
+
|
|
1962
|
+
@keyframes playkit-recharge-slideUp {
|
|
1963
|
+
from {
|
|
1964
|
+
transform: translateY(20px);
|
|
1965
|
+
opacity: 0;
|
|
1966
|
+
}
|
|
1967
|
+
to {
|
|
1968
|
+
transform: translateY(0);
|
|
1969
|
+
opacity: 1;
|
|
1970
|
+
}
|
|
1971
|
+
}
|
|
1972
|
+
|
|
1973
|
+
.playkit-recharge-title {
|
|
1974
|
+
font-size: 24px;
|
|
1975
|
+
font-weight: bold;
|
|
1976
|
+
color: #ffffff;
|
|
1977
|
+
margin: 0 0 16px 0;
|
|
1978
|
+
text-align: center;
|
|
1979
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
1980
|
+
}
|
|
1981
|
+
|
|
1982
|
+
.playkit-recharge-message {
|
|
1983
|
+
font-size: 16px;
|
|
1984
|
+
color: rgba(255, 255, 255, 0.9);
|
|
1985
|
+
margin: 0 0 24px 0;
|
|
1986
|
+
text-align: center;
|
|
1987
|
+
line-height: 1.5;
|
|
1988
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1991
|
+
.playkit-recharge-balance {
|
|
1992
|
+
background: rgba(255, 255, 255, 0.15);
|
|
1993
|
+
border-radius: 12px;
|
|
1994
|
+
padding: 16px;
|
|
1995
|
+
margin: 0 0 24px 0;
|
|
1996
|
+
text-align: center;
|
|
1997
|
+
backdrop-filter: blur(10px);
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
.playkit-recharge-balance-label {
|
|
2001
|
+
font-size: 14px;
|
|
2002
|
+
color: rgba(255, 255, 255, 0.8);
|
|
2003
|
+
margin: 0 0 8px 0;
|
|
2004
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2005
|
+
}
|
|
2006
|
+
|
|
2007
|
+
.playkit-recharge-balance-value {
|
|
2008
|
+
font-size: 32px;
|
|
2009
|
+
font-weight: bold;
|
|
2010
|
+
color: #ffffff;
|
|
2011
|
+
margin: 0;
|
|
2012
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2013
|
+
}
|
|
2014
|
+
|
|
2015
|
+
.playkit-recharge-balance-unit {
|
|
2016
|
+
font-size: 16px;
|
|
2017
|
+
color: rgba(255, 255, 255, 0.8);
|
|
2018
|
+
margin-left: 8px;
|
|
2019
|
+
}
|
|
2020
|
+
|
|
2021
|
+
.playkit-recharge-buttons {
|
|
2022
|
+
display: flex;
|
|
2023
|
+
gap: 12px;
|
|
2024
|
+
justify-content: center;
|
|
2025
|
+
}
|
|
2026
|
+
|
|
2027
|
+
.playkit-recharge-button {
|
|
2028
|
+
flex: 1;
|
|
2029
|
+
padding: 12px 24px;
|
|
2030
|
+
border: none;
|
|
2031
|
+
border-radius: 8px;
|
|
2032
|
+
font-size: 16px;
|
|
2033
|
+
font-weight: 600;
|
|
2034
|
+
cursor: pointer;
|
|
2035
|
+
transition: all 0.2s ease;
|
|
2036
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2037
|
+
}
|
|
2038
|
+
|
|
2039
|
+
.playkit-recharge-button-primary {
|
|
2040
|
+
background: #ffffff;
|
|
2041
|
+
color: #667eea;
|
|
2042
|
+
}
|
|
2043
|
+
|
|
2044
|
+
.playkit-recharge-button-primary:hover {
|
|
2045
|
+
transform: translateY(-2px);
|
|
2046
|
+
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
|
|
2047
|
+
}
|
|
2048
|
+
|
|
2049
|
+
.playkit-recharge-button-primary:active {
|
|
2050
|
+
transform: translateY(0);
|
|
2051
|
+
}
|
|
2052
|
+
|
|
2053
|
+
.playkit-recharge-button-secondary {
|
|
2054
|
+
background: rgba(255, 255, 255, 0.15);
|
|
2055
|
+
color: #ffffff;
|
|
2056
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
2057
|
+
}
|
|
2058
|
+
|
|
2059
|
+
.playkit-recharge-button-secondary:hover {
|
|
2060
|
+
background: rgba(255, 255, 255, 0.25);
|
|
2061
|
+
}
|
|
2062
|
+
|
|
2063
|
+
.playkit-recharge-button-secondary:active {
|
|
2064
|
+
background: rgba(255, 255, 255, 0.15);
|
|
2065
|
+
}
|
|
2066
|
+
|
|
2067
|
+
@media (max-width: 480px) {
|
|
2068
|
+
.playkit-recharge-modal {
|
|
2069
|
+
padding: 24px;
|
|
2070
|
+
}
|
|
2071
|
+
|
|
2072
|
+
.playkit-recharge-title {
|
|
2073
|
+
font-size: 20px;
|
|
2074
|
+
}
|
|
2075
|
+
|
|
2076
|
+
.playkit-recharge-message {
|
|
2077
|
+
font-size: 14px;
|
|
2078
|
+
}
|
|
2079
|
+
|
|
2080
|
+
.playkit-recharge-balance-value {
|
|
2081
|
+
font-size: 28px;
|
|
2082
|
+
}
|
|
2083
|
+
|
|
2084
|
+
.playkit-recharge-buttons {
|
|
2085
|
+
flex-direction: column;
|
|
2086
|
+
}
|
|
2087
|
+
}
|
|
2088
2088
|
`;
|
|
2089
2089
|
document.head.appendChild(this.styleElement);
|
|
2090
2090
|
}
|
|
@@ -2166,6 +2166,7 @@ class RechargeManager extends EventEmitter {
|
|
|
2166
2166
|
*/
|
|
2167
2167
|
const DEFAULT_BASE_URL$2 = 'https://playkit.agentlandlab.com';
|
|
2168
2168
|
const PLAYER_INFO_ENDPOINT = '/api/external/player-info';
|
|
2169
|
+
const SET_NICKNAME_ENDPOINT = '/api/external/set-game-player-nickname';
|
|
2169
2170
|
class PlayerClient extends EventEmitter {
|
|
2170
2171
|
constructor(authManager, config, rechargeConfig = {}) {
|
|
2171
2172
|
var _a, _b, _c;
|
|
@@ -2186,6 +2187,7 @@ class PlayerClient extends EventEmitter {
|
|
|
2186
2187
|
* Get player information
|
|
2187
2188
|
*/
|
|
2188
2189
|
async getPlayerInfo() {
|
|
2190
|
+
var _a;
|
|
2189
2191
|
const token = this.authManager.getToken();
|
|
2190
2192
|
if (!token) {
|
|
2191
2193
|
throw new PlayKitError('Not authenticated', 'NOT_AUTHENTICATED');
|
|
@@ -2223,6 +2225,7 @@ class PlayerClient extends EventEmitter {
|
|
|
2223
2225
|
this.playerInfo = {
|
|
2224
2226
|
userId: data.userId,
|
|
2225
2227
|
credits: data.credits,
|
|
2228
|
+
nickname: (_a = data.nickname) !== null && _a !== void 0 ? _a : null,
|
|
2226
2229
|
};
|
|
2227
2230
|
this.emit('player_info_updated', this.playerInfo);
|
|
2228
2231
|
return this.playerInfo;
|
|
@@ -2244,6 +2247,70 @@ class PlayerClient extends EventEmitter {
|
|
|
2244
2247
|
async refreshPlayerInfo() {
|
|
2245
2248
|
return this.getPlayerInfo();
|
|
2246
2249
|
}
|
|
2250
|
+
/**
|
|
2251
|
+
* Get player's nickname
|
|
2252
|
+
* Returns the cached nickname from playerInfo, or null if not set
|
|
2253
|
+
*/
|
|
2254
|
+
getNickname() {
|
|
2255
|
+
var _a, _b;
|
|
2256
|
+
return (_b = (_a = this.playerInfo) === null || _a === void 0 ? void 0 : _a.nickname) !== null && _b !== void 0 ? _b : null;
|
|
2257
|
+
}
|
|
2258
|
+
/**
|
|
2259
|
+
* Set player's nickname for the current game
|
|
2260
|
+
* Requires a game-specific player token (not a global token or developer token)
|
|
2261
|
+
* @param nickname - Nickname to set (1-16 characters, letters/numbers/Chinese/underscores/spaces only)
|
|
2262
|
+
* @returns The set nickname response
|
|
2263
|
+
* @throws PlayKitError if nickname is invalid, moderation fails, or token type is wrong
|
|
2264
|
+
*/
|
|
2265
|
+
async setNickname(nickname) {
|
|
2266
|
+
const token = this.authManager.getToken();
|
|
2267
|
+
if (!token) {
|
|
2268
|
+
throw new PlayKitError('Not authenticated', 'NOT_AUTHENTICATED');
|
|
2269
|
+
}
|
|
2270
|
+
// Developer tokens cannot set nicknames
|
|
2271
|
+
const authState = this.authManager.getAuthState();
|
|
2272
|
+
if (authState.tokenType === 'developer') {
|
|
2273
|
+
throw new PlayKitError('Developer tokens cannot set nicknames. Use a player token.', 'INVALID_TOKEN_TYPE');
|
|
2274
|
+
}
|
|
2275
|
+
// Validate nickname locally first
|
|
2276
|
+
if (!nickname || typeof nickname !== 'string') {
|
|
2277
|
+
throw new PlayKitError('Nickname is required', 'NICKNAME_REQUIRED');
|
|
2278
|
+
}
|
|
2279
|
+
const trimmed = nickname.trim();
|
|
2280
|
+
if (trimmed.length === 0) {
|
|
2281
|
+
throw new PlayKitError('Nickname cannot be empty', 'INVALID_NICKNAME');
|
|
2282
|
+
}
|
|
2283
|
+
if (trimmed.length > 16) {
|
|
2284
|
+
throw new PlayKitError('Nickname must be 16 characters or less', 'INVALID_NICKNAME');
|
|
2285
|
+
}
|
|
2286
|
+
try {
|
|
2287
|
+
const response = await fetch(`${this.baseURL}${SET_NICKNAME_ENDPOINT}`, {
|
|
2288
|
+
method: 'POST',
|
|
2289
|
+
headers: {
|
|
2290
|
+
Authorization: `Bearer ${token}`,
|
|
2291
|
+
'Content-Type': 'application/json',
|
|
2292
|
+
},
|
|
2293
|
+
body: JSON.stringify({ nickname: trimmed }),
|
|
2294
|
+
});
|
|
2295
|
+
if (!response.ok) {
|
|
2296
|
+
const error = await response.json().catch(() => ({ error: { message: 'Failed to set nickname' } }));
|
|
2297
|
+
const errorObj = error.error || error;
|
|
2298
|
+
throw new PlayKitError(errorObj.message || 'Failed to set nickname', errorObj.code, response.status);
|
|
2299
|
+
}
|
|
2300
|
+
const data = await response.json();
|
|
2301
|
+
// Update cached player info with new nickname
|
|
2302
|
+
if (this.playerInfo) {
|
|
2303
|
+
this.playerInfo.nickname = data.nickname;
|
|
2304
|
+
this.emit('player_info_updated', this.playerInfo);
|
|
2305
|
+
}
|
|
2306
|
+
this.emit('nickname_changed', data.nickname);
|
|
2307
|
+
return data;
|
|
2308
|
+
}
|
|
2309
|
+
catch (error) {
|
|
2310
|
+
this.emit('error', error);
|
|
2311
|
+
throw error;
|
|
2312
|
+
}
|
|
2313
|
+
}
|
|
2247
2314
|
/**
|
|
2248
2315
|
* Initialize recharge manager
|
|
2249
2316
|
*/
|
|
@@ -3607,20 +3674,20 @@ class PlayKitSDK extends EventEmitter {
|
|
|
3607
3674
|
// Create indicator element
|
|
3608
3675
|
this.devTokenIndicator = document.createElement('div');
|
|
3609
3676
|
this.devTokenIndicator.textContent = 'DeveloperToken';
|
|
3610
|
-
this.devTokenIndicator.style.cssText = `
|
|
3611
|
-
position: fixed;
|
|
3612
|
-
top: 10px;
|
|
3613
|
-
left: 10px;
|
|
3614
|
-
background-color: #dc2626;
|
|
3615
|
-
color: white;
|
|
3616
|
-
padding: 4px 12px;
|
|
3617
|
-
border-radius: 4px;
|
|
3618
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
3619
|
-
font-size: 12px;
|
|
3620
|
-
font-weight: 600;
|
|
3621
|
-
z-index: 999999;
|
|
3622
|
-
pointer-events: none;
|
|
3623
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
3677
|
+
this.devTokenIndicator.style.cssText = `
|
|
3678
|
+
position: fixed;
|
|
3679
|
+
top: 10px;
|
|
3680
|
+
left: 10px;
|
|
3681
|
+
background-color: #dc2626;
|
|
3682
|
+
color: white;
|
|
3683
|
+
padding: 4px 12px;
|
|
3684
|
+
border-radius: 4px;
|
|
3685
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
3686
|
+
font-size: 12px;
|
|
3687
|
+
font-weight: 600;
|
|
3688
|
+
z-index: 999999;
|
|
3689
|
+
pointer-events: none;
|
|
3690
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
3624
3691
|
`;
|
|
3625
3692
|
document.body.appendChild(this.devTokenIndicator);
|
|
3626
3693
|
}
|