Arnold

🎬 A modern Kodi web interface

Arnold is a modern Kodi web interface which aims to provide relevant information and functionality in a sleek and intuitive design. Arnold is designed to be able to run directly as a Kodi addon, but also as a completely standalone web app.

Written in JavaScript using React, Flux and Semantic-UI-React and bootstrapped by create-react-app.

Demo

Check out the demo to see how Arnold works.

Features

• Remotely control Kodi.
• Browse your movies, TV shows and music.
• Search your entire library through a single search bar.
• Track your progress and hide seen movies and episodes.
• Receive automatic update notifications.
• Choose between multiple transport layers - WebSocket and AJAX.
• Access your library even if your Kodi is offline thanks to client-side caching.
• Works as a Kodi addon but also as a standalone web app.

Installation

Served by Kodi

This is the most common way to install Kodi web interface - simply let Kodi serve all the files on your local network.

1. Download latest zip package from releases section.
2. Install addon from the zip file.
3. Navigate your browser to http://<KODI_IP_ADDRESS>:<PORT>/addons/webinterface.ARNOLD, e.g. http://192.168.1.1:8080/addons/webinterface.ARNOLD/
4. Optional: Set Arnold as your default web interface.

Running Arnold on a separate server

Arnold can run standalone on any machine on your local network and can connect to Kodi via WebSockets. These instructions are for advanced users.

1. Download latest zip package from releases section.
2. Unzip the file.
3. Serve the contents of webinterface.ARNOLD folder with an HTTP server.
4. Do not forget to set the IP address and transport layer in the settings.

Development

1. Clone this repo.
2. Run npm i to install all dependencies.
3. Create custom Semantic-UI stylesheet by running npm run customize-semantic.
4. Start with npm start and navigate your browser to localhost:3000.
5. Once you are satisfied with your changes, build a zip package with npm run make.
6. Submit a pull request here if possible.

Note: Depending on how your Kodi is setup, when using AJAX transport layer, you might want to use browser extension that allows you to bypass CORS headers, such as this one.

Debugger

This project uses debug module for debugging. You can turn debugging on and off via the localStorage.debug value in your browser.

The most important values are:

localStorage.debug = 'arnold:*' // debug everything
localStorage.debug = null       // turn debug off

Once you change the flag, you need to refresh your browser to see the changes in debug output.

LICENSE

MIT. See LICENSE.