reviw 0.9.2 → 0.10.1

package/cli.cjs

@@ -839,6 +839,18 @@ function diffHtmlTemplate(diffData) {
       z-index: 100;
     }
     .modal-overlay.visible { display: flex; }
+    /* Submit modal: top-right position, no blocking overlay */
+    #submit-modal {
+      background: transparent;
+      pointer-events: none;
+      align-items: flex-start;
+      justify-content: flex-end;
+    }
+    #submit-modal.visible { display: flex; }
+    #submit-modal .modal-dialog {
+      pointer-events: auto;
+      margin: 60px 20px 20px 20px; /* top margin avoids header button overlap */
+    }
     .modal-dialog {
       background: var(--panel);
       border: 1px solid var(--border);
@@ -1991,6 +2003,55 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       border-radius: 8px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
     }
+    /* Video fullscreen overlay */
+    .video-fullscreen-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.95);
+      z-index: 1001;
+      display: none;
+      justify-content: center;
+      align-items: center;
+    }
+    .video-fullscreen-overlay.visible {
+      display: flex;
+    }
+    .video-close-btn {
+      position: absolute;
+      top: 14px;
+      right: 14px;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.55);
+      border: 1px solid rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
+      cursor: pointer;
+      color: #fff;
+      font-size: 18px;
+      z-index: 10;
+      backdrop-filter: blur(4px);
+      transition: background 120ms ease, transform 120ms ease;
+    }
+    .video-close-btn:hover {
+      background: rgba(0, 0, 0, 0.75);
+      transform: scale(1.04);
+    }
+    .video-container {
+      width: 90vw;
+      height: 90vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .video-container video {
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: 8px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    }
     /* Copy notification toast */
     .copy-toast {
       position: fixed;
@@ -2051,6 +2112,18 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       z-index: 100;
     }
     .modal-overlay.visible { display: flex; }
+    /* Submit modal: top-right position, no blocking overlay */
+    #submit-modal {
+      background: transparent;
+      pointer-events: none;
+      align-items: flex-start;
+      justify-content: flex-end;
+    }
+    #submit-modal.visible { display: flex; }
+    #submit-modal .modal-dialog {
+      pointer-events: auto;
+      margin: 60px 20px 20px 20px; /* top margin avoids header button overlap */
+    }
     .modal-dialog {
       background: var(--panel-solid);
       border: 1px solid var(--border);
@@ -2352,6 +2425,10 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
     <button class="image-close-btn" id="image-close" aria-label="Close image" title="Close (ESC)">✕</button>
     <div class="image-container" id="image-container"></div>
   </div>
+  <div class="video-fullscreen-overlay" id="video-fullscreen">
+    <button class="video-close-btn" id="video-close" aria-label="Close video" title="Close (ESC)">✕</button>
+    <div class="video-container" id="video-container"></div>
+  </div>
 
   <script>
     const DATA = ${serialized};
@@ -3652,6 +3729,321 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
         });
       });
     })();
