From 9b998130ef049f1ffdc8591478247db9a97252a7 Mon Sep 17 00:00:00 2001 From: Splines Date: Tue, 27 Feb 2024 00:17:59 +0100 Subject: [PATCH] Fix small gap in thyme player resize issue Instead of jQuery width() and height(), we use window.innerWidth and window.innerHeight. --- app/assets/javascripts/thyme/resizer.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/thyme/resizer.js b/app/assets/javascripts/thyme/resizer.js index 420c4cb1c..7c51e3291 100644 --- a/app/assets/javascripts/thyme/resizer.js +++ b/app/assets/javascripts/thyme/resizer.js @@ -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");