F1 Web Viewer

IMPORTANT - Live website currently broken

Please self host the application locally or through Docker. Or alternatively, use the desktop application. Updates can be found under issue #35 (last updated 2/20/22)

A simple grid-based web viewer for Formula 1. Simply login with your F1TV credentials, select the season, event, and session, and then drag and drop the channels you want to watch into the grid! Unable to install it? No problem! The application can be fully accessed here

Features

• An easy to use grid system to customize your layout
• Ability to drag and drop feeds into the grid
• Ability to pin feeds to prevent them from moving
• Support for syncing feeds (works across multiple tabs)
• Support for multiple layouts
• Support for play/pause all (works across multiple tabs)
• Support for resizing any feed in the layout
• Ability to set the number of columns in the layout
• Ability to set the height for rows in the layout
• Ability to change the audio source and quality for any feed
• Picture in picture support
• Easy to use and modern web interface
• Docker support
• VR support (if using a web browser in VR)

Coming Soon

• Syncing across devices on the same local network

Have any suggestions? Let us know!

Installation

Clone the repository using git and then use npm to install the node modules.

# Clone the repository
git clone https://github.com/bootsie123/F1-Web-Viewer.git

# Enter the directory
cd F1-Web-Viewer

# Install the dependencies
npm install

# Build the application
npm run build

# Start the server
npm start

Alternatively you can install the application with docker.

docker pull bootsie123/f1-web-viewer

Usage

Local

To run the web server simply run:

npm start

This will run the server locally on port 3000 and allow you to connect to it through:

http://localhost:3000 or the IP address of your computer http://192.168.x.x:3000

Docker

To start the web server with Docker simply run:

docker run -d -p 3000:3000 bootsie123/f1-web-viewer

From there, you can then access the server on port 3000 of your Docker host. For example: http://192.168.x.x:3000

Configuration

Changing the default port

To change the default port of the web server locally you can simply rename the .env.example file in the main directory of the application to .env. From there, edit the following:

SERVER_PORT=3000 //Change this value here to the desired port

For Docker, simply start the container with your desired mapped ports. For example, to access the web server from port 8080 use:

docker run -d -p 8080:3000 bootsie123/f1-web-viewer

FAQ

What credentials do I use to login?

For login, you need an F1TV account and an active subscription. To login, simply open the sliding panel on the right and enter the same username and password you use for F1TV

What happens to my credentials after login?

During login, your credentials are exchanged with the F1TV servers which in turn give back an access token. This token is stored locally through your browser and is automatically loaded after the first login. However, if this token expires simply logout and relogin

Will my layout be saved?

The layout is automatically saved locally to your browser. It will also be loaded automatically when you revisit the application. However, if you clear your browser cache you will loose your layout

Is it possible to sync the feeds?

Yes! Just click on the clock icon on the feed you want all the other feeds to sync up to. It will also sync across multiple tabs too

Acknowledgements

Special thanks to: SoMuchForSubtlety (F1 Viewer) and robvdpol (RaceControl) for giving me a framework to work with and mapping out the F1TV API!

Other thanks to:

• Video.js - For the awesome to work with video player
• Vue Grid Layout - For making the amazing grid layout system
• Remixicon - For all of the amazing icons used through the project

Contributing

Pull requests are welcome. Any changes are appreciated!

License

ISC