Video widget not playing if src is rendered rather than hard-coded

[upstageleft]

The code below demonstrates a rendering problem I'm experiencing.

If, in the RENDER block, you select the variable atn as the return value, the widget renders the video properly, and it plays when loaded. However, if you select the rtn variable instead, then the video does not play when the widget is rendered, even though the debug console shows the proper src attribute value in the rendered code.

(For the demo, you can use any two mp4 video files you have on hand, and substitute any trigger for the hidden status of the trigger widget.

This is happening on Übersicht version 1.6 (latest version as of posting date), on macOS Catalina 10.15.7 (fully patched).

For context, I am updating a widget from a coffeescript version which worked perfectly in the same environment, but the jsx version will not. This is a stripped down version which I have tested and from whch I consistently get the same results.

export const command = `
    # THE TRIGGER WIDGET'S VISIBILITY CAN BE REPLACED WITH A SIMPLE TRUE/FALSE FOR TESTING
    hidden=$(osascript -e 'tell application "Übersicht" to get the hidden of widget id "trigger-jsx" as text')
    if [[ $hidden = "true" ]] ; then
        echo -n 'vid1.mp4'
    else
        echo -n 'vid2.mp4'
    fi
`;

export const refreshFrequency = false;

export const render = ({output}) => {
    let vidsrc = 'rsrc/'+output;
    let rtn = (
        <video id="vid" autoPlay={true} muted={true}>
            <source src={vidsrc} type="video/mp4" />
        </video>
    );
    let atn = (
        <video id="vid" autoPlay={true} muted={true}>
            <source src="rsrc/vid1.mp4" type="video/mp4" />
        </video>
    );
    return atn; // TOGGLE BETWEEN atn AND rtn TO SEE THE PROBLEM
};

export const className = `
    left: 0px; top: 0px; height: 100%; width: 100%; background: rgba(64,64,64,0.8);
    video {
        height: 100%; max-width: 100%;
    }
`;

[upstageleft]

OK, I solved this one on my own with some exploration.

Since the render function is run when the widget is first loaded, the src value is undefined, and since there is no updateState function defined, the widget is not updated once the comand is run.

The fix was to change the command to simply run the test defining the value of $hidden, and then assign a value to the src withing the render function depending on the boolean returned from command. In addition, I added a test:

    if ( output.trim() == '' ) return false;

at the top of the render function so that the widget will not render intially and will wait until there is a value returned from command. The updated (and properly working) code for the test now looks like this:

export const command = `
    osascript -e 'tell application "Übersicht" to get the hidden of widget id "trigger-jsx" as text'
`;

export const render = ({output}) => {
    if ( output.trim() == '' ) return false;
    let vidsrc = 'rsrc/'+( output.trim() == 'true'? 'vid1.mp4': 'vid2.mp4' );
    return (
        <video id="vid" autoPlay={true} muted={true}>
            <source src={vidsrc} type="video/mp4" />
        </video>
    );
};