aboutsummaryrefslogtreecommitdiffstats
path: root/src/js/plugins/preview-thumbnails.js
diff options
context:
space:
mode:
authorSam Potts <sam@potts.es>2020-01-30 14:23:40 +0000
committerGitHub <noreply@github.com>2020-01-30 14:23:40 +0000
commit58f5380694993891892e4e24ba0904434892e538 (patch)
tree4de3d7b46d33192a43a0b40c3f3a9a5f90f9b071 /src/js/plugins/preview-thumbnails.js
parent9d512911252cf4835c2b7364cb4ae392cb277a1d (diff)
parentfefcca78052174dce73f8dfe7df5b264edb0653a (diff)
downloadplyr-58f5380694993891892e4e24ba0904434892e538.tar.lz
plyr-58f5380694993891892e4e24ba0904434892e538.tar.xz
plyr-58f5380694993891892e4e24ba0904434892e538.zip
Merge pull request #1662 from sampotts/develop
3.5.7
Diffstat (limited to 'src/js/plugins/preview-thumbnails.js')
-rw-r--r--src/js/plugins/preview-thumbnails.js34
1 files changed, 27 insertions, 7 deletions
diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js
index 61021d64..44e6ace7 100644
--- a/src/js/plugins/preview-thumbnails.js
+++ b/src/js/plugins/preview-thumbnails.js
@@ -63,6 +63,20 @@ const parseVtt = vttDataString => {
* - This implementation uses multiple separate img elements. Other implementations use background-image on one element. This would be nice and simple, but Firefox and Safari have flickering issues with replacing backgrounds of larger images. It seems that YouTube perhaps only avoids this because they don't have the option for high-res previews (even the fullscreen ones, when mousedown/seeking). Images appear over the top of each other, and previous ones are discarded once the new ones have been rendered
*/
+const fitRatio = (ratio, outer) => {
+ const targetRatio = outer.width / outer.height;
+ const result = {};
+ if (ratio > targetRatio) {
+ result.width = outer.width;
+ result.height = (1 / ratio) * outer.width;
+ } else {
+ result.height = outer.height;
+ result.width = ratio * outer.height;
+ }
+
+ return result;
+};
+
class PreviewThumbnails {
/**
* PreviewThumbnails constructor.
@@ -540,8 +554,11 @@ class PreviewThumbnails {
get thumbContainerHeight() {
if (this.mouseDown) {
- // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
- return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
+ const { height } = fitRatio(this.thumbAspectRatio, {
+ width: this.player.media.clientWidth,
+ height: this.player.media.clientHeight,
+ });
+ return height;
}
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -624,9 +641,12 @@ class PreviewThumbnails {
// Can't use 100% width, in case the video is a different aspect ratio to the video container
setScrubbingContainerSize() {
- this.elements.scrubbing.container.style.width = `${this.player.media.clientWidth}px`;
- // Can't use media.clientHeight - html5 video goes big and does black bars above and below
- this.elements.scrubbing.container.style.height = `${this.player.media.clientWidth / this.thumbAspectRatio}px`;
+ const { width, height } = fitRatio(this.thumbAspectRatio, {
+ width: this.player.media.clientWidth,
+ height: this.player.media.clientHeight,
+ });
+ this.elements.scrubbing.container.style.width = `${width}px`;
+ this.elements.scrubbing.container.style.height = `${height}px`;
}
// Sprites need to be offset to the correct location
@@ -639,9 +659,9 @@ class PreviewThumbnails {
const multiplier = this.thumbContainerHeight / frame.h;
// eslint-disable-next-line no-param-reassign
- previewImage.style.height = `${Math.floor(previewImage.naturalHeight * multiplier)}px`;
+ previewImage.style.height = `${previewImage.naturalHeight * multiplier}px`;
// eslint-disable-next-line no-param-reassign
- previewImage.style.width = `${Math.floor(previewImage.naturalWidth * multiplier)}px`;
+ previewImage.style.width = `${previewImage.naturalWidth * multiplier}px`;
// eslint-disable-next-line no-param-reassign
previewImage.style.left = `-${frame.x * multiplier}px`;
// eslint-disable-next-line no-param-reassign