Video player in Joyn

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.

Scripts and modules

Let’s open any TV series and see what scripts are in Network panel of DevTools. There are scripts which are loaded from static.t1p-vod-playout-prod.aws.route71.net:

• ad-tracker.min.js tracks ad events based on your advertising playback.
• playback-source-fetcher.min.js requests https://static.t1p-vod-playout-prod.aws.route71.net/playback-source-fetcher/config/psf.json with server config:

• player-heartbeat-producer.min.js sends 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 (ad-tracker, ad-source-fetcher, playback-monitoring and player-heartbeat-producer), external scripts (e.g. iam from ioam.de), etc.
• playback-monitoring.min.js, similar to player-heartbeat-producer.min.js, sends POST request method https://<hash>.cws.conviva.com/0/wsg periodically with important information about the playback for Conviva video analytics:

Obfuscation

I mentioned 5 files separately on purpose, as the structure of the files is different:

If you look for {"name": in 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:

1. Code readability (better understanding)
2. Easy debugging (you can use Charles, replace scripts and get better stack trace of loading and errors)