Adjustable sizing

[bartbutenaers]

The sizing of the video - in the available space - depends on the use case or on the user preference.

I had four sizing options in my old node-red-contrib-ui-mp4-player. That might perhaps be usefull here?

[bartbutenaers]

Below all the code that was implemented in my old node:

Config screen

    <div class="form-row">
        <label for="node-input-resizing"><i class="fa fa-arrows-alt"></i> Resize</label>
        <select id="node-input-resizing">
            <option value="stretch">Stretch</option>
            <option value="crop">Fit and crop</option>
            <option value="fit">Fit without crop</option>
            <option value="none">None</option>
        </select>
    </div>

Frontend

        // Resize the video by setting the CSS object-fit attribute.
        // See image example at https://tympanus.net/codrops/css_reference/object-fit/
        switch (config.resizing) {
            case "fit":
                // Keep the aspect ratio and leave the remaining svg area empty.
                objectFit = "contain";
                break;
            case "crop":
                // Keep the aspect ratio and crop part of the image, to fit it in the shortest dimension.
                objectFit = "cover";
                break;
            case "stretch":
                // Don't keep the aspect ratio, i.e. stretch the image in both directions to fit the entire svg area
                objectFit = "fill";
                break;
            case "none":
                // Don't keep the aspect ratio, i.e. stretch the image in both directions to fit the entire svg area
                objectFit = "none";
                break;
        }

        var sourceStyle = "z-index:1; position:relative; width:100%; height:100%; object-fit:" + objectFit + "; max-width:none; max-height:none; top:50%; transform:translateY(-50%);";

        // Parent div container.
        // Set height to 'auto' (instead of 100%) because otherwise you will get a vertical scrollbar: reason is that the height or width of the element, are
        // the first thing that will be calculated. Only afterwards the margins and paddings are added. So if you have an element with a height of 100% and top
        // and bottom margins (applied by the Node-RED parent elements) of 10 pixels each, there will be a scroll bar for the extra 20 pixels.
        // See more detail on https://www.lifewire.com/set-height-html-element-100-percent-3467075.
        // Set the video muted, to avoid "play() failed because the user didn't interact with the document first" ...
        // TODO remove the pointer-events on the svg tag afterwards: it is added to test the right click popupmenu
        var html = String.raw`<script src= "ui_mp4_player/hls.js"></script>
                              <div style="width: 100%; height: 100%; overflow: hidden; border: 1px solid black;" ng-init='init(` + configAsJson + `)'>
                                <video id="mp4_player_video_` + config.id + `" style="` + sourceStyle + `" muted playsinline >
                                    <p>Your browser does not support the HTML5 Video element.</p>
                                </video>
                                <svg id="mp4_player_svg_` + config.id + `" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; z-index: 2; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events:none">       
                                </svg>
                              </div>`;
        return html;

[bartbutenaers]

I have implemented this, but the above options were very confusing. So I have now mapped them to these:

Short demo of how it looks like when changing the resizing dynamically: