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