Stan

I spent my last two years working for Stan who are the third largest streaming service in Australia behind Disney+ and Netflix. Here I had the pleasure of working as part of a tightly knit TV squad working on various customer facing features, tech improvements and codebase refactoring impacting millions of customers.

Achievements include the integration of live streaming across multiple TV platforms including, LG, Samsung, Hisense, PS5 & Xbox. Building enhanced UI flows such as End Of Play Trailer, re-writing the large monorepo, creating isolated classes to contain application logic along with updating legacy components and debugging tools via a custom built CLI.

Tech Stack

It was our aim at Stan to always build features from the ground up and not rely on unnecessary third party pacakges clogging the application and adding to the bundle size. Therefore a lot of our helpers were split into different pacakges such as App, UI, Device, Time, Player, History etc that each could easilly be initialized, they all come together to form our large scale monorepo.

Our tech included:

• Typescript
• Preact X
• Redux
• Linaria (runtime styled-components)
• Webpack 5
• Jest & Enzyme
• Cypress
• Shaka Player
• Kibana & Youbora
• ESLint & Stylelint
• TeamCity
• Suitest (Device debugging)

End Of Play Trailer

During product and UX research it was identified that customers were closing the application after they have finished watching a movie or series vs browsing the catalogue for something new. We therefore decided to introduce an end of play trailer upsell feature that allows Stan to display relevant content that a user may enjoy watching next.

Development was carried out by myself along with collaboration between product, backend, design and test team members. We opted for creating two seperate versions (animated and a non-animated) to support all platforms whilst providing a premium polished service to the newer OLED TVs and Playstation 5.

End of play was built primarily using native JavaScript as we had limited usage of React on the player side, the backend was driven by our Rest API written in Go. The feature was built with full error handling via Kibana and video monitoring analytics to track uptake and usage.

CSS was all custom written along with timings for the display of content and animations. The feature was initially released to 10% of users and then was fully integrated into the Stan TV platform and is used in production today. 🎉

Live Sport

One of the big transitions during my time at Stan was a shift from our traditional VOD streaming service to live sports with the announcement of Champions League & Wimbledon. This projected to increase Stan subscribers by vast ammounts and resulted in a great tech effort to get integration completed on time.

Some of the enhancements I worked on included:

• React UI additions (player badges, promos and feeds)
• Manifest changes to support live streaming
• Calculation of time values such as liveStartDate, liveEndDate, startDate
• Updating elements based on time including routing to live feeds
• Multi-tier overlays for adding the new 'sport' subscription to accounts
• Collaboration between video teams, billing and design
• TV testing, performance monitoring and analytics

Release Automation

Another feature I got the opportunity to work on was the introduction of release automation within the Stan team. This was something raised as a pain point for tech teams and especcially within the TV team as we deployed the most platforms on a daily basis.

The problem was that in order to release we had to manually bump version numbers, manually trigger deploys, automatically send release notification emails along with drag all the tickets across the Jira board (whilst monitoring the ongoing release) 😅

To solve this problem we firstly shifted the way we do commit messages to use conventional commits, this is much cleaner, consistent and also helps with deployments. Then to solve the release problem I created a new CLI command that was run directly via the terminal called release. This automatically calculated the version number, created release notes and published using semantic-release, Jira automation and commitizen. After publish changes were then directly pushed to TeamCity to automatically kick off builds to the relevant environments such as test, staging or production.

CLI Improvements

One of the main challenges that we faced in the TV team was the ability to easily debug using the latest tools such as Chrome debugger and inspector. As we used legacy platforms such as old Hisense TVs and PS4 with their own legacy chromium/webkit based debuggers it was challenging for us to extract error messages and debug ongoing issues.

We therefore built our own cli with custom commands for debugging (using chii). The CLI commands were built in their own isolated CLI package inside of the monoreop and allowed us as developers along with testers and product to easily use the application with test and staging environments.

Some of our commands included:

• build (build the application with webpack)
• release (perform a relase with automation)
• debug (run a chii instance, inspect via TV)
• log (log debug commands)
• verify (run stylelint, eslint and prettier)
• install (install a tv package)
• setup (link yarn workspaces)
• update (yarn upgrade interactive)

Day To Day

Day to day work at Stan included various interesting tasks such as collaboration with Product, Design, Backend and Video teams to develop features, fix various bugs and monitor performance issues and platform errors.

Aditionally I spent a lot of time converting the legacy side of the codebase to be more inline with a modern JavaScript codebase such as re-writing old code, writing unit tests and converting legacy React class based components to be functional along with creating re-usable hooks for things such as app navigation, fetch, windowing and history.

Additional tasks included:

• Debugging issues
• Collaborating in spint planning, tech retro, catchups, and vendor meetings
• Feature development
• Monitoring and performance issues
• Testing new features and Customer Service issues
• Working with design and product for new features
• Collaborating on backend planning, to help with UI development.

Contractor Role

After deciding to move back to the UK 🇬🇧 I worked with Stan as a contractor for another 6 months to make a big dent in some of the platform improvements we as a team identified, these included the some of the following:

• Splitting of utilities into seperate packages (Time, Device, User)
• Updating our TypeScript implementation (globals, enums and type standards)
• Feed performance debugging and optimization
• Creating new helpers
• Dynamic imports for vendor based code
• Aliased imports for components and webpack 5 updates
• Additional cli commands for verify and lint