How do I set the size of the MediaView so that all videos fit in the scene and can grow proportionally to the scene?

Question

At the same time, so that the videos fit entirely into the scene. This code is an attempt to fit three videos in a scene.

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.stage.Stage;

import java.awt.*;
import java.io.File;
import java.net.MalformedURLException;
import java.util.ArrayList;


public class MainListener extends Application {

    public static final int NUM_CHANNELS = 3;
    public static String current_directory;

    Button btnPlay = new Button("Play");

    ArrayList<MediaBox> mediaBoxes = new ArrayList<MediaBox>();
    Dimension dimension = Toolkit.getDefaultToolkit().getScreenSize();

    public static void main(String[] args) {
        launch(args);
    }

    public void start(Stage primaryStage) {
        primaryStage = new Stage();
        VBox vBox = new VBox();
        FlowPane flowPane = new FlowPane();
        flowPane.setOrientation(Orientation.HORIZONTAL);
        Scene scene = new Scene(vBox,dimension.getWidth()/2, dimension.getHeight()/2);
        getPathToWorkDirectory();

        for(int i = 0; i < NUM_CHANNELS; i++){
            MediaBox mediaBox = new MediaBox(i+1);
            mediaBoxes.add(mediaBox);
            flowPane.getChildren().add(mediaBox);
        }

        setActions();
        vBox.getChildren().addAll(btnPlay, flowPane);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public void setActions() {
        btnPlay.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                for (MediaBox mediaBox : mediaBoxes) {
                    mediaBox.getMediaPlayer().play();
                }
            }
        });
    }
    public static void getPathToWorkDirectory(){
        current_directory = new File("").getAbsolutePath();
        System.out.println(current_directory);
    }
}

Media View for channel. I understand that you need to use DoubleProperty to resize proportionally. But at the same time, I don’t understand how to correctly bind the scene size to the VBox node, and then bind all MediaView elements to VBox

class MediaBox extends MediaView {
    private String path;
    private Media media;

    public MediaBox(Integer num_channel){
        //Path to video
        path = MainListener.current_directory + "\\ch_" + num_channel.toString() + ".mp4";
        media = new Media(pathToURL(path));

        DoubleProperty mvw = fitWidthProperty();
        DoubleProperty mvh = fitHeightProperty();

        mvw.bind(Bindings.selectDouble(sceneProperty(), "width"));
        mvh.bind(Bindings.selectDouble(sceneProperty(), "height"));

        setMediaPlayer(new MediaPlayer(media));
    }
    private String pathToURL(String src_path) {
        File file = new File(src_path);
        String out_path = null;

        try {
            out_path = file.toURI().toURL().toString();
        } catch (MalformedURLException mURL_E) {
            System.out.println("Error in path URL for video");
        }
        return out_path;
    }
}

The video goes beyond the window

enter image description here enter image description here

Answer 1

Avoid using bindings for layout tasks. Favor using standard layout panes, and if none do what you need (which in general is unlikely), create a custom layout pane by overriding layoutChildren().

To add resizability to non-resizable nodes, such as ImageView and MediaView, wrap them in a Region and use the API of that node to resize them to the region's size.

Create a custom Region that holds a MediaView and resizes the MediaView to the region's size:

public class MediaBox extends Region {

    private final MediaView mediaView ;

    public MediaBox(MediaView mediaView) {
        this.mediaView = mediaView ;
        getChildren().add(mediaView);
    }

    @Override
    protected void layoutChildren() {
        double width = getWidth();
        double height = getHeight();
        mediaView.setFitWidth(width);
        mediaView.setFitHeight(height);
        Bounds mvBounds = mediaView.getBoundsInLocal();
        mediaView.relocate((width-mvBounds.getWidth())/2, (height-mvBounds.getHeight())/2);
    }
}

You may need to override the computePrefWidth(...), computePrefHeight(...) methods as well, to get the desired behavior.

Now you can just wrap your MediaViews in this MediaBox and use any normal layout strategy:

