playkit-sdk 1.2.6 → 1.2.7

package/dist/playkit-sdk.cjs.js

@@ -1,5 +1,5 @@
 /**
- * playkit-sdk v1.2.6
+ * playkit-sdk v1.2.7
  * PlayKit SDK for JavaScript
  * @license SEE LICENSE IN LICENSE
  */
@@ -1270,12 +1270,12 @@ class DeviceAuthFlowManager extends EventEmitter {
      * Show login modal and return promises for user interaction
      * @private
      */
-    showLoginModal(gameInfo) {
+    showLoginModal(_gameInfo) {
         let resolveClicked;
         let resolveCancelled;
         const clicked = new Promise((resolve) => { resolveClicked = resolve; });
         const cancelled = new Promise((resolve) => { resolveCancelled = resolve; });
-        // Create modal overlay
+        // Create modal overlay - dark bg-black/80 style
         const overlay = document.createElement('div');
         overlay.id = 'playkit-login-modal';
         overlay.style.cssText = `
@@ -1284,74 +1284,30 @@ class DeviceAuthFlowManager extends EventEmitter {
       left: 0;
       right: 0;
       bottom: 0;
-      background: rgba(0, 0, 0, 0.48);
-      backdrop-filter: blur(8px);
-      -webkit-backdrop-filter: blur(8px);
+      background: rgba(0, 0, 0, 0.8);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 999999;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     `;
-        // Create modal card
+        // Create modal card - square corners, shadow-xl style
         const card = document.createElement('div');
         card.style.cssText = `
-      background: rgba(255, 255, 255, 0.95);
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      border-radius: 16px;
-      padding: 32px;
-      max-width: 400px;
+      background: #fff;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      padding: 24px;
+      max-width: 320px;
       width: 90%;
-      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
       text-align: center;
     `;
-        // Game icon
-        const iconContainer = document.createElement('div');
-        iconContainer.style.cssText = `
-      width: 56px;
-      height: 56px;
-      margin: 0 auto 16px;
-      border-radius: 12px;
-      overflow: hidden;
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    `;
-        if (gameInfo.icon) {
-            const icon = document.createElement('img');
-            icon.src = gameInfo.icon;
-            icon.alt = gameInfo.name;
-            icon.style.cssText = 'width: 100%; height: 100%; object-fit: cover;';
-            iconContainer.appendChild(icon);
-        }
-        else {
-            // Default game icon
-            iconContainer.style.cssText += `
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-size: 24px;
-      `;
-            iconContainer.textContent = '🎮';
-        }
-        card.appendChild(iconContainer);
-        // Game name
-        const gameName = document.createElement('h2');
-        gameName.textContent = gameInfo.name;
-        gameName.style.cssText = `
-      margin: 0 0 8px;
-      font-size: 20px;
-      font-weight: 600;
-      color: #1a1a1a;
-    `;
-        card.appendChild(gameName);
-        // Subtitle
+        // Subtitle / status text
         const subtitle = document.createElement('p');
         subtitle.id = 'playkit-modal-subtitle';
         subtitle.textContent = this.t('loginWithPlayKit');
         subtitle.style.cssText = `
-      margin: 0 0 24px;
+      margin: 0 0 20px;
       font-size: 14px;
       color: #666;
     `;
@@ -1361,11 +1317,11 @@ class DeviceAuthFlowManager extends EventEmitter {
         spinner.id = 'playkit-modal-spinner';
         spinner.style.cssText = `
       display: none;
-      width: 32px;
-      height: 32px;
+      width: 24px;
+      height: 24px;
       margin: 0 auto 16px;
-      border: 3px solid #e5e7eb;
-      border-top-color: #3b82f6;
+      border: 2px solid #e5e7eb;
+      border-top-color: #171717;
       border-radius: 50%;
       animation: playkit-spin 1s linear infinite;
     `;
@@ -1378,36 +1334,32 @@ class DeviceAuthFlowManager extends EventEmitter {
       }
     `;
         document.head.appendChild(style);
-        // Login button
+        // Login button - square corners, simple dark style
         const loginBtn = document.createElement('button');
         loginBtn.id = 'playkit-modal-login-btn';
         loginBtn.textContent = this.t('loginToPlay');
         loginBtn.style.cssText = `
       width: 100%;
-      padding: 12px 24px;
-      font-size: 16px;
+      padding: 10px 16px;
+      font-size: 14px;
       font-weight: 500;
       color: white;
-      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+      background: #171717;
       border: none;
-      border-radius: 8px;
       cursor: pointer;
-      transition: all 0.2s ease;
-      box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
+      transition: background 0.2s ease;
     `;
         loginBtn.onmouseenter = () => {
-            loginBtn.style.boxShadow = '0 6px 8px -2px rgba(59, 130, 246, 0.4)';
-            loginBtn.style.transform = 'translateY(-1px)';
+            loginBtn.style.background = '#404040';
         };
         loginBtn.onmouseleave = () => {
-            loginBtn.style.boxShadow = '0 4px 6px -1px rgba(59, 130, 246, 0.3)';
-            loginBtn.style.transform = 'translateY(0)';
+            loginBtn.style.background = '#171717';
         };
         loginBtn.onmousedown = () => {
-            loginBtn.style.transform = 'scale(0.98)';
+            loginBtn.style.background = '#0a0a0a';
         };
         loginBtn.onmouseup = () => {
-            loginBtn.style.transform = 'translateY(-1px)';
+            loginBtn.style.background = '#404040';
         };
         loginBtn.onclick = () => {
             // Switch to waiting state
@@ -1418,29 +1370,30 @@ class DeviceAuthFlowManager extends EventEmitter {
             resolveClicked();
         };
         card.appendChild(loginBtn);
-        // Cancel button (hidden initially)
+        // Cancel button (hidden initially) - outline style
         const cancelBtn = document.createElement('button');
         cancelBtn.id = 'playkit-modal-cancel-btn';
         cancelBtn.textContent = this.t('cancel');
         cancelBtn.style.cssText = `
       display: none;
       width: 100%;
-      margin-top: 12px;
-      padding: 12px 24px;
-      font-size: 16px;
+      margin-top: 8px;
+      padding: 10px 16px;
+      font-size: 14px;
       font-weight: 500;
       color: #666;
-      background: #f3f4f6;
-      border: none;
-      border-radius: 8px;
+      background: transparent;
+      border: 1px solid #e5e7eb;
       cursor: pointer;
       transition: all 0.2s ease;
     `;
         cancelBtn.onmouseenter = () => {
-            cancelBtn.style.background = '#e5e7eb';
+            cancelBtn.style.background = '#f5f5f5';
+            cancelBtn.style.borderColor = '#d4d4d4';
         };
         cancelBtn.onmouseleave = () => {
-            cancelBtn.style.background = '#f3f4f6';
+            cancelBtn.style.background = 'transparent';
+            cancelBtn.style.borderColor = '#e5e7eb';
         };
         cancelBtn.onclick = () => {
             this.closeModal();
@@ -1467,7 +1420,7 @@ class DeviceAuthFlowManager extends EventEmitter {
      * @private
      */
     showModalError(type, onClose) {
-        var _a, _b;
+        var _a;
         if (!this.currentModal)
             return;
         const subtitle = this.currentModal.querySelector('#playkit-modal-subtitle');
@@ -1499,35 +1452,20 @@ class DeviceAuthFlowManager extends EventEmitter {
         // Hide spinner
         if (spinner)
             spinner.style.display = 'none';
-        // Create error icon
-        const errorIcon = document.createElement('div');
-        errorIcon.style.cssText = `
-      width: 48px;
-      height: 48px;
-      margin: 0 auto 16px;
-      border-radius: 50%;
-      background: ${iconColor}15;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 24px;
-    `;
-        errorIcon.textContent = type === 'expired' ? '⏱' : '✕';
         // Create error title
         const errorTitle = document.createElement('h3');
         errorTitle.textContent = this.t(titleKey);
         errorTitle.style.cssText = `
       margin: 0 0 8px;
-      font-size: 18px;
+      font-size: 14px;
       font-weight: 600;
       color: ${iconColor};
     `;
         // Update subtitle with error description
         subtitle.textContent = this.t(descKey);
         subtitle.style.color = '#666';
-        // Insert error elements before subtitle
-        (_a = subtitle.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(errorIcon, subtitle);
-        (_b = subtitle.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(errorTitle, subtitle);
+        // Insert error title before subtitle
+        (_a = subtitle.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(errorTitle, subtitle);
         // Update cancel button to close button
         if (cancelBtn) {
             cancelBtn.textContent = this.t('close');