@bycrux/editor 0.12.0 → 1.0.1

package/src/video/panels/__tests__/LeftPanelTabs.test.tsx

@@ -0,0 +1,189 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import LeftPanelTabs, { type LeftPanelTab } from '../LeftPanelTabs'
+
+beforeEach(() => window.localStorage.clear())
+afterEach(cleanup)
+
+function makeTabs(): LeftPanelTab[] {
+  return [
+    { id: 'media', icon: <span>M</span>, label: 'Media', content: <div data-testid="media-content">Media panel</div> },
+    { id: 'captions', icon: <span>C</span>, label: 'Captions', content: <div data-testid="captions-content">Captions panel</div> },
+    { id: 'versions', icon: <span>V</span>, label: 'Versions', content: <div data-testid="versions-content">Versions panel</div> },
+  ]
+}
+
+describe('LeftPanelTabs', () => {
+  it('renders one tab per entry, with its label text', () => {
+    render(<LeftPanelTabs tabs={makeTabs()} />)
+    const tabs = screen.getAllByRole('tab')
+    expect(tabs).toHaveLength(3)
+    expect(screen.getByText('Media')).toBeTruthy()
+    expect(screen.getByText('Captions')).toBeTruthy()
+    expect(screen.getByText('Versions')).toBeTruthy()
+  })
+
+  it('shows the default tab content and does not mount a non-default tab until first activation', () => {
+    render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="captions" />)
+    expect(screen.getByTestId('captions-content')).toBeTruthy()
+    expect(screen.queryByTestId('media-content')).toBeNull()
+    expect(screen.queryByTestId('versions-content')).toBeNull()
+  })
+
+  it('clicking a tab shows its content and hides the previous one', () => {
+    render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="captions" />)
+    fireEvent.click(screen.getByRole('tab', { name: 'Media' }))
+
+    const mediaPanel = screen.getByTestId('media-content').closest('[role="tabpanel"]') as HTMLElement
+    const captionsPanel = screen.getByTestId('captions-content').closest('[role="tabpanel"]') as HTMLElement
+    expect(mediaPanel.hidden).toBe(false)
+    expect(captionsPanel.hidden).toBe(true)
+  })
+
+  it('keeps a tab mounted after switching away from it (state survives a tab switch)', () => {
+    render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="captions" />)
+    fireEvent.click(screen.getByRole('tab', { name: 'Media' }))
+    // Switch back to captions.
+    fireEvent.click(screen.getByRole('tab', { name: 'Captions' }))
+
+    // Media was mounted when activated; it should still be in the DOM, just hidden.
+    const mediaContent = screen.getByTestId('media-content')
+    expect(mediaContent).toBeTruthy()
+    const mediaPanel = mediaContent.closest('[role="tabpanel"]') as HTMLElement
+    expect(mediaPanel.hidden).toBe(true)
+  })
+
+  it('persists the active tab to localStorage under the default key, and restores it on a fresh render', () => {
+    const { unmount } = render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="captions" />)
+    fireEvent.click(screen.getByRole('tab', { name: 'Media' }))
+    expect(window.localStorage.getItem('montaj.editor.leftPanelTab')).toBe(JSON.stringify('media'))
+    unmount()
+
+    render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="captions" />)
+    expect(screen.getByTestId('media-content')).toBeTruthy()
+    expect(screen.queryByTestId('captions-content')).toBeNull()
+  })
+
+  it('falls back to defaultTabId when the persisted value is not a string', () => {
+    // The other half of `revive`'s guard: a stored value of the wrong TYPE
+    // (an older key format, a hand-edited entry) must degrade to the default
+    // rather than being handed through as an active tab id.
+    window.localStorage.setItem('montaj.editor.leftPanelTab', JSON.stringify(3))
+    render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="versions" />)
+    expect(screen.getByTestId('versions-content')).toBeTruthy()
+  })
+
+  it('hides an inactive panel with inline display:none, not just the hidden attribute', () => {
+    // `hidden` alone is a UA-stylesheet `display: none`, which loses to the
+    // panel wrapper's own `flex` utility class. The inline style is the line
+    // actually doing the hiding, so it gets its own assertion.
+    render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="captions" />)
+    fireEvent.click(screen.getByRole('tab', { name: 'Media' }))
+
+    const captionsPanel = screen.getByTestId('captions-content').closest('[role="tabpanel"]') as HTMLElement
+    expect(captionsPanel.hidden).toBe(true)
+    expect(captionsPanel.style.display).toBe('none')
+  })
+
+  it('falls back to defaultTabId when the persisted id is stale/unknown', () => {
+    window.localStorage.setItem('montaj.editor.leftPanelTab', JSON.stringify('some-removed-tab'))
+    render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="versions" />)
+    expect(screen.getByTestId('versions-content')).toBeTruthy()
+    expect(screen.queryByTestId('media-content')).toBeNull()
+    expect(screen.queryByTestId('captions-content')).toBeNull()
+  })
+
+  it('falls back to tabs[0] when defaultTabId is absent', () => {
+    render(<LeftPanelTabs tabs={makeTabs()} />)
+    expect(screen.getByTestId('media-content')).toBeTruthy()
+  })
+
+  it('has aria-selected true on exactly one tab, wired via aria-labelledby/aria-controls', () => {
+    render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="captions" />)
+    const tabs = screen.getAllByRole('tab')
+    const selected = tabs.filter(t => t.getAttribute('aria-selected') === 'true')
+    expect(selected).toHaveLength(1)
+    expect(selected[0].textContent).toContain('Captions')
+
+    const panel = screen.getByRole('tabpanel')
+    expect(panel.getAttribute('aria-labelledby')).toBe(selected[0].id)
+    expect(selected[0].getAttribute('aria-controls')).toBe(panel.id)
+  })
+
+  it('supports an empty tabs array without crashing', () => {
+    render(<LeftPanelTabs tabs={[]} />)
+    expect(screen.queryAllByRole('tab')).toHaveLength(0)
+    expect(screen.queryAllByRole('tabpanel')).toHaveLength(0)
+  })
+
+  describe('keyboard navigation on the rail', () => {
+    it('ArrowDown moves to the next tab and wraps at the end', () => {
+      render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="media" />)
+      const media = screen.getByRole('tab', { name: 'Media' })
+      media.focus()
+
+      fireEvent.keyDown(media, { key: 'ArrowDown' })
+      expect(screen.getByTestId('captions-content')).toBeTruthy()
+      expect(document.activeElement).toBe(screen.getByRole('tab', { name: 'Captions' }))
+
+      fireEvent.keyDown(screen.getByRole('tab', { name: 'Captions' }), { key: 'ArrowDown' })
+      expect(screen.getByTestId('versions-content')).toBeTruthy()
+
+      // Wraps from the last tab back to the first.
+      fireEvent.keyDown(screen.getByRole('tab', { name: 'Versions' }), { key: 'ArrowDown' })
+      expect(document.activeElement).toBe(screen.getByRole('tab', { name: 'Media' }))
+    })
+
+    it('Home and End jump to the first and last tab', () => {
+      render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="captions" />)
+      const captions = screen.getByRole('tab', { name: 'Captions' })
+
+      fireEvent.keyDown(captions, { key: 'End' })
+      expect(document.activeElement).toBe(screen.getByRole('tab', { name: 'Versions' }))
+
+      fireEvent.keyDown(screen.getByRole('tab', { name: 'Versions' }), { key: 'Home' })
+      expect(document.activeElement).toBe(screen.getByRole('tab', { name: 'Media' }))
+    })
+  })
+
+  describe('host-driven activationRequest', () => {
+    const shown = (tabId: string) =>
+      !(screen.getByTestId(`${tabId}-content`).closest('[role="tabpanel"]') as HTMLElement).hidden
+
+    it('nonce 0 never forces a tab — the persisted/default preference wins on mount', () => {
+      render(<LeftPanelTabs tabs={makeTabs()} defaultTabId="media" activationRequest={{ id: 'captions', nonce: 0 }} />)
+      expect(screen.getByTestId('media-content')).toBeTruthy()
+      expect(screen.queryByTestId('captions-content')).toBeNull()
+    })
+
+    it('a positive nonce switches the panel to the requested tab (and mounts it)', () => {
+      const { rerender } = render(
+        <LeftPanelTabs tabs={makeTabs()} defaultTabId="media" activationRequest={{ id: 'captions', nonce: 0 }} />,
+      )
+      expect(screen.getByTestId('media-content')).toBeTruthy()
+      rerender(<LeftPanelTabs tabs={makeTabs()} defaultTabId="media" activationRequest={{ id: 'captions', nonce: 1 }} />)
+      expect(shown('captions')).toBe(true)
+    })
+
+    it('re-switches on a fresh nonce even for the same target after the user navigated away (per-event, not per-value)', () => {
+      const { rerender } = render(
+        <LeftPanelTabs tabs={makeTabs()} defaultTabId="media" activationRequest={{ id: 'captions', nonce: 1 }} />,
+      )
+      expect(shown('captions')).toBe(true)
+      // User manually clicks away.
+      fireEvent.click(screen.getByRole('tab', { name: 'Versions' }))
+      expect(shown('versions')).toBe(true)
+      // Selecting a caption again bumps the nonce to the SAME id → back to captions.
+      rerender(<LeftPanelTabs tabs={makeTabs()} defaultTabId="media" activationRequest={{ id: 'captions', nonce: 2 }} />)
+      expect(shown('captions')).toBe(true)
+    })
+
+    it('ignores an activation for an id that is not a real tab (no crash, no blank pane)', () => {
+      const { rerender } = render(
+        <LeftPanelTabs tabs={makeTabs()} defaultTabId="media" activationRequest={{ id: 'ghost', nonce: 0 }} />,
+      )
+      rerender(<LeftPanelTabs tabs={makeTabs()} defaultTabId="media" activationRequest={{ id: 'ghost', nonce: 1 }} />)
+      expect(shown('media')).toBe(true)
+    })
+  })
+})

