Watch customization with metadata

Watch Customization with Metadata

A new feature in the Watch configuration allows advanced appearance customization using a JSON object defined in the Configuration tab of the Watch settings.

Note

Watch customization with metadata doesn't work in Internal watches and in the Preview mode.

Overview

This feature introduces metadata-driven customization, giving users more control over the visual design of Watch components. The JSON object used for customization is composed of two main blocks:

Metadata Elements Collections
- Defines reusable design tokens such as icons, colors, color presets, and text styles.
Watch Modules and Components
- Describes how individual Watch components are styled using the defined metadata elements.

1. Metadata Elements

Each metadata element has a unique name that is referenced by the module/component configuration. While most elements support multiple properties, only those differing from default values need to be defined in the JSON object.

Icons

A collection of SVG icons, each containing a single path.
Icons are named and defined using the d attribute.

Example:

"icons": { 
  "download": { "d": "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M17 13l-5 5-5-5h3V9h4v4z" }, 
  "share": { "d": "M14 9V5l7 7-7 7v-4.1c-5 0-8.5 1.6-11 5.1 1-5 4-10 11-11" }
}

Colors

A collection of named color values.
Accepts standard formats like HEX (#rrggbb) and RGBA.

Example:

"colors": {
  "title": "#ff0000",
 "description": "magenta", 
  "border": "rgba(0, 255, 0, 0.8)" 
}

Color Presets

Used for more complex styling of components like buttons and chips.
Each preset includes variants for different UI states and contrast text.

Example:

"colorPresets": {
  "preset1": { 
     "dark": "#510db8", 
     "main": "#8e2fe7", 
     "light": "#c649f7", 
     "contrastText": "#fff" 
   }
}

Text Styles

Named text styles that override default typography settings such as font size, weight, and spacing.

Example:

"typographies": { 
  "customTitle": {
    fontFamily: string, 
     fontSize: number, 
     fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
     lineHeight: number, 
     letterSpacing: number
  }
}

Watch Modules and Component Customization

The Modules and Components section of the Watch configuration JSON allows for detailed customization of individual Watch pages and their core visual blocks. This structure enables granular styling based on module type and component function, using metadata elements defined earlier, so users can use colorPresets, icons or typographies defined in the metadata section in any of these module blocks. This ensures a consistent, brand-aligned look throughout the Watch interface.

Modules Overview

Customization is structured into two main levels:

common
- Applies global settings that affect all Watch pages, including:
  - Main Page
  - Channel Page
  - Search Results Page
  - Player Page
modules
- Applies settings to specific Watch pages or elements within those pages. Available modules include:
- channelList
  - Refers to the list of channels on the Main Page.
  - Supports customization by channel type:
    "STANDARD", "BACKGROUND", "INLINE", "VERTICAL", "INLINE_VERTICAL"
  - Alternatively, customization can be applied by channel identifier for targeted styling.
- playerOverview
  - Refers to the Player Page, which displays a single video with its player and metadata.
- search
  - Refers to the Search Results Page, where users interact with the video search interface.

Customizable Items in Modules

Each module supports customization of several UI elements. Below is a breakdown of customizable blocks and their purpose:

dateTimeFormat
- Defines how the video creation date and time should be displayed (e.g., "YYYY-MM-DD HH:mm").
search
- Controls the appearance of the search input at the top of the Watch.
- Customize placeholder text, font, color, and size.
chips
- Adjusts the visual style of chips used for filtering or tag display (e.g., shape, color presets, text styles).
videoActions
- Controls the appearance of the action buttons block, including:
  - Share, Download, Favorites
- Configure:
  - Visibility
  - Size
  - Color
  - Icon (via metadata-defined icons)
socialButtons
- Customizes buttons for social sharing and communication, including:
  - Facebook, Twitter, LinkedIn, WhatsApp, Email, Download, and Favorites
- Define their appearance, icon, size, and layout.
videoEngagement
- Adjusts the block showing engagement indicators, including:
  - Number of Views, Shares, Likes
- Also allows configuration of the Like button appearance.

Example 1 - icons customization

The following code defines an icon "view" and applies it to the icon of the number of view

{
  "icons": {
    "view": {
      "d": "M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25m6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8"
     }
  },
  "common": {
     "videoEngagement": {
     "view": {
       "icon": "view"
     }
   }
  }
}

Before:

After:

Example 2 - channel titles style customization

The following code defines colors "title", "specialChannelColor" and typography preset customBody2 and applies them to all channels of "STANDARD" type and the channel with identifier "12".

{
  "colors": {
    "title": "#ff0000",
    "specialChannelColor": "magenta"
  },
  "typographies": {
    "customBody2": {
      "fontSize": 32,
      "fontWeight": 600,
      "lineHeight": 1.3,
      "letterSpacing": 0
    }
  },
  "modules": {
    "channelList": {
      "channels": {
      "byType": {
        "STANDARD": {
          "title": {
            "fontFamily": "Oswald",
            "fontWeight": 600,
            "typography": "customBody2",
            "color": "colors.title"
         }
       }
      },
      "byId": {
          "26884": {
            "title": {
              "fontFamily": "Roboto",
              "color": "colors.specialChannelColor"
            }
          }
        }
      }
    }
  }
}

Before:

After:

Summary

This level of Watch customization enables precise visual control over how video content and interactive elements appear across all Watch pages. Using metadata-driven configuration, design changes can be applied globally or per-module, allowing flexibility for both uniform branding and page-specific personalization.