[BUG]: Live Preview onyl works on first colage photo

[srvoets]

Describe the bug

Live preview loads for first collage photo, then during countdown for second photo, the "preview" of the first image remains.

Steps to reproduce the behavior

Take collage photo with live preview

Expected behavior

I should get a live preview before each photo during countdown

Photobooth Version

4.99.0

Browser and browser version

No response

Operating System

No response

Did it work before?

Yes

Latest working version

I dont recall, it was in august when I tested last.

Additional context

No response

[nbosb]

I think this should be fixed by #1267, could you can test it again @srvoets?

[andi34]

Since there's a poor description (not mentioned which preview setup is used) of the bug it could also be the problem fixed here: #1136

[reloxx13]

Since there's a poor description (not mentioned which preview setup is used) of the bug it could also be the problem fixed here: #1136

nope, problem dod not get fixed with this

I think this should be fixed by #1267, could you can test it again @srvoets?

but finally with this, collage is usable again after 1 year.

[reloxx13]

Hey,
with this change, the preview is not loading on ipad 9. gen ios 17.5.1, tested in safari and firefox. works fine on windows firefox.

i rolled back to an backup before this change its working again

[andi34]

@reloxx13 updated the URL config? The url() must be removed.

Myself has no hands to an iOS device, can never guarantee compatibility.

[reloxx13]

Hey, yes, the config was without url().

The failure seems specific to the infinite multipart/x-mixed-replace and Transfer-Encoding: chunked combination, which Safari WebKit doesnt like. I just did some research.

[reloxx13]

I guess easiest way to fix would be to use the addCacheBustingParam on the background-image.

[andi34]

Could you try
http://localhost:1984/api/stream.m3u8?src=photobooth
Or
http://localhost:1984/api/webrtc.html?src=photobooth

As url config?

[reloxx13]

Could you try http://localhost:1984/api/stream.m3u8?src=photobooth Or http://localhost:1984/api/webrtc.html?src=photobooth

As url config?

neither worked

to get it fixed i added this to the old version with the div, not img.

    function addCacheBustingParam(url) {
        const timestamp = new Date().getTime();

        if (url.includes('?')) {
            return `${url}&t=${timestamp}`;
        }

        return `${url}?t=${timestamp}`;
    }

    function getRootProperty(property) {
        const root = document.documentElement;
        const style = getComputedStyle(root);
        return style.getPropertyValue(property).trim();
    }
    
    function parseCssUrl(cssValue) {
        const match = cssValue.match(/url\(["']?(.*?)["']?\)/);
        return match ? match[1] : null;
    }

....

    photoboothTools.console.logDev('Preview: Preview at countdown from URL.');
    const cssValue = getRootProperty('--background-preview'); //get orginal url
    const baseUrl = parseCssUrl(cssValue); // remove url("")
    const cacheBusted = addCacheBustingParam(baseUrl); // add timestampe
    url.css('background-image', `url("${cacheBusted}")`);
    setTimeout(function () {

.....