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.umd.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
|
*/
|
|
@@ -803,84 +803,84 @@
|
|
|
803
803
|
// Create modal container
|
|
804
804
|
this.modal = document.createElement('div');
|
|
805
805
|
this.modal.className = 'playkit-auth-modal';
|
|
806
|
-
this.modal.innerHTML = `
|
|
807
|
-
<div class="playkit-auth-overlay"></div>
|
|
808
|
-
<div class="playkit-auth-container">
|
|
809
|
-
<!-- Identifier Panel -->
|
|
810
|
-
<div class="playkit-auth-panel" id="playkit-identifier-panel">
|
|
811
|
-
<div class="playkit-auth-header">
|
|
812
|
-
<h2>${this.t('signIn')}</h2>
|
|
813
|
-
<p>${this.t('signInSubtitle')}</p>
|
|
814
|
-
</div>
|
|
815
|
-
|
|
816
|
-
<div class="playkit-auth-toggle">
|
|
817
|
-
<label class="playkit-toggle-option">
|
|
818
|
-
<input type="radio" name="auth-type" value="email" checked>
|
|
819
|
-
<span>${this.t('email')}</span>
|
|
820
|
-
</label>
|
|
821
|
-
<label class="playkit-toggle-option">
|
|
822
|
-
<input type="radio" name="auth-type" value="phone">
|
|
823
|
-
<span>${this.t('phone')}</span>
|
|
824
|
-
</label>
|
|
825
|
-
</div>
|
|
826
|
-
|
|
827
|
-
<div class="playkit-auth-input-group">
|
|
828
|
-
<div class="playkit-input-wrapper">
|
|
829
|
-
<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">
|
|
830
|
-
<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>
|
|
831
|
-
<polyline points="22,6 12,13 2,6"></polyline>
|
|
832
|
-
</svg>
|
|
833
|
-
<input
|
|
834
|
-
type="text"
|
|
835
|
-
id="playkit-identifier-input"
|
|
836
|
-
placeholder="${this.t('emailPlaceholder')}"
|
|
837
|
-
autocomplete="off"
|
|
838
|
-
>
|
|
839
|
-
</div>
|
|
840
|
-
</div>
|
|
841
|
-
|
|
842
|
-
<button class="playkit-auth-button" id="playkit-send-code-btn">
|
|
843
|
-
${this.t('sendCode')}
|
|
844
|
-
</button>
|
|
845
|
-
|
|
846
|
-
<div class="playkit-auth-error" id="playkit-error-text"></div>
|
|
847
|
-
</div>
|
|
848
|
-
|
|
849
|
-
<!-- Verification Panel -->
|
|
850
|
-
<div class="playkit-auth-panel" id="playkit-verification-panel" style="display: none;">
|
|
851
|
-
<div class="playkit-auth-header">
|
|
852
|
-
<button class="playkit-back-button" id="playkit-back-btn">
|
|
853
|
-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
854
|
-
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
|
855
|
-
</svg>
|
|
856
|
-
</button>
|
|
857
|
-
<h2>${this.t('enterCode')}</h2>
|
|
858
|
-
<p>${this.t('enterCodeSubtitle')} <span id="playkit-identifier-display"></span></p>
|
|
859
|
-
</div>
|
|
860
|
-
|
|
861
|
-
<div class="playkit-auth-input-group">
|
|
862
|
-
<div class="playkit-code-inputs">
|
|
863
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="0">
|
|
864
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="1">
|
|
865
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="2">
|
|
866
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="3">
|
|
867
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="4">
|
|
868
|
-
<input type="number" maxlength="1" class="playkit-code-input" data-index="5">
|
|
869
|
-
</div>
|
|
870
|
-
</div>
|
|
871
|
-
|
|
872
|
-
<button class="playkit-auth-button" id="playkit-verify-btn">
|
|
873
|
-
${this.t('verify')}
|
|
874
|
-
</button>
|
|
875
|
-
|
|
876
|
-
<div class="playkit-auth-error" id="playkit-verify-error-text"></div>
|
|
877
|
-
</div>
|
|
878
|
-
|
|
879
|
-
<!-- Loading Overlay -->
|
|
880
|
-
<div class="playkit-loading-overlay" id="playkit-loading-overlay" style="display: none;">
|
|
881
|
-
<div class="playkit-spinner"></div>
|
|
882
|
-
</div>
|
|
883
|
-
</div>
|
|
806
|
+
this.modal.innerHTML = `
|
|
807
|
+
<div class="playkit-auth-overlay"></div>
|
|
808
|
+
<div class="playkit-auth-container">
|
|
809
|
+
<!-- Identifier Panel -->
|
|
810
|
+
<div class="playkit-auth-panel" id="playkit-identifier-panel">
|
|
811
|
+
<div class="playkit-auth-header">
|
|
812
|
+
<h2>${this.t('signIn')}</h2>
|
|
813
|
+
<p>${this.t('signInSubtitle')}</p>
|
|
814
|
+
</div>
|
|
815
|
+
|
|
816
|
+
<div class="playkit-auth-toggle">
|
|
817
|
+
<label class="playkit-toggle-option">
|
|
818
|
+
<input type="radio" name="auth-type" value="email" checked>
|
|
819
|
+
<span>${this.t('email')}</span>
|
|
820
|
+
</label>
|
|
821
|
+
<label class="playkit-toggle-option">
|
|
822
|
+
<input type="radio" name="auth-type" value="phone">
|
|
823
|
+
<span>${this.t('phone')}</span>
|
|
824
|
+
</label>
|
|
825
|
+
</div>
|
|
826
|
+
|
|
827
|
+
<div class="playkit-auth-input-group">
|
|
828
|
+
<div class="playkit-input-wrapper">
|
|
829
|
+
<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">
|
|
830
|
+
<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>
|
|
831
|
+
<polyline points="22,6 12,13 2,6"></polyline>
|
|
832
|
+
</svg>
|
|
833
|
+
<input
|
|
834
|
+
type="text"
|
|
835
|
+
id="playkit-identifier-input"
|
|
836
|
+
placeholder="${this.t('emailPlaceholder')}"
|
|
837
|
+
autocomplete="off"
|
|
838
|
+
>
|
|
839
|
+
</div>
|
|
840
|
+
</div>
|
|
841
|
+
|
|
842
|
+
<button class="playkit-auth-button" id="playkit-send-code-btn">
|
|
843
|
+
${this.t('sendCode')}
|
|
844
|
+
</button>
|
|
845
|
+
|
|
846
|
+
<div class="playkit-auth-error" id="playkit-error-text"></div>
|
|
847
|
+
</div>
|
|
848
|
+
|
|
849
|
+
<!-- Verification Panel -->
|
|
850
|
+
<div class="playkit-auth-panel" id="playkit-verification-panel" style="display: none;">
|
|
851
|
+
<div class="playkit-auth-header">
|
|
852
|
+
<button class="playkit-back-button" id="playkit-back-btn">
|
|
853
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
854
|
+
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
|
855
|
+
</svg>
|
|
856
|
+
</button>
|
|
857
|
+
<h2>${this.t('enterCode')}</h2>
|
|
858
|
+
<p>${this.t('enterCodeSubtitle')} <span id="playkit-identifier-display"></span></p>
|
|
859
|
+
</div>
|
|
860
|
+
|
|
861
|
+
<div class="playkit-auth-input-group">
|
|
862
|
+
<div class="playkit-code-inputs">
|
|
863
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="0">
|
|
864
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="1">
|
|
865
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="2">
|
|
866
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="3">
|
|
867
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="4">
|
|
868
|
+
<input type="number" maxlength="1" class="playkit-code-input" data-index="5">
|
|
869
|
+
</div>
|
|
870
|
+
</div>
|
|
871
|
+
|
|
872
|
+
<button class="playkit-auth-button" id="playkit-verify-btn">
|
|
873
|
+
${this.t('verify')}
|
|
874
|
+
</button>
|
|
875
|
+
|
|
876
|
+
<div class="playkit-auth-error" id="playkit-verify-error-text"></div>
|
|
877
|
+
</div>
|
|
878
|
+
|
|
879
|
+
<!-- Loading Overlay -->
|
|
880
|
+
<div class="playkit-loading-overlay" id="playkit-loading-overlay" style="display: none;">
|
|
881
|
+
<div class="playkit-spinner"></div>
|
|
882
|
+
</div>
|
|
883
|
+
</div>
|
|
884
884
|
`;
|
|
885
885
|
// Add styles and load VanillaOTP
|
|
886
886
|
this.addStyles();
|
|
@@ -915,285 +915,285 @@
|
|
|
915
915
|
return;
|
|
916
916
|
const style = document.createElement('style');
|
|
917
917
|
style.id = styleId;
|
|
918
|
-
style.textContent = `
|
|
919
|
-
.playkit-auth-modal {
|
|
920
|
-
position: fixed;
|
|
921
|
-
top: 0;
|
|
922
|
-
left: 0;
|
|
923
|
-
right: 0;
|
|
924
|
-
bottom: 0;
|
|
925
|
-
z-index: 999999;
|
|
926
|
-
display: flex;
|
|
927
|
-
justify-content: center;
|
|
928
|
-
align-items: center;
|
|
929
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
930
|
-
}
|
|
931
|
-
|
|
932
|
-
.playkit-auth-overlay {
|
|
933
|
-
position: absolute;
|
|
934
|
-
top: 0;
|
|
935
|
-
left: 0;
|
|
936
|
-
right: 0;
|
|
937
|
-
bottom: 0;
|
|
938
|
-
background: rgba(0, 0, 0, 0.48);
|
|
939
|
-
backdrop-filter: blur(8px);
|
|
940
|
-
}
|
|
941
|
-
|
|
942
|
-
.playkit-auth-container {
|
|
943
|
-
position: relative;
|
|
944
|
-
background: #FFFFFF;
|
|
945
|
-
border-radius: 4px;
|
|
946
|
-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
947
|
-
width: 90%;
|
|
948
|
-
max-width: 420px;
|
|
949
|
-
overflow: hidden;
|
|
950
|
-
}
|
|
951
|
-
|
|
952
|
-
.playkit-auth-panel {
|
|
953
|
-
padding: 40px 32px;
|
|
954
|
-
}
|
|
955
|
-
|
|
956
|
-
.playkit-auth-header {
|
|
957
|
-
text-align: center;
|
|
958
|
-
margin-bottom: 32px;
|
|
959
|
-
position: relative;
|
|
960
|
-
}
|
|
961
|
-
|
|
962
|
-
.playkit-auth-header h2 {
|
|
963
|
-
margin: 0 0 8px 0;
|
|
964
|
-
font-size: 28px;
|
|
965
|
-
font-weight: 600;
|
|
966
|
-
color: #000000;
|
|
967
|
-
}
|
|
968
|
-
|
|
969
|
-
.playkit-auth-header p {
|
|
970
|
-
margin: 0;
|
|
971
|
-
font-size: 14px;
|
|
972
|
-
color: #666666;
|
|
973
|
-
line-height: 1.5;
|
|
974
|
-
}
|
|
975
|
-
|
|
976
|
-
.playkit-back-button {
|
|
977
|
-
position: absolute;
|
|
978
|
-
left: 0;
|
|
979
|
-
top: 0;
|
|
980
|
-
background: transparent;
|
|
981
|
-
border: none;
|
|
982
|
-
cursor: pointer;
|
|
983
|
-
padding: 4px;
|
|
984
|
-
border-radius: 2px;
|
|
985
|
-
color: #666666;
|
|
986
|
-
transition: background-color 0.15s ease, color 0.15s ease;
|
|
987
|
-
}
|
|
988
|
-
|
|
989
|
-
.playkit-back-button:hover {
|
|
990
|
-
background: #F6F6F6;
|
|
991
|
-
color: #000000;
|
|
992
|
-
}
|
|
993
|
-
|
|
994
|
-
.playkit-auth-toggle {
|
|
995
|
-
display: flex;
|
|
996
|
-
background: #F6F6F6;
|
|
997
|
-
border-radius: 2px;
|
|
998
|
-
padding: 2px;
|
|
999
|
-
margin-bottom: 24px;
|
|
1000
|
-
gap: 2px;
|
|
1001
|
-
}
|
|
1002
|
-
|
|
1003
|
-
.playkit-toggle-option {
|
|
1004
|
-
flex: 1;
|
|
1005
|
-
display: flex;
|
|
1006
|
-
justify-content: center;
|
|
1007
|
-
align-items: center;
|
|
1008
|
-
padding: 10px 16px;
|
|
1009
|
-
border-radius: 2px;
|
|
1010
|
-
cursor: pointer;
|
|
1011
|
-
transition: background-color 0.15s ease;
|
|
1012
|
-
}
|
|
1013
|
-
|
|
1014
|
-
.playkit-toggle-option input {
|
|
1015
|
-
display: none;
|
|
1016
|
-
}
|
|
1017
|
-
|
|
1018
|
-
.playkit-toggle-option span {
|
|
1019
|
-
font-size: 14px;
|
|
1020
|
-
font-weight: 500;
|
|
1021
|
-
color: #666666;
|
|
1022
|
-
transition: color 0.15s ease;
|
|
1023
|
-
}
|
|
1024
|
-
|
|
1025
|
-
.playkit-toggle-option input:checked + span {
|
|
1026
|
-
color: #FFFFFF;
|
|
1027
|
-
}
|
|
1028
|
-
|
|
1029
|
-
.playkit-toggle-option:has(input:checked) {
|
|
1030
|
-
background: #276EF1;
|
|
1031
|
-
}
|
|
1032
|
-
|
|
1033
|
-
.playkit-auth-input-group {
|
|
1034
|
-
margin-bottom: 24px;
|
|
1035
|
-
}
|
|
1036
|
-
|
|
1037
|
-
.playkit-input-wrapper {
|
|
1038
|
-
position: relative;
|
|
1039
|
-
display: flex;
|
|
1040
|
-
align-items: center;
|
|
1041
|
-
}
|
|
1042
|
-
|
|
1043
|
-
.playkit-input-icon {
|
|
1044
|
-
position: absolute;
|
|
1045
|
-
left: 12px;
|
|
1046
|
-
color: #999999;
|
|
1047
|
-
pointer-events: none;
|
|
1048
|
-
}
|
|
1049
|
-
|
|
1050
|
-
.playkit-input-wrapper input {
|
|
1051
|
-
width: 100%;
|
|
1052
|
-
padding: 12px 12px 12px 44px;
|
|
1053
|
-
border: 1px solid #CCCCCC;
|
|
1054
|
-
border-radius: 2px;
|
|
1055
|
-
font-size: 14px;
|
|
1056
|
-
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
1057
|
-
box-sizing: border-box;
|
|
1058
|
-
background: #FFFFFF;
|
|
1059
|
-
}
|
|
1060
|
-
|
|
1061
|
-
.playkit-input-wrapper input:hover {
|
|
1062
|
-
border-color: #999999;
|
|
1063
|
-
}
|
|
1064
|
-
|
|
1065
|
-
.playkit-input-wrapper input:focus {
|
|
1066
|
-
outline: none;
|
|
1067
|
-
border-color: #276EF1;
|
|
1068
|
-
box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.1);
|
|
1069
|
-
}
|
|
1070
|
-
|
|
1071
|
-
.playkit-code-inputs {
|
|
1072
|
-
display: flex;
|
|
1073
|
-
gap: 8px;
|
|
1074
|
-
justify-content: center;
|
|
1075
|
-
}
|
|
1076
|
-
|
|
1077
|
-
.playkit-code-input {
|
|
1078
|
-
width: 48px !important;
|
|
1079
|
-
height: 56px;
|
|
1080
|
-
text-align: center;
|
|
1081
|
-
font-size: 24px;
|
|
1082
|
-
font-weight: 600;
|
|
1083
|
-
border: 1px solid #CCCCCC !important;
|
|
1084
|
-
border-radius: 2px;
|
|
1085
|
-
padding: 0 !important;
|
|
1086
|
-
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
1087
|
-
background: #FFFFFF;
|
|
1088
|
-
-moz-appearance: textfield;
|
|
1089
|
-
}
|
|
1090
|
-
|
|
1091
|
-
.playkit-code-input::-webkit-outer-spin-button,
|
|
1092
|
-
.playkit-code-input::-webkit-inner-spin-button {
|
|
1093
|
-
-webkit-appearance: none;
|
|
1094
|
-
margin: 0;
|
|
1095
|
-
}
|
|
1096
|
-
|
|
1097
|
-
.playkit-code-input:hover {
|
|
1098
|
-
border-color: #999999 !important;
|
|
1099
|
-
}
|
|
1100
|
-
|
|
1101
|
-
.playkit-code-input:focus {
|
|
1102
|
-
outline: none;
|
|
1103
|
-
border-color: #276EF1 !important;
|
|
1104
|
-
box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.1);
|
|
1105
|
-
}
|
|
1106
|
-
|
|
1107
|
-
.playkit-auth-button {
|
|
1108
|
-
width: 100%;
|
|
1109
|
-
padding: 12px 16px;
|
|
1110
|
-
background: #276EF1;
|
|
1111
|
-
color: #FFFFFF;
|
|
1112
|
-
border: none;
|
|
1113
|
-
border-radius: 2px;
|
|
1114
|
-
font-size: 14px;
|
|
1115
|
-
font-weight: 500;
|
|
1116
|
-
cursor: pointer;
|
|
1117
|
-
transition: background-color 0.15s ease;
|
|
1118
|
-
}
|
|
1119
|
-
|
|
1120
|
-
.playkit-auth-button:hover:not(:disabled) {
|
|
1121
|
-
background: #174EB6;
|
|
1122
|
-
}
|
|
1123
|
-
|
|
1124
|
-
.playkit-auth-button:active:not(:disabled) {
|
|
1125
|
-
background: #0F3A8A;
|
|
1126
|
-
}
|
|
1127
|
-
|
|
1128
|
-
.playkit-auth-button:disabled {
|
|
1129
|
-
background: #CCCCCC;
|
|
1130
|
-
cursor: not-allowed;
|
|
1131
|
-
}
|
|
1132
|
-
|
|
1133
|
-
.playkit-auth-error {
|
|
1134
|
-
margin-top: 16px;
|
|
1135
|
-
padding: 12px 16px;
|
|
1136
|
-
background: #FEF0F0;
|
|
1137
|
-
border: 1px solid #FDD;
|
|
1138
|
-
border-radius: 2px;
|
|
1139
|
-
color: #CC3333;
|
|
1140
|
-
font-size: 13px;
|
|
1141
|
-
text-align: left;
|
|
1142
|
-
display: none;
|
|
1143
|
-
}
|
|
1144
|
-
|
|
1145
|
-
.playkit-auth-error.show {
|
|
1146
|
-
display: block;
|
|
1147
|
-
}
|
|
1148
|
-
|
|
1149
|
-
.playkit-loading-overlay {
|
|
1150
|
-
position: absolute;
|
|
1151
|
-
top: 0;
|
|
1152
|
-
left: 0;
|
|
1153
|
-
right: 0;
|
|
1154
|
-
bottom: 0;
|
|
1155
|
-
background: rgba(255, 255, 255, 0.96);
|
|
1156
|
-
display: flex;
|
|
1157
|
-
justify-content: center;
|
|
1158
|
-
align-items: center;
|
|
1159
|
-
border-radius: 4px;
|
|
1160
|
-
}
|
|
1161
|
-
|
|
1162
|
-
.playkit-spinner {
|
|
1163
|
-
width: 40px;
|
|
1164
|
-
height: 40px;
|
|
1165
|
-
border: 3px solid #F0F0F0;
|
|
1166
|
-
border-top: 3px solid #276EF1;
|
|
1167
|
-
border-radius: 50%;
|
|
1168
|
-
animation: playkit-spin 0.8s linear infinite;
|
|
1169
|
-
}
|
|
1170
|
-
|
|
1171
|
-
@keyframes playkit-spin {
|
|
1172
|
-
0% { transform: rotate(0deg); }
|
|
1173
|
-
100% { transform: rotate(360deg); }
|
|
1174
|
-
}
|
|
1175
|
-
|
|
1176
|
-
@media (max-width: 480px) {
|
|
1177
|
-
.playkit-auth-container {
|
|
1178
|
-
width: 95%;
|
|
1179
|
-
max-width: none;
|
|
1180
|
-
border-radius: 2px;
|
|
1181
|
-
}
|
|
1182
|
-
|
|
1183
|
-
.playkit-auth-panel {
|
|
1184
|
-
padding: 32px 24px;
|
|
1185
|
-
}
|
|
1186
|
-
|
|
1187
|
-
.playkit-code-input {
|
|
1188
|
-
width: 40px !important;
|
|
1189
|
-
height: 48px;
|
|
1190
|
-
font-size: 20px;
|
|
1191
|
-
}
|
|
1192
|
-
|
|
1193
|
-
.playkit-code-inputs {
|
|
1194
|
-
gap: 6px;
|
|
1195
|
-
}
|
|
1196
|
-
}
|
|
918
|
+
style.textContent = `
|
|
919
|
+
.playkit-auth-modal {
|
|
920
|
+
position: fixed;
|
|
921
|
+
top: 0;
|
|
922
|
+
left: 0;
|
|
923
|
+
right: 0;
|
|
924
|
+
bottom: 0;
|
|
925
|
+
z-index: 999999;
|
|
926
|
+
display: flex;
|
|
927
|
+
justify-content: center;
|
|
928
|
+
align-items: center;
|
|
929
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
.playkit-auth-overlay {
|
|
933
|
+
position: absolute;
|
|
934
|
+
top: 0;
|
|
935
|
+
left: 0;
|
|
936
|
+
right: 0;
|
|
937
|
+
bottom: 0;
|
|
938
|
+
background: rgba(0, 0, 0, 0.48);
|
|
939
|
+
backdrop-filter: blur(8px);
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
.playkit-auth-container {
|
|
943
|
+
position: relative;
|
|
944
|
+
background: #FFFFFF;
|
|
945
|
+
border-radius: 4px;
|
|
946
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
947
|
+
width: 90%;
|
|
948
|
+
max-width: 420px;
|
|
949
|
+
overflow: hidden;
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
.playkit-auth-panel {
|
|
953
|
+
padding: 40px 32px;
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
.playkit-auth-header {
|
|
957
|
+
text-align: center;
|
|
958
|
+
margin-bottom: 32px;
|
|
959
|
+
position: relative;
|
|
960
|
+
}
|
|
961
|
+
|
|
962
|
+
.playkit-auth-header h2 {
|
|
963
|
+
margin: 0 0 8px 0;
|
|
964
|
+
font-size: 28px;
|
|
965
|
+
font-weight: 600;
|
|
966
|
+
color: #000000;
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
.playkit-auth-header p {
|
|
970
|
+
margin: 0;
|
|
971
|
+
font-size: 14px;
|
|
972
|
+
color: #666666;
|
|
973
|
+
line-height: 1.5;
|
|
974
|
+
}
|
|
975
|
+
|
|
976
|
+
.playkit-back-button {
|
|
977
|
+
position: absolute;
|
|
978
|
+
left: 0;
|
|
979
|
+
top: 0;
|
|
980
|
+
background: transparent;
|
|
981
|
+
border: none;
|
|
982
|
+
cursor: pointer;
|
|
983
|
+
padding: 4px;
|
|
984
|
+
border-radius: 2px;
|
|
985
|
+
color: #666666;
|
|
986
|
+
transition: background-color 0.15s ease, color 0.15s ease;
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
.playkit-back-button:hover {
|
|
990
|
+
background: #F6F6F6;
|
|
991
|
+
color: #000000;
|
|
992
|
+
}
|
|
993
|
+
|
|
994
|
+
.playkit-auth-toggle {
|
|
995
|
+
display: flex;
|
|
996
|
+
background: #F6F6F6;
|
|
997
|
+
border-radius: 2px;
|
|
998
|
+
padding: 2px;
|
|
999
|
+
margin-bottom: 24px;
|
|
1000
|
+
gap: 2px;
|
|
1001
|
+
}
|
|
1002
|
+
|
|
1003
|
+
.playkit-toggle-option {
|
|
1004
|
+
flex: 1;
|
|
1005
|
+
display: flex;
|
|
1006
|
+
justify-content: center;
|
|
1007
|
+
align-items: center;
|
|
1008
|
+
padding: 10px 16px;
|
|
1009
|
+
border-radius: 2px;
|
|
1010
|
+
cursor: pointer;
|
|
1011
|
+
transition: background-color 0.15s ease;
|
|
1012
|
+
}
|
|
1013
|
+
|
|
1014
|
+
.playkit-toggle-option input {
|
|
1015
|
+
display: none;
|
|
1016
|
+
}
|
|
1017
|
+
|
|
1018
|
+
.playkit-toggle-option span {
|
|
1019
|
+
font-size: 14px;
|
|
1020
|
+
font-weight: 500;
|
|
1021
|
+
color: #666666;
|
|
1022
|
+
transition: color 0.15s ease;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
.playkit-toggle-option input:checked + span {
|
|
1026
|
+
color: #FFFFFF;
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
.playkit-toggle-option:has(input:checked) {
|
|
1030
|
+
background: #276EF1;
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
.playkit-auth-input-group {
|
|
1034
|
+
margin-bottom: 24px;
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
.playkit-input-wrapper {
|
|
1038
|
+
position: relative;
|
|
1039
|
+
display: flex;
|
|
1040
|
+
align-items: center;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
.playkit-input-icon {
|
|
1044
|
+
position: absolute;
|
|
1045
|
+
left: 12px;
|
|
1046
|
+
color: #999999;
|
|
1047
|
+
pointer-events: none;
|
|
1048
|
+
}
|
|
1049
|
+
|
|
1050
|
+
.playkit-input-wrapper input {
|
|
1051
|
+
width: 100%;
|
|
1052
|
+
padding: 12px 12px 12px 44px;
|
|
1053
|
+
border: 1px solid #CCCCCC;
|
|
1054
|
+
border-radius: 2px;
|
|
1055
|
+
font-size: 14px;
|
|
1056
|
+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
1057
|
+
box-sizing: border-box;
|
|
1058
|
+
background: #FFFFFF;
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1061
|
+
.playkit-input-wrapper input:hover {
|
|
1062
|
+
border-color: #999999;
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1065
|
+
.playkit-input-wrapper input:focus {
|
|
1066
|
+
outline: none;
|
|
1067
|
+
border-color: #276EF1;
|
|
1068
|
+
box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.1);
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
.playkit-code-inputs {
|
|
1072
|
+
display: flex;
|
|
1073
|
+
gap: 8px;
|
|
1074
|
+
justify-content: center;
|
|
1075
|
+
}
|
|
1076
|
+
|
|
1077
|
+
.playkit-code-input {
|
|
1078
|
+
width: 48px !important;
|
|
1079
|
+
height: 56px;
|
|
1080
|
+
text-align: center;
|
|
1081
|
+
font-size: 24px;
|
|
1082
|
+
font-weight: 600;
|
|
1083
|
+
border: 1px solid #CCCCCC !important;
|
|
1084
|
+
border-radius: 2px;
|
|
1085
|
+
padding: 0 !important;
|
|
1086
|
+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
1087
|
+
background: #FFFFFF;
|
|
1088
|
+
-moz-appearance: textfield;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
.playkit-code-input::-webkit-outer-spin-button,
|
|
1092
|
+
.playkit-code-input::-webkit-inner-spin-button {
|
|
1093
|
+
-webkit-appearance: none;
|
|
1094
|
+
margin: 0;
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
.playkit-code-input:hover {
|
|
1098
|
+
border-color: #999999 !important;
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
.playkit-code-input:focus {
|
|
1102
|
+
outline: none;
|
|
1103
|
+
border-color: #276EF1 !important;
|
|
1104
|
+
box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.1);
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
.playkit-auth-button {
|
|
1108
|
+
width: 100%;
|
|
1109
|
+
padding: 12px 16px;
|
|
1110
|
+
background: #276EF1;
|
|
1111
|
+
color: #FFFFFF;
|
|
1112
|
+
border: none;
|
|
1113
|
+
border-radius: 2px;
|
|
1114
|
+
font-size: 14px;
|
|
1115
|
+
font-weight: 500;
|
|
1116
|
+
cursor: pointer;
|
|
1117
|
+
transition: background-color 0.15s ease;
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
.playkit-auth-button:hover:not(:disabled) {
|
|
1121
|
+
background: #174EB6;
|
|
1122
|
+
}
|
|
1123
|
+
|
|
1124
|
+
.playkit-auth-button:active:not(:disabled) {
|
|
1125
|
+
background: #0F3A8A;
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
.playkit-auth-button:disabled {
|
|
1129
|
+
background: #CCCCCC;
|
|
1130
|
+
cursor: not-allowed;
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
.playkit-auth-error {
|
|
1134
|
+
margin-top: 16px;
|
|
1135
|
+
padding: 12px 16px;
|
|
1136
|
+
background: #FEF0F0;
|
|
1137
|
+
border: 1px solid #FDD;
|
|
1138
|
+
border-radius: 2px;
|
|
1139
|
+
color: #CC3333;
|
|
1140
|
+
font-size: 13px;
|
|
1141
|
+
text-align: left;
|
|
1142
|
+
display: none;
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
.playkit-auth-error.show {
|
|
1146
|
+
display: block;
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
.playkit-loading-overlay {
|
|
1150
|
+
position: absolute;
|
|
1151
|
+
top: 0;
|
|
1152
|
+
left: 0;
|
|
1153
|
+
right: 0;
|
|
1154
|
+
bottom: 0;
|
|
1155
|
+
background: rgba(255, 255, 255, 0.96);
|
|
1156
|
+
display: flex;
|
|
1157
|
+
justify-content: center;
|
|
1158
|
+
align-items: center;
|
|
1159
|
+
border-radius: 4px;
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1162
|
+
.playkit-spinner {
|
|
1163
|
+
width: 40px;
|
|
1164
|
+
height: 40px;
|
|
1165
|
+
border: 3px solid #F0F0F0;
|
|
1166
|
+
border-top: 3px solid #276EF1;
|
|
1167
|
+
border-radius: 50%;
|
|
1168
|
+
animation: playkit-spin 0.8s linear infinite;
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
@keyframes playkit-spin {
|
|
1172
|
+
0% { transform: rotate(0deg); }
|
|
1173
|
+
100% { transform: rotate(360deg); }
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
@media (max-width: 480px) {
|
|
1177
|
+
.playkit-auth-container {
|
|
1178
|
+
width: 95%;
|
|
1179
|
+
max-width: none;
|
|
1180
|
+
border-radius: 2px;
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
.playkit-auth-panel {
|
|
1184
|
+
padding: 32px 24px;
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
.playkit-code-input {
|
|
1188
|
+
width: 40px !important;
|
|
1189
|
+
height: 48px;
|
|
1190
|
+
font-size: 20px;
|
|
1191
|
+
}
|
|
1192
|
+
|
|
1193
|
+
.playkit-code-inputs {
|
|
1194
|
+
gap: 6px;
|
|
1195
|
+
}
|
|
1196
|
+
}
|
|
1197
1197
|
`;
|
|
1198
1198
|
document.head.appendChild(style);
|
|
1199
1199
|
}
|
|
@@ -1214,14 +1214,14 @@
|
|
|
1214
1214
|
: this.t('phonePlaceholder');
|
|
1215
1215
|
// Update icon
|
|
1216
1216
|
if (isEmail) {
|
|
1217
|
-
identifierIcon.innerHTML = `
|
|
1218
|
-
<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>
|
|
1219
|
-
<polyline points="22,6 12,13 2,6"></polyline>
|
|
1217
|
+
identifierIcon.innerHTML = `
|
|
1218
|
+
<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>
|
|
1219
|
+
<polyline points="22,6 12,13 2,6"></polyline>
|
|
1220
1220
|
`;
|
|
1221
1221
|
}
|
|
1222
1222
|
else {
|
|
1223
|
-
identifierIcon.innerHTML = `
|
|
1224
|
-
<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>
|
|
1223
|
+
identifierIcon.innerHTML = `
|
|
1224
|
+
<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>
|
|
1225
1225
|
`;
|
|
1226
1226
|
}
|
|
1227
1227
|
};
|
|
@@ -2274,168 +2274,168 @@
|
|
|
2274
2274
|
return;
|
|
2275
2275
|
}
|
|
2276
2276
|
this.styleElement = document.createElement('style');
|
|
2277
|
-
this.styleElement.textContent = `
|
|
2278
|
-
.playkit-recharge-overlay {
|
|
2279
|
-
position: fixed;
|
|
2280
|
-
top: 0;
|
|
2281
|
-
left: 0;
|
|
2282
|
-
right: 0;
|
|
2283
|
-
bottom: 0;
|
|
2284
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
2285
|
-
backdrop-filter: blur(4px);
|
|
2286
|
-
display: flex;
|
|
2287
|
-
justify-content: center;
|
|
2288
|
-
align-items: center;
|
|
2289
|
-
z-index: 999999;
|
|
2290
|
-
animation: playkit-recharge-fadeIn 0.2s ease-out;
|
|
2291
|
-
}
|
|
2292
|
-
|
|
2293
|
-
@keyframes playkit-recharge-fadeIn {
|
|
2294
|
-
from {
|
|
2295
|
-
opacity: 0;
|
|
2296
|
-
}
|
|
2297
|
-
to {
|
|
2298
|
-
opacity: 1;
|
|
2299
|
-
}
|
|
2300
|
-
}
|
|
2301
|
-
|
|
2302
|
-
.playkit-recharge-modal {
|
|
2303
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
2304
|
-
border-radius: 16px;
|
|
2305
|
-
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
2306
|
-
padding: 32px;
|
|
2307
|
-
max-width: 400px;
|
|
2308
|
-
width: 90%;
|
|
2309
|
-
position: relative;
|
|
2310
|
-
animation: playkit-recharge-slideUp 0.3s ease-out;
|
|
2311
|
-
}
|
|
2312
|
-
|
|
2313
|
-
@keyframes playkit-recharge-slideUp {
|
|
2314
|
-
from {
|
|
2315
|
-
transform: translateY(20px);
|
|
2316
|
-
opacity: 0;
|
|
2317
|
-
}
|
|
2318
|
-
to {
|
|
2319
|
-
transform: translateY(0);
|
|
2320
|
-
opacity: 1;
|
|
2321
|
-
}
|
|
2322
|
-
}
|
|
2323
|
-
|
|
2324
|
-
.playkit-recharge-title {
|
|
2325
|
-
font-size: 24px;
|
|
2326
|
-
font-weight: bold;
|
|
2327
|
-
color: #ffffff;
|
|
2328
|
-
margin: 0 0 16px 0;
|
|
2329
|
-
text-align: center;
|
|
2330
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2331
|
-
}
|
|
2332
|
-
|
|
2333
|
-
.playkit-recharge-message {
|
|
2334
|
-
font-size: 16px;
|
|
2335
|
-
color: rgba(255, 255, 255, 0.9);
|
|
2336
|
-
margin: 0 0 24px 0;
|
|
2337
|
-
text-align: center;
|
|
2338
|
-
line-height: 1.5;
|
|
2339
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2340
|
-
}
|
|
2341
|
-
|
|
2342
|
-
.playkit-recharge-balance {
|
|
2343
|
-
background: rgba(255, 255, 255, 0.15);
|
|
2344
|
-
border-radius: 12px;
|
|
2345
|
-
padding: 16px;
|
|
2346
|
-
margin: 0 0 24px 0;
|
|
2347
|
-
text-align: center;
|
|
2348
|
-
backdrop-filter: blur(10px);
|
|
2349
|
-
}
|
|
2350
|
-
|
|
2351
|
-
.playkit-recharge-balance-label {
|
|
2352
|
-
font-size: 14px;
|
|
2353
|
-
color: rgba(255, 255, 255, 0.8);
|
|
2354
|
-
margin: 0 0 8px 0;
|
|
2355
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2356
|
-
}
|
|
2357
|
-
|
|
2358
|
-
.playkit-recharge-balance-value {
|
|
2359
|
-
font-size: 32px;
|
|
2360
|
-
font-weight: bold;
|
|
2361
|
-
color: #ffffff;
|
|
2362
|
-
margin: 0;
|
|
2363
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2364
|
-
}
|
|
2365
|
-
|
|
2366
|
-
.playkit-recharge-balance-unit {
|
|
2367
|
-
font-size: 16px;
|
|
2368
|
-
color: rgba(255, 255, 255, 0.8);
|
|
2369
|
-
margin-left: 8px;
|
|
2370
|
-
}
|
|
2371
|
-
|
|
2372
|
-
.playkit-recharge-buttons {
|
|
2373
|
-
display: flex;
|
|
2374
|
-
gap: 12px;
|
|
2375
|
-
justify-content: center;
|
|
2376
|
-
}
|
|
2377
|
-
|
|
2378
|
-
.playkit-recharge-button {
|
|
2379
|
-
flex: 1;
|
|
2380
|
-
padding: 12px 24px;
|
|
2381
|
-
border: none;
|
|
2382
|
-
border-radius: 8px;
|
|
2383
|
-
font-size: 16px;
|
|
2384
|
-
font-weight: 600;
|
|
2385
|
-
cursor: pointer;
|
|
2386
|
-
transition: all 0.2s ease;
|
|
2387
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2388
|
-
}
|
|
2389
|
-
|
|
2390
|
-
.playkit-recharge-button-primary {
|
|
2391
|
-
background: #ffffff;
|
|
2392
|
-
color: #667eea;
|
|
2393
|
-
}
|
|
2394
|
-
|
|
2395
|
-
.playkit-recharge-button-primary:hover {
|
|
2396
|
-
transform: translateY(-2px);
|
|
2397
|
-
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
|
|
2398
|
-
}
|
|
2399
|
-
|
|
2400
|
-
.playkit-recharge-button-primary:active {
|
|
2401
|
-
transform: translateY(0);
|
|
2402
|
-
}
|
|
2403
|
-
|
|
2404
|
-
.playkit-recharge-button-secondary {
|
|
2405
|
-
background: rgba(255, 255, 255, 0.15);
|
|
2406
|
-
color: #ffffff;
|
|
2407
|
-
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
2408
|
-
}
|
|
2409
|
-
|
|
2410
|
-
.playkit-recharge-button-secondary:hover {
|
|
2411
|
-
background: rgba(255, 255, 255, 0.25);
|
|
2412
|
-
}
|
|
2413
|
-
|
|
2414
|
-
.playkit-recharge-button-secondary:active {
|
|
2415
|
-
background: rgba(255, 255, 255, 0.15);
|
|
2416
|
-
}
|
|
2417
|
-
|
|
2418
|
-
@media (max-width: 480px) {
|
|
2419
|
-
.playkit-recharge-modal {
|
|
2420
|
-
padding: 24px;
|
|
2421
|
-
}
|
|
2422
|
-
|
|
2423
|
-
.playkit-recharge-title {
|
|
2424
|
-
font-size: 20px;
|
|
2425
|
-
}
|
|
2426
|
-
|
|
2427
|
-
.playkit-recharge-message {
|
|
2428
|
-
font-size: 14px;
|
|
2429
|
-
}
|
|
2430
|
-
|
|
2431
|
-
.playkit-recharge-balance-value {
|
|
2432
|
-
font-size: 28px;
|
|
2433
|
-
}
|
|
2434
|
-
|
|
2435
|
-
.playkit-recharge-buttons {
|
|
2436
|
-
flex-direction: column;
|
|
2437
|
-
}
|
|
2438
|
-
}
|
|
2277
|
+
this.styleElement.textContent = `
|
|
2278
|
+
.playkit-recharge-overlay {
|
|
2279
|
+
position: fixed;
|
|
2280
|
+
top: 0;
|
|
2281
|
+
left: 0;
|
|
2282
|
+
right: 0;
|
|
2283
|
+
bottom: 0;
|
|
2284
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
2285
|
+
backdrop-filter: blur(4px);
|
|
2286
|
+
display: flex;
|
|
2287
|
+
justify-content: center;
|
|
2288
|
+
align-items: center;
|
|
2289
|
+
z-index: 999999;
|
|
2290
|
+
animation: playkit-recharge-fadeIn 0.2s ease-out;
|
|
2291
|
+
}
|
|
2292
|
+
|
|
2293
|
+
@keyframes playkit-recharge-fadeIn {
|
|
2294
|
+
from {
|
|
2295
|
+
opacity: 0;
|
|
2296
|
+
}
|
|
2297
|
+
to {
|
|
2298
|
+
opacity: 1;
|
|
2299
|
+
}
|
|
2300
|
+
}
|
|
2301
|
+
|
|
2302
|
+
.playkit-recharge-modal {
|
|
2303
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
2304
|
+
border-radius: 16px;
|
|
2305
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
2306
|
+
padding: 32px;
|
|
2307
|
+
max-width: 400px;
|
|
2308
|
+
width: 90%;
|
|
2309
|
+
position: relative;
|
|
2310
|
+
animation: playkit-recharge-slideUp 0.3s ease-out;
|
|
2311
|
+
}
|
|
2312
|
+
|
|
2313
|
+
@keyframes playkit-recharge-slideUp {
|
|
2314
|
+
from {
|
|
2315
|
+
transform: translateY(20px);
|
|
2316
|
+
opacity: 0;
|
|
2317
|
+
}
|
|
2318
|
+
to {
|
|
2319
|
+
transform: translateY(0);
|
|
2320
|
+
opacity: 1;
|
|
2321
|
+
}
|
|
2322
|
+
}
|
|
2323
|
+
|
|
2324
|
+
.playkit-recharge-title {
|
|
2325
|
+
font-size: 24px;
|
|
2326
|
+
font-weight: bold;
|
|
2327
|
+
color: #ffffff;
|
|
2328
|
+
margin: 0 0 16px 0;
|
|
2329
|
+
text-align: center;
|
|
2330
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2331
|
+
}
|
|
2332
|
+
|
|
2333
|
+
.playkit-recharge-message {
|
|
2334
|
+
font-size: 16px;
|
|
2335
|
+
color: rgba(255, 255, 255, 0.9);
|
|
2336
|
+
margin: 0 0 24px 0;
|
|
2337
|
+
text-align: center;
|
|
2338
|
+
line-height: 1.5;
|
|
2339
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2340
|
+
}
|
|
2341
|
+
|
|
2342
|
+
.playkit-recharge-balance {
|
|
2343
|
+
background: rgba(255, 255, 255, 0.15);
|
|
2344
|
+
border-radius: 12px;
|
|
2345
|
+
padding: 16px;
|
|
2346
|
+
margin: 0 0 24px 0;
|
|
2347
|
+
text-align: center;
|
|
2348
|
+
backdrop-filter: blur(10px);
|
|
2349
|
+
}
|
|
2350
|
+
|
|
2351
|
+
.playkit-recharge-balance-label {
|
|
2352
|
+
font-size: 14px;
|
|
2353
|
+
color: rgba(255, 255, 255, 0.8);
|
|
2354
|
+
margin: 0 0 8px 0;
|
|
2355
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2356
|
+
}
|
|
2357
|
+
|
|
2358
|
+
.playkit-recharge-balance-value {
|
|
2359
|
+
font-size: 32px;
|
|
2360
|
+
font-weight: bold;
|
|
2361
|
+
color: #ffffff;
|
|
2362
|
+
margin: 0;
|
|
2363
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2364
|
+
}
|
|
2365
|
+
|
|
2366
|
+
.playkit-recharge-balance-unit {
|
|
2367
|
+
font-size: 16px;
|
|
2368
|
+
color: rgba(255, 255, 255, 0.8);
|
|
2369
|
+
margin-left: 8px;
|
|
2370
|
+
}
|
|
2371
|
+
|
|
2372
|
+
.playkit-recharge-buttons {
|
|
2373
|
+
display: flex;
|
|
2374
|
+
gap: 12px;
|
|
2375
|
+
justify-content: center;
|
|
2376
|
+
}
|
|
2377
|
+
|
|
2378
|
+
.playkit-recharge-button {
|
|
2379
|
+
flex: 1;
|
|
2380
|
+
padding: 12px 24px;
|
|
2381
|
+
border: none;
|
|
2382
|
+
border-radius: 8px;
|
|
2383
|
+
font-size: 16px;
|
|
2384
|
+
font-weight: 600;
|
|
2385
|
+
cursor: pointer;
|
|
2386
|
+
transition: all 0.2s ease;
|
|
2387
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
2388
|
+
}
|
|
2389
|
+
|
|
2390
|
+
.playkit-recharge-button-primary {
|
|
2391
|
+
background: #ffffff;
|
|
2392
|
+
color: #667eea;
|
|
2393
|
+
}
|
|
2394
|
+
|
|
2395
|
+
.playkit-recharge-button-primary:hover {
|
|
2396
|
+
transform: translateY(-2px);
|
|
2397
|
+
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
|
|
2398
|
+
}
|
|
2399
|
+
|
|
2400
|
+
.playkit-recharge-button-primary:active {
|
|
2401
|
+
transform: translateY(0);
|
|
2402
|
+
}
|
|
2403
|
+
|
|
2404
|
+
.playkit-recharge-button-secondary {
|
|
2405
|
+
background: rgba(255, 255, 255, 0.15);
|
|
2406
|
+
color: #ffffff;
|
|
2407
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
2408
|
+
}
|
|
2409
|
+
|
|
2410
|
+
.playkit-recharge-button-secondary:hover {
|
|
2411
|
+
background: rgba(255, 255, 255, 0.25);
|
|
2412
|
+
}
|
|
2413
|
+
|
|
2414
|
+
.playkit-recharge-button-secondary:active {
|
|
2415
|
+
background: rgba(255, 255, 255, 0.15);
|
|
2416
|
+
}
|
|
2417
|
+
|
|
2418
|
+
@media (max-width: 480px) {
|
|
2419
|
+
.playkit-recharge-modal {
|
|
2420
|
+
padding: 24px;
|
|
2421
|
+
}
|
|
2422
|
+
|
|
2423
|
+
.playkit-recharge-title {
|
|
2424
|
+
font-size: 20px;
|
|
2425
|
+
}
|
|
2426
|
+
|
|
2427
|
+
.playkit-recharge-message {
|
|
2428
|
+
font-size: 14px;
|
|
2429
|
+
}
|
|
2430
|
+
|
|
2431
|
+
.playkit-recharge-balance-value {
|
|
2432
|
+
font-size: 28px;
|
|
2433
|
+
}
|
|
2434
|
+
|
|
2435
|
+
.playkit-recharge-buttons {
|
|
2436
|
+
flex-direction: column;
|
|
2437
|
+
}
|
|
2438
|
+
}
|
|
2439
2439
|
`;
|
|
2440
2440
|
document.head.appendChild(this.styleElement);
|
|
2441
2441
|
}
|
|
@@ -2517,6 +2517,7 @@
|
|
|
2517
2517
|
*/
|
|
2518
2518
|
const DEFAULT_BASE_URL$2 = 'https://playkit.agentlandlab.com';
|
|
2519
2519
|
const PLAYER_INFO_ENDPOINT = '/api/external/player-info';
|
|
2520
|
+
const SET_NICKNAME_ENDPOINT = '/api/external/set-game-player-nickname';
|
|
2520
2521
|
class PlayerClient extends EventEmitter {
|
|
2521
2522
|
constructor(authManager, config, rechargeConfig = {}) {
|
|
2522
2523
|
var _a, _b, _c;
|
|
@@ -2537,6 +2538,7 @@
|
|
|
2537
2538
|
* Get player information
|
|
2538
2539
|
*/
|
|
2539
2540
|
async getPlayerInfo() {
|
|
2541
|
+
var _a;
|
|
2540
2542
|
const token = this.authManager.getToken();
|
|
2541
2543
|
if (!token) {
|
|
2542
2544
|
throw new PlayKitError('Not authenticated', 'NOT_AUTHENTICATED');
|
|
@@ -2574,6 +2576,7 @@
|
|
|
2574
2576
|
this.playerInfo = {
|
|
2575
2577
|
userId: data.userId,
|
|
2576
2578
|
credits: data.credits,
|
|
2579
|
+
nickname: (_a = data.nickname) !== null && _a !== void 0 ? _a : null,
|
|
2577
2580
|
};
|
|
2578
2581
|
this.emit('player_info_updated', this.playerInfo);
|
|
2579
2582
|
return this.playerInfo;
|
|
@@ -2595,6 +2598,70 @@
|
|
|
2595
2598
|
async refreshPlayerInfo() {
|
|
2596
2599
|
return this.getPlayerInfo();
|
|
2597
2600
|
}
|
|
2601
|
+
/**
|
|
2602
|
+
* Get player's nickname
|
|
2603
|
+
* Returns the cached nickname from playerInfo, or null if not set
|
|
2604
|
+
*/
|
|
2605
|
+
getNickname() {
|
|
2606
|
+
var _a, _b;
|
|
2607
|
+
return (_b = (_a = this.playerInfo) === null || _a === void 0 ? void 0 : _a.nickname) !== null && _b !== void 0 ? _b : null;
|
|
2608
|
+
}
|
|
2609
|
+
/**
|
|
2610
|
+
* Set player's nickname for the current game
|
|
2611
|
+
* Requires a game-specific player token (not a global token or developer token)
|
|
2612
|
+
* @param nickname - Nickname to set (1-16 characters, letters/numbers/Chinese/underscores/spaces only)
|
|
2613
|
+
* @returns The set nickname response
|
|
2614
|
+
* @throws PlayKitError if nickname is invalid, moderation fails, or token type is wrong
|
|
2615
|
+
*/
|
|
2616
|
+
async setNickname(nickname) {
|
|
2617
|
+
const token = this.authManager.getToken();
|
|
2618
|
+
if (!token) {
|
|
2619
|
+
throw new PlayKitError('Not authenticated', 'NOT_AUTHENTICATED');
|
|
2620
|
+
}
|
|
2621
|
+
// Developer tokens cannot set nicknames
|
|
2622
|
+
const authState = this.authManager.getAuthState();
|
|
2623
|
+
if (authState.tokenType === 'developer') {
|
|
2624
|
+
throw new PlayKitError('Developer tokens cannot set nicknames. Use a player token.', 'INVALID_TOKEN_TYPE');
|
|
2625
|
+
}
|
|
2626
|
+
// Validate nickname locally first
|
|
2627
|
+
if (!nickname || typeof nickname !== 'string') {
|
|
2628
|
+
throw new PlayKitError('Nickname is required', 'NICKNAME_REQUIRED');
|
|
2629
|
+
}
|
|
2630
|
+
const trimmed = nickname.trim();
|
|
2631
|
+
if (trimmed.length === 0) {
|
|
2632
|
+
throw new PlayKitError('Nickname cannot be empty', 'INVALID_NICKNAME');
|
|
2633
|
+
}
|
|
2634
|
+
if (trimmed.length > 16) {
|
|
2635
|
+
throw new PlayKitError('Nickname must be 16 characters or less', 'INVALID_NICKNAME');
|
|
2636
|
+
}
|
|
2637
|
+
try {
|
|
2638
|
+
const response = await fetch(`${this.baseURL}${SET_NICKNAME_ENDPOINT}`, {
|
|
2639
|
+
method: 'POST',
|
|
2640
|
+
headers: {
|
|
2641
|
+
Authorization: `Bearer ${token}`,
|
|
2642
|
+
'Content-Type': 'application/json',
|
|
2643
|
+
},
|
|
2644
|
+
body: JSON.stringify({ nickname: trimmed }),
|
|
2645
|
+
});
|
|
2646
|
+
if (!response.ok) {
|
|
2647
|
+
const error = await response.json().catch(() => ({ error: { message: 'Failed to set nickname' } }));
|
|
2648
|
+
const errorObj = error.error || error;
|
|
2649
|
+
throw new PlayKitError(errorObj.message || 'Failed to set nickname', errorObj.code, response.status);
|
|
2650
|
+
}
|
|
2651
|
+
const data = await response.json();
|
|
2652
|
+
// Update cached player info with new nickname
|
|
2653
|
+
if (this.playerInfo) {
|
|
2654
|
+
this.playerInfo.nickname = data.nickname;
|
|
2655
|
+
this.emit('player_info_updated', this.playerInfo);
|
|
2656
|
+
}
|
|
2657
|
+
this.emit('nickname_changed', data.nickname);
|
|
2658
|
+
return data;
|
|
2659
|
+
}
|
|
2660
|
+
catch (error) {
|
|
2661
|
+
this.emit('error', error);
|
|
2662
|
+
throw error;
|
|
2663
|
+
}
|
|
2664
|
+
}
|
|
2598
2665
|
/**
|
|
2599
2666
|
* Initialize recharge manager
|
|
2600
2667
|
*/
|
|
@@ -3958,20 +4025,20 @@
|
|
|
3958
4025
|
// Create indicator element
|
|
3959
4026
|
this.devTokenIndicator = document.createElement('div');
|
|
3960
4027
|
this.devTokenIndicator.textContent = 'DeveloperToken';
|
|
3961
|
-
this.devTokenIndicator.style.cssText = `
|
|
3962
|
-
position: fixed;
|
|
3963
|
-
top: 10px;
|
|
3964
|
-
left: 10px;
|
|
3965
|
-
background-color: #dc2626;
|
|
3966
|
-
color: white;
|
|
3967
|
-
padding: 4px 12px;
|
|
3968
|
-
border-radius: 4px;
|
|
3969
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
3970
|
-
font-size: 12px;
|
|
3971
|
-
font-weight: 600;
|
|
3972
|
-
z-index: 999999;
|
|
3973
|
-
pointer-events: none;
|
|
3974
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
4028
|
+
this.devTokenIndicator.style.cssText = `
|
|
4029
|
+
position: fixed;
|
|
4030
|
+
top: 10px;
|
|
4031
|
+
left: 10px;
|
|
4032
|
+
background-color: #dc2626;
|
|
4033
|
+
color: white;
|
|
4034
|
+
padding: 4px 12px;
|
|
4035
|
+
border-radius: 4px;
|
|
4036
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
4037
|
+
font-size: 12px;
|
|
4038
|
+
font-weight: 600;
|
|
4039
|
+
z-index: 999999;
|
|
4040
|
+
pointer-events: none;
|
|
4041
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
3975
4042
|
`;
|
|
3976
4043
|
document.body.appendChild(this.devTokenIndicator);
|
|
3977
4044
|
}
|