Family Plugins

Overview

The family plugins are official MP4E plugins designed together. Each one offers the same five themes and the same style settings, so picking the same theme on every family plugin in a video makes them look like one set. Every setting can still be changed per plugin.

Each family plugin is self-contained: installing one adds everything it needs to the video, and it reads nothing from the others. Each is one overlay covering the whole frame that places its own panels, so add it at full size and choose its layout in its settings rather than by resizing the overlay.

Product card and Info card can also be the card a tracked object opens (an object group's display). Opened that way they are not an overlay: the card is the whole display, with the family's themes and style settings.

Themes

Every theme's text meets WCAG AA contrast on its panels over any video, bright or dark. Themes use fonts that ship with Apple, Windows and Android devices, so nothing is downloaded.

Common settings

Every family plugin has these settings, in the Style group of its overlay settings in the Studio. Colours are #rgb, #rrggbb, #rrggbbaa, rgb() or rgba(); anything else is ignored and the theme's own colour stays. Like any plugin setting, a value can be a {{variable}}.

// Chapters overlay config
{ "theme": "cinematic", "accent": "#d4a24c", "size": "large" }

// Steps overlay config in the same video
{ "theme": "cinematic", "accent": "#d4a24c", "size": "large", "position": "right" }

Sizes

Family plugins are laid out on a 1920-pixel-wide frame and scale with the displayed video, so a panel takes the same share of the picture on every screen. Sizes are set like TV graphics: body text is about 30 pixels of that frame and buttons are at least 76 pixels tall. The size setting multiplies everything on top: ×1, ×1.25 or ×1.5.

Minimum readable size

On a small player the whole frame shrinks with the video, so a family plugin never renders below half its full-HD size. The size it uses is:

max(size, 0.5 ÷ (displayed long side of the video ÷ 1920))

The floor only matters on players smaller than 960 pixels. Body text, roughly, measured on screen:

Spacing, buttons, corners and shadows grow with the text, so proportions hold. Panels never grow past the frame: when the content is longer they scroll inside.

On phones

• On a player under 640 pixels wide, Chapters' start and end cards and its chapters panel become sheets across the bottom of the frame, and the chapters list scrolls around the chapter being watched.
• On a phone-sized player, Steps' side panel leaves out the times and detail lines, and its bottom row shows each step on one line.
• On a phone-sized player, Info card's card and Moments' pop-up span the width of the frame, and the Moments list becomes a sheet above the controls.
• On a phone-sized player, Quiz's card spans the frame and its answers go two by two.
• On a phone-sized player, Product card's card becomes one row across the frame (at the top for the side positions, at the bottom for the corners), and Call to action's line under the text keeps to one line.
• Panels and cards keep at least 76 screen pixels clear above the bottom of the video, where the player's controls bar sits, at every player size.

Keyboard and TV remotes

• The arrow keys (or a remote's or gamepad's d-pad) move between the items of an open panel or card.
• Enter or OK picks the focused item.
• Escape, Backspace, a remote's Back key or a gamepad's B button closes the panel or gives the frame back to the video.
• A focus ring in the accent colour shows which item is focused whenever focus moves by key.

A plugin follows keys pressed on the player only while one of its panels is open, so the player's own shortcuts keep working the rest of the time.

The viewer's preferences

Family plugins follow the viewer preferences set in the player and on the device:

• Reduced motion (in the player, or the device's reduce-motion setting) caps motion at Reduced: fades only, no movement.
• High contrast makes panels opaque, gives muted text the full text colour and draws real borders.

Chapters (Cuts)

Cuts (mp4e:cuts) is the family's Chapters plugin. It has every common setting above, and its own settings, events and actions are unchanged. Its theme also accepts five more values, each shown as one of the family themes:

Its own look settings:

When a common setting and one of these say different things, the common setting wins: accent over accentColor, font over fontFamily. The one exception is animation: 'none', an off switch that always wins.

/* Chapters: an accent edge on the start card */
.cuts-card--entry {
  border-left: calc(8px * var(--fam-k)) solid var(--fam-accent);
}

An overlay saved with one of the older theme values above keeps the look it had before the family: textColor and surface apply only once a family theme is chosen.

Chapters only

Cuts can be just a chapter list, with no shorter cuts to choose. Turn off the Full choice and leave the cut list empty, and point chapters.fullGroupId at the scene group whose scenes are the chapters. The settings menu then shows a Chapters entry and no Length submenu, and the panel lists that group's scenes, with their summaries, and follows the playhead.

{
  "offerFull": false,
  "cutGroupIds": [],
  "chapters.enabled": true,
  "chapters.fullGroupId": "scenegroup_chapters",
  "entryCard.enabled": false,
  "endCard.enabled": false,
  "menu.enabled": true,
  "theme": "studio"
}

The panel always lists the active cut's scenes while a cut is playing, and the chapters.fullGroupId group otherwise, whatever offerFull says.

Search

Search (mp4e:search) has every common setting above. Its theme also accepts the same five older values as Chapters, shown the same way, and its size accepts the older compact and regular, both shown as normal. Its older accentColor and fontFamily work as they do on Chapters. On a player under 640 pixels wide its panel becomes a sheet across the bottom of the frame.