A sleek, real-time dashboard to monitor and display media currently streaming on your Plex server. This application provides a modern interface showing what's playing right now across music, movies, and TV shows, along with viewing history.
- Real-time Monitoring: See what's currently playing on your Plex server with automatic updates
- Multi-format Support: Tracks movies, TV shows, and music streams
- Viewing History: Browse through past watch activity with filtering by user and media type
- Detailed Media Cards: Rich information including progress, quality, user data, and more
- Media Details: In-depth information on each media item with expandable details view
- Transcode Progress: Live monitoring of transcoding status and progress
- Responsive Design: Optimized viewing experience on mobile and desktop devices with swipe navigation
- Adaptive Polling: Smart polling that adjusts frequency based on media playback state and user activity
- Connection Management: Automatic reconnection and status monitoring for reliable operation
- Spotify Integration: Direct links to music tracks on Spotify (requires Premium subscription as of 02/06/2026)
- Animated UI: Smooth transitions and loading states using Framer Motion
- Docker Deployment: Simple deployment with containerization
| Movies | TV Shows | Music |
|---|---|---|
 |
 |
 |
Mobile Views
| Movies | TV Shows | Music |
|---|---|---|
 |
 |
 |
| History |
|---|
 |
- Frontend: Next.js 15, React 19, TypeScript
- Styling: Tailwind CSS 4
- Animations: Framer Motion
- State Management: React Context API
- Gesture Support: react-swipeable
- Containerization: Docker
- APIs: Plex API, Spotify API
- Node.js 20+
- Docker and Docker Compose (for containerized deployment)
- Plex server with a valid token
- Spotify Developer credentials (for music integration)
-
Clone the repository:
git clone https://github.com/caleb-vanlue/now-playing.git cd now-playing -
Install dependencies:
npm install
-
Create a
.envfile in the root directory with the following variables:PLEX_URL=your_plex_server_url PLEX_TOKEN=your_plex_token FETCH_TIMEOUT=8000 SPOTIFY_CLIENT_ID=your_spotify_client_id SPOTIFY_CLIENT_SECRET=your_spotify_client_secret -
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser.
-
Ensure Docker and Docker Compose are installed.
-
Build and run the container:
docker-compose up -d
-
Access the dashboard at http://localhost:3003.
| Variable | Description | Default |
|---|---|---|
PLEX_URL |
URL of your Plex server | (Required) |
PLEX_TOKEN |
Authentication token for Plex API | (Required) |
FETCH_TIMEOUT |
Timeout for API requests (ms) | 8000 |
SPOTIFY_CLIENT_ID |
Spotify Developer API Client ID | (Optional) |
SPOTIFY_CLIENT_SECRET |
Spotify Developer API Client Secret | (Optional) |
- Log in to your Plex account on the web
- Navigate to any media item and inspect the network requests
- Look for an
X-Plex-Tokenparameter in the requests - Use this value as your
PLEX_TOKEN
NOTE: As of Feb. 6, 2026, this feature requires a Premium account.
- Create a Spotify Developer account at https://developer.spotify.com/
- Create a new application in the Spotify Developer Dashboard
- Note the Client ID and Client Secret
- Add these values to your environment variables
The dashboard automatically communicates with your Plex server. If you need direct access to the API, the following endpoints are available:
/api/plex/sessions- Get currently playing sessions/api/plex/history- Get viewing history/api/plex/thumbnail- Get media thumbnails/api/spotify/search- Search for tracks on Spotify
- Adaptive Polling: Polling frequency adjusts based on playback state and user activity
- Lazy Loading: Images and components load only when needed
- Optimized Rendering: React memo and hooks optimize rendering performance
- Responsive Assets: Images are served at appropriate sizes for different devices
- Plex for their amazing media server
- Spotify for their music API
- All the open-source libraries used in this project