Exploring the Netflix player with the Caffeine Chrome extension
With the latest version of the Caffeine Chrome extension, you can run Caffeine in a Chrome DevTools panel, with access to all the Chrome debugging APIs. I’ve been using it to explore the Netflix video player, for an app I’m writing that enables the viewer to edit narratives by rearranging scenes.
From a quick look at the DOM element tree for the player, it’s apparent that it’s a React app. By following a reference chain from a user interface element (like the skip-forward button), through the bound “this” object of its click-event listener, I found the internal React properties for all the player’s UI elements, and all the player functions they use (for example, for seeking forward in a video).
With those functions in hand, I made a Netflix player class in Smalltalk, which can manipulate the Netflix player React app interactively from Smalltalk code. Other objects I made representing show elements (like scenes, episodes, seasons, and series) can use my player to compile analytic information about shows, and present them in different ways. For example, you could watch an episode of Better Call Saul consisting only of scenes that include a certain character, or that take place at a certain location, or with flashbacks placed in chronological order. This is for a webapp I’m writing called Arc.
I’m eager to see what else you explore using the Caffeine extension in the DevTools!
thisContext 
22 September 2019 at 7:54 pm
I would love to see you do a video of working with caffeine. A screen recording would be invaluable.
LikeLike
22 September 2019 at 7:56 pm
Would it be possible for you to do a short video capture of how you are using caffeine? I think this would be hugely useful.
LikeLike
22 September 2019 at 8:06 pm
Sure!
LikeLiked by 1 person
22 September 2019 at 10:20 pm
A video really is an excellent idea IMHO. The toolchain you have created clearly has a ton of power, but at least for me, it is hard to wrap my brain around how to use it. Looking over you shoulder as utilize it would be most helpful.
LikeLike
23 September 2019 at 3:01 pm
Here you go… https://youtu.be/Z5xg2HRC6Jg
LikeLike
23 September 2019 at 4:59 pm
Craig,
Awesome work !!!
I have installed Caffeine in my Chrome (Windows 8 OS).
HTML devtools hang with:
HTMLSmalltalkClassesBrowser open.
HTMLSmalltalkWorkspace open.
If i debug it stop on VueComponent>>loadScript
I have to install VUE in my machine to run Caffeine ?
regards,
bruno
LikeLiked by 1 person
23 September 2019 at 5:45 pm
Thanks! I haven’t yet tested Vue support when running as a Chrome extension. I’ll look at that for the next extension release. I see that the Vue scripts aren’t loaded by the extension’s panel.html file, as they are in the normal version’s index.html file, and that the extension’s manifest doesn’t give permission to access the CDN site that hosts the Vue script files.
LikeLike
24 September 2019 at 3:58 pm
Thanks, that gave me a much better overview. And, just because users are never satisfied :-), would it be possible for you to do another quick video showing something like the following:
1. Navigate to Google news,
2. Grab the first headline,
3. Get the contents into Smalltalk.
Or any other equally simple example that catches you fancy.
Ultimately, what I would like to be able to do is to, for example, see an interesting table of data on wikipedia, fire up Caffeine and be able to – relatively easily – pull the data into an OrderedCollection for subsequent processing in Smalltalk.
I can see roughly how to do this, but a quick video (when you have time) on something this basic would be very helpful.
LikeLiked by 3 people