fix: Fix thumbnail position calculation (shaka-project#3516)

Fix Y position calculation for the `getThumbnails` function of Player.

Fixes shaka-project#3511

AUTHORS

@@ -49,9 +49,11 @@ Nick Desaulniers <nick@mozilla.com>
 Oskar Arvidsson <oskar@irock.se>
 Patrick Cruikshank <patrick.cruikshank@gmail.com>
 Patrick Kunka <patrick@kunkalabs.com>
+Paul Jordaan <pdjordaan@gmail.com>
 Percy Tse <percy.tse@gmail.com>
 Peter Nycander <peter.nycander@gmail.com>
 Philo Inc. <*@philo.com>
+Prakash <duggaraju@gmail.com>
 Robert Colantuoni <rgc@colantuoni.com>
 Roi Lipman <roilipman@gmail.com>
 Roksolana Ivanyshyn <roksolana.ivanyshyn.pub@gmail.com>
@@ -69,6 +71,4 @@ uStudio Inc. <*@ustudio.com>
 Verizon Digital Media Services <*@verizondigitalmedia.com>
 Vincent Valot <valot.vince@gmail.com>
 Wayne Morgan <wayne.morgan.dev@gmail.com>
-Prakash <duggaraju@gmail.com>
-
 

CONTRIBUTORS

@@ -23,6 +23,7 @@
 # Please keep the list sorted.
 
 Aaron Vaage <vaage@google.com>
+Adrián Gómez Llorente <adgllorente@gmail.com>
 Aidan Ridley <aidan.ridley@charter.com>
 Alex Jones <alexedwardjones@gmail.com>
 Alvaro Velad Galvan <alvaro.velad@mirada.tv>
@@ -76,8 +77,10 @@ Niklas Korz <nk@alugha.com>
 Oskar Arvidsson <oskar@irock.se>
 Patrick Cruikshank <patrick.cruikshank@gmail.com>
 Patrick Kunka <patrick@kunkalabs.com>
+Paul Jordaan <pdjordaan@gmail.com>
 Percy Tse <percy.tse@gmail.com>
 Peter Nycander <peter.nycander@gmail.com>
+Prakash Duggaraju <duggaraju@gmail.com>
 Robert Colantuoni <rgc@colantuoni.com>
 Rohit Makasana <rohitbm@google.com>
 Roi Lipman <roilipman@gmail.com>
@@ -104,6 +107,4 @@ Vasanth Polipelli <vasanthap@google.com>
 Vignesh Venkatasubramanian <vigneshv@google.com>
 Vincent Valot <valot.vince@gmail.com>
 Wayne Morgan <wayne.morgan.dev@gmail.com>
-Yohann Connell <robinconnell@google.com>
-Adrián Gómez Llorente <adgllorente@gmail.com>
-Prakash Duggaraju <duggaraju@gmail.com>
+Yohann Connell <robinconnell@google.com>

lib/player.js

@@ -3422,8 +3422,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         const segmentTime = reference.endTime - reference.startTime;
         const thumbnailPosition =
             Math.floor(thumbnailTime * totalImages / segmentTime);
-        positionX = (thumbnailPosition % columns) / columns * fullImageWidth;
-        positionY = (thumbnailPosition % rows) / rows * fullImageHeight;
+        positionX = (thumbnailPosition % columns) * width;
+        positionY = Math.floor(thumbnailPosition / columns) * height;
       }
       return {
         height: height,

test/player_unit.js

@@ -10,6 +10,8 @@ goog.require('shaka.log');
 goog.require('shaka.media.BufferingObserver');
 goog.require('shaka.media.ManifestParser');
 goog.require('shaka.media.PresentationTimeline');
+goog.require('shaka.media.SegmentReference');
+goog.require('shaka.media.SegmentIndex');
 goog.require('shaka.test.FakeAbrManager');
 goog.require('shaka.test.FakeDrmEngine');
 goog.require('shaka.test.FakeManifestParser');
@@ -3510,6 +3512,61 @@ describe('Player', () => {
         ]);
       });
     });
+
+    describe('getThumbnails', () => {
+      it('returns correct thumbnail position for supplied time', async () => {
+        const uris = () => ['thumbnail'];
+        const segment = new shaka.media.SegmentReference(
+            0, 60, uris, 0, null, null, 0, 0, Infinity, [],
+        );
+        const index = new shaka.media.SegmentIndex([segment]);
+
+        manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+          manifest.addVariant(0, (variant) => {
+            variant.addVideo(1);
+          });
+          manifest.addImageStream(5, (stream) => {
+            stream.originalId = 'thumbnail';
+            stream.width = 200;
+            stream.height = 150;
+            stream.mimeType = 'image/jpeg';
+            stream.tilesLayout = '2x3';
+            stream.segmentIndex = index;
+          });
+        });
+
+        await player.load(fakeManifestUri, 0, fakeMimeType);
+
+        const thumbnail0 = await player.getThumbnails(5, 0);
+        const thumbnail1 = await player.getThumbnails(5, 11);
+        const thumbnail2 = await player.getThumbnails(5, 21);
+        const thumbnail5 = await player.getThumbnails(5, 51);
+        expect(thumbnail0).toEqual(jasmine.objectContaining({
+          positionX: 0,
+          positionY: 0,
+          width: 100,
+          height: 50,
+        }));
+        expect(thumbnail1).toEqual(jasmine.objectContaining({
+          positionX: 100,
+          positionY: 0,
+          width: 100,
+          height: 50,
+        }));
+        expect(thumbnail2).toEqual(jasmine.objectContaining({
+          positionX: 0,
+          positionY: 50,
+          width: 100,
+          height: 50,
+        }));
+        expect(thumbnail5).toEqual(jasmine.objectContaining({
+          positionX: 100,
+          positionY: 100,
+          width: 100,
+          height: 50,
+        }));
+      });
+    });
   });
 
   /**