cc-shorts

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    if (e.surface !== 'terminal') {
      const { Text } = $.ui.resolve(e)
      return <Text dimColor>Run Claude Code in a terminal to play Shorts.</Text>
    }
    const { Box, Text, Button, Image, Raster } = $.ui.resolve(e)
    const s = await read($, shorts)
    // The draw is the first to see the keyboard come or go (the person's
    // ctrl+x tab, a click, Esc); the switch runs on after it returns. Idle is
    // a pane closing (`shutDown`), whose last draws still hold the keyboard.
    void holdKeys($, e.props.isFocused && s.status !== 'idle')
    layout = videoBox(e.props.bodyColumns, e.props.scroll.bodyRows)
    const short = s.shorts[s.queue[s.cur] ?? '']
    const f = s.frame
    const hasPicture = f !== undefined && (s.status === 'playing' || s.status === 'paused')

    let picture
    if (hasPicture && s.mode === 'raster') {
      picture = (
        <Raster key={VIDEO} columns={f.columns} rows={f.rows} cells={lastCells ?? blankCells(f.columns, f.rows)} />
      )
    } else if (hasPicture) {
      const source = lastSource ?? { file: f.file, format: 'rgb' as const, width: f.width, height: f.height }
      picture = <Image key={VIDEO} source={source} columns={f.columns} rows={f.rows} alt={short?.title || ' '} />
    } else {
      picture = (
        <Box width={layout.columns} height={layout.rows} alignItems="center" justifyContent="center">
          <Text dimColor wrap="wrap">
            {s.message || 'Run /shorts to start'}
          </Text>
        </Box>
      )
    }

    const isLiked = short !== undefined && hasLike(s, short.id)
    const where = `${clockTime(s.pos)} / ${clockTime(short?.duration ?? 0)}`
    const state = s.status === 'paused' ? `⏸ ${where}` : s.status === 'playing' ? `▶ ${where}` : ''
    const notes = [
      state,
      isLiked ? 'Liked' : '',
      s.muted ? 'Muted' : '',
      s.isLoggedIn ? '' : 'Signed out: /shorts browser to switch',
    ]
      .filter(Boolean)
      .join(' · ')
    // Each key in a cell as wide as the widest, so the two rows' columns line
    // up and a label that changes (Pause to Play) moves nothing.
    const cell = (key: string, hotkey: string, label: string, onPress: () => void) => (
      <Box width={KEY_COLUMNS}>
        <Button key={key} plain hotkey={hotkey} label={label} onPress={onPress} />
      </Box>
    )

    return (
      <Box flexDirection="column" alignItems="center">
        {picture}
        {short ? (
          <Box height={1} overflow="hidden">
            <Button
              key="author"
              plain
              label={`${short.author || 'YouTube'} ↗`}
              onPress={() => void openInBrowser($, short.id)}
            />
          </Box>
        ) : (
          <Text> </Text>
        )}
        {/* Two rows whatever the title's length, so the buttons stay put. */}
        <Box height={2} overflow="hidden">
          <Text wrap="wrap">{short?.title ?? ' '}</Text>
        </Box>
        <Text dimColor wrap="truncate">
          {notes || ' '}
        </Text>
        {/* Two rows of four: eight in one row outgrow the 50 columns asked for. */}
        <Box flexDirection="row" columnGap={KEY_GAP} flexWrap="wrap">
          {cell('next', 'j', 'Next', () => void skip($, 1))}
          {cell('previous', 'k', 'Prev', () => void skip($, -1))}
          {cell('pause', 'p', s.status === 'paused' ? 'Play' : 'Pause', () => void togglePause($))}
          {cell('replay', 'r', 'Replay', () => void skip($, 0))}
        </Box>
        <Box flexDirection="row" columnGap={KEY_GAP} flexWrap="wrap">
          {cell('like', 'l', isLiked ? 'Unlike' : 'Like', () => void toggleLike($))}
          {cell('mute', 'm', s.muted ? 'Unmute' : 'Mute', () => void toggleMute($))}
          {cell('open', 'o', 'Open ↗', () => void (short && openInBrowser($, short.id)))}
          {cell('close', 'x', 'Close', () => void shutDown($).then(() => $.ui.close({ id: PANE })))}
        </Box>
      </Box>
    )
  })