Enable TV Support for 'Ask to Skip' (#6295)

src/components/playback/playbackmanager.js

@@ -27,7 +27,6 @@ import { MediaError } from 'types/mediaError';
 import { getMediaError } from 'utils/mediaError';
 import { toApi } from 'utils/jellyfin-apiclient/compat';
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind.js';
-import browser from 'scripts/browser.js';
 import { bindSkipSegment } from './skipsegment.ts';
 
 const UNLIMITED_ITEMS = -1;
@@ -3687,10 +3686,8 @@ export class PlaybackManager {
         }
 
         bindMediaSegmentManager(self);
-        if (!browser.tv && !browser.xboxOne && !browser.ps4) {
         this._skipSegment = bindSkipSegment(self);
     }
-    }
 
     getCurrentPlayer() {
         return this._currentPlayer;

src/components/playback/skipsegment.ts

@@ -9,37 +9,44 @@ import './skipbutton.scss';
 import dom from 'scripts/dom';
 import globalize from 'lib/globalize';
 import * as userSettings from 'scripts/settings/userSettings';
+import focusManager from 'components/focusManager';
+import layoutManager from 'components/layoutManager';
 
 interface ShowOptions {
     animate?: boolean;
     keep?: boolean;
+    focus?: boolean;
+}
+
+function onHideComplete(this: HTMLButtonElement) {
+    if (this) {
+        this.classList.add('hide');
+    }
 }
 
 class SkipSegment extends PlaybackSubscriber {
-    private skipElement: HTMLButtonElement | undefined;
+    private skipElement: HTMLButtonElement | null;
     private currentSegment: MediaSegmentDto | null | undefined;
     private hideTimeout: ReturnType<typeof setTimeout> | null | undefined;
 
     constructor(playbackManager: PlaybackManager) {
         super(playbackManager);
 
+        this.skipElement = null;
         this.onOsdChanged = this.onOsdChanged.bind(this);
     }
 
-    onHideComplete() {
-        if (this.skipElement) {
-            this.skipElement.classList.add('hide');
-        }
-    }
-
     createSkipElement() {
         if (!this.skipElement && this.currentSegment) {
-            const elem = document.createElement('button');
+            let buttonHtml = '';
-            elem.classList.add('skip-button');
-            elem.classList.add('hide');
-            elem.classList.add('skip-button-hidden');
 
-            elem.addEventListener('click', () => {
+            buttonHtml += '<button is="emby-button" class="skip-button hide skip-button-hidden"></button>';
+
+            document.body.insertAdjacentHTML('beforeend', buttonHtml);
+
+            this.skipElement = document.body.querySelector('.skip-button');
+            if (this.skipElement) {
+                this.skipElement.addEventListener('click', () => {
                     const time = this.playbackManager.currentTime() * TICKS_PER_MILLISECOND;
                     if (this.currentSegment?.EndTicks) {
                         if (time < this.currentSegment.EndTicks - TICKS_PER_SECOND) {
@@ -49,9 +56,7 @@ class SkipSegment extends PlaybackSubscriber {
                         }
                     }
                 });
-
+            }
-            document.body.appendChild(elem);
-            this.skipElement = elem;
         }
     }
 
@@ -66,7 +71,7 @@ class SkipSegment extends PlaybackSubscriber {
         const elem = this.skipElement;
         if (elem) {
             this.clearHideTimeout();
-            dom.removeEventListener(elem, dom.whichTransitionEvent(), this.onHideComplete, {
+            dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
                 once: true
             });
             elem.classList.remove('hide');
@@ -78,6 +83,11 @@ class SkipSegment extends PlaybackSubscriber {
 
             void elem.offsetWidth;
 
+            const hasFocus = document.activeElement && focusManager.isCurrentlyFocusable(document.activeElement);
+            if (options.focus && !hasFocus) {
+                focusManager.focus(elem);
+            }
+
             requestAnimationFrame(() => {
                 elem.classList.remove('skip-button-hidden');
 
@@ -97,7 +107,7 @@ class SkipSegment extends PlaybackSubscriber {
             requestAnimationFrame(() => {
                 elem.classList.add('skip-button-hidden');
 
-                dom.addEventListener(elem, dom.whichTransitionEvent(), this.onHideComplete, {
+                dom.addEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
                     once: true
                 });
             });
@@ -116,7 +126,8 @@ class SkipSegment extends PlaybackSubscriber {
             if (isOpen) {
                 this.showSkipButton({
                     animate: false,
-                    keep: true
+                    keep: true,
+                    focus: false
                 });
             } else if (!this.hideTimeout) {
                 this.hideSkipButton();
@@ -140,7 +151,10 @@ class SkipSegment extends PlaybackSubscriber {
 
             this.setButtonText();
 
-            this.showSkipButton({ animate: true });
+            this.showSkipButton({
+                animate: true,
+                focus: layoutManager.tv
+            });
         }
     }
 

src/controllers/playback/video/index.js

@@ -1237,8 +1237,10 @@ export default function (view) {
                     }
                     return;
                 case 'Enter':
+                    if (e.target.tagName !== 'BUTTON') {
                         playbackManager.playPause(currentPlayer);
                         showOsd(btnPlayPause);
+                    }
                     return;
             }
         }