Skip to content

Commit

Permalink
Fix small gap in thyme player resize issue
Browse files Browse the repository at this point in the history
Instead of jQuery width() and height(), we use
window.innerWidth and window.innerHeight.
  • Loading branch information
Splines committed Feb 26, 2024
1 parent 7b3d863 commit 9b99813
Showing 1 changed file with 13 additions and 7 deletions.
20 changes: 13 additions & 7 deletions app/assets/javascripts/thyme/resizer.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,26 @@
// eslint-disable-next-line no-unused-vars
const Resizer = {
resizeContainer: function (container, factor, offset) {
// see https://stackoverflow.com/a/73425736/
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

const video = document.getElementById("video");
const $container = $(container);

let height = $(window).height();
let height = windowHeight;
const vWidth = video.videoWidth;
const vHeight = video.videoHeight;
let width = Math.floor((vWidth * $(window).height() / vHeight) * factor) - offset;
if (width > $(window).width()) {
const shrink = $(window).width() / width;
let width = Math.floor((vWidth * windowHeight / vHeight) * factor) - offset;
if (width > windowWidth) {
const shrink = windowWidth / width;
height = Math.floor(height * shrink);
width = $(window).width();
width = windowWidth;
}
const top = Math.floor(0.5 * ($(window).height() - height));
const left = Math.floor(0.5 * ($(window).width() - width));

const top = Math.floor(0.5 * (windowHeight - height));
const left = Math.floor(0.5 * (windowWidth - width));

$container.css("height", height + "px");
$container.css("width", width + "px");
$container.css("top", top + "px");
Expand Down

0 comments on commit 9b99813

Please sign in to comment.