Joyn (previously 7TV) is German “Netflix” which has films, TV series and live TV
Did you hear anything about code obfuscation? Let’s have a look at Joyn video player and how they use that in production.
Let’s open any TV series and see what scripts are in Network panel of DevTools. There are scripts which are loaded from
ad-tracker.min.jstracks ad events based on your advertising playback.
playback-source-fetcher.min.jsrequests https://static.t1p-vod-playout-prod.aws.route71.net/playback-source-fetcher/config/psf.json with server config:
player-heartbeat-producer.min.jssends POST requests https://heartbeats.prd.data.s.joyn.de/beat every 10 watched seconds with important information about the playback:
player-toolkit-loader.min.js– a simple loader which downloads players based on the player type (DASH, HLS, Tizen, WebOS and WebMAF), other scripts which are listed here (
player-heartbeat-producer), external scripts (e.g.
playback-monitoring.min.js, similar to
player-heartbeat-producer.min.js, sends POST request method
https://<hash>.cws.conviva.com/0/wsgperiodically with important information about the playback for Conviva video analytics:
I mentioned 5 files separately on purpose, as the structure of the files is different:
If you look for
playback-source-fetcher.min.js, you will find the entire
package.json (caution: the file has almost 10K lines)
In dev dependencies you will find confusion — the library for code obfuscation. To analyse code better, I’ve written simple deobfuscation (opposite to obfuscation) library, which finds the array at the end of the file and places every string where it’s used. The source code is available at deconfusion
For instance, there are 2 small files in comparison after and before obfuscation:
So it really helps for:
- Code readability (better understanding)
- Easy debugging (you can use Charles, replace scripts and get better stack trace of loading and errors)