jukebox7

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const p = await read($, player)
    const level = await read($, volume)
    const now = p.tracks[p.index]
    const { value: avatar } = await $.state.get(onDuty)
    const { value: onAir } = await $.state.get(onStation)
    const station = onAir !== undefined && onAir.artists.length > 0 ? onAir : undefined
    const isTerminal = e.surface === 'terminal'
    // The border and the play glyph take three columns on the terminal.
    const width = Math.max(10, (e.props.bodyColumns ?? 40) - (isTerminal ? 5 : 2))
    const title = now === undefined ? 'Nothing plays.' : now.title.length > width ? `${now.title.slice(0, width - 1)}…` : now.title
    const where = p.genre === null || p.genre === undefined ? `${p.index + 1}/${p.tracks.length}` : (GENRES.some(g => g.label === p.genre) ? p.genre : (onAir?.name || p.genre))

    // A list, not a fragment: the terminal lays a fragment out as a column of
    // its own, which stacked the controls one per row and cut off `u: vol+`.
    const controls = [
      <Button key="toggle" label={p.isPlaying ? 'pause' : 'play'} hotkey="p" plain onPress={() => void toggle($)} />,
      <Button key="next" label="next" hotkey="n" plain onPress={() => void once($, () => skip($, 1))} />,
      <Button key="similar" label="similar" hotkey="r" plain onPress={() => void once($, () => playSimilar($))} />,
      <Button key="stop" label="stop" hotkey="s" plain dimColor onPress={() => void stop($)} />,
      <Button key="quieter" label="vol−" hotkey="d" plain dimColor onPress={() => void louder($, -VOLUME_STEP)} />,
      <Button key="louder" label="vol+" hotkey="u" plain dimColor onPress={() => void louder($, VOLUME_STEP)} />,
    ]
    const stations = (
      <Box flexDirection="row" flexWrap="wrap" columnGap={2} backgroundColor={isTerminal ? BLACK : undefined}>
        {GENRES.map(g => (
          <Button key={g.label} label={g.label} hotkey={g.key} plain dimColor onPress={() => void once($, () => playGenre($, g.label))} />
        ))}
        {station !== undefined && avatar !== undefined && (
          <Button key="avatar" label={`${station.name}'s pick`} hotkey="a" plain onPress={() => void once($, () => playGenre($, avatar))} />
        )}
      </Box>
    )

    if (!isTerminal) {
      return (
        <Box flexDirection="column">
          <Text dimColor={now === undefined || !p.isPlaying}>{title}</Text>
          {now !== undefined && (
            <Box flexDirection="row" gap={2}>
              <Text dimColor>
                {p.isPlaying ? 'playing' : 'paused'} {where} · vol {level}%
              </Text>
              {controls}
            </Box>
          )}
          {stations}
        </Box>
      )
    }

    // The terminal: black, framed and lit in the color of the avatar on duty.
    const { value: color } = await $.state.get(tint)
    const accent = typeof color === 'string' && color !== '' ? color : PHOSPHOR
    const bar = progress(p, await $.clock.now(), now?.seconds ?? null)
    const rows = e.props.scroll?.bodyRows ?? 0
    // The frame, the title, the bar, the controls and the stations; the rain
    // takes what is left of the pane's height.
    // The controls and the stations wrap inside the frame (border and padding:
    // four columns); each row they take comes out of the rain.
    const inner = Math.max(10, (e.props.bodyColumns ?? 40) - 4)
    const controlRows = now === undefined ? 0 : buttonRows([p.isPlaying ? 'pause' : 'play', 'next', 'similar', 'stop', 'vol−', 'vol+'], inner)
    const stationRows = buttonRows(
      [...GENRES.map(g => g.label), ...(station !== undefined ? [`${station.name}'s pick`] : [])],
      inner,
    )
    // The frame's two borders, the title, the bar when something plays.
    const rainRows = Math.max(0, rows - 3 - (now === undefined ? 0 : 1) - controlRows - stationRows)
    const rainColumns = Math.max(0, (e.props.bodyColumns ?? 40) - 2)
    return (
      <Box flexDirection="column" width="100%" height={rows > 0 ? rows : undefined} backgroundColor={BLACK}>
        <Box flexDirection="column" borderStyle="round" borderColor={accent} backgroundColor={BLACK} paddingX={1}>
          <Text color={accent} backgroundColor={BLACK} dimColor={now === undefined || !p.isPlaying}>
            {now === undefined ? '■ ' : p.isPlaying ? '▶ ' : '❚❚ '}
            {title}
          </Text>
          {now !== undefined && (
            <Text backgroundColor={BLACK}>
              <Text color={accent}>{bar.done}</Text>
              <Text dimColor>{bar.left}</Text>
              <Text dimColor>{` ${bar.time}  ${where}  vol ${level}%`}</Text>
            </Text>
          )}
          {now !== undefined && (
            <Box flexDirection="row" flexWrap="wrap" columnGap={2} backgroundColor={BLACK}>
              {controls}
            </Box>
          )}
          {stations}
        </Box>
        <Box flexDirection="column" flexGrow={1} paddingX={1} backgroundColor={BLACK}>
          {rain(rainColumns, rainRows, frame).map((runs, r) => (
            <Text key={String(r)} backgroundColor={BLACK}>
              {runs.map((run, i) => (
                <Text key={String(i)} color={run.level === 2 ? '#e8fff4' : accent} dimColor={run.level === 1}>
                  {run.text}
                </Text>
              ))}
            </Text>
          ))}
        </Box>
      </Box>
    )
  })