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 <[email protected]>
 Oskar Arvidsson <[email protected]>
 Patrick Cruikshank <[email protected]>
 Patrick Kunka <[email protected]>
+Paul Jordaan <[email protected]>
 Percy Tse <[email protected]>
 Peter Nycander <[email protected]>
 Philo Inc. <*@philo.com>
+Prakash <[email protected]>
 Robert Colantuoni <[email protected]>
 Roi Lipman <[email protected]>
 Roksolana Ivanyshyn <[email protected]>
@@ -69,6 +71,4 @@ uStudio Inc. <*@ustudio.com>
 Verizon Digital Media Services <*@verizondigitalmedia.com>
 Vincent Valot <[email protected]>
 Wayne Morgan <[email protected]>
-Prakash <[email protected]>
-
 

CONTRIBUTORS

@@ -23,6 +23,7 @@
 # Please keep the list sorted.
 
 Aaron Vaage <[email protected]>
+Adrián Gómez Llorente <[email protected]>
 Aidan Ridley <[email protected]>
 Alex Jones <[email protected]>
 Alvaro Velad Galvan <[email protected]>
@@ -76,8 +77,10 @@ Niklas Korz <[email protected]>
 Oskar Arvidsson <[email protected]>
 Patrick Cruikshank <[email protected]>
 Patrick Kunka <[email protected]>
+Paul Jordaan <[email protected]>
 Percy Tse <[email protected]>
 Peter Nycander <[email protected]>
+Prakash Duggaraju <[email protected]>
 Robert Colantuoni <[email protected]>
 Rohit Makasana <[email protected]>
 Roi Lipman <[email protected]>
@@ -104,6 +107,4 @@ Vasanth Polipelli <[email protected]>
 Vignesh Venkatasubramanian <[email protected]>
 Vincent Valot <[email protected]>
 Wayne Morgan <[email protected]>
-Yohann Connell <[email protected]>
-Adrián Gómez Llorente <[email protected]>
-Prakash Duggaraju <[email protected]>
+Yohann Connell <[email protected]>

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,
+        }));
+      });
+    });
   });
 
   /**