Handle different trickplay resolutions

src/controllers/dashboard/trickplay.html

@@ -9,9 +9,12 @@
                     <div class="checkboxList">
                         <label>
                             <input type="checkbox" is="emby-checkbox" id="chkEnableHwAcceleration" />
-                            <span>${TrickplayHardwareAccel}</span>
+                            <span>${LabelTrickplayAccel}</span>
                         </label>
                     </div>
+                    <div class="fieldDescription">
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="#/dashboard/playback/transcoding">${LabelTrickplayAccelHelp}</a>
+                    </div>
                 </div>
                 <div class="inputContainer">
                     <select is="emby-select" id="selectScanBehavior" name="Scan Behavior" label="${LabelScanBehavior}">

src/controllers/playback/video/index.js

@@ -1770,10 +1770,20 @@ export default function (view) {
 
             if (!trickplayResolutions) return false;
 
-            // TODO: just to test. must pick proper resolution and/or check above that trickplay resolutions has at least one key.
+            // Prefer highest resolution <= 20% of total screen resolution width
+            let bestWidth;
+            const maxWidth = window.screen.width * window.devicePixelRatio * 0.2;
+            for (const [, info] of Object.entries(trickplayResolutions)) {
+                if (!bestWidth
+                    || (info.Width < bestWidth && bestWidth > maxWidth) // Objects not guaranteed to be sorted in any order, first width might be > maxWidth.
+                    || (info.Width > bestWidth && info.Width <= maxWidth)) bestWidth = info.Width;
+            }
+
+            if (!bestWidth) return false;
+
             return updateTrickplayBubbleHtml(
                 ServerConnections.getApiClient(item.ServerId),
-                trickplayResolutions[Object.keys(trickplayResolutions)[0]],
+                trickplayResolutions[bestWidth.toString()],
                 item,
                 mediaSourceId,
                 bubble,

src/strings/en-us.json

@@ -1,6 +1,8 @@
 {
+    "AllowMjpegEncoding": "Allow encoding in MJPEG format (used during trickplay generation)",
     "Trickplay": "Trickplay",
-    "TrickplayHardwareAccel": "Enable hardware acceleration",
+    "LabelTrickplayAccel": "Enable hardware acceleration",
+    "LabelTrickplayAccelHelp": "Make sure to enable 'Allow MJPEG Encoding' in Transcoding if your hardware supports it.",
     "NonBlockingScan": "Non Blocking - queues generation, then returns",
     "BlockingScan": "Blocking - queues generation, blocks scan until complete",
     "LabelScanBehavior": "Scan Behavior",
@@ -25,7 +27,7 @@
     "LabelQscale": "Qscale",
     "LabelQscaleHelp": "The quality scale of images output by ffmpeg, with 2 being the highest quality and 31 being the lowest.",
     "LabelTrickplayThreads": "FFmpeg Threads",
-    "LabelTrickplayThreadsHelp": "The number of threads to pass to the \"-threads\" argument of ffmpeg.",
+    "LabelTrickplayThreadsHelp": "The number of threads to pass to the '-threads' argument of ffmpeg.",
     "OptionExtractTrickplayImage": "Enable trickplay image extraction",
     "ExtractTrickplayImagesHelp": "Trickplay images are similar to chapter images, except they span the entire length of the content and are used to show a preview when scrubbing through videos.",
     "LabelExtractTrickplayDuringLibraryScan": "Extract trickplay images during the library scan",