@capillarytech/cap-ui-dev-tools 1.4.0 → 1.6.0

package/src/capvision-recorder/assets/capvision-plugins/network-replay.min.js

@@ -1,434 +0,0 @@
-/**
- * RRWeb Network Replay Plugin
- * Displays network activity in a floating panel during replay
- * Based on: https://github.com/rrweb-io/rrweb/pull/1689
- */
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.rrwebPluginNetworkReplay = factory());
-})(this, (function () {
-  'use strict';
-
-  function getReplayNetworkPlugin(options) {
-    const opts = options || {};
-    const showPanel = opts.showPanel !== false;
-    const maxEntries = opts.maxEntries || 100;
-    const position = opts.position || 'bottom-right';
-
-    // Network entries storage
-    const networkEntries = [];
-    let panelElement = null;
-    let tableBody = null;
-    let isMinimized = false;
-
-    // Helper: Format duration
-    function formatDuration(ms) {
-      if (typeof ms !== 'number' || isNaN(ms)) return '-';
-      if (ms < 1000) return ms + 'ms';
-      return (ms / 1000).toFixed(2) + 's';
-    }
-
-    // Helper: Format size
-    function formatSize(bytes) {
-      if (typeof bytes !== 'number' || isNaN(bytes)) return '-';
-      if (bytes < 1024) return bytes + 'B';
-      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + 'KB';
-      return (bytes / (1024 * 1024)).toFixed(2) + 'MB';
-    }
-
-    // Helper: Truncate URL for display
-    function truncateURL(url, maxLength) {
-      if (!url) return '-';
-      if (url.length <= maxLength) return url;
-      return url.substring(0, maxLength - 3) + '...';
-    }
-
-    // Helper: Get status color
-    function getStatusColor(status) {
-      if (!status) return '#666';
-      if (status >= 200 && status < 300) return '#28a745';
-      if (status >= 300 && status < 400) return '#ffc107';
-      if (status >= 400 && status < 500) return '#dc3545';
-      if (status >= 500) return '#dc3545';
-      return '#666';
-    }
-
-    // Helper: Get method color
-    function getMethodColor(method) {
-      if (!method) return '#666';
-      const upperMethod = method.toUpperCase();
-      if (upperMethod === 'GET') return '#007bff';
-      if (upperMethod === 'POST') return '#28a745';
-      if (upperMethod === 'PUT') return '#ffc107';
-      if (upperMethod === 'DELETE') return '#dc3545';
-      if (upperMethod === 'PATCH') return '#17a2b8';
-      return '#666';
-    }
-
-    // Create panel HTML
-    function createPanel() {
-      if (!showPanel) return null;
-
-      const panel = document.createElement('div');
-      panel.id = 'rrweb-network-panel';
-      panel.style.cssText = `
-        position: fixed;
-        ${position.includes('right') ? 'right: 20px;' : 'left: 20px;'}
-        ${position.includes('bottom') ? 'bottom: 20px;' : 'top: 20px;'}
-        width: 600px;
-        max-height: 500px;
-        background: white;
-        border: 1px solid #ddd;
-        border-radius: 8px;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        z-index: 10000;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-        font-size: 12px;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      `;
-
-      // Header
-      const header = document.createElement('div');
-      header.style.cssText = `
-        padding: 12px 16px;
-        background: #f8f9fa;
-        border-bottom: 1px solid #ddd;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: move;
-        user-select: none;
-      `;
-      
-      const title = document.createElement('div');
-      title.textContent = '🌐 Network Activity';
-      title.style.cssText = 'font-weight: 600; font-size: 14px; color: #333;';
-      
-      const controls = document.createElement('div');
-      controls.style.cssText = 'display: flex; gap: 8px; align-items: center;';
-      
-      const clearBtn = document.createElement('button');
-      clearBtn.textContent = 'Clear';
-      clearBtn.style.cssText = `
-        padding: 4px 8px;
-        font-size: 11px;
-        border: 1px solid #ddd;
-        background: white;
-        border-radius: 4px;
-        cursor: pointer;
-      `;
-      clearBtn.onclick = () => {
-        networkEntries.length = 0;
-        updateTable();
-      };
-      
-      const minimizeBtn = document.createElement('button');
-      minimizeBtn.textContent = isMinimized ? '▼' : '▲';
-      minimizeBtn.style.cssText = `
-        padding: 4px 8px;
-        font-size: 11px;
-        border: 1px solid #ddd;
-        background: white;
-        border-radius: 4px;
-        cursor: pointer;
-        min-width: 24px;
-      `;
-      minimizeBtn.onclick = () => {
-        isMinimized = !isMinimized;
-        minimizeBtn.textContent = isMinimized ? '▼' : '▲';
-        content.style.display = isMinimized ? 'none' : 'flex';
-      };
-      
-      controls.appendChild(clearBtn);
-      controls.appendChild(minimizeBtn);
-      header.appendChild(title);
-      header.appendChild(controls);
-      
-      // Content area
-      const content = document.createElement('div');
-      content.id = 'rrweb-network-content';
-      content.style.cssText = `
-        flex: 1;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-      `;
-      
-      // Table
-      const table = document.createElement('table');
-      table.style.cssText = `
-        width: 100%;
-        border-collapse: collapse;
-        font-size: 11px;
-      `;
-      
-      // Table header
-      const thead = document.createElement('thead');
-      thead.style.cssText = 'background: #f8f9fa; position: sticky; top: 0; z-index: 10;';
-      const headerRow = document.createElement('tr');
-      ['Method', 'URL', 'Status', 'Duration', 'Size'].forEach(text => {
-        const th = document.createElement('th');
-        th.textContent = text;
-        th.style.cssText = 'padding: 8px; text-align: left; font-weight: 600; border-bottom: 2px solid #ddd;';
-        headerRow.appendChild(th);
-      });
-      thead.appendChild(headerRow);
-      
-      // Table body
-      tableBody = document.createElement('tbody');
-      table.appendChild(thead);
-      table.appendChild(tableBody);
-      content.appendChild(table);
-      
-      panel.appendChild(header);
-      panel.appendChild(content);
-      
-      // Make panel draggable
-      let isDragging = false;
-      let currentX, currentY, initialX, initialY;
-      
-      header.addEventListener('mousedown', (e) => {
-        isDragging = true;
-        initialX = e.clientX - panel.offsetLeft;
-        initialY = e.clientY - panel.offsetTop;
-      });
-      
-      document.addEventListener('mousemove', (e) => {
-        if (isDragging) {
-          currentX = e.clientX - initialX;
-          currentY = e.clientY - initialY;
-          panel.style.left = currentX + 'px';
-          panel.style.top = currentY + 'px';
-          panel.style.right = 'auto';
-          panel.style.bottom = 'auto';
-        }
-      });
-      
-      document.addEventListener('mouseup', () => {
-        isDragging = false;
-      });
-      
-      document.body.appendChild(panel);
-      return panel;
-    }
-
-    // Update table with network entries
-    function updateTable() {
-      if (!tableBody) return;
-      
-      // Clear existing rows
-      tableBody.innerHTML = '';
-      
-      // Show latest entries (up to maxEntries)
-      const entriesToShow = networkEntries.slice(-maxEntries);
-      
-      entriesToShow.forEach(entry => {
-        const row = document.createElement('tr');
-        row.style.cssText = 'border-bottom: 1px solid #eee;';
-        
-        // Method cell
-        const methodCell = document.createElement('td');
-        methodCell.textContent = entry.method || '-';
-        methodCell.style.cssText = `padding: 6px 8px; color: ${getMethodColor(entry.method)}; font-weight: 600;`;
-        
-        // URL cell
-        const urlCell = document.createElement('td');
-        urlCell.textContent = truncateURL(entry.url, 40);
-        urlCell.title = entry.url || '';
-        urlCell.style.cssText = 'padding: 6px 8px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;';
-        
-        // Status cell
-        const statusCell = document.createElement('td');
-        statusCell.textContent = entry.status || '-';
-        statusCell.style.cssText = `padding: 6px 8px; color: ${getStatusColor(entry.status)}; font-weight: 600;`;
-        
-        // Duration cell
-        const durationCell = document.createElement('td');
-        durationCell.textContent = formatDuration(entry.duration);
-        durationCell.style.cssText = 'padding: 6px 8px;';
-        
-        // Size cell
-        const sizeCell = document.createElement('td');
-        sizeCell.textContent = formatSize(entry.transferSize || entry.encodedBodySize);
-        sizeCell.style.cssText = 'padding: 6px 8px;';
-        
-        row.appendChild(methodCell);
-        row.appendChild(urlCell);
-        row.appendChild(statusCell);
-        row.appendChild(durationCell);
-        row.appendChild(sizeCell);
-        
-        tableBody.appendChild(row);
-      });
-      
-      // Scroll to bottom
-      if (tableBody.parentElement) {
-        const content = tableBody.parentElement.parentElement;
-        if (content) {
-          content.scrollTop = content.scrollHeight;
-        }
-      }
-    }
-
-    // Process network event
-    function processNetworkEvent(event) {
-      // Only handle plugin events for network
-      if (!event || event.type !== 6 || !event.data) return;
-      if (event.data?.plugin !== 'rrweb/network@1') return;
-      
-      // Try to get payload - handle nested structure (double-wrapped during RRWeb serialization)
-      let payload = null;
-      
-      // Check for nested structure first (double-wrapped during RRWeb serialization)
-      if (event.data?.payload?.data?.payload) {
-        const nestedPayload = event.data.payload.data.payload;
-        if (nestedPayload.type === 'request' || nestedPayload.type === 'response') {
-          payload = nestedPayload;
-        }
-      }
-      
-      // Fallback: Check for normal structure
-      if (!payload && event.data?.payload) {
-        const testPayload = event.data.payload;
-        if (testPayload.type === 'request' || testPayload.type === 'response') {
-          payload = testPayload;
-        }
-      }
-      
-      if (!payload) return;
-      
-      // Verify payload has the expected structure
-      if (typeof payload.type !== 'string' || (payload.type !== 'request' && payload.type !== 'response')) {
-        return;
-      }
-      
-      if (payload.type === 'request') {
-        // Create panel if not exists and showPanel is enabled
-        if (showPanel && !panelElement) {
-          panelElement = createPanel();
-        }
-        
-        // Store request entry
-        const entry = {
-          id: payload.id,
-          method: payload.method || 'GET',
-          url: payload.url || '',
-          timestamp: payload.timestamp || event.timestamp,
-          requestType: payload.requestType || 'unknown'
-        };
-        
-        // Find existing entry or create new
-        const existingIndex = networkEntries.findIndex(e => e.id === entry.id);
-        if (existingIndex >= 0) {
-          Object.assign(networkEntries[existingIndex], entry);
-        } else {
-          networkEntries.push(entry);
-        }
-        
-        // Limit entries
-        if (networkEntries.length > maxEntries * 2) {
-          networkEntries.shift();
-        }
-        
-        // Update table if panel is shown
-        if (showPanel) {
-          updateTable();
-        }
-      } else if (payload.type === 'response') {
-        // Create panel if not exists and showPanel is enabled
-        if (showPanel && !panelElement) {
-          panelElement = createPanel();
-        }
-        
-        // Update existing entry with response data
-        const entryIndex = networkEntries.findIndex(e => e.id === payload.id);
-        if (entryIndex >= 0) {
-          const entry = networkEntries[entryIndex];
-          entry.status = payload.status;
-          entry.statusText = payload.statusText;
-          entry.duration = payload.duration;
-          entry.error = payload.error;
-          
-          if (payload.performance) {
-            entry.transferSize = payload.performance.transferSize;
-            entry.encodedBodySize = payload.performance.encodedBodySize;
-            entry.decodedBodySize = payload.performance.decodedBodySize;
-          }
-          
-          // Update table if panel is shown
-          if (showPanel) {
-            updateTable();
-          }
-        } else {
-          // Response without request (shouldn't happen, but handle it)
-          // Create panel if not exists and showPanel is enabled
-          if (showPanel && !panelElement) {
-            panelElement = createPanel();
-          }
-          
-          const entry = {
-            id: payload.id,
-            method: 'UNKNOWN',
-            url: '',
-            status: payload.status,
-            statusText: payload.statusText,
-            duration: payload.duration,
-            timestamp: payload.timestamp || event.timestamp,
-            error: payload.error
-          };
-          
-          if (payload.performance) {
-            entry.transferSize = payload.performance.transferSize;
-            entry.encodedBodySize = payload.performance.encodedBodySize;
-            entry.decodedBodySize = payload.performance.decodedBodySize;
-          }
-          
-          networkEntries.push(entry);
-          
-          if (networkEntries.length > maxEntries * 2) {
-            networkEntries.shift();
-          }
-          
-          // Update table if panel is shown
-          if (showPanel) {
-            updateTable();
-          }
-        }
-      }
-    }
-
-    return {
-      name: 'rrweb/network@1',
-      handler(event, isSync, context) {
-        // Only handle plugin events for network
-        if (event.type !== 6 || event.data?.plugin !== 'rrweb/network@1') {
-          return;
-        }
-        
-        // Process the network event
-        processNetworkEvent(event);
-      },
-      onBuild() {
-        // Create panel when player is built
-        if (showPanel && !panelElement) {
-          panelElement = createPanel();
-        }
-      },
-      onDestroy() {
-        // Cleanup panel when player is destroyed
-        if (panelElement && panelElement.parentElement) {
-          panelElement.parentElement.removeChild(panelElement);
-          panelElement = null;
-          tableBody = null;
-        }
-        networkEntries.length = 0;
-      }
-    };
-  }
-
-  // Export function
-  return getReplayNetworkPlugin;
-}));