Merge branch 'develop' of github.com:sampotts/plyr into develop

# Conflicts:
#	src/sass/components/video.scss
This commit is contained in:
Sam Potts
2020-01-21 22:15:38 +00:00
2 changed files with 24 additions and 8 deletions

View File

@ -540,8 +540,8 @@ class PreviewThumbnails {
get thumbContainerHeight() { get thumbContainerHeight() {
if (this.mouseDown) { if (this.mouseDown) {
// Can't use media.clientHeight - HTML5 video goes big and does black bars above and below const { height } = fitRatio(this.thumbAspectRatio, { width: this.player.media.clientWidth, height: this.player.media.clientHeight });
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio); return height;
} }
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4); return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@ -624,9 +624,9 @@ class PreviewThumbnails {
// Can't use 100% width, in case the video is a different aspect ratio to the video container // Can't use 100% width, in case the video is a different aspect ratio to the video container
setScrubbingContainerSize() { setScrubbingContainerSize() {
this.elements.scrubbing.container.style.width = `${this.player.media.clientWidth}px`; const { width, height } = fitRatio(this.thumbAspectRatio, { width: this.player.media.clientWidth, height: this.player.media.clientHeight });
// Can't use media.clientHeight - html5 video goes big and does black bars above and below this.elements.scrubbing.container.style.width = `${width}px`;
this.elements.scrubbing.container.style.height = `${this.player.media.clientWidth / this.thumbAspectRatio}px`; this.elements.scrubbing.container.style.height = `${height}px`;
} }
// Sprites need to be offset to the correct location // Sprites need to be offset to the correct location
@ -639,14 +639,29 @@ class PreviewThumbnails {
const multiplier = this.thumbContainerHeight / frame.h; const multiplier = this.thumbContainerHeight / frame.h;
// eslint-disable-next-line no-param-reassign // 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 // 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 // eslint-disable-next-line no-param-reassign
previewImage.style.left = `-${frame.x * multiplier}px`; previewImage.style.left = `-${frame.x * multiplier}px`;
// eslint-disable-next-line no-param-reassign // eslint-disable-next-line no-param-reassign
previewImage.style.top = `-${frame.y * multiplier}px`; previewImage.style.top = `-${frame.y * multiplier}px`;
} }
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;
}
} }
export default PreviewThumbnails; export default PreviewThumbnails;

View File

@ -11,6 +11,7 @@
font-family: $plyr-font-family; font-family: $plyr-font-family;
font-variant-numeric: tabular-nums; // Force monosace-esque number widths font-variant-numeric: tabular-nums; // Force monosace-esque number widths
font-weight: $plyr-font-weight-regular; font-weight: $plyr-font-weight-regular;
height: 100%;
line-height: $plyr-line-height; line-height: $plyr-line-height;
max-width: 100%; max-width: 100%;
min-width: 200px; min-width: 200px;
@ -22,7 +23,7 @@
video, video,
audio { audio {
border-radius: inherit; border-radius: inherit;
height: auto; height: 100%;
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
} }