@bycrux/editor 0.11.2 → 1.0.1

package/src/video/preview/__tests__/SocialSafeZoneOverlay.test.tsx

@@ -0,0 +1,165 @@
+/// <reference types="vitest/globals" />
+/**
+ * SocialSafeZoneOverlay is a preview-only viewing aid (see the file-level
+ * doc comment on the component) — these tests cover exactly what the spec
+ * calls out: the chrome renders for a recognized platform, renders nothing
+ * for an absent/unrecognized one, stays pointer-events-none throughout, and
+ * scales off a measured container size rather than a fixed pixel value.
+ *
+ * jsdom does no layout, so ResizeObserver never fires on its own — each test
+ * installs a controllable stub (mirrors the pattern in
+ * `src/video/__tests__/captionPositioning.test.tsx`) that reports a size the
+ * test chooses, and can re-fire with a different size mid-test.
+ */
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, cleanup, act } from '@testing-library/react'
+import SocialSafeZoneOverlay from '../SocialSafeZoneOverlay'
+
+afterEach(() => {
+  cleanup()
+})
+
+/** Installs a ResizeObserver stub that reports `initial` the moment
+ *  `observe()` is called, and returns a `fire` helper to report a different
+ *  size later — e.g. simulating a pane drag or fullscreen toggle. */
+function installResizeObserver(initial: { width: number; height: number }) {
+  let cb: ((entries: { contentRect: { width: number; height: number } }[]) => void) | null = null
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    constructor(callback: typeof cb) { cb = callback }
+    observe() { cb?.([{ contentRect: initial }]) }
+    unobserve() {}
+    disconnect() {}
+  }
+  return { fire: (width: number, height: number) => cb?.([{ contentRect: { width, height } }]) }
+}
+
+describe('SocialSafeZoneOverlay — activation', () => {
+  it('renders nothing when no platform is given', () => {
+    installResizeObserver({ width: 1080, height: 1920 })
+    const { container } = render(<SocialSafeZoneOverlay />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders nothing for an unrecognized platform', () => {
+    installResizeObserver({ width: 1080, height: 1920 })
+    const { container } = render(<SocialSafeZoneOverlay platform="reels" />)
+    expect(container.firstChild).toBeNull()
+  })
+})
+
+describe('SocialSafeZoneOverlay — TikTok chrome', () => {
+  it('renders the status bar, nav row, engagement rail and bottom-left credit block', () => {
+    installResizeObserver({ width: 1080, height: 1920 })
+    const { getByText, getAllByText } = render(<SocialSafeZoneOverlay platform="tiktok" />)
+
+    // Status bar
+    expect(getByText('9:41')).toBeTruthy()
+
+    // Nav row — For You is the active tab
+    expect(getByText('Following')).toBeTruthy()
+    expect(getByText('For You')).toBeTruthy()
+
+    // Right rail — one avatar + four counted actions, each labeled 2.8M
+    expect(getAllByText('2.8M')).toHaveLength(4)
+
+    // Bottom-left credit block
+    expect(getByText('@Your name')).toBeTruthy()
+    expect(getByText('Here are some descriptions about videos')).toBeTruthy()
+    expect(getByText('Music name')).toBeTruthy()
+
+    // Bottom app nav
+    expect(getByText('Home')).toBeTruthy()
+    expect(getByText('Profile')).toBeTruthy()
+  })
+})
+
+describe('SocialSafeZoneOverlay — YouTube Shorts chrome', () => {
+  it('renders its distinguishing chrome: channel row and Subscribe pill', () => {
+    installResizeObserver({ width: 1080, height: 1920 })
+    const { getByText, getAllByText } = render(<SocialSafeZoneOverlay platform="youtube" />)
+
+    expect(getByText('9:41')).toBeTruthy()
+    expect(getByText('@channel')).toBeTruthy()
+    expect(getByText('Subscribe')).toBeTruthy()
+    // Right rail — thumbs-up and comments are both counted; thumbs-down,
+    // share, remix and the sound thumbnail are icon-only (no count).
+    expect(getAllByText('2.8M')).toHaveLength(2)
+
+    // Bottom app nav
+    expect(getByText('Home')).toBeTruthy()
+    expect(getByText('Subscriptions')).toBeTruthy()
+  })
+})
+
+describe('SocialSafeZoneOverlay — Instagram Reels chrome', () => {
+  it('renders its distinguishing chrome: the Reels title and a Follow pill', () => {
+    installResizeObserver({ width: 1080, height: 1920 })
+    const { getByText, getAllByText } = render(<SocialSafeZoneOverlay platform="instagram" />)
+
+    expect(getByText('9:41')).toBeTruthy()
+    expect(getByText('Reels')).toBeTruthy()
+    expect(getByText('Follow')).toBeTruthy()
+    expect(getByText('Your name')).toBeTruthy()
+    // Right rail — likes, comments, reshare and send are each counted 2.8M.
+    expect(getAllByText('2.8M')).toHaveLength(4)
+    // Immersive reel view also draws the add-comment bar.
+    expect(getByText('Add comment...')).toBeTruthy()
+  })
+})
+
+describe('SocialSafeZoneOverlay — copy style', () => {
+  it('never uses an em dash, on any platform', () => {
+    installResizeObserver({ width: 1080, height: 1920 })
+    for (const platform of ['tiktok', 'youtube', 'instagram'] as const) {
+      const { getByTestId, unmount } = render(<SocialSafeZoneOverlay platform={platform} />)
+      expect(getByTestId('social-safe-zone-overlay').textContent).not.toContain('—')
+      unmount()
+    }
+  })
+})
+
+describe('SocialSafeZoneOverlay — never steals a click', () => {
+  it('the root layer is pointer-events-none, on every platform', () => {
+    installResizeObserver({ width: 1080, height: 1920 })
+    for (const platform of ['tiktok', 'youtube', 'instagram'] as const) {
+      const { getByTestId, unmount } = render(<SocialSafeZoneOverlay platform={platform} />)
+      const root = getByTestId('social-safe-zone-overlay')
+      expect(root.className).toContain('pointer-events-none')
+      unmount()
+    }
+  })
+})
+
+describe('SocialSafeZoneOverlay — scales with its container, not a fixed pixel size', () => {
+  it('a container matching the 1080×1920 design canvas scales 1:1', () => {
+    installResizeObserver({ width: 1080, height: 1920 })
+    const { getByTestId } = render(<SocialSafeZoneOverlay platform="tiktok" />)
+    expect(getByTestId('social-safe-zone-canvas').style.transform).toContain('scale(1)')
+  })
+
+  it('a half-size container halves the scale, proportionally, not to a fixed px value', () => {
+    const ro = installResizeObserver({ width: 1080, height: 1920 })
+    const { getByTestId } = render(<SocialSafeZoneOverlay platform="tiktok" />)
+    const canvas = getByTestId('social-safe-zone-canvas')
+    expect(canvas.style.transform).toContain('scale(1)')
+
+    act(() => { ro.fire(540, 960) })
+    expect(canvas.style.transform).toContain('scale(0.5)')
+  })
+
+  it('a landscape (non-vertical) container contain-fits instead of overflowing', () => {
+    // 16:9 landscape box: the design canvas is scaled by the SMALLER of the
+    // two axis ratios (height-bound here) so the whole 1080×1920 chrome
+    // stays inside the box on both axes rather than spilling past its
+    // narrower dimension — the "does not break or overflow" degrade for a
+    // non-vertical preview.
+    installResizeObserver({ width: 1920, height: 1080 })
+    const { getByTestId } = render(<SocialSafeZoneOverlay platform="tiktok" />)
+    const canvas = getByTestId('social-safe-zone-canvas')
+    const expectedScale = Math.min(1920 / 1080, 1080 / 1920)
+    expect(canvas.style.transform).toContain(`scale(${expectedScale})`)
+
+    const root = getByTestId('social-safe-zone-overlay')
+    expect(root.className).toContain('overflow-hidden')
+  })
+})

package/src/video/preview/__tests__/captionDragState.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, afterEach, beforeEach } from 'vitest'
 import {
   CAPTION_DRAG_SLOP_PX,
   CAPTION_MAX_SCALE,
@@ -6,6 +6,7 @@ import {
   captionDragGeometry,
   captionDragPatch,
   hasEscapedClickSlop,
+  measureCaptionContentRect,
   readCaptionGeometry,
   screenDeltaToFramePercent,
   type CaptionDragState,
@@ -166,3 +167,121 @@ describe('captionDragPatch', () => {
       .toEqual({ scale: 2 })
   })
 })
