Skip to main content
View as Markdown

Profiles Feed (alpha)

Introduction

The profiles feed returns the list of user profiles associated with an authenticated account, formatted as an Applicaster feed. Apps use it to render a profile picker screen ("Who's watching?").

Feed Response

The feed returns a top-level object with a title and an entry array. Each entry represents one user profile.

{
"title": "Who's watching?",
"entry": [
{
"id": "abc123",
"title": "John",
"type": {
"value": "profile"
},
"media_group": [
{
"type": "image",
"media_item": [
{
"src": "https://example.com/avatars/avatar1.png",
"key": "image_base"
}
]
}
],
"extensions": {
"tap_actions": {
"actions": [
{
"type": "sessionStorageSet",
"options": {
"content": {
"user_account": {
"profile_selected": true,
"profile": "abc123",
"profile_name": "John",
"profile_image": "https://example.com/avatars/avatar1.png"
},
"quick-brick-login-flow": {
"profile_id": "<profile-specific-token>"
}
}
}
},
{
"type": "finishHook",
"options": {
"success": true
}
}
]
},
"master": 1,
"token": "<profile-specific-token>",
"email": "john@example.com"
}
},
{
"id": "def456",
"title": "Sarah",
"type": {
"value": "profile"
},
"media_group": [
{
"type": "image",
"media_item": [
{
"src": "https://example.com/avatars/avatar2.png",
"key": "image_base"
}
]
}
],
"extensions": {
"tap_actions": {
"actions": [
{
"type": "sessionStorageSet",
"options": {
"content": {
"user_account": {
"profile_selected": true,
"profile": "def456",
"profile_name": "Sarah",
"profile_image": "https://example.com/avatars/avatar2.png"
},
"quick-brick-login-flow": {
"profile_id": "<profile-specific-token>"
}
}
}
},
{
"type": "finishHook",
"options": {
"success": true
}
}
]
},
"master": 0,
"token": "<profile-specific-token>"
}
}
]
}

When a user selects a profile, the actions in tap_actions.actions fire in sequence. The example above shows the common pattern, but additional action types can be included — for example sendCloudEvent to notify a server of the profile selection.

See the Actions and Behaviors Reference for available actions, options, and examples.

Profile Storage Keys and sessionStorageSet

For sessionStorageSet, the content object can carry any keys needed by your app under the relevant namespaces:

user_account is the recommended namespace for user- and profile-specific data. Every key in the user_account namespace is automatically cleared on logout across both local storage and session storage. Using user_account ensures that when a user logs out, active profile states, names, and avatar URLs are wiped cleanly without stale data persisting into subsequent sessions.

Common user_account storage keys configured upon profile selection:

  • user_account.profile — The unique profile ID for context keys.
  • user_account.profile_name — The selected profile's display name. Used downstream by plugins such as the Profile Avatar navigation item to generate initials.
  • user_account.profile_image — The selected profile's avatar image URL.

The quick-brick-login-flow Namespace

The quick-brick-login-flow namespace supports authentication and session-level tokens, such as:

  • profile_id — the profile identifier or profile-specific token
  • profile_token — the profile-scoped authentication token
  • kids — a boolean indicating whether this is a kids profile
  • Any other profile attributes your screens need at runtime

The final action is typically finishHook with success: true, which signals the hook to proceed and grants access to the screen.

Profile Entry Fields

FieldTypeDescription
idstringUnique profile identifier
titlestringProfile display name
type.valuestring"profile"
media_group[0].media_item[0].srcstringAvatar image URL
extensions.tap_actionsobjectActions fired when the user selects this profile
extensions.masternumber1 if this is the primary (master) profile, 0 for all other profiles. Present on every entry.
extensions.tokenstringProfile-scoped authentication token. Treat this as sensitive — store it only in session storage, not persistent storage.
extensions.emailstringAccount email — only present on the master profile

Profile Avatars

The profile avatars feed returns the list of available avatar images that users can assign to a profile.

Use the entry id as the profileImage value when creating or updating a profile.

{
"id": "profile-avatars-<app-id>",
"title": "Profile Avatars",
"type": {
"value": "profile-avatars"
},
"entry": [
{
"id": "avatar1",
"title": "avatar1",
"type": {
"value": "avatar"
},
"media_group": [
{
"type": "image",
"media_item": [
{
"src": "https://example.com/avatars/avatar1.png",
"key": "image_base"
}
]
}
],
"extensions": {}
}
]
}
FieldTypeDescription
idstringAvatar name — use this as the profileImage value when updating a profile
titlestringAvatar display name
type.valuestring"avatar"
media_group[0].media_item[0].srcstringFull avatar image URL

Profile Avatar Navigation Item (quick-brick-nav-item-profile-avatar)

The Nav item profile avatar plugin (quick-brick-nav-item-profile-avatar) is a Quick Brick nav_item plugin (React Native) that renders an interactive profile avatar button in the navigation bar or top menu bar across mobile and TV (iOS, Android, tvOS, Android TV, Fire TV, Samsung Tizen, LG webOS, etc.).

