playkit-sdk 1.2.8-beta.5 → 1.2.9

package/dist/playkit-sdk.cjs.js

@@ -1,5 +1,5 @@
 /**
- * playkit-sdk v1.2.8-beta.5
+ * playkit-sdk v1.2.9
  * PlayKit SDK for JavaScript
  * @license SEE LICENSE IN LICENSE
  */
@@ -1147,41 +1147,40 @@ class AuthFlowManager extends EventEmitter {
         left: 0;
         right: 0;
         bottom: 0;
-        background: rgba(0, 0, 0, 0.48);
-        backdrop-filter: blur(8px);
+        background: rgba(0, 0, 0, 0.8);
       }
 
       .playkit-auth-container {
         position: relative;
-        background: #FFFFFF;
-        border-radius: 4px;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
         width: 90%;
-        max-width: 420px;
+        max-width: 320px;
         overflow: hidden;
       }
 
       .playkit-auth-panel {
-        padding: 40px 32px;
+        padding: 24px;
       }
 
       .playkit-auth-header {
         text-align: center;
-        margin-bottom: 32px;
+        margin-bottom: 20px;
         position: relative;
       }
 
       .playkit-auth-header h2 {
         margin: 0 0 8px 0;
-        font-size: 28px;
+        font-size: 14px;
         font-weight: 600;
-        color: #000000;
+        color: #171717;
       }
 
       .playkit-auth-header p {
         margin: 0;
         font-size: 14px;
-        color: #666666;
+        color: #666;
         line-height: 1.5;
       }
 
@@ -1193,22 +1192,20 @@ class AuthFlowManager extends EventEmitter {
         border: none;
         cursor: pointer;
         padding: 4px;
-        border-radius: 2px;
-        color: #666666;
-        transition: background-color 0.15s ease, color 0.15s ease;
+        color: #666;
+        transition: background-color 0.2s ease, color 0.2s ease;
       }
 
       .playkit-back-button:hover {
-        background: #F6F6F6;
-        color: #000000;
+        background: #f5f5f5;
+        color: #171717;
       }
 
       .playkit-auth-toggle {
         display: flex;
-        background: #F6F6F6;
-        border-radius: 2px;
+        background: #f5f5f5;
         padding: 2px;
-        margin-bottom: 24px;
+        margin-bottom: 20px;
         gap: 2px;
       }
 
