haltija 1.1.21 → 1.2.2

package/apps/desktop/renderer/ui-utils.js

@@ -0,0 +1,180 @@
+/**
+ * Shared UI utilities — notifications, floating panels, drag tracking.
+ */
+
+export function escapeHtml(str) {
+  if (!str) return ''
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+/** Simple toast notification */
+export function showNotification(message, duration = 2000) {
+  const existing = document.getElementById('toast-notification')
+  if (existing) existing.remove()
+
+  const toast = document.createElement('div')
+  toast.id = 'toast-notification'
+  toast.textContent = message
+  toast.style.cssText = `
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--accent, #6366f1);
+    color: white;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 14px;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    animation: toast-in 0.2s ease-out;
+  `
+
+  if (!document.getElementById('toast-styles')) {
+    const style = document.createElement('style')
+    style.id = 'toast-styles'
+    style.textContent = `
+      @keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
+      @keyframes toast-out { to { opacity: 0; transform: translateX(-50%) translateY(10px); } }
+    `
+    document.head.appendChild(style)
+  }
+
+  document.body.appendChild(toast)
+
+  setTimeout(() => {
+    toast.style.animation = 'toast-out 0.2s ease-in forwards'
+    setTimeout(() => toast.remove(), 200)
+  }, duration)
+}
+
+/** Track a drag operation from mousedown/touchstart */
+export function trackDrag(event, callback, cursor = 'move') {
+  const isTouchEvent = event.type.startsWith('touch')
+
+  if (!isTouchEvent) {
+    const origX = event.clientX
+    const origY = event.clientY
+
+    const tracker = document.createElement('div')
+    tracker.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;cursor:' + cursor
+    document.body.appendChild(tracker)
+
+    const onMove = (e) => {
+      const dx = e.clientX - origX
+      const dy = e.clientY - origY
+      if (callback(dx, dy, e) === true) {
+        tracker.removeEventListener('mousemove', onMove)
+        tracker.removeEventListener('mouseup', onMove)
+        tracker.remove()
+      }
+    }
+
+    tracker.addEventListener('mousemove', onMove, { passive: true })
+    tracker.addEventListener('mouseup', onMove, { passive: true })
+  } else if (event.touches) {
+    const touch = event.touches[0]
+    const touchId = touch.identifier
+    const origX = touch.clientX
+    const origY = touch.clientY
+    const target = event.target
+
+    const onTouch = (e) => {
+      const t = [...e.touches].find(t => t.identifier === touchId)
+      const dx = t ? t.clientX - origX : 0
+      const dy = t ? t.clientY - origY : 0
+      if (callback(dx, dy, e) === true || !t) {
+        target.removeEventListener('touchmove', onTouch)
+        target.removeEventListener('touchend', onTouch)
+        target.removeEventListener('touchcancel', onTouch)
+      }
+    }
+
+    target.addEventListener('touchmove', onTouch)
+    target.addEventListener('touchend', onTouch, { passive: true })
+    target.addEventListener('touchcancel', onTouch, { passive: true })
+  }
+}
+
+function findHighestZ() {
+  return [...document.querySelectorAll('body *')]
+    .map(el => parseFloat(getComputedStyle(el).zIndex))
+    .filter(z => !isNaN(z))
+    .reduce((max, z) => Math.max(max, z), 0)
+}
+
+/** Create a floating panel positioned near a target element */
+export function createFloatPanel({ target, content, title = '', position = 's', onClose }) {
+  const existing = document.querySelector(`.float-panel[data-title="${title}"]`)
+  if (existing) {
+    existing.remove()
+    return null
+  }
+
+  const panel = document.createElement('div')
+  panel.className = 'float-panel'
+  panel.dataset.title = title
+  panel.style.zIndex = findHighestZ() + 1
+
+  panel.innerHTML = `
+    <div class="float-header">
+      <span class="float-title">${escapeHtml(title)}</span>
+      <button class="float-close" title="Close">×</button>
+    </div>
+    <div class="float-content"></div>
+  `
+
+  panel.querySelector('.float-content').appendChild(content)
+
+  const header = panel.querySelector('.float-header')
+  header.addEventListener('mousedown', (e) => {
+    if (e.target.closest('.float-close')) return
+    panel.style.zIndex = findHighestZ() + 1
+    const x = panel.offsetLeft
+    const y = panel.offsetTop
+    trackDrag(e, (dx, dy, evt) => {
+      panel.style.left = `${x + dx}px`
+      panel.style.top = `${y + dy}px`
+      panel.style.right = 'auto'
+      panel.style.bottom = 'auto'
+      return evt.type === 'mouseup'
+    })
+  })
+
+  panel.querySelector('.float-close').addEventListener('click', () => {
+    panel.remove()
+    onClose?.()
+  })
+
+  document.body.appendChild(panel)
+
+  if (target) {
+    const rect = target.getBoundingClientRect()
+    const panelRect = panel.getBoundingClientRect()
+
+    let left, top
+    switch (position) {
+      case 'n':
+        left = rect.left + rect.width / 2 - panelRect.width / 2
+        top = rect.top - panelRect.height - 8
+        break
+      case 's':
+      default:
+        left = rect.left + rect.width / 2 - panelRect.width / 2
+        top = rect.bottom + 8
+        break
+    }
+
+    left = Math.max(8, Math.min(left, window.innerWidth - panelRect.width - 8))
+    top = Math.max(8, Math.min(top, window.innerHeight - panelRect.height - 8))
+
+    panel.style.left = `${left}px`
+    panel.style.top = `${top}px`
+  }
+
+  return panel
+}

package/apps/desktop/renderer/video-capture.js

@@ -0,0 +1,154 @@
+/**
+ * Video capture — streams WebM chunks directly to disk via IPC.
+ *
+ * Flow:
+ *   1. Renderer gets media source ID from main (via webContents.getMediaSourceId)
+ *   2. Renderer opens getUserMedia stream and starts MediaRecorder
+ *   3. Each MediaRecorder chunk is sent to main as ArrayBuffer via IPC
+ *   4. Main process appends chunks to a file on disk
+ *   5. On stop, main closes the file and returns the path
+ *
+ * No base64 encoding. No large data through WebSocket.
+ */
+
+let videoRecorder = null
+let videoRecordingId = null
+let videoStartTime = 0
+let videoMaxDurationTimer = null
+let videoStream = null
+
+export function initVideoCapture() {
+  if (!window.haltija) return
+
+  window.haltija.onVideoStart?.(async (data) => {
+    if (videoRecorder) {
+      window.haltija.videoStartResult({ success: false, error: 'Video recording already in progress' })
+      return
+    }
+
+    const { getActiveWebview } = window._tabs
+    const webview = getActiveWebview()
+    if (!webview || !webview.getWebContentsId) {
+      window.haltija.videoStartResult({ success: false, error: 'No active webview for video capture' })
+      return
+    }
+
+    const maxDuration = (data.maxDuration || 60) * 1000
+
+    try {
+      const wcId = webview.getWebContentsId()
+      const sourceId = await window.haltija.getMediaSourceId(wcId)
+      if (!sourceId) {
+        window.haltija.videoStartResult({ success: false, error: 'Failed to get media source ID for webview' })
+        return
+      }
+
+      // Ask main process to create the output file
+      const fileResult = await window.haltija.videoFileCreate()
+      if (!fileResult?.success) {
+        window.haltija.videoStartResult({ success: false, error: fileResult?.error || 'Failed to create video file' })
+        return
+      }
+
+      videoRecordingId = fileResult.recordingId
+
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: false,
+        video: {
+          mandatory: {
+            chromeMediaSource: 'tab',
+            chromeMediaSourceId: sourceId,
+          },
+        },
+      })
+
+      videoStream = stream
+      videoStartTime = Date.now()
+
+      const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
+        ? 'video/webm;codecs=vp9'
+        : 'video/webm'
+
+      videoRecorder = new MediaRecorder(stream, { mimeType })
+
+      videoRecorder.ondataavailable = async (e) => {
+        if (e.data.size > 0) {
+          // Convert Blob to ArrayBuffer and send to main for disk write
+          const buffer = await e.data.arrayBuffer()
+          window.haltija.videoFileChunk(videoRecordingId, buffer)
+        }
+      }
+
+      videoRecorder.onstop = () => {
+        stream.getTracks().forEach(t => t.stop())
+        videoStream = null
+      }
+
+      // Emit chunks every 500ms for smooth streaming to disk
+      videoRecorder.start(500)
+
+      videoMaxDurationTimer = setTimeout(() => {
+        if (videoRecorder?.state === 'recording') {
+          console.log('[Video] Auto-stopping after max duration')
+          stopRecording()
+        }
+      }, maxDuration)
+
+      window.haltija.videoStartResult({ success: true, recordingId: videoRecordingId })
+    } catch (err) {
+      videoRecordingId = null
+      window.haltija.videoStartResult({ success: false, error: `Failed to start video: ${err.message}` })
+    }
+  })
+
+  window.haltija.onVideoStop?.(async () => {
+    if (!videoRecorder || videoRecorder.state === 'inactive') {
+      window.haltija.videoStopResult({ success: false, error: 'No video recording in progress' })
+      return
+    }
+    await stopRecording()
+  })
+
+  window.haltija.onVideoStatus?.(() => {
+    const recording = videoRecorder?.state === 'recording'
+    window.haltija.videoStatusResult({
+      recording,
+      recordingId: recording ? videoRecordingId : undefined,
+      duration: recording ? (Date.now() - videoStartTime) / 1000 : undefined,
+    })
+  })
+}
+
+async function stopRecording() {
+  if (videoMaxDurationTimer) {
+    clearTimeout(videoMaxDurationTimer)
+    videoMaxDurationTimer = null
+  }
+
+  const duration = (Date.now() - videoStartTime) / 1000
+  const id = videoRecordingId
+
+  // Stop the recorder — this triggers final ondataavailable + onstop
+  await new Promise((resolve) => {
+    videoRecorder.onstop = () => {
+      if (videoStream) {
+        videoStream.getTracks().forEach(t => t.stop())
+        videoStream = null
+      }
+      resolve()
+    }
+    videoRecorder.stop()
+  })
+
+  // Small delay to ensure final chunk IPC completes
+  await new Promise(r => setTimeout(r, 100))
+
+  // Tell main to close the file and get the path
+  const result = await window.haltija.videoFileClose(id, duration)
+
+  videoRecorder = null
+  videoRecordingId = null
+  videoStartTime = 0
+
+  window.haltija.videoStopResult(result)
+}

