Kevin Midboe 77c89fa520 Enhance Plex integration with real API data and interactive library modal
Major improvements to Plex integration:
- Replace Vuex store dependency with localStorage-based connection detection
- Fetch and display real Plex user data (username, email, subscription, 2FA status)
- Add user badges: Plex Pass, member years, 2FA, experimental features
- Properly format Unix timestamp joined dates
- Remove success message box, add elegant checkmark icon next to username
- Add Plex connection badge to main user profile

Real-time Plex API integration:
- Fetch actual library counts from Plex server (movies, shows, music)
- Display real server name from user's Plex account
- Load recently added items with actual titles, years, and ratings
- Calculate real genre statistics from library metadata
- Compute actual duration totals from item metadata
- Count actual episodes (TV shows) and tracks (music)
- Sync library on demand with fresh data from Plex API

Interactive library modal:
- Replace toast messages with rich modal showing library details
- Display recently added items with poster images
- Show genre distribution with animated bar charts
- Add loading states with animated dots
- Disable empty library cards
- Modal appears above header with proper z-index
- Blur backdrop for better focus
- Fully responsive mobile design

Store Plex data in localStorage:
- Cache user profile data including subscription info
- Store auth token in secure cookie (30 day expiration)
- Load from cache for instant display on page load
- Refresh data on authentication and manual sync

Add Plex connection indicator to user profile:
- Orange Plex badge in settings profile header
- Shows 'Connected as [username]' below member info
- Loads username from localStorage on mount
2026-02-27 19:21:12 +01:00
2022-08-15 20:17:37 +02:00
2019-10-23 00:43:17 +02:00
2026-02-24 00:22:31 +01:00
2026-02-24 00:22:51 +01:00
2026-02-24 18:43:26 +01:00
2017-03-21 17:12:39 +02:00
2026-02-24 00:22:51 +01:00

Seasoned Request

Seasoned request is frontend vue application for searching, requesting and viewing account watch activity.

Config setup

# make copy of example environment file
cp .env.example .env
# .env sane default values
SEASONED_API=
ELASTIC=
ELASTIC_INDEX=shows,movies
SEASONED_DOMAIN=
  • Leave SEASONED_API empty to request /api from same origin and proxy passed by nginx, set if hosting seasonedShows backend api locally.
  • Elastic is optional and can be used for a instant search feature for all movies and shows registered in tmdb, leave empty to disable.
# .env example values
SEASONED_API=http://localhost:31459
ELASTIC=http://localhost:9200
ELASTIC_INDEX=shows,movies
SEASONED_DOMAIN=request.movie

Build Steps

# install dependencies
yarn

# build vue project using webpack
yarn build

# test or host built files using docker, might require sudo:
docker build -t seasoned .
docker run -d -p 5000:5000 --name seasoned-request --env-file .env seasoned

Development Steps

# serve project with hot reloading at localhost:8080
yarn dev

To proxy requests to /api either update SEASONED_API in .env or run set environment variable, e.g.:

# export and run
export SEASONED_API=http://localhost:31459
yarn dev

# or run with environment variable inline
SEASONED_API=http://localhost:31459 yarn dev

Documentation

All api functions are documented in /docs and found here.
html version also available

License

MIT

Description
No description provided
Readme MIT 9.9 MiB
Languages
Vue 81.6%
TypeScript 14.2%
SCSS 2.8%
JavaScript 1.1%
HTML 0.2%
Other 0.1%