Add easier links to video details from playing and playlist screens

src/components/itemContextMenu.js

@@ -369,6 +369,15 @@ export async function getCommands(options) {
         });
     }
 
+    // Add "View Details" option for all items
+    if (options.openItemDetails !== false) {
+        commands.push({
+            name: globalize.translate('ViewItemDetails'),
+            id: 'itemdetails',
+            icon: 'info'
+        });
+    }
+
     return commands;
 }
 
@@ -594,6 +603,10 @@ function executeCommand(item, id, options) {
                 appRouter.showItem(item.AlbumArtists[0].Id, item.ServerId);
                 getResolveFunction(resolve, id)();
                 break;
+            case 'itemdetails':
+                appRouter.showItem(item.Id, item.ServerId);
+                getResolveFunction(resolve, id)();
+                break;
             case 'lyrics': {
                 if (options.isMobile) {
                     appRouter.show('lyrics');

src/controllers/playback/video/index.js

@@ -260,7 +260,8 @@ export default function (view) {
             }
         }
 
-        LibraryMenu.setTitle(title);
+        const detailUrl = item ? appRouter.getRouteUrl(item) : '';
+        LibraryMenu.setTitle(title, detailUrl);
 
         const documentTitle = parentName || (item ? item.Name : null);
 

src/scripts/libraryMenu.js

@@ -751,7 +751,7 @@ function setDefaultTitle () {
     document.title = documentTitle;
 }
 
-function setTitle (title) {
+function setTitle (title, url = '') {
     if (title == null) {
         LibraryMenu.setDefaultTitle();
         return;
@@ -771,7 +771,24 @@ function setTitle (title) {
         pageTitleElement.classList.remove('pageTitleWithLogo');
         pageTitleElement.classList.remove('pageTitleWithDefaultLogo');
         pageTitleElement.style.backgroundImage = null;
-        pageTitleElement.innerText = html || '';
+
+        if (url) {
+            // Create a link element when URL is provided
+            const linkElement = document.createElement('a');
+            linkElement.classList.add('pageTitleLink');
+            linkElement.href = url;
+            linkElement.innerText = html || '';
+
+            // Add show-focus class for TV mode to enable focus indicator
+            if (layoutManager.tv) {
+                linkElement.classList.add('show-focus');
+            }
+
+            pageTitleElement.innerHTML = '';
+            pageTitleElement.appendChild(linkElement);
+        } else {
+            pageTitleElement.innerText = html || '';
+        }
     }
 
     document.title = title || documentTitle;

src/strings/en-us.json

@@ -1698,6 +1698,7 @@
     "ViewAlbum": "View album",
     "ViewAlbumArtist": "View album artist",
     "ViewAllPlugins": "View all plugins",
+    "ViewItemDetails": "View details",
     "ViewLyrics": "View lyrics",
     "ViewPlaybackInfo": "View playback info",
     "ViewSettings": "View settings",

src/styles/videoosd.scss

@@ -341,3 +341,22 @@
         transform: rotate(360deg);
     }
 }
+
+.osdHeader .pageTitle {
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+        opacity: 0.7;
+    }
+
+    .pageTitleLink {
+        color: inherit;
+        text-decoration: none;
+        outline: none;
+
+        &.show-focus:focus {
+            color: rgba(0, 164, 220, 1);
+            font-weight: bold;
+        }
+    }
+}