ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

allows to set only width or height for thumb css size

Browse Source 
Also fixes sprites when css thumb size is used
This commit is contained in:
ydylla 2020-02-08 19:04:26 +01:00
parent 8b9521d5a5
commit 97f8093a8d
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/js/plugins/preview-thumbnails.js
View File

@ -561,6 +561,11 @@ class PreviewThumbnails {
return height; return height;
} }
// If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
if (this.sizeSpecifiedInCSS) {
return this.elements.thumb.imageContainer.clientHeight;
}
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4); return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
} }
@ -601,7 +606,7 @@ class PreviewThumbnails {
} }
determineContainerAutoSizing() { determineContainerAutoSizing() {
if (this.elements.thumb.imageContainer.clientHeight > 20) { if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
// This will prevent auto sizing in this.setThumbContainerSizeAndPos() // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
this.sizeSpecifiedInCSS = true; this.sizeSpecifiedInCSS = true;
} }
@ -613,6 +618,12 @@ class PreviewThumbnails {
const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio); const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`; this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`; this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
} else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
} else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
} }
this.setThumbContainerPos(); this.setThumbContainerPos();