@quicktvui/web-renderer 1.0.0

package/src/components/QtWebView.js

@@ -0,0 +1,613 @@
+// QtWebView component for web platform
+// Implements WebView using iframe
+import { QtBaseComponent } from './QtBaseComponent'
+
+console.log('[QtWebView] Module loaded')
+
+export class QtWebView extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'ESWebViewComponent'
+    this.dom = document.createElement('div')
+    this._iframe = null
+    this._url = null
+    this._userAgent = null
+
+    console.log('[QtWebView] constructor called, id:', id)
+
+    // Create iframe container
+    this.dom.style.position = 'relative'
+    this.dom.style.overflow = 'hidden'
+    this.dom.setAttribute('data-component-name', 'QtWebView')
+  }
+
+  defaultStyle() {
+    return {
+      boxSizing: 'border-box',
+      zIndex: 0,
+      display: 'block',
+      position: 'relative',
+      overflow: 'hidden',
+    }
+  }
+
+  // Create or get iframe
+  _getOrCreateIframe() {
+    if (!this._iframe) {
+      this._iframe = document.createElement('iframe')
+      this._iframe.style.width = '100%'
+      this._iframe.style.height = '100%'
+      this._iframe.style.border = 'none'
+      this._iframe.style.position = 'absolute'
+      this._iframe.style.top = '0'
+      this._iframe.style.left = '0'
+      this._iframe.allow = 'autoplay; fullscreen; clipboard-write'
+      this._iframe.setAttribute(
+        'sandbox',
+        'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox'
+      )
+      this.dom.appendChild(this._iframe)
+
+      // Handle iframe load error
+      this._iframe.addEventListener('error', (e) => {
+        console.error('[QtWebView] iframe error:', e)
+        this._handleLoadError()
+      })
+
+      // Handle iframe load
+      this._iframe.addEventListener('load', () => {
+        console.log('[QtWebView] iframe loaded')
+        // Try to detect if blocked
+        this._detectBlockedContent()
+      })
+
+      // Prevent iframe from stealing keyboard focus
+      // This ensures Escape key still works for back navigation
+      this._iframe.setAttribute('tabindex', '-1')
+      this._iframe.addEventListener('focus', (e) => {
+        // Blur the iframe to return focus to parent
+        setTimeout(() => {
+          if (this._iframe) {
+            this._iframe.blur()
+            document.body.focus()
+          }
+        }, 0)
+      })
+    }
+    return this._iframe
+  }
+
+  // Detect if content is blocked by X-Frame-Options or connection failed
+  _detectBlockedContent() {
+    if (!this._iframe) return
+
+    // Give a small delay for the browser to render error pages
+    setTimeout(() => {
+      if (!this._iframe) return
+
+      try {
+        // This will throw if cross-origin
+        const doc = this._iframe.contentDocument || this._iframe.contentWindow.document
+
+        // Check if it's a blank or error page
+        const bodyContent = doc?.body?.innerHTML || ''
+
+        console.log('[QtWebView] _detectBlockedContent - bodyContent length:', bodyContent.length)
+
+        // Chrome shows error pages with specific content
+        const isConnectionError =
+          bodyContent.includes('ERR_CONNECTION') ||
+          bodyContent.includes('ERR_NAME_NOT_RESOLVED') ||
+          bodyContent.includes('拒绝了我们的连接请求') ||
+          bodyContent.includes('无法访问此网站')
+
+        const isBlockedError =
+          bodyContent.includes('X-Frame-Options') ||
+          bodyContent.includes('refused to connect') ||
+          bodyContent.includes('blocked by') ||
+          bodyContent.includes('拒绝连接')
+
+        // Check for empty or minimal content
+        const isEmpty =
+          !doc ||
+          !doc.body ||
+          bodyContent === '' ||
+          bodyContent === '<br>' ||
+          bodyContent.length < 50
+
+        console.log(
+          '[QtWebView] _detectBlockedContent - isConnectionError:',
+          isConnectionError,
+          'isBlockedError:',
+          isBlockedError,
+          'isEmpty:',
+          isEmpty
+        )
+
+        if (isConnectionError) {
+          console.log('[QtWebView] Detected connection error')
+          this._handleLoadError('无法连接到服务器，请检查网络或地址是否正确')
+        } else if (isBlockedError) {
+          console.log('[QtWebView] Detected blocked content')
+          this._handleLoadError('该网站设置了安全策略，禁止在页面内嵌入显示')
+        } else if (isEmpty) {
+          console.log('[QtWebView] Detected empty content')
+          this._handleLoadError('页面内容为空')
+        }
+      } catch (e) {
+        // Cross-origin - the page may have loaded successfully
+        console.log('[QtWebView] Cross-origin page loaded successfully')
+      }
+    }, 500)
+  }
+
+  // Handle load error - show friendly error message
+  _handleLoadError(errorMessage = '该网站设置了安全策略，禁止在页面内嵌入显示') {
+    // Show error message in the container
+    this.dom.innerHTML = `
+      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+        <div style="width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 30px;">
+          <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="15" y1="9" x2="9" y2="15"></line>
+            <line x1="9" y1="9" x2="15" y2="15"></line>
+          </svg>
+        </div>
+        <div style="font-size: 28px; font-weight: 600; margin-bottom: 12px; color: #fff;">无法加载页面</div>
+        <div style="font-size: 16px; color: #888; margin-bottom: 8px; text-align: center; max-width: 400px; line-height: 1.6;">
+          ${errorMessage}
+        </div>
+        <div style="font-size: 14px; color: #666; margin-bottom: 30px; word-break: break-all; max-width: 500px; text-align: center;">
+          ${this._url || ''}
+        </div>
+        <div style="display: flex; gap: 16px;">
+          <button id="webview-open-external" style="padding: 14px 28px; font-size: 16px; cursor: pointer; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);">
+            在新窗口打开
+          </button>
+          <button id="webview-go-back" style="padding: 14px 28px; font-size: 16px; cursor: pointer; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; transition: transform 0.2s, background 0.2s;">
+            返回上一页
+          </button>
+        </div>
+      </div>
+    `
+
+    // Open in new window button
+    const openBtn = this.dom.querySelector('#webview-open-external')
+    if (openBtn && this._url) {
+      openBtn.addEventListener('mouseenter', () => {
+        openBtn.style.transform = 'translateY(-2px)'
+        openBtn.style.boxShadow = '0 6px 20px rgba(102, 126, 234, 0.5)'
+      })
+      openBtn.addEventListener('mouseleave', () => {
+        openBtn.style.transform = 'translateY(0)'
+        openBtn.style.boxShadow = '0 4px 15px rgba(102, 126, 234, 0.4)'
+      })
+      openBtn.addEventListener('click', () => {
+        window.open(this._url, '_blank')
+      })
+    }
+
+    // Go back button
+    const backBtn = this.dom.querySelector('#webview-go-back')
+    if (backBtn) {
+      backBtn.addEventListener('mouseenter', () => {
+        backBtn.style.background = 'rgba(255,255,255,0.15)'
+      })
+      backBtn.addEventListener('mouseleave', () => {
+        backBtn.style.background = 'rgba(255,255,255,0.1)'
+      })
+      backBtn.addEventListener('click', () => {
+        const router = global.__ES_ROUTER__
+        if (router && typeof router.back === 'function') {
+          router.back()
+        } else {
+          window.history.back()
+        }
+      })
+    }
+  }
+
+  // Handle URL property
+  updateProperty(key, value) {
+    if (key === 'url' || key === 'source') {
+      if (typeof value === 'string') {
+        this.loadUrl([value])
+      } else if (value && value.uri) {
+        this.loadUrl([value.uri])
+      }
+      return
+    }
+
+    if (key === 'userAgent') {
+      this.setUserAgent([value])
+      return
+    }
+
+    // For other properties, use parent class handling
+    super.updateProperty(key, value)
+  }
+
+  // Check if URL is reachable before loading
+  // Note: Due to CORS restrictions, this check is not 100% reliable
+  // We use a simple img request to check connectivity
+  async _checkUrlReachable(url) {
+    return new Promise((resolve) => {
+      // For http/https URLs, try to use a simple method
+      // We can't reliably check cross-origin URLs due to CORS
+      // So we just check if it's a valid URL format
+      try {
+        const urlObj = new URL(url)
+        // If it's a valid URL, assume it's reachable
+        // The iframe will handle the actual loading
+        resolve(true)
+      } catch (e) {
+        console.log('[QtWebView] Invalid URL format:', e.message)
+        resolve(false)
+      }
+    })
+  }
+
+  // Load URL
+  loadUrl(params) {
+    const url = Array.isArray(params) ? params[0] : params
+    console.log('[QtWebView] loadUrl:', url)
+    this._url = url
+
+    // Clear previous content and timeout
+    if (this._loadTimeout) {
+      clearTimeout(this._loadTimeout)
+      this._loadTimeout = null
+    }
+    this.dom.innerHTML = ''
+
+    // Validate URL
+    try {
+      new URL(url)
+    } catch (e) {
+      this._handleLoadError('URL 格式无效')
+      return
+    }
+
+    // Show loading indicator
+    this._showLoading()
+
+    // Create iframe and load URL
+    const iframe = this._getOrCreateIframe()
+    iframe.src = url
+  }
+
+  // Show loading indicator
+  _showLoading() {
+    this.dom.innerHTML = `
+      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+        <div style="width: 60px; height: 60px; border: 4px solid rgba(255,255,255,0.1); border-top-color: #667eea; border-radius: 50%; animation: spin 1s linear infinite;"></div>
+        <div style="margin-top: 20px; font-size: 16px; color: #888;">正在加载...</div>
+        <style>
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        </style>
+      </div>
+    `
+  }
+
+  // Reload the page
+  reload(params) {
+    if (this._iframe) {
+      this._iframe.src = this._iframe.src
+    }
+  }
+
+  // Clear cache
+  clearCache(params) {
+    // In web, we can't clear browser cache directly
+    console.log('[QtWebView] clearCache called (no-op in web)')
+  }
+
+  // Get current URL
+  getUrl() {
+    return Promise.resolve(this._iframe?.src || this._url)
+  }
+
+  // Get original URL
+  getOriginalUrl() {
+    return Promise.resolve(this._url)
+  }
+
+  // Set layer type (no-op in web)
+  setLayerType(params) {
+    console.log('[QtWebView] setLayerType called (no-op in web)')
+  }
+
+  // Set ignore CA (no-op in web)
+  setIgnoreCA(params) {
+    console.log('[QtWebView] setIgnoreCA called (no-op in web)')
+  }
+
+  // Get back forward list
+  getBackForwardList() {
+    // In web, we can't access iframe history directly
+    return Promise.resolve([])
+  }
+
+  // Get current index with back forward list
+  getCurrentIndexWithBackForwardList() {
+    return Promise.resolve(0)
+  }
+
+  // Get screen status
+  getScreenStatus() {
+    return Promise.resolve(0)
+  }
+
+  // Auto click position
+  autoClickPosition(params) {
+    const [x, y] = Array.isArray(params) ? params : [params, 0]
+    console.log('[QtWebView] autoClickPosition:', x, y)
+    // Not supported in web
+  }
+
+  // Disable image display
+  disableImageDisplay() {
+    console.log('[QtWebView] disableImageDisplay (no-op in web)')
+  }
+
+  // Enable image display
+  enableImageDisplay() {
+    console.log('[QtWebView] enableImageDisplay (no-op in web)')
+  }
+
+  // Stop loading
+  stopLoading() {
+    if (this._iframe) {
+      // Stop iframe loading by removing and re-adding
+      const src = this._iframe.src
+      this._iframe.removeAttribute('src')
+      this._iframe.src = src
+    }
+  }
+
+  // Clear view
+  clearView() {
+    if (this._iframe) {
+      this._iframe.src = 'about:blank'
+    }
+  }
+
+  // Set listen events
+  setListenEvents(params) {
+    console.log('[QtWebView] setListenEvents:', params)
+  }
+
+  // Set ignore all key event
+  setIgnoreAllKeyEvent(params) {
+    console.log('[QtWebView] setIgnoreAllKeyEvent:', params)
+  }
+
+  // Evaluate JavaScript
+  evaluateJavascript(params) {
+    const script = Array.isArray(params) ? params[0] : params
+    if (this._iframe && this._iframe.contentWindow) {
+      try {
+        const result = this._iframe.contentWindow.eval(script)
+        return Promise.resolve(result)
+      } catch (e) {
+        console.error('[QtWebView] evaluateJavascript error:', e)
+        return Promise.resolve(null)
+      }
+    }
+    return Promise.resolve(null)
+  }
+
+  // Set sniffing enabled
+  setSniffingEnabled(params) {
+    console.log('[QtWebView] setSniffingEnabled (no-op in web)')
+  }
+
+  // Set sniffing rule
+  setSniffingRule(params) {
+    console.log('[QtWebView] setSniffingRule (no-op in web)')
+  }
+
+  // Reset sniffing rule
+  resetSniffingRule() {
+    console.log('[QtWebView] resetSniffingRule (no-op in web)')
+  }
+
+  // Set intercept enabled
+  setInterceptEnabled(params) {
+    console.log('[QtWebView] setInterceptEnabled (no-op in web)')
+  }
+
+  // Set intercept rule
+  setInterceptRule(params) {
+    console.log('[QtWebView] setInterceptRule (no-op in web)')
+  }
+
+  // Reset intercept rule
+  resetInterceptRule() {
+    console.log('[QtWebView] resetInterceptRule (no-op in web)')
+  }
+
+  // Should override URL loading
+  shouldOverrideUrlLoading(params) {
+    console.log('[QtWebView] shouldOverrideUrlLoading:', params)
+  }
+
+  // Set user agent
+  setUserAgent(params) {
+    const userAgent = Array.isArray(params) ? params[0] : params
+    this._userAgent = userAgent
+    // In web, we can't set iframe user agent directly
+    console.log('[QtWebView] setUserAgent (limited support in web):', userAgent)
+  }
+
+  // Can go back
+  canGoBack() {
+    // Can't access iframe history in web
+    return Promise.resolve(false)
+  }
+
+  // Go back
+  goBack() {
+    // Can't access iframe history in web
+    if (this._iframe) {
+      try {
+        this._iframe.contentWindow.history.back()
+      } catch (e) {
+        console.error('[QtWebView] goBack error:', e)
+      }
+    }
+  }
+
+  // Can go forward
+  canGoForward() {
+    return Promise.resolve(false)
+  }
+
+  // Go forward
+  goForward() {
+    if (this._iframe) {
+      try {
+        this._iframe.contentWindow.history.forward()
+      } catch (e) {
+        console.error('[QtWebView] goForward error:', e)
+      }
+    }
+  }
+
+  // Can go back or forward
+  canGoBackOrForward(params) {
+    return Promise.resolve(false)
+  }
+
+  // Go back or forward
+  goBackOrForward(params) {
+    const steps = Array.isArray(params) ? params[0] : params
+    if (this._iframe) {
+      try {
+        this._iframe.contentWindow.history.go(steps)
+      } catch (e) {
+        console.error('[QtWebView] goBackOrForward error:', e)
+      }
+    }
+  }
+
+  // On resume
+  onResume() {
+    console.log('[QtWebView] onResume')
+  }
+
+  // On pause
+  onPause() {
+    console.log('[QtWebView] onPause')
+  }
+
+  // Pause timers
+  pauseTimers() {
+    console.log('[QtWebView] pauseTimers (no-op in web)')
+  }
+
+  // Resume timers
+  resumeTimers() {
+    console.log('[QtWebView] resumeTimers (no-op in web)')
+  }
+
+  // Destroy
+  destroy() {
+    if (this._loadTimeout) {
+      clearTimeout(this._loadTimeout)
+      this._loadTimeout = null
+    }
+    if (this._iframe) {
+      this._iframe.src = 'about:blank'
+      this._iframe.remove()
+      this._iframe = null
+    }
+  }
+
+  // Set JavaScript enabled (no-op in web)
+  setJavaScriptEnabled(params) {
+    console.log('[QtWebView] setJavaScriptEnabled (always enabled in web)')
+  }
+
+  // Set plugin state (no-op in web)
+  setPluginState(params) {
+    console.log('[QtWebView] setPluginState (no-op in web)')
+  }
+
+  // Set JavaScript can open windows automatically (no-op in web)
+  setJavaScriptCanOpenWindowsAutomatically(params) {
+    console.log('[QtWebView] setJavaScriptCanOpenWindowsAutomatically (no-op in web)')
+  }
+
+  // Set use wide view port (no-op in web)
+  setUseWideViewPort(params) {
+    console.log('[QtWebView] setUseWideViewPort (no-op in web)')
+  }
+
+  // Set load with overview mode (no-op in web)
+  setLoadWithOverviewMode(params) {
+    console.log('[QtWebView] setLoadWithOverviewMode (no-op in web)')
+  }
+
+  // Set support zoom (no-op in web)
+  setSupportZoom(params) {
+    console.log('[QtWebView] setSupportZoom (no-op in web)')
+  }
+
+  // Set built in zoom controls (no-op in web)
+  setBuiltInZoomControls(params) {
+    console.log('[QtWebView] setBuiltInZoomControls (no-op in web)')
+  }
+
+  // Set display zoom controls (no-op in web)
+  setDisplayZoomControls(params) {
+    console.log('[QtWebView] setDisplayZoomControls (no-op in web)')
+  }
+
+  // Set allow file access (no-op in web)
+  setAllowFileAccess(params) {
+    console.log('[QtWebView] setAllowFileAccess (no-op in web)')
+  }
+
+  // Set DOM storage enabled (no-op in web)
+  setDomStorageEnabled(params) {
+    console.log('[QtWebView] setDomStorageEnabled (always enabled in web)')
+  }
+
+  // Set database enabled (no-op in web)
+  setDatabaseEnabled(params) {
+    console.log('[QtWebView] setDatabaseEnabled (no-op in web)')
+  }
+
+  // Set app cache enabled (no-op in web)
+  setAppCacheEnabled(params) {
+    console.log('[QtWebView] setAppCacheEnabled (no-op in web)')
+  }
+
+  // Set app cache path (no-op in web)
+  setAppCachePath(params) {
+    console.log('[QtWebView] setAppCachePath (no-op in web)')
+  }
+
+  // Set media playback requires user gesture (no-op in web)
+  setMediaPlaybackRequiresUserGesture(params) {
+    console.log('[QtWebView] setMediaPlaybackRequiresUserGesture (no-op in web)')
+  }
+
+  // Init JavaScript interface
+  initJavaScriptInterface() {
+    console.log('[QtWebView] initJavaScriptInterface (no-op in web)')
+  }
+
+  // Remove JavaScript interface
+  removeJavaScriptInterface() {
+    console.log('[QtWebView] removeJavaScriptInterface (no-op in web)')
+  }
+
+  // Init WebView focus
+  initWebViewFocus(params) {
+    console.log('[QtWebView] initWebViewFocus (no-op in web)')
+  }
+}