autumnnote 1.0.0

package/src/js/module/VideoDialog.js

@@ -0,0 +1,263 @@
+/**
+ * VideoDialog.js - Dialog for inserting videos (YouTube, Vimeo, or direct file)
+ * Supports:
+ *   • YouTube watch URLs  → <iframe> embed
+ *   • YouTube short URLs  → <iframe> embed
+ *   • Vimeo URLs          → <iframe> embed
+ *   • Direct video URLs   → <video> element (.mp4 / .webm / .ogg)
+ */
+
+import { createElement, on, trapFocus } from '../core/dom.js';
+import { withSavedRange } from '../core/range.js';
+
+export class VideoDialog {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+    /** @type {HTMLElement|null} */
+    this._dialog = null;
+    this._disposers = [];
+    this._savedRange = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  initialize() {
+    this._dialog = this._buildDialog();
+    document.body.appendChild(this._dialog);
+    return this;
+  }
+
+  destroy() {
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    if (this._dialog && this._dialog.parentNode) {
+      this._dialog.parentNode.removeChild(this._dialog);
+    }
+    this._dialog = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  show() {
+    withSavedRange((range) => {
+      this._savedRange = range;
+    });
+    this._urlInput.value = '';
+    this._widthInput.value = '560';
+    this._hintEl.textContent = '';
+    this._open();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Build dialog
+  // ---------------------------------------------------------------------------
+
+  _buildDialog() {
+    const overlay = createElement('div', {
+      class: 'an-dialog-overlay',
+      role: 'dialog',
+      'aria-modal': 'true',
+      'aria-label': 'Insert video',
+    });
+    const box = createElement('div', { class: 'an-dialog-box' });
+
+    const title = createElement('h3', { class: 'an-dialog-title' });
+    title.textContent = 'Insert Video';
+
+    // URL input
+    const urlLabel = createElement('label', { class: 'an-label' });
+    urlLabel.textContent = 'Video URL';
+    const urlInput = createElement('input', {
+      type: 'url',
+      class: 'an-input',
+      placeholder: 'YouTube, Vimeo, or direct .mp4 URL',
+      autocomplete: 'off',
+    });
+    this._urlInput = urlInput;
+
+    // Hint (detected source)
+    const hintEl = createElement('p', { class: 'an-dialog-hint' });
+    this._hintEl = hintEl;
+
+    // Width
+    const widthLabel = createElement('label', { class: 'an-label' });
+    widthLabel.textContent = 'Width (px)';
+    const widthInput = createElement('input', {
+      type: 'number',
+      class: 'an-input',
+      placeholder: '560',
+      min: '80',
+      max: '1920',
+      value: '560',
+    });
+    this._widthInput = widthInput;
+
+    // Buttons
+    const btnRow = createElement('div', { class: 'an-dialog-actions' });
+    const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
+    insertBtn.textContent = 'Insert';
+    const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
+    cancelBtn.textContent = 'Cancel';
+    btnRow.appendChild(insertBtn);
+    btnRow.appendChild(cancelBtn);
+
+    box.append(title, urlLabel, urlInput, hintEl, widthLabel, widthInput, btnRow);
+    overlay.appendChild(box);
+
+    // Live URL hint
+    const d0 = on(urlInput, 'input', () => {
+      const info = this._parseVideoUrl(urlInput.value.trim());
+      hintEl.textContent = info ? `Detected: ${info.type}` : (urlInput.value ? 'Unknown format — will try direct video embed' : '');
+    });
+
+    const d1 = on(insertBtn, 'click', () => this._onInsert());
+    const d2 = on(cancelBtn, 'click', () => this._close());
+    const d3 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
+    const d4 = on(urlInput, 'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    this._disposers.push(d0, d1, d2, d3, d4);
+
+    return overlay;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Actions
+  // ---------------------------------------------------------------------------
+
+  _onInsert() {
+    const rawUrl = this._urlInput.value.trim();
+    const width  = Math.max(80, parseInt(this._widthInput.value, 10) || 560);
+
+    if (!rawUrl) {
+      this._urlInput.focus();
+      return;
+    }
+
+    const html = this._buildEmbedHtml(rawUrl, width);
+    if (!html) {
+      this._hintEl.textContent = 'Invalid URL — please enter a valid video link.';
+      this._urlInput.focus();
+      return;
+    }
+
+    if (this._savedRange) this._savedRange.select();
+    this.context.invoke('editor.insertVideo', html);
+    this._close();
+  }
+
+  _open() {
+    if (this._dialog) {
+      this._dialog.style.display = 'flex';
+      this._removeTrap = trapFocus(this._dialog, () => this._close());
+      setTimeout(() => this._urlInput && this._urlInput.focus(), 50);
+    }
+  }
+
+  _close() {
+    if (this._dialog) this._dialog.style.display = 'none';
+    if (this._removeTrap) { this._removeTrap(); this._removeTrap = null; }
+    this._savedRange = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // URL parsing & HTML building
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Parses a video URL and returns { type, embedUrl } or null.
+   * @param {string} url
+   * @returns {{ type: string, embedUrl: string }|null}
+   */
+  _parseVideoUrl(url) {
+    if (!url) return null;
+
+    // Validate — block javascript: and other dangerous protocols
+    try {
+      const parsed = new URL(url);
+      if (/^javascript:/i.test(parsed.protocol) || /^vbscript:/i.test(parsed.protocol)) return null;
+    } catch { return null; }
+
+    // YouTube watch: https://www.youtube.com/watch?v=ID
+    const ytWatch = url.match(/(?:youtube\.com\/watch\?(?:.*&)?v=|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/);
+    if (ytWatch) return { type: 'YouTube', embedUrl: `https://www.youtube.com/embed/${ytWatch[1]}` };
+
+    // YouTube short: https://youtu.be/ID
+    const ytShort = url.match(/youtu\.be\/([a-zA-Z0-9_-]{11})/);
+    if (ytShort) return { type: 'YouTube', embedUrl: `https://www.youtube.com/embed/${ytShort[1]}` };
+
+    // YouTube Shorts: https://www.youtube.com/shorts/ID
+    const ytShorts = url.match(/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/);
+    if (ytShorts) return { type: 'YouTube Shorts', embedUrl: `https://www.youtube.com/embed/${ytShorts[1]}` };
+
+    // Vimeo: https://vimeo.com/ID
+    const vimeo = url.match(/vimeo\.com\/(\d+)/);
+    if (vimeo) return { type: 'Vimeo', embedUrl: `https://player.vimeo.com/video/${vimeo[1]}` };
+
+    // Direct video file
+    if (/\.(mp4|webm|ogg|ogv|mov)(#.*|\?.*)?$/i.test(url)) {
+      return { type: 'Direct video', embedUrl: url };
+    }
+
+    return null;
+  }
+
+  /**
+   * Builds the HTML string to insert.
+   * @param {string} url
+   * @param {number} width
+   * @returns {string|null}
+   */
+  _buildEmbedHtml(url, width) {
+    const info = this._parseVideoUrl(url);
+    const height = Math.round(width * 9 / 16); // 16:9
+
+    if (info && (info.type === 'YouTube' || info.type === 'YouTube Shorts' || info.type === 'Vimeo')) {
+      const iframeTitle = `${info.type} video player`;
+      return (
+        `<div class="an-video-wrapper" style="position:relative;display:inline-block;max-width:100%">` +
+        `<iframe src="${info.embedUrl}" width="${width}" height="${height}" ` +
+        `title="${iframeTitle}" ` +
+        `frameborder="0" allowfullscreen ` +
+        `allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ` +
+        `style="display:block;max-width:100%"></iframe>` +
+        `<div class="an-video-shield"></div>` +
+        `</div>`
+      );
+    }
+
+    if (info && info.type === 'Direct video') {
+      const src = info.embedUrl.replace(/"/g, '%22');
+      return (
+        `<div class="an-video-wrapper" style="position:relative;display:inline-block;max-width:100%">` +
+        `<video src="${src}" width="${width}" height="${height}" controls ` +
+        `style="display:block;max-width:100%"></video>` +
+        `<div class="an-video-shield"></div>` +
+        `</div>`
+      );
+    }
+
+    // Unknown URL — let the user try as a direct video
+    const safeSrc = (() => {
+      try {
+        const p = new URL(url);
+        if (/^javascript:/i.test(p.protocol) || /^vbscript:/i.test(p.protocol)) return null;
+        return url;
+      } catch { return null; }
+    })();
+    if (!safeSrc) return null;
+
+    const escapedSrc = safeSrc.replace(/"/g, '%22');
+    return (
+      `<div class="an-video-wrapper" style="position:relative;display:inline-block;max-width:100%">` +
+      `<video src="${escapedSrc}" width="${width}" height="${height}" controls ` +
+      `style="display:block;max-width:100%"></video>` +
+      `<div class="an-video-shield"></div>` +
+      `</div>`
+    );
+  }
+}

package/src/js/module/VideoResizer.js

@@ -0,0 +1,227 @@
+// VideoResizer.js - Interactive resize handles for selected videos in the editor
+// Targets .an-video-wrapper divs (containing <iframe> or <video>)
+import { on } from '../core/dom.js';
+
+const HANDLE_DEFS = [
+  { pos: 'nw', cursor: 'nw-resize' },
+  { pos: 'n',  cursor: 'n-resize'  },
+  { pos: 'ne', cursor: 'ne-resize' },
+  { pos: 'e',  cursor: 'e-resize'  },
+  { pos: 'se', cursor: 'se-resize' },
+  { pos: 's',  cursor: 's-resize'  },
+  { pos: 'sw', cursor: 'sw-resize' },
+  { pos: 'w',  cursor: 'w-resize'  },
+];
+
+export class VideoResizer {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    /** @type {HTMLElement|null} — the .an-video-wrapper div */
+    this._activeWrapper = null;
+    this._overlay = null;
+    this._disposers = [];
+  }
+
+  initialize() {
+    this._overlay = this._buildOverlay();
+    document.body.appendChild(this._overlay);
+
+    const editable = this.context.layoutInfo.editable;
+
+    this._disposers.push(
+      on(editable, 'click', (e) => this._onEditorClick(e)),
+      on(editable, 'contextmenu', (e) => {
+        const wrapper = this._findWrapper(e.target);
+        if (wrapper) this._select(wrapper);
+      }),
+      on(document, 'click', (e) => this._onDocClick(e)),
+      on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+      on(window, 'resize', () => this._updateOverlayPosition()),
+      on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+    );
+
+    return this;
+  }
+
+  destroy() {
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    if (this._dragDisposers) {
+      this._dragDisposers.forEach((d) => d());
+      this._dragDisposers = null;
+    }
+    this._deselect();
+    if (this._overlay && this._overlay.parentNode) {
+      this._overlay.parentNode.removeChild(this._overlay);
+    }
+    this._overlay = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  /** @returns {HTMLElement|null} */
+  getActiveWrapper() {
+    return this._activeWrapper;
+  }
+
+  updateOverlay() {
+    this._updateOverlayPosition();
+  }
+
+  deselect() {
+    this._deselect();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Internal
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Walk up the DOM from `el` to find the nearest .an-video-wrapper,
+   * or an iframe/video whose parent is .an-video-wrapper.
+   * @param {EventTarget} el
+   * @returns {HTMLElement|null}
+   */
+  _findWrapper(el) {
+    if (!el || !(el instanceof Element)) return null;
+    // Direct hit on wrapper
+    if (el.classList && el.classList.contains('an-video-wrapper')) return el;
+    // Child element (iframe, video, or nested)
+    const w = el.closest('.an-video-wrapper');
+    if (w) return w;
+    return null;
+  }
+
+  _buildOverlay() {
+    const overlay = document.createElement('div');
+    overlay.className = 'an-video-resizer';
+    overlay.style.display = 'none';
+
+    HANDLE_DEFS.forEach(({ pos }) => {
+      const h = document.createElement('div');
+      h.className = `an-resize-handle an-resize-${pos}`;
+      h.dataset.handle = pos;
+      this._disposers.push(
+        on(h, 'mousedown', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this._startResize(e, pos);
+        }),
+      );
+      overlay.appendChild(h);
+    });
+
+    return overlay;
+  }
+
+  _onEditorClick(e) {
+    const wrapper = this._findWrapper(e.target);
+    if (wrapper) {
+      e.preventDefault();
+      this._select(wrapper);
+    }
+  }
+
+  _onDocClick(e) {
+    if (!this._activeWrapper) return;
+    if (this._activeWrapper.contains(e.target)) return;
+    if (this._overlay && this._overlay.contains(e.target)) return;
+    if (e.target.closest('.an-contextmenu')) return;
+    this._deselect();
+  }
+
+  _select(wrapper) {
+    if (this._activeWrapper && this._activeWrapper !== wrapper) {
+      this._activeWrapper.classList.remove('an-video-selected');
+    }
+    this._activeWrapper = wrapper;
+    wrapper.classList.add('an-video-selected');
+    this._updateOverlayPosition();
+    this._overlay.style.display = 'block';
+  }
+
+  _deselect() {
+    if (this._activeWrapper) {
+      this._activeWrapper.classList.remove('an-video-selected');
+      this._activeWrapper = null;
+    }
+    if (this._overlay) this._overlay.style.display = 'none';
+  }
+
+  _updateOverlayPosition() {
+    if (!this._activeWrapper || !this._overlay) return;
+    const rect = this._activeWrapper.getBoundingClientRect();
+    this._overlay.style.left   = `${rect.left}px`;
+    this._overlay.style.top    = `${rect.top}px`;
+    this._overlay.style.width  = `${rect.width}px`;
+    this._overlay.style.height = `${rect.height}px`;
+  }
+
+  _startResize(e, pos) {
+    const wrapper = this._activeWrapper;
+    if (!wrapper) return;
+
+    const embed = wrapper.querySelector('iframe, video');
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startW = wrapper.offsetWidth  || 560;
+    const startH = wrapper.offsetHeight || 315;
+    const aspectRatio = startW / (startH || 1);
+    const isCorner = pos.length === 2;
+
+    const editable = this.context.layoutInfo.editable;
+    const onMove = (me) => {
+      const dx = me.clientX - startX;
+      const dy = me.clientY - startY;
+      const maxW = editable.clientWidth || Infinity;
+      let newW = startW;
+      let newH = startH;
+
+      if (pos.includes('e')) newW = Math.max(80, startW + dx);
+      if (pos.includes('w')) newW = Math.max(80, startW - dx);
+      if (pos.includes('s')) newH = Math.max(45, startH + dy);
+      if (pos.includes('n')) newH = Math.max(45, startH - dy);
+
+      // Clamp to container width
+      newW = Math.min(newW, maxW);
+
+      if (isCorner) {
+        if (Math.abs(dx) >= Math.abs(dy)) {
+          newH = Math.max(45, Math.round(newW / aspectRatio));
+        } else {
+          newW = Math.min(Math.max(80, Math.round(newH * aspectRatio)), maxW);
+          newH = Math.max(45, Math.round(newW / aspectRatio));
+        }
+      }
+
+      // Resize both the wrapper and the inner embed element
+      wrapper.style.width  = `${newW}px`;
+      wrapper.style.height = `${newH}px`;
+      if (embed) {
+        embed.width  = newW;
+        embed.height = newH;
+        embed.style.width  = `${newW}px`;
+        embed.style.height = `${newH}px`;
+      }
+      this._updateOverlayPosition();
+    };
+
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      this._dragDisposers = null;
+      this.context.invoke('editor.afterCommand');
+    };
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    // Track these so destroy() can clean them up if called during an active drag
+    this._dragDisposers = [
+      () => document.removeEventListener('mousemove', onMove),
+      () => document.removeEventListener('mouseup', onUp),
+    ];
+  }
+}