alt Hacker NewsShow HN: Reversing YouTube’s “Most Replayed” Graph
Hi HN,
I recently noticed a recurring visual artifact in the "Most Replayed" heatmap on the YouTube player. The highest peaks were always surrounded by two dips. I got curious about why they were there, so I decided to reverse engineer the feature to find out.
This post documents the deep dive. It starts with a system design recreation, reverse engineering the rendering code, and ends with the mathematics.
This is also my first attempt at writing an interactive article. I would love to hear your thoughts on the investigation and the format.
Comments
Great article! I've always wondered how youtube implemented it. Love the interactive canvases too. But maybe it's just me, the canvases look blurry?
Rendering bezier curves on the client side seems reasonable. Calculating ~400 points and rendering 100 curves would not impact performance, but I wonder if these little interactions would impact performance if added up.
About YouTube's comment about Gangnam Style, it wasn't a tweet. You can't find the original post because it was google+, which is dead. Google said it was a joke shortly afterwards: https://www.cnet.com/tech/services-and-software/gangnam-styl...
So it's a histogram of 100 bars, forced into a spline in SVG to make it look like it has more detail than it does.
Makes me want to write an extension to fix this annoying YouTube bug that's been around since Windows 10 came out:
https://issues.chromium.org/issues/40853564 (while Microsoft has filed it as a bug in Chromium, I hazard it is actually just a bug in the way YouTube handles events on their text fields)
> We are living in the era of the “Bouba” effect.
Is this an invented bit of humor ... or an existing usage applied to the prevalence of rounded corners we see (once again) in User Interfaces of today?
(The original term has nothing to do with web design or UI per se)
https://en.wikipedia.org/wiki/Bouba/kiki_effect
Edit: i see the article goes on to explain the term in context.
But I feel the sharp corners versus round corners is a design/fad cycle that will keep repeating.
We will see sharp corners once again in vogue within the next decade if not sooner.
It will start small with one or two players wanting to distinguish their offering from the crowd, and one of them seeing success, and others copying them slowly at first and then it catches on.
I found this article pretty interesting because ultimately it didn't cover a lot of ground, but instead examined the ground with a microscope. I was expecting it to be some really complex system youtube was using—and an even more complex attempt to r/e—but really it was mostly intuitive solutions. YET with that being said it was a really enjoyable read because of how in depth everything was covered. I think this article presents a very strong teaching tool, as the best lessons are taught with a strong motivating example to ground in. Kudos to the author. Reminds me a bit of Josh Comeau though arguably better in some regards.