public void start(Stage primaryStage) {
    VBox vBox = new VBox();
    Screen screen = Screen.getPrimary();
    Rectangle2D dimension = screen.getBounds();
    FlowPane flowPane = new FlowPane();
    flowPane.setOrientation(Orientation.HORIZONTAL);
    Scene scene = new Scene(vBox, dimension.getWidth()/2, dimension.getHeight()/2);

    for(int i = 0; i < NUM_CHANNELS; i++){
        String url = Paths.get(
          System.getProperty("user.dir"), 
          "ch_"+i+".mp4"
        ).toURI().toString();
        MediaView mediaView = new MediaView(
            new MediaPlayer(
                new Media(url)
            )
        );
        mediaView.setPreserveRatio(true);
        MediaBox mediaBox = new MediaBox(mediaView);
        mediaBoxes.add(mediaBox);
        flowPane.getChildren().add(mediaBox);
    }

    setActions();
    vBox.getChildren().addAll(btnPlay, flowPane);
    primaryStage.setScene(scene);
    primaryStage.show();
}

Answer 2

I rewrote the code you left. But I still have a problem with changing the size of the Region depending on the Scene. I added scene.widthProperty.addListener() and scene.heigthProperty.addListener() to solve this problem and it worked. But is this approach correct?

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Bounds;
import javafx.geometry.Orientation;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.stage.Screen;
import javafx.stage.Stage;

import java.nio.file.Paths;
import java.util.ArrayList;

public class MainListener extends Application {

    public static final int NUM_CHANNELS = 6;

    Button btnPlay = new Button("Play");
    ArrayList<MediaBox> mediaBoxes = new ArrayList<MediaBox>();

    public static void main(String[] args) {
        launch(args);
    }

    public void start(Stage primaryStage) {
        VBox vBox = new VBox();
        Screen screen = Screen.getPrimary();
        Rectangle2D dimension = screen.getBounds();
        FlowPane flowPane = new FlowPane();
        flowPane.setOrientation(Orientation.HORIZONTAL);
        Scene scene = new Scene(vBox, dimension.getWidth(), dimension.getHeight());

        for(int i = 0; i < NUM_CHANNELS; i++){
            String url = Paths.get(System.getProperty("user.dir"),"ch_" + (i+1) + ".mp4").toUri().toString();
            System.out.println(url);
            MediaView mediaView = new MediaView(
                    new MediaPlayer(
                            new Media(url)
                    )
            );

            mediaView.setPreserveRatio(true);
            MediaBox mediaBox = new MediaBox(mediaView);

            scene.heightProperty().addListener(new ChangeListener<Number>() {
                @Override
                public void changed(ObservableValue<? extends Number> observableValue, Number number, Number t1) {
                    mediaBox.setPrefHeight(number.doubleValue()/4);
                    System.out.println("Height: " + number);
                }
            });

            scene.widthProperty().addListener(new ChangeListener<Number>() {
                @Override
                public void changed(ObservableValue<? extends Number> observableValue, Number number, Number t1) {
                    mediaBox.setPrefWidth(number.doubleValue()/4);
                    System.out.println("Width: " + number);
                }
            });
            mediaBoxes.add(mediaBox);
            flowPane.getChildren().add(mediaBox);
        }
        setActions();
        vBox.getChildren().addAll(btnPlay, flowPane);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public void setActions() {
        btnPlay.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                for(MediaBox mediaBox : mediaBoxes){
                    mediaBox.getMediaView().getMediaPlayer().play();
                }
            }
        });
    }
}

Here I have set only the setMinSize(300,400) and add getMediaView()

class MediaBox extends Region{
    private final MediaView mediaView;

    public MediaBox(MediaView mediaView){
        this.mediaView = mediaView;
        layoutChildren();
        getChildren().add(mediaView);
    }
    @Override
    protected void layoutChildren(){

        setMinSize(300, 400);

        double width = getWidth();
        double height = getHeight();

        mediaView.setFitHeight(height);
        mediaView.setFitWidth(width);
        Bounds mvBounds = mediaView.getBoundsInLocal();
        mediaView.relocate((width-mvBounds.getWidth()/2), (height-mvBounds.getHeight())/2);
    }
    public MediaView getMediaView(){
        return mediaView;
    }
}

enter image description here