Ranked Video Grid Creator Profile Block for React

Edit NETWORKS (a name, a two-letter mark, followers now and a month ago) and VIDEOS, made with video(id, title, kind, length, views, interactions, avg) where length and average watch time are in seconds. The followers in all, the change this month, the engagement rate and the hours watched are all worked out from those numbers, so nothing is typed twice. To use real thumbnails, replace Thumb with an img and object-cover.

Views is the typed count. Engagement is interactions divided by views, shown as a percentage. Watch time is views times the average seconds watched, divided by 3,600, shown as hours. A tie goes to the video that comes first in the list. The grid only re-ranks when you press a button, never under the pointer, and the polite line says what it is ranked by.

All of it: the figures are typed examples, nothing plays and nothing is fetched. In your own app load the networks and videos from your analytics and keep the same helpers, which only need a list and a metric. Say where the numbers come from and how old they are, as the header does for the sample.

The tiles show invented networks so the block names no real service. Each mark is two typed letters in a neutral tile with no logo and no brand colour; to name a real network, type its name and its own two letters, and add its logo only if you have the right to use it.

The three metric buttons are a named group that follows the arrow keys, the grid is an ordered list whose label says what it is ranked by, the drawn thumbnails are hidden from assistive technology, and a decrease in followers is a word and an arrow, not a tone. The status line is a polite live region present from the start. Titles and figures keep their reading order in a right-to-left page.

The four tiles sit two across, the thumbnails two across with the last cell filled quietly, and the metric buttons scroll sideways if they have to. Every card keeps the same height, so re-ranking never moves anything.