(Want to check it out for yourself? I highly recommend Expo, which is essentially a layer on top of React Native which makes the entire process from start to shipping much easier in many cases.) PhilosophyĪpplications should have a raison d’être. If this isn’t developer nirvana, I’m not sure what is. Thus, a single codebase can target 5 platforms (Android, iOS, macOS, Windows and Linux) with only tiny amounts of per-platform code. We also made use of react-native-web, which extends the portability to desktop through Electron. The TREBLE player has been shipping in our official applications for quite some time now, and we’ve been continuing to improve functionality, reliability and performance.Īs for the app itself, over the last year of nights and weekends, we’ve completely rewritten Plexamp using React Native, which is the most mature, productive and performant way to build cross-platform mobile apps for iOS and Android (sorry Flutter, although I think you’ve come a long way). It’s the future of audio playback across all Plex applications which can host it. We’ve also implemented a few effects plugins on top for spoken word audio: one for voice boosting, and the other for silence compression. It’s portable across almost all desktop and mobile platforms, and provides the features you might hope for: sample-accurate gapless playback, high quality resampling, Sweet Fades, soft transitions, pre-caching. Over the next two years, we worked to overcome both of those limitations.įirst, we set out to create a new audio player library we call TREBLE, built on top of a low-level commercial audio engine. The app itself was built in React, which is tied to the web. It incorporated an advanced player under the hood which provided features like gapless and crossfading and it drove a number of improvements to the Plex Media Server for music libraries, including advanced loudness analysis and library and artist radio.Īt its core, though, it suffered from a number of inadequacies which limited its potential: the player engine had portability and licensing issues beyond desktop platforms and didn’t have an easy way to add functionality (effects plugins, e.g.). The first version of Plexamp was a small, highly opinionated music player released for macOS, Windows and Linux. get ( "PLEX_TOKEN" ) BASE_URL = f " md-card. get ( "PLEX_SERVER" ) PLEX_TOKEN = environ. get ( "MQTT_BROKER" ) PLEX_SERVER = environ. Since I wanted to update Node-RED and everything else in the house already speaks MQTT, the way forward was obvious, and it took me all of 60 lines of Python to build a simple MQTT relay for Plex playback events.Īnd since it’s a 12-factor app deployed on piku, you can even call it a microservice:įrom functools import lru_cache from json import dumps from os import environ from sys import exit from plexapi.base import PlexObject from plexapi.client import PlexClient from rver import PlexServer from time import sleep import as mqtt MQTT_BROKER = environ. With the UI mocked up, I decided to get started on how to actually tap into Plex. For extra polish, I also designed this so that I could set the -grey CSS variable when playback was paused (which, alas, I had to give up on).Set the cover art width to auto (unlike shown) and you will also be able to show movie posters and the like (if you want to).Using the :before pseudo-element can be both friend and foe.Rotating the cover art 180 o before blurring it and sticking it as a background gives a very nice look (and saves you one HTTP request for another image, etc.).The first part was laying out the UI, which I quickly mocked up in VS Code: Yeah, I have a fair amount of Portuguese music CDs ripped on my Plex server. This meant talking to the Node-RED instance that runs the display, customizing the dashboard to include tailored HTML and CSS and delving a bit into the Plex APIs. The display turns off every few minutes automatically, and it needs to come back on to display the album art.The display defaults to showing my office dashboard, and I can’t just take it over (or waste it on a single purpose).I wanted to have both my Echo Listen or PlexAmp update the display.As it happens, yesterday I came across this neat “Now Playing” desktop display build, and since I have an official 7” Raspberry Pi LCD on my desk for controlling my lights, I decided to do something similar, but to display what’s currently playing on Plex (since I use PlexAmp for my music collection).Īs usual, things got slightly out of hand, because: ![]() Today’s a bank holiday, so I decided to spend a little while having fun. 8 min read Building a Now Playing Display.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |