Lock Alert

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/lock-alert

UsageCopy Anchor Link

import {
  LockAlert,
  OfflineAlert,
  SessionLockAlert,
} from "@/components/lock-alert";

<LockAlert
  action={{ kind: "view-premium", url: premiumUrl, onClick: openExternal }}
  reason="Live captions are part of Videorc Premium."
/>

Locked means disabled with one reason. The alert leads the tab or section it locks, and every control under it is disabled. A Premium feature stays on screen behind the lock, never hidden: the locked page is what sells it.

Use it for a section a plan, an account, a running session or a reconnect turns off. Don't hide the locked controls, and don't offer more than one action. For a single disabled control, use Disabled Reason instead.

The actionCopy Anchor Link

Your app decides whether a lock has an action (is this a Premium gate? is anyone signed in?) and passes the resolved one. A limit or a turned-off feature locks with its reason alone.

• { kind: "sign-in", onClick } reads "Sign in" and calls onClick: start your app's sign-in there.
• { kind: "view-premium", url, onClick? } reads "View Premium". With onClick it's a button that calls onClick(url), so an Electron app can hand the link to the system browser. Without one it's a link that opens url in a new tab.

Either can bring its own words in label. The Premium sentence is always the same: {Feature} is part of Videorc Premium.

ExamplesCopy Anchor Link

Recording, live and reconnectingCopy Anchor Link

SessionLockAlert says the one wording for controls a running recording or livestream locks. Give it locks to name them, as a plural subject, when a page holds more than one kind of control. OfflineAlert is for controls that wait for the app to reconnect. Either takes a reason to replace its words.

ThemingCopy Anchor Link

It's an Alert with variant="locked".

AccessibilityCopy Anchor Link

It's a polite status, so a lock that appears (when a recording starts) is announced without interrupting. The action is a real button, or a real link when it only opens a page.

API referenceCopy Anchor Link

LockAlertCopy Anchor Link

Every Alert prop except variant, icon and children, plus:

SessionLockAlertCopy Anchor Link

OfflineAlertCopy Anchor Link

unlockActionLabel(action) is exported too. The wording itself, SESSION_LOCK_REASON, OFFLINE_LOCK_REASON and sessionLockReason(locks?), lives in @/lib/lock-reason, which comes with Lock Alert, so a toast, a tooltip or code that isn't UI can say the same words without importing a component.