package/src/video/panels/__tests__/OverlayContentPanel.test.tsx

@@ -0,0 +1,222 @@
+/// <reference types="vitest/globals" />
+import { render, screen, fireEvent, cleanup, waitFor } from '@testing-library/react'
+import type { VisualItem } from '../../../schema'
+import OverlayContentPanel from '../OverlayContentPanel'
+
+afterEach(cleanup)
+
+function overlayItem(props: Record<string, unknown>): VisualItem {
+  return { id: 'overlay-1', type: 'overlay', src: 'scoreboard.jsx', start: 0, end: 4, props }
+}
+
+function renderPanel(
+  props: Record<string, unknown>,
+  extra: { fileUrl?: (p: string) => string; uploadFile?: (f: File) => Promise<string> } = {},
+) {
+  const onPreview = vi.fn()
+  const onCommit = vi.fn()
+  const utils = render(
+    <OverlayContentPanel
+      item={overlayItem(props)}
+      onPreview={onPreview}
+      onCommit={onCommit}
+      {...extra}
+    />,
+  )
+  return { ...utils, onPreview, onCommit }
+}
+
+describe('OverlayContentPanel — fields inferred from item.props', () => {
+  it('renders one control per primitive prop, in the kind its value implies', () => {
+    renderPanel({
+      homeName: 'Colombia',        // text
+      homeScore: 2,                // number
+      accent: '#FCD116',           // color (hex)
+      badge: 'assets/crest.png',   // image (path)
+      showClock: true,             // boolean
+    })
+
+    expect((screen.getByLabelText('homeName') as HTMLTextAreaElement).tagName).toBe('TEXTAREA')
+    expect((screen.getByLabelText('homeScore') as HTMLInputElement).type).toBe('number')
+    expect((screen.getByLabelText('accent') as HTMLInputElement).type).toBe('color')
+    expect((screen.getByLabelText('showClock') as HTMLInputElement).type).toBe('checkbox')
+    // The image field with no `uploadFile` degrades to an editable path box.
+    expect((screen.getByLabelText('badge') as HTMLInputElement).type).toBe('text')
+  })
+
+  it('skips non-primitive props but carries them through every write untouched', () => {
+    const { onPreview } = renderPanel({
+      homeName: 'Colombia',
+      players: [{ n: 1 }],
+      meta: { round: 'final' },
+    })
+
+    // Not shown: `inferOverlayPropFields` only surfaces primitives.
+    expect(screen.queryByLabelText('players')).toBeNull()
+    expect(screen.queryByLabelText('meta')).toBeNull()
+
+    fireEvent.change(screen.getByLabelText('homeName'), { target: { value: 'Argentina' } })
+    // The whole props record is spread on the way out, so the skipped values
+    // ride through rather than being dropped by the edit.
+    expect(onPreview).toHaveBeenLastCalledWith({
+      homeName: 'Argentina',
+      players: [{ n: 1 }],
+      meta: { round: 'final' },
+    })
+  })
+
+  it('shows the empty state for an overlay whose props yield no editable fields', () => {
+    renderPanel({ players: [{ n: 1 }], meta: null })
+    expect(screen.getByText('This overlay has no editable content.')).toBeTruthy()
+  })
+
+  it('shows the empty state for no selection at all', () => {
+    render(<OverlayContentPanel item={null} onPreview={vi.fn()} onCommit={vi.fn()} />)
+    expect(screen.getByText('Select an overlay to edit its content.')).toBeTruthy()
+  })
+})
+
+// ── The commit model: preview per change, commit on blur ────────────────────
+// The dialog this panel replaces had a Save button; a panel has no such moment,
+// so a typing gesture is closed by the field's blur and that is what becomes
+// one undo step. These pin BOTH halves: that an in-progress edit previews
+// without committing, and that the blur commits exactly once.
+describe('OverlayContentPanel — preview then commit on blur', () => {
+  it('a text edit previews per keystroke and commits once on blur', () => {
+    const { onPreview, onCommit } = renderPanel({ homeName: 'Colombia' })
+    const field = screen.getByLabelText('homeName')
+
+    fireEvent.change(field, { target: { value: 'Arg' } })
+    fireEvent.change(field, { target: { value: 'Argentina' } })
+    expect(onPreview).toHaveBeenCalledTimes(2)
+    expect(onPreview).toHaveBeenLastCalledWith({ homeName: 'Argentina' })
+    // Still uncommitted — this is the whole point of the transient path.
+    expect(onCommit).not.toHaveBeenCalled()
+
+    fireEvent.blur(field)
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('a number edit previews as a NUMBER and commits on blur', () => {
+    const { onPreview, onCommit } = renderPanel({ homeScore: 2 })
+    const field = screen.getByLabelText('homeScore')
+
+    fireEvent.change(field, { target: { value: '3' } })
+    expect(onPreview).toHaveBeenLastCalledWith({ homeScore: 3 })
+    fireEvent.blur(field)
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('a half-typed number is not previewed over the value being replaced', () => {
+    const { onPreview } = renderPanel({ homeScore: 2 })
+    const field = screen.getByLabelText('homeScore')
+
+    // Clearing the box is mid-typing, not "set it to zero" — the dialog this
+    // replaces coerced '' to 0 and snapped the field back.
+    fireEvent.change(field, { target: { value: '' } })
+    expect(onPreview).not.toHaveBeenCalled()
+    expect((field as HTMLInputElement).value).toBe('')
+
+    fireEvent.change(field, { target: { value: '12' } })
+    expect(onPreview).toHaveBeenLastCalledWith({ homeScore: 12 })
+  })
+
+  it('a blur on an untouched field does not spend a commit', () => {
+    const { onPreview, onCommit } = renderPanel({ homeName: 'Colombia' })
+    fireEvent.blur(screen.getByLabelText('homeName'))
+    expect(onPreview).not.toHaveBeenCalled()
+    // `onCommit` reaches sync.commit(), which enqueues a save whether or not a
+    // gesture happened — so an untouched blur has to be filtered out here.
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('a color pick previews live and commits when the picker closes', () => {
+    const { onPreview, onCommit } = renderPanel({ accent: '#FCD116' })
+    const swatch = screen.getByLabelText('accent')
+
+    fireEvent.change(swatch, { target: { value: '#003893' } })
+    expect(onPreview).toHaveBeenLastCalledWith({ accent: '#003893' })
+    expect(onCommit).not.toHaveBeenCalled()
+
+    fireEvent.blur(swatch)
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('a boolean toggle previews and commits back to back — there is no blur to wait for', () => {
+    const { onPreview, onCommit } = renderPanel({ showClock: false })
+    fireEvent.click(screen.getByLabelText('showClock'))
+    expect(onPreview).toHaveBeenLastCalledWith({ showClock: true })
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('OverlayContentPanel — image fields', () => {
+  it('resolves the thumbnail through fileUrl and swaps the prop to the uploaded path', async () => {
+    const uploadFile = vi.fn(async () => 'assets/uploaded.png')
+    const { onPreview, onCommit, container } = renderPanel(
+      { badge: 'assets/crest.png' },
+      { fileUrl: (p: string) => `/served/${p}`, uploadFile },
+    )
+
+    expect(container.querySelector('img')?.getAttribute('src')).toBe('/served/assets/crest.png')
+
+    const picker = screen.getByLabelText('badge') as HTMLInputElement
+    expect(picker.type).toBe('file')
+    fireEvent.change(picker, { target: { files: [new File(['x'], 'crest2.png', { type: 'image/png' })] } })
+
+    // A finished upload is discrete: preview + commit, no blur in between.
+    await waitFor(() => expect(onPreview).toHaveBeenLastCalledWith({ badge: 'assets/uploaded.png' }))
+    expect(uploadFile).toHaveBeenCalledTimes(1)
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('accepts a data: URL as an image prop', () => {
+    const tiny = 'data:image/png;base64,iVBORw0KGgo='
+    const { container } = renderPanel({ badge: tiny })
+    expect(container.querySelector('img')?.getAttribute('src')).toBe(tiny)
+  })
+
+  it('degrades to an editable path field when the host cannot upload', () => {
+    const { onPreview, onCommit } = renderPanel({ badge: 'assets/crest.png' })
+    const field = screen.getByLabelText('badge')
+
+    fireEvent.change(field, { target: { value: 'assets/other.png' } })
+    expect(onPreview).toHaveBeenLastCalledWith({ badge: 'assets/other.png' })
+    expect(onCommit).not.toHaveBeenCalled()
+
+    fireEvent.blur(field)
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('OverlayContentPanel — derived from the item, not stored', () => {
+  it('re-derives its fields when the selection changes to a different overlay', () => {
+    const onPreview = vi.fn()
+    const onCommit = vi.fn()
+    const { rerender } = render(
+      <OverlayContentPanel item={overlayItem({ homeName: 'Colombia' })} onPreview={onPreview} onCommit={onCommit} />,
+    )
+    expect(screen.getByLabelText('homeName')).toBeTruthy()
+
+    // A panel stays mounted while the operator clicks from overlay to overlay,
+    // so fields seeded once in a useState initializer (as the retired dialog
+    // did) would keep showing the PREVIOUS overlay's props.
+    rerender(
+      <OverlayContentPanel
+        item={{ ...overlayItem({ caption: 'Full time' }), id: 'overlay-2' }}
+        onPreview={onPreview}
+        onCommit={onCommit}
+      />,
+    )
+    expect(screen.queryByLabelText('homeName')).toBeNull()
+    expect(screen.getByLabelText('caption')).toBeTruthy()
+  })
+
+  it('draws no section header of its own — the tab strip above it already says "Content"', () => {
+    renderPanel({ homeName: 'Colombia' })
+    // A "CONTENT" header under a "Content" tab is the same word twice, and it
+    // made `getByText('Content')` ambiguous at the VideoEditor seam.
+    expect(screen.queryByText('Content')).toBeNull()
+    expect(screen.queryByRole('button', { expanded: true })).toBeNull()
+  })
+})

package/src/video/panels/__tests__/TabNav.test.tsx

@@ -0,0 +1,71 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import TabNav, { type TabNavTab } from '../TabNav'
+
+afterEach(cleanup)
+
+type Tab = 'content' | 'transform' | 'style'
+
+function makeTabs(): TabNavTab<Tab>[] {
+  return [
+    { value: 'content', label: 'Content' },
+    { value: 'transform', label: 'Transform' },
+    { value: 'style', label: 'Style' },
+  ]
+}
+
+describe('TabNav', () => {
+  it('renders one button per tab, with its label text', () => {
+    render(<TabNav tabs={makeTabs()} value="content" onChange={() => {}} ariaLabel="Test panel view" />)
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+    expect(screen.getByText('Content')).toBeTruthy()
+    expect(screen.getByText('Transform')).toBeTruthy()
+    expect(screen.getByText('Style')).toBeTruthy()
+  })
+
+  it('marks the active tab aria-pressed=true and the others aria-pressed=false', () => {
+    render(<TabNav tabs={makeTabs()} value="transform" onChange={() => {}} ariaLabel="Test panel view" />)
+    expect(screen.getByText('Content').getAttribute('aria-pressed')).toBe('false')
+    expect(screen.getByText('Transform').getAttribute('aria-pressed')).toBe('true')
+    expect(screen.getByText('Style').getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('calls onChange with the clicked tab value', () => {
+    const onChange = vi.fn()
+    render(<TabNav tabs={makeTabs()} value="content" onChange={onChange} ariaLabel="Test panel view" />)
+    fireEvent.click(screen.getByText('Style'))
+    expect(onChange).toHaveBeenCalledWith('style')
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('exposes the given ariaLabel on the group', () => {
+    render(<TabNav tabs={makeTabs()} value="content" onChange={() => {}} ariaLabel="Overlay panel view" />)
+    expect(screen.getByRole('group', { name: 'Overlay panel view' })).toBeTruthy()
+  })
+
+  it('renders no element with role="tab" or role="tablist"', () => {
+    // Pins the deliberate aria-pressed-not-role="tab" decision: a second
+    // tablist anywhere in the tree collides with the host's LEFT rail
+    // (LeftPanelTabs), which is a real role="tablist".
+    render(<TabNav tabs={makeTabs()} value="content" onChange={() => {}} ariaLabel="Test panel view" />)
+    expect(screen.queryAllByRole('tab')).toHaveLength(0)
+    expect(screen.queryAllByRole('tablist')).toHaveLength(0)
+  })
+
+  it('merges an extra className onto the wrapper alongside the base classes', () => {
+    render(
+      <TabNav
+        tabs={makeTabs()}
+        value="content"
+        onChange={() => {}}
+        ariaLabel="Test panel view"
+        className="shrink-0 border-b border-[var(--editor-border)]"
+      />,
+    )
+    const group = screen.getByRole('group', { name: 'Test panel view' })
+    expect(group.className).toContain('flex')
+    expect(group.className).toContain('items-center')
+    expect(group.className).toContain('shrink-0')
+    expect(group.className).toContain('border-b')
+  })
+})