It dynamically reflects the active user profile saved in storage by sessionStorageSet or login flows.

How It Works

The plugin branches based on the presence of a profile in storage:

flowchart TD
Start[Nav Item Render] --> GateCheck{Has Profile in Storage?<br/>User profile storage key}

GateCheck -- No / Logged Out --> VisCheck{Visibility Setting}
VisCheck -- hidden --> Hide[Render Nothing]
VisCheck -- displayed --> Placeholder[Render Placeholder Image<br/>Per focus/selected state on TV]

GateCheck -- Yes / Logged In --> DisplayTypeCheck{Display Type}
DisplayTypeCheck -- image --> ImgCheck{Storage Image URL?}
ImgCheck -- Present --> RenderImg[Render Profile Image]
ImgCheck -- Empty / Failed --> FallbackIcon[Render Fallback Avatar Icon]

DisplayTypeCheck -- initials / first_initial --> NameCheck{Storage Name?}
NameCheck -- Present --> RenderInitials[Render Initials / First Initial]
NameCheck -- Missing --> FallbackImg[Fall back to Image Mode]
  1. Signed-In State (Profile Present):

    • Gated by Storage: The plugin checks the configured User profile storage key (e.g. user_account.profile_selected or user_account.profile). If a value is present in storage, the user is considered signed in.
    • Display Types:
      • Image: Displays the avatar image from the URL in Avatar image storage key (e.g. user_account.profile_image). If empty or failing to load, it cascades to the configured fallback Avatar icon uploader, and then to a bundled default avatar.
      • Initials: Generates two-letter uppercase initials (e.g., "John Doe""JD") from the User name storage key (e.g. user_account.profile_name).
      • First initial: Generates a single-letter uppercase initial (e.g., "John""J") from the User name storage key.
      • Initials fallback: If the name key is empty or cannot produce initials, the plugin automatically falls back to image mode.
    • Styling:
      • Avatar Frame: Configurable corner radius (set to 100 for a circle), margin, padding, border size, and border color.
      • Initials Typography & Colors: Configurable text color, background color (accepts either a static color hex/rgba or a storage key resolved dynamically), font family per platform, font size, and letter spacing.
      • TV Focus & Selection: Border colors can be styled independently for default, focused, selected, and focused & selected states.
  2. Signed-Out State (No Profile):

    • Visibility:
      • Displayed (default): Shows a signed-out profile placeholder image (customizable for mobile and per TV focus/selected states).
      • Hidden: Renders nothing while there is no active profile.
  3. Navigation & Interaction:

    • Tapping on mobile or pressing the remote selection key on TV opens the configured Target screen (such as the profile switcher or account screen) and closes the navigation drawer/menu.
    • Fully integrated with TV focus engines (Focusable, D-pad navigation, top menu bar host integration).

Because the application clears every key under user_account on logout, configure the plugin's storage keys in Studio using the user_account namespace:

Plugin SettingRecommended Storage KeyDescription
User profile storage keyuser_account.profile_selected or user_account.profileKey whose presence signals that a profile is selected (gates signed-in vs signed-out mode)
Avatar image storage keyuser_account.profile_imageKey holding the profile's avatar photo URL (for Image display type)
User name storage keyuser_account.profile_nameKey holding the user/profile display name (used to generate initials)

Studio Configuration Reference

General

  • User profile storage key: Storage key in namespace.key format (e.g., user_account.profile_selected).
  • Placement (TV only): Left, Center, or Right section of the TV top menu bar.

Data

  • Target screen: The target screen opened when the avatar button is pressed.

Logged Out State

  • Visibility: Displayed or Hidden.
  • Profile image: Default placeholder image displayed when logged out.
  • TV per-state placeholder images (TV only): Profile image (focused), Profile image (selected), Profile image (focused & selected).

Logged In State

  • Display type: Image, First initial, or Initials.
  • Avatar image storage key: Storage key containing the avatar URL (shown when display type is Image).
  • User name storage key: Storage key containing the user name (shown when display type is First initial or Initials).
  • Avatar icon: Fallback image when no avatar image URL is found.
  • Avatar geometry: Corner radius (100 for circle), margin (top/right/bottom/left), padding (top/right/bottom/left), border size, and border color.
  • TV border colors (TV only): Focused border color, Selected border color, Focused & selected border color.
  • Initials styling (shown when display type is initials):
    • Background color (hex/rgba literal or storage key)
    • Text color
    • Platform-specific font family selector (iOS, Android, tvOS, Android TV, Samsung/Web TV, LG, Roku)
    • Platform-specific font size and letter spacing

Localizations

  • Accessibility profile avatar label: Screen reader label (default: "{profileName} profile", where {profileName} is interpolated from the user's name).
  • Accessibility profile avatar hint: Screen reader hint (default: "Click to open profile options").