Locked image on screen, mouse cursor panning doesnt work

[zekecounter]

Describe the bug

Panning images or videos doesnt work with the function of "Locked image on screen" for firefox, tested it on chrome and it works normally (when you have a video or image "locked" you can pan and zoom on anywhere on what you have up)

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.reddit.com/domain/v.redd.it/ (for videos) or https://www.reddit.com/domain/i.redd.it/ (for images)
2. Hover the mouse cursor over any thumbnail and press ur assigned key to "Locked image on screen"
3. Once you have the thumbnail locked, scroll(zoom in) a bit then try to move ur cursor around and see if the image follows wherever ur cursor is pointing at
4. See error

Expected behavior
By default it should pan around where my cursor is pointing at.

Screenshots
https://streamable.com/6b3g6h

Desktop (please complete the following information):

• OS: [windows 10, 64bit desktop)
• Browser [Firefox 105.0.1 (64-bit)
• Version [Hoverzoom+ 1.0.196)

Additional context
Tried to tick the center image box under general tab (hoverzoom+ options) then untick but didnt work. if you know any other ways i can try to make it work let me know!

[LoveIsGrief]

Is this the relevant function? https://github.com/extesy/hoverzoom/blob/95ca04933a4c60845bdf742944bc0f046bef2515/js/hoverzoom.js#L943C5-L1042

At first glance, I can't seem to find an error with it.

But I do get this in the console when moving the mouse

hoverzoom/js/hoverzoom.js

Lines 572 to 582 in 95ca049

	function panLockedViewer() {
	var width = imgFullSize[0].width || imgFullSize[0].videoWidth * zoomFactor;
	var height = imgFullSize[0].height || imgFullSize[0].videoHeight * zoomFactor;
	var widthOffset = (width - window.innerWidth) / 2;
	var heightOffset = (height - window.innerHeight) / 2;
	var ratioX = 1 - (2 * event.clientX / window.innerWidth);
	var ratioY = 1 - (2 * event.clientY / window.innerHeight);
	var dx = widthOffset > 0 ? ratioX * (widthOffset + 50) : 0;
	var dy = heightOffset > 0 ? ratioY * (heightOffset + 50) : 0;
	hz.hzViewer.css('transform', `translate(${dx}px, ${dy}px)`);
	}

The stack shows that it's called by documentMouseMove

TypeError: event is undefined65 [hoverzoom.js:577:26](moz-extension://44f7124d-8645-4cca-bcfc-4014d3a18a96/js/hoverzoom.js)
    panLockedViewer moz-extension://44f7124d-8645-4cca-bcfc-4014d3a18a96/js/hoverzoom.js:577
    documentMouseMove moz-extension://44f7124d-8645-4cca-bcfc-4014d3a18a96/js/hoverzoom.js:956
    jQuery 9
    bindEvents moz-extension://44f7124d-8645-4cca-bcfc-4014d3a18a96/js/hoverzoom.js:2137
    init moz-extension://44f7124d-8645-4cca-bcfc-4014d3a18a96/js/hoverzoom.js:3280
    applyOptions moz-extension://44f7124d-8645-4cca-bcfc-4014d3a18a96/js/hoverzoom.js:2018
    loadOptions moz-extension://44f7124d-8645-4cca-bcfc-4014d3a18a96/js/hoverzoom.js:2056
    apply self-hosted:2270
    applySafeWithoutClone resource://gre/modules/ExtensionCommon.jsm:649
    wrapPromise resource://gre/modules/ExtensionCommon.jsm:913
    (Async: promise callback)
    wrapPromise resource://gre/modules/ExtensionCommon.jsm:899
    callAsyncFunction resource://gre/modules/ExtensionCommon.jsm:1172
    callAsyncFunction resource://gre/modules/ExtensionChild.jsm:733
    callAndLog resource://gre/modules/ExtensionChild.jsm:704
    callAsyncFunction resource://gre/modules/ExtensionChild.jsm:732
    stub resource://gre/modules/Schemas.jsm:2906
    loadOptions moz-extension://44f7124d-8645-4cca-bcfc-4014d3a18a96/js/hoverzoom.js:2053
    loadHoverZoom moz-extension://44f7124d-8645-4cca-bcfc-4014d3a18a96/js/hoverzoom.js:3287
    <anonymous> moz-extension://44f7124d-8645-4cca-bcfc-4014d3a18a96/js/hoverzoom.js:3845
    inject resource://gre/modules/ExtensionContent.jsm:593
    AsyncFunctionNext self-hosted:756

hoverzoom/js/hoverzoom.js

Line 956 in 95ca049

if (imgFullSize) panLockedViewer();

The fix might be as easy as passing event to the function...