package/apps/desktop/renderer/webview-events.js

@@ -0,0 +1,225 @@
+/**
+ * Webview event setup — navigation events, title updates, keyboard shortcuts, etc.
+ */
+
+import { tabs, activeTabId, el, getServerUrl } from './state.js'
+import { updateNavButtons, checkHaltija } from './status.js'
+
+// These are set by renderer.js to avoid circular imports
+let _navigate, _createTab, _activateTab, _closeTab
+export function setTabFunctions({ navigate, createTab, activateTab, closeTab }) {
+  _navigate = navigate
+  _createTab = createTab
+  _activateTab = activateTab
+  _closeTab = closeTab
+}
+
+export async function injectWidget(webview) {
+  const currentUrl = webview.getURL()
+  if (!currentUrl || currentUrl === 'about:blank') return
+
+  const serverUrl = getServerUrl()
+  const script = `
+    (function() {
+      if (document.getElementById('haltija-widget')) return;
+      fetch('${serverUrl}/inject.js')
+        .then(r => r.text())
+        .then(code => eval(code))
+        .catch(e => console.error('[Haltija] Injection failed:', e));
+    })();
+  `
+
+  try {
+    await webview.executeJavaScript(script)
+  } catch (err) {
+    console.error('[Haltija Desktop] Injection failed:', err)
+  }
+}
+
+export function setupWebviewEvents(tab) {
+  const webview = tab.webview
+
+  webview.addEventListener('did-start-loading', () => {
+    webview.classList.add('loading')
+    if (tab.id === activeTabId) {
+      el.statusDot.className = 'status-dot connecting'
+    }
+  })
+
+  webview.addEventListener('did-stop-loading', () => {
+    webview.classList.remove('loading')
+    if (tab.id === activeTabId) {
+      updateNavButtons()
+      checkHaltija()
+    }
+  })
+
+  webview.addEventListener('did-navigate', (e) => {
+    tab.url = e.url
+    if (tab.id === activeTabId && !tab.isTerminal) {
+      el.urlInput.value = e.url
+      updateNavButtons()
+    }
+  })
+
+  webview.addEventListener('did-navigate-in-page', (e) => {
+    tab.url = e.url
+    if (tab.id === activeTabId && !tab.isTerminal) {
+      el.urlInput.value = e.url
+      updateNavButtons()
+    }
+  })
+
+  webview.addEventListener('did-finish-load', () => {
+    if (window.haltija) {
+      window.haltija.webviewReady(webview.getWebContentsId())
+    }
+  })
+
+  webview.addEventListener('dom-ready', () => {
+    const url = webview.getURL()
+    if (url.startsWith('blob:') || url.startsWith('data:')) {
+      webview.insertCSS(':root { color-scheme: light !important; }')
+    }
+  })
+
+  webview.addEventListener('page-title-updated', (e) => {
+    tab.title = e.title || 'New Tab'
+    tab.element.querySelector('.tab-title').textContent = tab.title
+    if (tab.id === activeTabId) {
+      document.title = tab.title || 'Haltija'
+    }
+  })
+
+  webview.addEventListener('new-window', async (e) => {
+    e.preventDefault()
+    const { settings } = await import('./state.js')
+    if (settings.confirmNewTabs) {
+      const { showNewTabDialog } = await import('./settings.js')
+      const allowed = await showNewTabDialog(e.url)
+      if (allowed) _createTab(e.url)
+    } else {
+      _createTab(e.url)
+    }
+  })
+
+  webview.addEventListener('console-message', (e) => {
+    const prefix = e.level === 2 ? '[warn]' : e.level === 3 ? '[error]' : ''
+    console.log(`[Tab ${tab.id}${prefix}]`, e.message)
+  })
+
+  webview.addEventListener('dialog', (e) => {
+    const dialogType = e.type
+    const message = e.messageText || ''
+    console.log(`[Tab ${tab.id}] Native dialog intercepted: ${dialogType} - "${message}"`)
+
+    if (dialogType === 'confirm') {
+      e.dialog.accept()
+    } else if (dialogType === 'prompt') {
+      e.dialog.dismiss()
+    } else {
+      e.dialog.accept()
+    }
+  })
+
+  webview.addEventListener('context-menu', (e) => {
+    e.preventDefault()
+    const { x, y } = e.params
+
+    const menu = document.createElement('div')
+    menu.className = 'context-menu'
+    menu.style.cssText = `
+      position: fixed;
+      left: ${e.clientX || x}px;
+      top: ${e.clientY || y}px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 4px 0;
+      min-width: 150px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      z-index: 10000;
+    `
+
+    const items = [
+      { label: 'Back', action: () => webview.canGoBack() && webview.goBack(), enabled: webview.canGoBack() },
+      { label: 'Forward', action: () => webview.canGoForward() && webview.goForward(), enabled: webview.canGoForward() },
+      { label: 'Reload', action: () => webview.reload() },
+      { type: 'separator' },
+      { label: 'Inspect Element', action: () => webview.inspectElement(x, y) },
+    ]
+
+    items.forEach((item) => {
+      if (item.type === 'separator') {
+        const sep = document.createElement('div')
+        sep.style.cssText = 'height: 1px; background: var(--border); margin: 4px 0;'
+        menu.appendChild(sep)
+      } else {
+        const menuItem = document.createElement('div')
+        menuItem.textContent = item.label
+        menuItem.style.cssText = `
+          padding: 6px 12px;
+          cursor: ${item.enabled === false ? 'default' : 'pointer'};
+          opacity: ${item.enabled === false ? '0.5' : '1'};
+          color: var(--text);
+        `
+        if (item.enabled !== false) {
+          menuItem.addEventListener('mouseenter', () => { menuItem.style.background = 'var(--hover)' })
+          menuItem.addEventListener('mouseleave', () => { menuItem.style.background = 'transparent' })
+          menuItem.addEventListener('click', () => {
+            document.body.removeChild(menu)
+            item.action()
+          })
+        }
+        menu.appendChild(menuItem)
+      }
+    })
+
+    document.body.appendChild(menu)
+
+    const closeMenu = (evt) => {
+      if (!menu.contains(evt.target)) {
+        if (document.body.contains(menu)) document.body.removeChild(menu)
+        document.removeEventListener('click', closeMenu)
+      }
+    }
+    setTimeout(() => document.addEventListener('click', closeMenu), 0)
+  })
+
+  webview.addEventListener('before-input-event', (e) => {
+    const input = e.input || e
+    const { type, key, meta, control } = input
+    if (type !== 'keyDown') return
+
+    if ((meta || control) && key === 'r') {
+      e.preventDefault(); e.stopPropagation()
+      webview.reload()
+      return
+    }
+    if ((meta || control) && key === 'l') {
+      e.preventDefault(); e.stopPropagation()
+      el.urlInput.focus(); el.urlInput.select()
+      return
+    }
+    if ((meta || control) && key === 't') {
+      e.preventDefault(); e.stopPropagation()
+      _createTab()
+      return
+    }
+    if ((meta || control) && key === 'w') {
+      e.preventDefault(); e.stopPropagation()
+      _closeTab(tab.id)
+      return
+    }
+    if ((meta || control) && key === '[') {
+      e.preventDefault(); e.stopPropagation()
+      if (webview.canGoBack()) webview.goBack()
+      return
+    }
+    if ((meta || control) && key === ']') {
+      e.preventDefault(); e.stopPropagation()
+      if (webview.canGoForward()) webview.goForward()
+      return
+    }
+  })
+}