+
+    // --- Video Fullscreen ---
+    (function initVideoFullscreen() {
+      const preview = document.querySelector('.md-preview');
+      if (!preview) return;
+
+      const videoOverlay = document.getElementById('video-fullscreen');
+      const videoContainer = document.getElementById('video-container');
+      const videoClose = document.getElementById('video-close');
+      if (!videoOverlay || !videoContainer) return;
+
+      const videoExtensions = /\\.(mp4|mov|webm|avi|mkv|m4v|ogv)$/i;
+
+      function closeVideoOverlay() {
+        videoOverlay.classList.remove('visible');
+        // Stop and remove video
+        const video = videoContainer.querySelector('video');
+        if (video) {
+          video.pause();
+          video.src = '';
+          video.remove();
+        }
+      }
+
+      if (videoClose) {
+        videoClose.addEventListener('click', closeVideoOverlay);
+      }
+
+      if (videoOverlay) {
+        videoOverlay.addEventListener('click', (e) => {
+          if (e.target === videoOverlay) closeVideoOverlay();
+        });
+      }
+
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && videoOverlay.classList.contains('visible')) {
+          closeVideoOverlay();
+        }
+      });
+
+      // Intercept video link clicks
+      preview.querySelectorAll('a').forEach(link => {
+        const href = link.getAttribute('href');
+        if (href && videoExtensions.test(href)) {
+          link.style.cursor = 'pointer';
+          link.title = 'Click to play video fullscreen';
+
+          link.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // Remove existing video if any
+            const existingVideo = videoContainer.querySelector('video');
+            if (existingVideo) {
+              existingVideo.pause();
+              existingVideo.src = '';
+              existingVideo.remove();
+            }
+
+            const video = document.createElement('video');
+            video.src = href;
+            video.controls = true;
+            video.autoplay = true;
+            video.style.maxWidth = '100%';
+            video.style.maxHeight = '100%';
+            videoContainer.appendChild(video);
+
+            videoOverlay.classList.add('visible');
+          });
+        }
+      });
+    })();
+
+    // --- Preview Commenting ---
+    (function initPreviewCommenting() {
+      if (MODE !== 'markdown') return;
+
+      const preview = document.querySelector('.md-preview');
+      if (!preview) return;
+
+      // Add visual hint for clickable elements
+      const style = document.createElement('style');
+      style.textContent = \`
+        .md-preview > p:hover, .md-preview > h1:hover, .md-preview > h2:hover,
+        .md-preview > h3:hover, .md-preview > h4:hover, .md-preview > h5:hover,
+        .md-preview > h6:hover, .md-preview > ul > li:hover, .md-preview > ol > li:hover,
+        .md-preview > pre:hover, .md-preview > blockquote:hover {
+          background: rgba(99, 102, 241, 0.08);
+          cursor: pointer;
+          border-radius: 4px;
+        }
+        .md-preview img:hover {
+          outline: 2px solid var(--accent);
+          cursor: pointer;
+        }
+      \`;
+      document.head.appendChild(style);
+
+      // Helper: find matching source line for text
+      function findSourceLine(text) {
+        if (!text) return -1;
+        const normalized = text.trim().replace(/\\s+/g, ' ').slice(0, 100);
+        if (!normalized) return -1;
+
+        for (let i = 0; i < DATA.length; i++) {
+          const lineText = (DATA[i][0] || '').trim();
+          if (!lineText) continue;
+
+          const lineNorm = lineText.replace(/\\s+/g, ' ').slice(0, 100);
+          if (lineNorm === normalized) return i + 1;
+          if (lineNorm.includes(normalized.slice(0, 30)) && normalized.length > 5) return i + 1;
+          if (normalized.includes(lineNorm.slice(0, 30)) && lineNorm.length > 5) return i + 1;
+
+          // Check for markdown headings: strip # from source and compare
+          if (lineText.match(/^#+\\s/)) {
+            const headingText = lineText.replace(/^#+\\s*/, '').trim();
+            if (headingText === normalized || headingText.toLowerCase() === normalized.toLowerCase()) {
+              return i + 1;
+            }
+          }
+        }
+        return -1;
+      }
+
+      // Helper: find matching source line for table cell (prioritizes table rows)
+      function findTableSourceLine(text) {
+        if (!text) return -1;
+        const normalized = text.trim().replace(/\\s+/g, ' ').slice(0, 100);
+        if (!normalized) return -1;
+
+        // First pass: look for table rows (lines starting with |) containing the text
+        for (let i = 0; i < DATA.length; i++) {
+          const lineText = (DATA[i][0] || '').trim();
+          if (!lineText || !lineText.startsWith('|')) continue;
+
+          const lineNorm = lineText.replace(/\\s+/g, ' ').slice(0, 100);
+          if (lineNorm.includes(normalized.slice(0, 30)) && normalized.length > 5) return i + 1;
+        }
+
+        // Fallback to normal search
+        return findSourceLine(text);
+      }
+
+      // Helper: find code block range in source (fenced code blocks)
+      function findCodeBlockRange(codeText) {
+        const clickedLines = codeText.split('\\n').map(l => l.trim()).filter(l => l);
+        const clickedContent = clickedLines.join('\\n');
+
+        // Extract all code blocks from DATA
+        const codeBlocks = [];
+        let currentBlock = null;
+
+        for (let i = 0; i < DATA.length; i++) {
+          const lineText = (DATA[i][0] || '').trim();
+
+          if (lineText.startsWith('\`\`\`') && !currentBlock) {
+            // Start of a code block
+            currentBlock = { startLine: i + 1, lines: [] };
+          } else if (lineText === '\`\`\`' && currentBlock) {
+            // End of a code block
+            currentBlock.endLine = i + 1;
+            currentBlock.content = currentBlock.lines.map(l => l.trim()).filter(l => l).join('\\n');
+            codeBlocks.push(currentBlock);
+            currentBlock = null;
+          } else if (currentBlock) {
+            // Inside a code block
+            currentBlock.lines.push(DATA[i][0] || '');
+          }
+        }
+
+        // Find the best matching code block by content similarity
+        let bestMatch = null;
+        let bestScore = 0;
+
+        for (const block of codeBlocks) {
+          // Calculate similarity score
+          let score = 0;
+
+          // Exact match
+          if (block.content === clickedContent) {
+            score = 1000;
+          } else {
+            // Check line-by-line matches
+            const blockLines = block.content.split('\\n');
+            for (const clickedLine of clickedLines) {
+              if (clickedLine.length > 3) {
+                for (const blockLine of blockLines) {
+                  if (blockLine.includes(clickedLine) || clickedLine.includes(blockLine)) {
+                    score += clickedLine.length;
+                  }
+                }
+              }
+            }
+          }
+
+          if (score > bestScore) {
+            bestScore = score;
+            bestMatch = block;
+          }
+        }
+
+        if (bestMatch) {
+          return { startLine: bestMatch.startLine, endLine: bestMatch.endLine };
+        }
+
+        // Fallback: find by first line content matching
+        const firstCodeLine = clickedLines[0];
+        if (firstCodeLine && firstCodeLine.length > 3) {
+          for (let i = 0; i < DATA.length; i++) {
+            const lineText = (DATA[i][0] || '').trim();
+            if (lineText.includes(firstCodeLine.slice(0, 30))) {
+              return { startLine: i + 1, endLine: i + 1 };
+            }
+          }
+        }
+
+        return { startLine: -1, endLine: -1 };
+      }
+
+      // Helper: find source line for image by src
+      function findImageSourceLine(src) {
+        if (!src) return -1;
+        const filename = src.split('/').pop().split('?')[0];
+        for (let i = 0; i < DATA.length; i++) {
+          const lineText = DATA[i][0] || '';
+          if (lineText.includes(filename) || lineText.includes(src)) {
+            return i + 1;
+          }
+        }
+        return -1;
+      }
+
+      // Trigger source cell selection (reuse existing comment flow)
+      function selectSourceRange(startRow, endRow) {
+        selection = { startRow, endRow: endRow || startRow, startCol: 1, endCol: 1 };
+        updateSelectionVisual();
+
+        // Clear header selection
+        document.querySelectorAll('thead th.selected').forEach(el => el.classList.remove('selected'));
+
+        // Scroll source table to show the selected row, then open card
+        const sourceTd = tbody.querySelector('td[data-row="' + startRow + '"][data-col="1"]');
+        if (sourceTd) {
+          sourceTd.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          // Wait for scroll to complete before positioning card
+          setTimeout(() => openCardForSelection(), 350);
+        } else {
+          openCardForSelection();
+        }
+      }
+
+      // Click on block elements
+      preview.addEventListener('click', (e) => {
+        // Handle image clicks
+        if (e.target.tagName === 'IMG') {
+          if (!e.defaultPrevented) {
+            const line = findImageSourceLine(e.target.src);
+            if (line > 0) {
+              e.preventDefault();
+              e.stopPropagation();
+              selectSourceRange(line);
+            }
+          }
+          return;
+        }
+
+        // Ignore clicks on links, mermaid, video overlay
+        if (e.target.closest('a, .mermaid-container, .video-fullscreen-overlay')) return;
+
+        // Handle code blocks - select entire block
+        const pre = e.target.closest('pre');
+        if (pre) {
+          const code = pre.querySelector('code') || pre;
+          const { startLine, endLine } = findCodeBlockRange(code.textContent);
+          if (startLine > 0) {
+            e.preventDefault();
+            selectSourceRange(startLine, endLine);
+          }
+          return;
+        }
+
+        const target = e.target.closest('p, h1, h2, h3, h4, h5, h6, li, blockquote, td, th');
+        if (!target) return;
+
+        // Use table-specific search for table cells
+        const isTableCell = target.tagName === 'TD' || target.tagName === 'TH';
+        const line = isTableCell ? findTableSourceLine(target.textContent) : findSourceLine(target.textContent);
+        if (line <= 0) return;
+
+        e.preventDefault();
+        selectSourceRange(line);
+      });
+
+      // Text selection to open comment for range
+      preview.addEventListener('mouseup', (e) => {
+        setTimeout(() => {
+          const sel = window.getSelection();
+          if (!sel || sel.isCollapsed) return;
+
+          const text = sel.toString().trim();
+          if (!text || text.length < 5) return;
+
+          const lines = text.split('\\n').filter(l => l.trim());
+          if (lines.length === 0) return;
+
+          const startLine = findSourceLine(lines[0]);
+          const endLine = lines.length > 1 ? findSourceLine(lines[lines.length - 1]) : startLine;
+
+          if (startLine <= 0) return;
+
+          sel.removeAllRanges();
+          selectSourceRange(startLine, endLine > 0 ? endLine : startLine);
+        }, 10);
+      });
+    })();
   </script>
 </body>
 </html>`;
@@ -3890,7 +4282,10 @@ function createFileServer(filePath) {
       res.end("not found");
     });
 
+    let serverStarted = false;
+
     function tryListen(attemptPort, attempts = 0) {
+      if (serverStarted) return; // Prevent double-start race condition
       if (attempts >= MAX_PORT_ATTEMPTS) {
         console.error(
           `Could not find an available port for ${baseName} after ${MAX_PORT_ATTEMPTS} attempts.`,
@@ -3901,6 +4296,7 @@ function createFileServer(filePath) {
       }
 
       ctx.server.once("error", (err) => {
+        if (serverStarted) return; // Already started on another port
         if (err.code === "EADDRINUSE") {
           tryListen(attemptPort + 1, attempts + 1);
         } else {
@@ -3911,6 +4307,12 @@ function createFileServer(filePath) {
       });
 
       ctx.server.listen(attemptPort, () => {
+        if (serverStarted) {
+          // Race condition: server started on multiple ports, close this one
+          try { ctx.server.close(); } catch (_) {}
+          return;
+        }
+        serverStarted = true;
         ctx.port = attemptPort;
         nextPort = attemptPort + 1;
         activeServers.set(filePath, ctx);
@@ -4044,7 +4446,10 @@ function createDiffServer(diffContent) {
       res.end("not found");
     });
 
+    let serverStarted = false;
+
     function tryListen(attemptPort, attempts = 0) {
+      if (serverStarted) return; // Prevent double-start race condition
       if (attempts >= MAX_PORT_ATTEMPTS) {
         console.error(
           `Could not find an available port for diff viewer after ${MAX_PORT_ATTEMPTS} attempts.`,
@@ -4055,6 +4460,7 @@ function createDiffServer(diffContent) {
       }
 
       ctx.server.once("error", (err) => {
+        if (serverStarted) return; // Already started on another port
         if (err.code === "EADDRINUSE") {
           tryListen(attemptPort + 1, attempts + 1);
         } else {
@@ -4065,6 +4471,12 @@ function createDiffServer(diffContent) {
       });
 
       ctx.server.listen(attemptPort, () => {
+        if (serverStarted) {
+          // Race condition: server started on multiple ports, close this one
+          try { ctx.server.close(); } catch (_) {}
+          return;
+        }
+        serverStarted = true;
         ctx.port = attemptPort;
         ctx.heartbeat = setInterval(() => broadcast("ping"), 25000);
         console.log(`Diff viewer started: http://localhost:${attemptPort}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reviw",
-  "version": "0.9.2",
+  "version": "0.10.1",
   "description": "Lightweight file reviewer with in-browser comments for CSV, TSV, Markdown, and Git diffs.",
   "type": "module",
   "bin": {
@@ -9,10 +9,6 @@
   "files": [
     "cli.cjs"
   ],
-  "scripts": {
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "license": "MIT",
   "author": "kazuph",
   "publishConfig": {
@@ -31,5 +27,9 @@
     "@playwright/test": "^1.57.0",
     "playwright": "^1.57.0",
     "vitest": "^4.0.14"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}