Live Island

Usage

import { LiveIsland } from '@wdzyi/ui';

<LiveIsland
  activity={
    call.answeredAt
      ? { kind: 'call', name: call.name, since: call.answeredAt, onEnd: hangUp }
      : { kind: 'call', name: call.name, onAnswer: answer, onDecline: decline }
  }
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

activityLiveIslandActivity = { kind: 'idle' }

What’s live: idle, a timer with its label and endsAt, a call with a name and, once answered, since, an upload with its progress, or what’s playing with its title, artist and two colours for the cover.

expandedboolean

Open, when you hold it. Leave it out and the island holds its own, closing whenever the activity changes.

onExpand(expanded: boolean) => void

Called with the new state when the island is pressed.

timestring = '9:41'

The time at the top of the screen.

classNamestring

Added to its root. It’s 360px wide at most, and the island never comes closer than 12px to the screen’s sides.

Notes

• Its width and height ride one spring, sampled into a linear() easing that takes 630ms and goes 6% past, with a cubic-bezier where linear() isn’t supported. What’s on it leaves in 150ms into a 6px blur, and the next comes in over 300ms, 110ms later, so the swap lands as the shape does.
• A timer counts down to endsAt and a call counts up from since, on the second. Ringing, a call is 72px tall with Answer and Decline; answered, it shrinks to its running time, with a voice moving beside it. The time and icons at the top step aside for anything wide, and wait for it to shrink before they come back.
• The island is black in either theme, as the hardware is, and inside it the colours are always the dark theme’s, so its type, its avatar and the call’s pink and green all read on it. In a dark theme a faint ring keeps its edge.
• Pressing the island opens a timer, a call, an upload or a song, and pressing again closes it. It’s a button with aria-expanded, and screen readers hear each activity as it starts rather than every second.
• With reduced motion, it changes size at once and its contents fade.