Reviving AniRemote(Now LazyRoll)
This is a submission for the GitHub Finish-Up-A-Thon Challenge
What I Built
AniRemote is a phone-as-remote system that lets you control video playback on your laptop directly from your phone.
Open a video on your laptop, scan a QR code, and your phone instantly becomes a remote control.
The current version supports:
- Crunchyroll
- Netflix
- YouTube
- Generic HTML5 video players
Users can:
- Play/Pause videos
- Seek forward and backward
- Adjust playback speed
- Control volume
- Toggle subtitles
- Skip intros and credits
- Navigate episodes
- View live playback state from their phone
Under the hood, AniRemote consists of:
- A FastAPI backend that manages rooms and WebSocket communication
- A React mobile-first remote interface
- A browser userscript that interacts directly with streaming websites
What makes this project special to me isn't the technology.
It's the fact that this project has followed me through multiple stages of my growth as a developer.
Demo
Repository
Live Demo
Screenshots
QR pairing and room connection
Mobile remote interface
3 Simple steps to setup
The Comeback Story
This project started as a very small experiment and without a name.
Version 1: The idea: Python backends
Over a year ago, I wanted a simple way to control video playback without constantly reaching for my laptop.
I was watching anime and wanted basic controls from my phone. Had to wake up if needed to move forward or backward or pause.
I thought this might be a common problem for people who don't have a proper setup(TV or something), i.e., just graduated from college bachelors.
So I thought it might scale as well. Not only anime, but to webseries on various platforms which this generation watches. Although I don't have such major interests apart from anime, and rarely some movies.
Websockets were not working for some reason. Enough debugging but couldn't get through... So had a mini version without websockets which had limited capability. Then this project was put to rest.
Version 2: The PyAutoGUI Era
Due to sudden urge and so much news regarding new seasons for my favourite animes, I again gained interest in watching those, and thought let's do something interesting. Started that project again, and this was a major break from my rest of not coding or doing anything productive on my personal laptop. I genuinely liked it... So many agents were part of this haha.
At the time, my solution looked something like this:
Phone
↓
FastAPI
↓
PyAutoGUI
↓
Keyboard Shortcut
↓
Browser
When I pressed pause on my phone, the backend would trigger keyboard shortcuts on my Windows machine using PyAutoGUI. Again, for some reason I wanted to do my projects in WSL itself. It just was an extra layer of difficulty. There was no use of WSL as such as I needed to run a script on my machine only... So I was just sending commands from WSL to a script on my machine and then proceeded. Even GPT denied this idea.
It worked.
Kind of.
The architecture was extremely simple:
- FastAPI backend
- Phone sends HTTP requests
- PyAutoGUI simulates key presses
There was:
- No real-time communication
- No synchronization
- No room management
- No browser integration
- No support for multiple websites
But this version taught me a lot.
I learned:
- FastAPI fundamentals
- Cross-device communication
- WSL networking
- Running services accessible from a phone
- Communication between Windows and WSL environments
Had a better looking UI slowly, added some features, that's it.. Enough of what I would use. Although using pyautogui you have some limitations... you have to be active on that tab... Full screen won't work sometimes... But when I actually made it work, it was a Eureka moment. *** It would only work on my machineeee *** though. haha.
GogoAnime played a major role in this experimentation. I wanted to watch Mob Psycho. Writing very bad scripts only just for going to next episode... exploring the gogoanime links... a lot
I got to understand that this won't scale to other apps, but as long as I had implemented that and my work is being done, I was happy.
Three unrelated things collided at exactly the same time:
- I wanted to watch Mob Psycho 100.
- Crunchyroll didn't have it available for me.
- GogoAnime exposed a playground where I could experiment with browser automation. It went down only after my experimentation was done... saving my sense of satisfaction.
So now, coding problem isn't the issue, design problem is.
The Shift That Changed Everything -- Final Version
The biggest change wasn't a feature.
It was how I thought about the project.
Originally, my goal was:
Make it work.
Now my goal became:
Make it extensible.
Netflix, Crunchyroll, YouTube, and many other sites all expose controls differently.
But from the user's perspective, the actions are always the same:
- Play/Pause
- Seek
- Next Episode
- Skip Intro
- Toggle Subtitles
That realization pushed me toward implementing a site adapter architecture.
Instead of scattering platform-specific logic throughout the codebase, each streaming service now implements a common interface.
Adding support for a new platform became:
Create Adapter
↓
Implement Commands
↓
Done
instead of rewriting large portions of the application.
Looking back, this was probably the first time I consciously applied a system design principle to one of my personal projects.
Finish-Up-A-Thon: Building AniRemote
For this challenge, I decided to finally finish the project properly.
The result became AniRemote.
The architecture now looks like this:
Phone Browser (React Remote)
│
▼
WebSocket
│
▼
FastAPI Backend Relay
│
▼
WebSocket
│
▼
Browser Userscript
│
▼
Streaming Website
The backend handles:
- Room creation
- Host/controller pairing
- Real-time message routing
- Connection management
The frontend provides:
- Mobile-first remote controls
- Live playback status
- Connection monitoring
- Responsive touch-friendly controls
The userscript provides:
- Site detection
- Adapter execution
- State synchronization
- QR code pairing
- Streaming platform integration
One of my biggest milestones was finally embracing WebSockets.
A year ago, I avoided them because I wasn't comfortable with connection lifecycle management, reconnection logic, and state synchronization.
Now WebSockets sit at the center of the entire architecture.
Commands flow instantly from phone to browser, while playback state flows back to the phone in real time.
The project that once relied on HTTP requests and simulated keyboard presses became a real-time synchronized system.
Again, many agents led to this. Copilot was one of those, which understands the codebase the best among other agents, and we have that GitHub integration as well...iykyk.
Before vs After
Before
- HTTP requests only
- PyAutoGUI keyboard simulation
- Single-device experiment
- No real-time communication
- No browser integration
- No room system
- No QR pairing
- GogoAnime-focused prototype
After
- FastAPI WebSocket backend
- Real-time bidirectional communication
- Mobile-first React remote
- QR-based pairing
- Room management
- Site adapter architecture
- Netflix support
- Crunchyroll support
- YouTube support(in debugging mode)
- Live playback synchronization
- Extensible platform support
My Experience with GitHub Copilot
GitHub Copilot played an important role while reviving AniRemote.
Rather than generating entire features, it helped remove friction throughout the project.
Some of the ways I used Copilot included:
- Refactoring message handling logic
- Building adapter scaffolding for new platforms
- Debugging asynchronous communication issues
- Improving React component structure
- Creating repetitive TypeScript and JavaScript patterns
- Improving error handling and reconnection flows
One area where Copilot was especially helpful was iteration speed.
Because AniRemote involves multiple moving parts (frontend, backend, userscript, and streaming-site integrations), I spent a lot of time experimenting with architecture and communication flows.
Copilot helped me spend less time writing repetitive code and more time focusing on the actual design decisions.
What I'm Most Proud Of
The most satisfying part of this project isn't that it supports multiple streaming services.
It's that I finally finished it.
This project started as a simple idea to make anime watching more comfortable.
Over time it became a learning vehicle for:
- FastAPI
- WSL networking
- Browser automation
- WebSockets
- Real-time communication
- System design
- Adapter architectures
AniRemote(LazyRoll) is the result of revisiting an old idea with new skills.
And that's exactly why the Finish-Up-A-Thon felt like the perfect excuse to finally bring it across the finish line.
Top comments (0)