- Run Prettier to fix code style in 7 files
- Auto-fix ESLint errors with --fix flag
- Replace ++ with += 1 in commandTracking.ts
- Add eslint-disable comments for intentional console.error usage
- Fix destructuring, array types, and template literals
- Remove trivial type annotations
Change library item links to use the official Plex Web App URL format
instead of direct server URLs. This ensures items open correctly in
the Plex web interface.
Changes:
- usePlexApi.fetchPlexServers() now returns machineIdentifier (clientIdentifier)
- PlexSettings stores and passes machineId through the library loading flow
- usePlexLibraries.loadLibraries() accepts machineIdentifier parameter
- processLibrarySection() passes machineIdentifier to processLibraryItem()
- plexHelpers.processLibraryItem() updated signature and URL generation
New URL format:
https://app.plex.tv/desktop/#!/server/{machineId}/details?key=%2Flibrary%2Fmetadata%2F{ratingKey}
Example:
fe85f47ef9/details
Benefits:
- Links work universally (not dependent on local server URL)
- Opens in official Plex Web App with full functionality
- Consistent with Plex's own linking conventions
- Works from any network location
Create useTautulliStats composable (247 lines):
- fetchUserHistory() - Get watch history from Tautulli API
- calculateWatchStats() - Total hours, plays by media type
- groupByDay() - Daily activity (plays & duration)
- groupByDayOfWeek() - Weekly patterns by media type
- getTopContent() - Most watched content ranking
- getHourlyDistribution() - Watch patterns by hour of day
Update ActivityPage.vue with new visualizations:
- Stats overview cards (4 metrics: plays, hours, movies, episodes)
- Activity per day line chart (plays or duration)
- Activity by media type stacked bar chart (movies/shows/music)
- NEW: Hourly distribution chart
- NEW: Top 10 most watched content list
Features:
- Direct Tautulli API integration (no backend needed)
- Real-time data from Plex watch history
- Configurable time range (days filter)
- Toggle between plays count and watch duration
- Responsive grid layout for stats cards
- Styled top content ranking with hover effects
Benefits:
- Rich visualization of actual watch patterns
- See viewing habits by time of day
- Identify most rewatched content
- Compare movie vs TV viewing
- All data from authoritative source (Tautulli)
ActivityPage now provides comprehensive watch analytics! 📊
- Fix usePlexLibraries composable to return stats and details
- Updated loadLibraries signature to match PlexSettings usage
- Now accepts: sections, authToken, serverUrl, username, fetchFn
- Returns: { stats, details } object instead of updating refs
- Added watchtime calculation from Tautulli API
- Update processLibrarySection to work with passed parameters
- Accept stats and details objects instead of using refs
- Accept serverUrl and fetchLibraryDetailsFn as parameters
- No longer depends on composable internal state
- Remove all debug console.log statements
- Clean up usePlexAuth composable (removed 13 debug logs)
- Clean up PlexSettings component (removed 9 debug logs)
- Keep only error logging for troubleshooting
Library stats now display correctly after authentication ✓
Build size reduced by removing debug code
Extract more reusable components and utilities:
Components:
- PlexLibraryStats.vue: 4-card stats grid with loading states
- PlexServerInfo.vue: Server details and sync/unlink actions
Composables:
- usePlexLibraries.ts: Library data loading and processing logic
Utilities:
- plexHelpers.ts: Pure functions for formatting and calculations
- getLibraryIcon/Title: Type to display mapping
- formatDate/MemberSince: Date formatting
- processLibraryItem: Parse API response to display format
- calculateGenreStats: Top 5 genres from metadata
- calculateDuration: Total hours, episodes, tracks
Benefits:
- Cleaner separation: UI vs logic vs utilities
- Testable pure functions
- Reusable across components
- Reduces PlexSettings.vue complexity
