From 65ad916df8e8ab5d75c717c91cb4956749a61a38 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 27 Feb 2026 18:31:38 +0100
Subject: [PATCH] Update Plex library item URLs to use app.plex.tv format

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:
https://app.plex.tv/desktop/#!/server/fe85f47ef9b758815d788216b3dabd7bb7d01d4f/details?key=%2Flibrary%2Fmetadata%2F73997

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
---
 src/components/settings/PlexSettings.vue |  3 +++
 src/composables/usePlexApi.ts            |  6 +++++-
 src/composables/usePlexLibraries.ts      | 13 ++++++++++++-
 src/utils/plexHelpers.ts                 | 12 ++++++------
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/settings/PlexSettings.vue b/src/components/settings/PlexSettings.vue
index 27dc92b..9b94306 100644
--- a/src/components/settings/PlexSettings.vue
+++ b/src/components/settings/PlexSettings.vue
@@ -86,6 +86,7 @@
 
   const plexServer = ref("");
   const plexServerUrl = ref("");
+  const plexMachineId = ref("");
   const lastSync = ref("");
   const libraryStats = ref({
     movies: 0,
@@ -153,6 +154,7 @@
 
       plexServer.value = server.name;
       plexServerUrl.value = server.url;
+      plexMachineId.value = server.machineIdentifier;
       lastSync.value = new Date().toLocaleString();
 
       const sections = await fetchLibrarySections(authToken, server.url);
@@ -165,6 +167,7 @@
         sections,
         authToken,
         server.url,
+        server.machineIdentifier,
         plexUsername.value,
         fetchLibraryDetails
       );
diff --git a/src/composables/usePlexApi.ts b/src/composables/usePlexApi.ts
index 7490284..a7ee68e 100644
--- a/src/composables/usePlexApi.ts
+++ b/src/composables/usePlexApi.ts
@@ -100,7 +100,11 @@ export function usePlexApi() {
         if (connection) {
           plexServerUrl.value = connection.uri;
         }
-        return { name: ownedServer.name, url: plexServerUrl.value };
+        return {
+          name: ownedServer.name,
+          url: plexServerUrl.value,
+          machineIdentifier: ownedServer.clientIdentifier
+        };
       }
 
       return null;
diff --git a/src/composables/usePlexLibraries.ts b/src/composables/usePlexLibraries.ts
index b2dea35..ecb313d 100644
--- a/src/composables/usePlexLibraries.ts
+++ b/src/composables/usePlexLibraries.ts
@@ -9,6 +9,7 @@ export function usePlexLibraries() {
     sections: any[],
     authToken: string,
     serverUrl: string,
+    machineIdentifier: string,
     username: string,
     fetchLibraryDetailsFn: any
   ) {
@@ -40,6 +41,7 @@ export function usePlexLibraries() {
           await processLibrarySection(
             authToken,
             serverUrl,
+            machineIdentifier,
             key,
             "movies",
             stats,
@@ -50,6 +52,7 @@ export function usePlexLibraries() {
           await processLibrarySection(
             authToken,
             serverUrl,
+            machineIdentifier,
             key,
             "shows",
             stats,
@@ -60,6 +63,7 @@ export function usePlexLibraries() {
           await processLibrarySection(
             authToken,
             serverUrl,
+            machineIdentifier,
             key,
             "music",
             stats,
@@ -102,6 +106,7 @@ export function usePlexLibraries() {
   async function processLibrarySection(
     authToken: string,
     serverUrl: string,
+    machineIdentifier: string,
     sectionKey: string,
     libraryType: string,
     stats: any,
@@ -129,7 +134,13 @@ export function usePlexLibraries() {
 
       // Process recently added items
       const recentItems = data.recentMetadata.map((item: any) =>
-        processLibraryItem(item, libraryType, authToken, serverUrl)
+        processLibraryItem(
+          item,
+          libraryType,
+          authToken,
+          serverUrl,
+          machineIdentifier
+        )
       );
 
       // Calculate stats
diff --git a/src/utils/plexHelpers.ts b/src/utils/plexHelpers.ts
index ac430bd..a741298 100644
--- a/src/utils/plexHelpers.ts
+++ b/src/utils/plexHelpers.ts
@@ -56,7 +56,8 @@ export function processLibraryItem(
   item: any,
   libraryType: string,
   authToken: string,
-  serverUrl: string
+  serverUrl: string,
+  machineIdentifier: string
 ) {
   // Get poster/thumbnail URL
   let posterUrl = null;
@@ -67,13 +68,12 @@ export function processLibraryItem(
   }
 
   // Build Plex Web App URL
-  // Format: https://app.plex.tv/desktop/#!/server/{machineId}/details?key=/library/metadata/{ratingKey}
+  // Format: https://app.plex.tv/desktop/#!/server/{machineId}/details?key=%2Flibrary%2Fmetadata%2F{ratingKey}
   const ratingKey = item.ratingKey || item.key;
   let plexUrl = null;
-  if (ratingKey) {
-    // Extract machine ID from serverUrl or use a placeholder
-    // For now, we'll create a direct link to the library metadata
-    plexUrl = `${serverUrl}/web/index.html#!/server/library/metadata/${ratingKey}`;
+  if (ratingKey && machineIdentifier) {
+    const encodedKey = encodeURIComponent(`/library/metadata/${ratingKey}`);
+    plexUrl = `https://app.plex.tv/desktop/#!/server/${machineIdentifier}/details?key=${encodedKey}`;
   }
 
   const baseItem = {