+
+// ── measureCaptionContentRect ───────────────────────────────────────────────
+//
+// Captions have lanes, so a template can paint several captions at once. The
+// selection box must wrap ONE of them, which is what the `segmentId` argument
+// is for. These cover the scoping and — just as important — the fallback that
+// keeps a template with no `data-caption-id` behaving exactly as it did before
+// lanes existed.
+
+/** Client rect with the fields the measurer reads. jsdom does no layout. */
+function fixedRect(left: number, top: number, right: number, bottom: number): DOMRect {
+  return {
+    left, top, right, bottom,
+    width: right - left, height: bottom - top,
+    x: left, y: top,
+    toJSON: () => ({}),
+  } as DOMRect
+}
+
+// Where each caption's text "paints", keyed by the text itself. Two boxes far
+// apart on the frame, so a measurement that accidentally unions them is
+// obvious rather than off by a few pixels.
+const BOXES: Record<string, [left: number, top: number, right: number, bottom: number]> = {
+  bottom: [100, 1700, 300, 1750],  // lane 0 — low on the frame
+  top:    [400, 200,  900, 280],   // lane 1 — high on the frame
+}
+const BOTTOM_RECT = { left: 100, top: 1700, width: 200, height: 50 }
+const TOP_RECT    = { left: 400, top: 200,  width: 500, height: 80 }
+// What an unscoped walk sees: the union of both, spanning most of the frame.
+const UNION_RECT  = { left: 100, top: 200,  width: 800, height: 1550 }
+
+beforeEach(() => {
+  // jsdom has no Range.prototype.getBoundingClientRect at all (and Element's
+  // returns zeros), so feed the walk a rect table keyed by the text node it is
+  // measuring. Assigned directly — vi.spyOn needs a pre-existing method.
+  Range.prototype.getBoundingClientRect = function (this: Range): DOMRect {
+    const text = this.startContainer.nodeValue?.trim() ?? ''
+    const box = BOXES[text]
+    return box ? fixedRect(box[0], box[1], box[2], box[3]) : fixedRect(0, 0, 0, 0)
+  }
+})
+
+afterEach(() => {
+  delete (Range.prototype as { getBoundingClientRect?: unknown }).getBoundingClientRect
+})
+
+function mount(html: string): HTMLElement {
+  const root = document.createElement('div')
+  root.innerHTML = html
+  return root
+}
+
+/** Two marked caption subtrees — what the templates render for two lanes. */
+const TWO_LANES =
+  '<div data-caption-id="cap-bottom"><div><span>bottom</span></div></div>' +
+  '<div data-caption-id="cap-top"><div><span>top</span></div></div>'
+
+/** One caption from a template that predates `data-caption-id`. */
+const UNMARKED = '<div><div><span>bottom</span></div></div>'
+
+describe('measureCaptionContentRect — scoping to one caption', () => {
+  it('measures only the requested subtree when two are marked', () => {
+    const root = mount(TWO_LANES)
+    expect(measureCaptionContentRect(root, 'cap-top')).toEqual(TOP_RECT)
+    expect(measureCaptionContentRect(root, 'cap-bottom')).toEqual(BOTTOM_RECT)
+  })
+
+  it('unions everything under the root when no segment is named', () => {
+    // The pre-lane behaviour, kept for callers that have no target in mind.
+    expect(measureCaptionContentRect(mount(TWO_LANES))).toEqual(UNION_RECT)
+  })
+
+  it('finds a marker nested below the root, not just a direct child', () => {
+    const root = mount(`<div class="wrapper">${TWO_LANES}</div>`)
+    expect(measureCaptionContentRect(root, 'cap-top')).toEqual(TOP_RECT)
+  })
+})
+
+describe('measureCaptionContentRect — fallback when the marker is absent', () => {
+  it('falls back to the whole root for a template that emits no marker', () => {
+    // Today's numbers, unchanged: a host-supplied or pre-lane template must
+    // keep its selection box rather than losing it.
+    expect(measureCaptionContentRect(mount(UNMARKED), 'cap-0')).toEqual(BOTTOM_RECT)
+  })
+
+  it('falls back to the whole root when the named segment is not the one on screen', () => {
+    expect(measureCaptionContentRect(mount(TWO_LANES), 'cap-nonexistent')).toEqual(UNION_RECT)
+  })
+
+  it('an id containing selector metacharacters cannot throw — it just misses and falls back', () => {
+    // project.json is hand-editable, so the lookup compares attributes rather
+    // than building a `[data-caption-id="…"]` selector that a quote would break.
+    expect(() => measureCaptionContentRect(mount(TWO_LANES), 'cap"]:not(*)')).not.toThrow()
+    expect(measureCaptionContentRect(mount(TWO_LANES), 'cap"]:not(*)')).toEqual(UNION_RECT)
+  })
+})
+
+describe('measureCaptionContentRect — nothing painted', () => {
+  it('returns null for an empty subtree, so the caller hides the box', () => {
+    expect(measureCaptionContentRect(mount(''))).toBeNull()
+    expect(measureCaptionContentRect(mount('<div data-caption-id="cap-0"></div>'), 'cap-0')).toBeNull()
+  })
+
+  it('ignores whitespace-only text nodes', () => {
+    expect(measureCaptionContentRect(mount('<div data-caption-id="cap-0">   </div>'), 'cap-0')).toBeNull()
+  })
+
+  it('returns null for the requested caption even while the OTHER one is painting', () => {
+    // `pop` renders no word between two word windows; the box must disappear
+    // for that caption rather than snapping onto its neighbour.
+    const root = mount(
+      '<div data-caption-id="cap-bottom"><div><span>bottom</span></div></div>' +
+      '<div data-caption-id="cap-top"></div>',
+    )
+    expect(measureCaptionContentRect(root, 'cap-top')).toBeNull()
+    expect(measureCaptionContentRect(root, 'cap-bottom')).toEqual(BOTTOM_RECT)
+  })
+})