@@ -1218,9 +1215,8 @@ class AuthFlowManager extends EventEmitter {
         justify-content: center;
         align-items: center;
         padding: 10px 16px;
-        border-radius: 2px;
         cursor: pointer;
-        transition: background-color 0.15s ease;
+        transition: background-color 0.2s ease;
       }
 
       .playkit-toggle-option input {
@@ -1230,20 +1226,20 @@ class AuthFlowManager extends EventEmitter {
       .playkit-toggle-option span {
         font-size: 14px;
         font-weight: 500;
-        color: #666666;
-        transition: color 0.15s ease;
+        color: #666;
+        transition: color 0.2s ease;
       }
 
       .playkit-toggle-option input:checked + span {
-        color: #FFFFFF;
+        color: #fff;
       }
 
       .playkit-toggle-option:has(input:checked) {
-        background: #276EF1;
+        background: #171717;
       }
 
       .playkit-auth-input-group {
-        margin-bottom: 24px;
+        margin-bottom: 20px;
       }
 
       .playkit-input-wrapper {
@@ -1255,29 +1251,27 @@ class AuthFlowManager extends EventEmitter {
       .playkit-input-icon {
         position: absolute;
         left: 12px;
-        color: #999999;
+        color: #999;
         pointer-events: none;
       }
 
       .playkit-input-wrapper input {
         width: 100%;
-        padding: 12px 12px 12px 44px;
-        border: 1px solid #CCCCCC;
-        border-radius: 2px;
+        padding: 10px 12px 10px 44px;
+        border: 1px solid #e5e7eb;
         font-size: 14px;
-        transition: border-color 0.15s ease, box-shadow 0.15s ease;
+        transition: border-color 0.2s ease;
         box-sizing: border-box;
-        background: #FFFFFF;
+        background: #fff;
       }
 
       .playkit-input-wrapper input:hover {
-        border-color: #999999;
+        border-color: #d4d4d4;
       }
 
       .playkit-input-wrapper input:focus {
         outline: none;
-        border-color: #276EF1;
-        box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.1);
+        border-color: #171717;
       }
 
       .playkit-code-inputs {
@@ -1287,16 +1281,15 @@ class AuthFlowManager extends EventEmitter {
       }
 
       .playkit-code-input {
-        width: 48px !important;
-        height: 56px;
+        width: 40px !important;
+        height: 48px;
         text-align: center;
-        font-size: 24px;
+        font-size: 20px;
         font-weight: 600;
-        border: 1px solid #CCCCCC !important;
-        border-radius: 2px;
+        border: 1px solid #e5e7eb !important;
         padding: 0 !important;
-        transition: border-color 0.15s ease, box-shadow 0.15s ease;
-        background: #FFFFFF;
+        transition: border-color 0.2s ease;
+        background: #fff;
         -moz-appearance: textfield;
       }
 
@@ -1307,48 +1300,46 @@ class AuthFlowManager extends EventEmitter {
       }
 
       .playkit-code-input:hover {
-        border-color: #999999 !important;
+        border-color: #d4d4d4 !important;
       }
 
       .playkit-code-input:focus {
         outline: none;
-        border-color: #276EF1 !important;
-        box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.1);
+        border-color: #171717 !important;
       }
 
       .playkit-auth-button {
         width: 100%;
-        padding: 12px 16px;
-        background: #276EF1;
-        color: #FFFFFF;
+        padding: 10px 16px;
+        background: #171717;
+        color: white;
         border: none;
-        border-radius: 2px;
         font-size: 14px;
         font-weight: 500;
         cursor: pointer;
-        transition: background-color 0.15s ease;
+        transition: background 0.2s ease;
       }
 
       .playkit-auth-button:hover:not(:disabled) {
-        background: #174EB6;
+        background: #404040;
       }
 
       .playkit-auth-button:active:not(:disabled) {
-        background: #0F3A8A;
+        background: #0a0a0a;
       }
 
       .playkit-auth-button:disabled {
-        background: #CCCCCC;
+        background: #e5e7eb;
+        color: #999;
         cursor: not-allowed;
       }
 
       .playkit-auth-error {
         margin-top: 16px;
         padding: 12px 16px;
-        background: #FEF0F0;
-        border: 1px solid #FDD;
-        border-radius: 2px;
-        color: #CC3333;
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        color: #dc2626;
         font-size: 13px;
         text-align: left;
         display: none;
@@ -1368,16 +1359,15 @@ class AuthFlowManager extends EventEmitter {
         display: flex;
         justify-content: center;
         align-items: center;
-        border-radius: 4px;
       }
 
       .playkit-spinner {
-        width: 40px;
-        height: 40px;
-        border: 3px solid #F0F0F0;
-        border-top: 3px solid #276EF1;
+        width: 24px;
+        height: 24px;
+        border: 2px solid #e5e7eb;
+        border-top: 2px solid #171717;
         border-radius: 50%;
-        animation: playkit-spin 0.8s linear infinite;
+        animation: playkit-spin 1s linear infinite;
       }
 
       @keyframes playkit-spin {
@@ -1389,17 +1379,16 @@ class AuthFlowManager extends EventEmitter {
         .playkit-auth-container {
           width: 95%;
           max-width: none;
-          border-radius: 2px;
         }
 
         .playkit-auth-panel {
-          padding: 32px 24px;
+          padding: 20px;
         }
 
         .playkit-code-input {
-          width: 40px !important;
-          height: 48px;
-          font-size: 20px;
+          width: 36px !important;
+          height: 44px;
+          font-size: 18px;
         }
 
         .playkit-code-inputs {
@@ -2608,6 +2597,25 @@ class AuthManager extends EventEmitter {
     isAuthenticated() {
         return this.authState.isAuthenticated;
     }
+    /**
+     * Check if current authentication is using developerToken
+     */
+    isDeveloperTokenAuth() {
+        return this.authState.tokenType === 'developer';
+    }
+    /**
+     * Clear developerToken authentication state.
+     * Used when falling back to player login after developerToken failure.
+     */
+    clearDeveloperToken() {
+        if (this.authState.tokenType === 'developer') {
+            this.authState = {
+                isAuthenticated: false,
+            };
+            // Also clear the developerToken from config to prevent re-use
+            this.config.developerToken = undefined;
+        }
+    }
     /**
      * Check if token is expired
      */
@@ -3050,13 +3058,13 @@ class RechargeManager extends EventEmitter {
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: rgba(0, 0, 0, 0.5);
-        backdrop-filter: blur(4px);
+        background: rgba(0, 0, 0, 0.8);
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 999999;
         animation: playkit-recharge-fadeIn 0.2s ease-out;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
 
       @keyframes playkit-recharge-fadeIn {
@@ -3069,140 +3077,111 @@ class RechargeManager extends EventEmitter {
       }
 
       .playkit-recharge-modal {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 16px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-        padding: 32px;
-        max-width: 400px;
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
+        padding: 24px;
+        max-width: 320px;
         width: 90%;
         position: relative;
-        animation: playkit-recharge-slideUp 0.3s ease-out;
-      }
-
-      @keyframes playkit-recharge-slideUp {
-        from {
-          transform: translateY(20px);
-          opacity: 0;
-        }
-        to {
-          transform: translateY(0);
-          opacity: 1;
-        }
+        text-align: center;
       }
 
       .playkit-recharge-title {
-        font-size: 24px;
-        font-weight: bold;
-        color: #ffffff;
-        margin: 0 0 16px 0;
+        font-size: 14px;
+        font-weight: 600;
+        color: #171717;
+        margin: 0 0 8px 0;
         text-align: center;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
 
       .playkit-recharge-message {
-        font-size: 16px;
-        color: rgba(255, 255, 255, 0.9);
-        margin: 0 0 24px 0;
+        font-size: 14px;
+        color: #666;
+        margin: 0 0 20px 0;
         text-align: center;
         line-height: 1.5;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
 
       .playkit-recharge-balance {
-        background: rgba(255, 255, 255, 0.15);
-        border-radius: 12px;
+        background: #f5f5f5;
+        border: 1px solid #e5e7eb;
         padding: 16px;
-        margin: 0 0 24px 0;
+        margin: 0 0 20px 0;
         text-align: center;
-        backdrop-filter: blur(10px);
       }
 
       .playkit-recharge-balance-label {
-        font-size: 14px;
-        color: rgba(255, 255, 255, 0.8);
+        font-size: 12px;
+        color: #666;
         margin: 0 0 8px 0;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
 
       .playkit-recharge-balance-value {
-        font-size: 32px;
+        font-size: 24px;
         font-weight: bold;
-        color: #ffffff;
+        color: #171717;
         margin: 0;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
 
       .playkit-recharge-balance-unit {
-        font-size: 16px;
-        color: rgba(255, 255, 255, 0.8);
-        margin-left: 8px;
+        font-size: 14px;
+        color: #666;
+        margin-left: 4px;
       }
 
       .playkit-recharge-buttons {
         display: flex;
-        gap: 12px;
-        justify-content: center;
+        flex-direction: column;
+        gap: 8px;
       }
 
       .playkit-recharge-button {
-        flex: 1;
-        padding: 12px 24px;
+        width: 100%;
+        padding: 10px 16px;
         border: none;
-        border-radius: 8px;
-        font-size: 16px;
-        font-weight: 600;
+        font-size: 14px;
+        font-weight: 500;
         cursor: pointer;
         transition: all 0.2s ease;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
 
       .playkit-recharge-button-primary {
-        background: #ffffff;
-        color: #667eea;
+        background: #171717;
+        color: white;
       }
 
       .playkit-recharge-button-primary:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
+        background: #404040;
       }
 
       .playkit-recharge-button-primary:active {
-        transform: translateY(0);
+        background: #0a0a0a;
       }
 
       .playkit-recharge-button-secondary {
-        background: rgba(255, 255, 255, 0.15);
-        color: #ffffff;
-        border: 1px solid rgba(255, 255, 255, 0.3);
+        background: transparent;
+        color: #666;
+        border: 1px solid #e5e7eb;
       }
 
       .playkit-recharge-button-secondary:hover {
-        background: rgba(255, 255, 255, 0.25);
+        background: #f5f5f5;
+        border-color: #d4d4d4;
       }
 
       .playkit-recharge-button-secondary:active {
-        background: rgba(255, 255, 255, 0.15);
+        background: #e5e5e5;
       }
 
       @media (max-width: 480px) {
         .playkit-recharge-modal {
-          padding: 24px;
-        }
-
-        .playkit-recharge-title {
-          font-size: 20px;
-        }
-
-        .playkit-recharge-message {
-          font-size: 14px;
-        }
-
-        .playkit-recharge-balance-value {
-          font-size: 28px;
-        }
-
-        .playkit-recharge-buttons {
-          flex-direction: column;
+          padding: 20px;
         }
       }
 
@@ -3211,9 +3190,9 @@ class RechargeManager extends EventEmitter {
         position: fixed;
         top: 20px;
         right: 20px;
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-        border-radius: 12px;
-        box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1);
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
         padding: 16px 20px;
         min-width: 240px;
         max-width: 320px;
@@ -3222,6 +3201,7 @@ class RechargeManager extends EventEmitter {
         display: flex;
         align-items: flex-start;
         gap: 12px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
 
       .playkit-daily-refresh-toast.hiding {
@@ -3253,7 +3233,7 @@ class RechargeManager extends EventEmitter {
       .playkit-toast-icon {
         width: 24px;
         height: 24px;
-        background: rgba(255, 255, 255, 0.2);
+        background: #171717;
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -3271,7 +3251,7 @@ class RechargeManager extends EventEmitter {
         flex: 1;
         font-size: 14px;
         font-weight: 500;
-        color: #ffffff;
+        color: #171717;
         line-height: 1.4;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       }
@@ -6103,6 +6083,8 @@ class PlayKitSDK extends EventEmitter {
         // Initialize logging system
         this.initializeLogging(this.config);
         this.logger = Logger.getLogger('PlayKitSDK');
+        // Initialize fallback configuration with defaults
+        this.fallbackConfig = Object.assign({ enabled: true }, config.developerTokenFallback);
         // Initialize managers and providers
         this.authManager = new AuthManager(this.config);
         this.playerClient = new PlayerClient(this.authManager, this.config, this.config.recharge);
@@ -6160,7 +6142,8 @@ class PlayKitSDK extends EventEmitter {
             await this.authManager.initialize();
             this.initialized = true;
             // Show developer token indicator if using developer token (browser mode only)
-            if (this.config.developerToken && this.config.mode !== 'server' && typeof window !== 'undefined') {
+            const isDeveloperTokenMode = this.authManager.isDeveloperTokenAuth();
+            if (isDeveloperTokenMode && this.config.mode !== 'server' && typeof window !== 'undefined') {
                 this.showDeveloperTokenIndicator();
             }
             // Always verify token validity and fetch user info after authentication
@@ -6170,20 +6153,26 @@ class PlayKitSDK extends EventEmitter {
                     this.logger.debug('Token validated and user info fetched');
                 }
                 catch (error) {
-                    // If token is invalid, logout and restart auth flow
-                    this.logger.error('Token validation failed:', error);
-                    await this.authManager.logout();
-                    // Auto-restart login flow in browser environment
-                    if (typeof window !== 'undefined') {
-                        this.logger.debug('Restarting authentication flow...');
-                        const authMethod = this.config.authMethod || 'device';
-                        await this.authManager.startAuthFlow(authMethod);
-                        // Retry getting player info after re-authentication
-                        await this.playerClient.getPlayerInfo();
-                        this.logger.debug('Re-authentication successful, token validated');
+                    // Check if this is a developerToken failure
+                    if (isDeveloperTokenMode) {
+                        await this.handleDeveloperTokenFailure(error);
                     }
                     else {
-                        throw new Error('Token validation failed: ' + (error instanceof Error ? error.message : String(error)));
+                        // If token is invalid, logout and restart auth flow
+                        this.logger.error('Token validation failed:', error);
+                        await this.authManager.logout();
+                        // Auto-restart login flow in browser environment
+                        if (typeof window !== 'undefined') {
+                            this.logger.debug('Restarting authentication flow...');
+                            const authMethod = this.config.authMethod || 'device';
+                            await this.authManager.startAuthFlow(authMethod);
+                            // Retry getting player info after re-authentication
+                            await this.playerClient.getPlayerInfo();
+                            this.logger.debug('Re-authentication successful, token validated');
+                        }
+                        else {
+                            throw new Error('Token validation failed: ' + (error instanceof Error ? error.message : String(error)));
+                        }
                     }
                 }
             }
@@ -6195,6 +6184,50 @@ class PlayKitSDK extends EventEmitter {
             throw error;
         }
     }
+    /**
+     * Handle developerToken authentication failure with optional fallback to player login.
+     * This is called when a developerToken is provided but fails validation.
+     *
+     * @param error - The error that caused the developerToken failure
+     */
+    async handleDeveloperTokenFailure(error) {
+        const willFallback = this.fallbackConfig.enabled !== false &&
+            typeof window !== 'undefined' &&
+            this.config.mode !== 'server';
+        // Emit developer_token_failed event
+        this.emit('developer_token_failed', {
+            error,
+            willFallback,
+        });
+        this.logger.warn('DeveloperToken validation failed', { error, willFallback });
+        // Clear developer token state and indicator
+        this.authManager.clearDeveloperToken();
+        this.hideDeveloperTokenIndicator();
+        if (!willFallback) {
+            // Fallback disabled or not in browser - throw the error
+            throw new PlayKitError('DeveloperToken validation failed: ' + (error instanceof Error ? error.message : String(error)), 'DEVELOPER_TOKEN_INVALID');
+        }
+        // Emit fallback started event
+        const fallbackMethod = this.config.authMethod || 'device';
+        this.emit('developer_token_fallback_started', { fallbackMethod });
+        this.logger.debug('Starting fallback to player login', { fallbackMethod });
+        try {
+            // Start player login flow
+            await this.authManager.startAuthFlow(fallbackMethod);
+            // Verify the new token
+            await this.playerClient.getPlayerInfo();
+            // Emit fallback completed event
+            const authState = this.authManager.getAuthState();
+            this.emit('developer_token_fallback_completed', { authState });
+            this.logger.debug('DeveloperToken fallback completed successfully');
+        }
+        catch (fallbackError) {
+            // Emit fallback failed event
+            this.emit('developer_token_fallback_failed', { error: fallbackError });
+            this.logger.error('DeveloperToken fallback failed', fallbackError);
+            throw fallbackError;
+        }
+    }
     /**
      * Show developer token indicator in top-left corner
      */
@@ -6268,10 +6301,20 @@ class PlayKitSDK extends EventEmitter {
         await this.authManager.logout();
         this.hideDeveloperTokenIndicator();
     }
+    /**
+     * Ensure SDK is initialized before making API calls
+     * @throws PlayKitError if not initialized
+     */
+    ensureInitialized() {
+        if (!this.initialized) {
+            throw new PlayKitError('SDK not initialized. Call await sdk.initialize() before using API methods.', 'NOT_INITIALIZED');
+        }
+    }
     /**
      * Get player information
      */
     async getPlayerInfo() {
+        this.ensureInitialized();
         return await this.playerClient.getPlayerInfo();
     }
     /**
@@ -6279,6 +6322,7 @@ class PlayKitSDK extends EventEmitter {
      * Automatically uses the SDK's schema library
      */
     createChatClient(model) {
+        this.ensureInitialized();
         const client = new ChatClient(this.chatProvider, model || this.config.defaultChatModel);
         // Automatically use the SDK's schema library
         client.setSchemaLibrary(this.schemaLibrary);
@@ -6288,6 +6332,7 @@ class PlayKitSDK extends EventEmitter {
      * Create an image client
      */
     createImageClient(model) {
+        this.ensureInitialized();
         return new ImageClient(this.imageProvider, model || this.config.defaultImageModel);
     }
     /**
@@ -6295,6 +6340,7 @@ class PlayKitSDK extends EventEmitter {
      * @param model - Transcription model to use (default: 'whisper-large')
      */
     createTranscriptionClient(model) {
+        this.ensureInitialized();
         return new TranscriptionClient(this.transcriptionProvider, model || this.config.defaultTranscriptionModel);
     }
     /**
@@ -6302,6 +6348,7 @@ class PlayKitSDK extends EventEmitter {
      * Automatically registers with AIContextManager
      */
     createNPCClient(config) {
+        this.ensureInitialized();
         const chatClient = this.createChatClient(config === null || config === void 0 ? void 0 : config.model);
         const npc = new NPCClient(chatClient, config);
         // Register with context manager
@@ -6400,6 +6447,7 @@ class PlayKitSDK extends EventEmitter {
      * Show insufficient balance modal
      */
     async showInsufficientBalanceModal(customMessage) {
+        this.ensureInitialized();
         return await this.playerClient.showInsufficientBalanceModal(customMessage);
     }
     /**
@@ -6433,6 +6481,7 @@ class PlayKitSDK extends EventEmitter {
      * Refresh and get player's current balance
      */
     async refreshBalance() {
+        this.ensureInitialized();
         const playerInfo = await this.playerClient.refreshPlayerInfo();
         return playerInfo.balance;
     }
@@ -6453,6 +6502,7 @@ class PlayKitSDK extends EventEmitter {
      * @throws PlayKitError if validation fails or token type is invalid
      */
     async setNickname(nickname) {
+        this.ensureInitialized();
         return await this.playerClient.setNickname(nickname);
     }
     // ============================================================