Save energy if the video is a static image

[WesselKroos]

A video with a static image doesn't have to be drawn every video frame since nothing changes. For example music videos with a static image. This saves GPU and CPU usage.

Todo

1. Figure out the grid size
2. Get the first, middle and last storyboard
3. getImageData from storyboard images
4. Cut out the images
5. Compare images
6. Get timestamps from/till when the image is static
7. Suspend drawing when the currenttime is in range

Notes

Code that retrieves the storyboard image url data:

document.querySelector('ytd-player')
  .player_
  .getCurrentVideoConfig()
  .args.raw_player_response.storyboards.playerStoryboardSpecRenderer.spec
  .split('|')
  .map(i => i.split('#'))

This returns data can be transformed into storyboard image urls.

Example video: https://www.youtube.com/watch?v=iWjjQoMesDo

[
  [
      "https://i.ytimg.com/sb/iWjjQoMesDo/storyboard3_L$L/$N.jpg?sqp=-oaymwENSDfyq4qpAwVwAcABBqLzl_8DBgjOop2gBg=="
  ],
  [
      "48",
      "27",
      "100",
      "10",
      "10",
      "0",
      "default",
      "rs$AOn4CLAv0-yJjors91pk27gELcFZrOgUaQ"
  ],
  [
      "79",
      "45",
      "92",
      "10",
      "10",
      "2000",
      "M$M",
      "rs$AOn4CLAUreoqw93luY8kueYe7QvnT49P2Q"
  ],
  [
      "159",
      "90",
      "92",
      "5",
      "5",
      "2000",
      "M$M",
      "rs$AOn4CLCECCxIPIb3kS6cAEcd2wbVL2gO2Q"
  ]
]

The 2nd array data gets transformed into an url that contains all storyboard images in a low resolution: https://i.ytimg.com/sb/iWjjQoMesDo/storyboard3_L1/M0.jpg?sqp=-oaymwENSDfyq4qpAwVwAcABBqLzl_8DBgjOop2gBg==&sigh=rs%24AOn4CLAUreoqw93luY8kueYe7QvnT49P2Q

The 3th array data gets transformed into urls that contain 25 images at a time. (Can we derive this from the ,"5", "5", values?) This video has 4 urls ranging from M0.jpg to M3.jpg: https://i.ytimg.com/sb/iWjjQoMesDo/storyboard3_L2/M0.jpg?sqp=-oaymwENSDfyq4qpAwVwAcABBqLzl_8DBgjOop2gBg==&sigh=rs%24AOn4CLCECCxIPIb3kS6cAEcd2wbVL2gO2Q