Codename One Capture API correct usage - codenameone

Question

I tried to use the following code with the purpose to record some videos with real devices (Android and iPhone) and to see the resulting file sizes. But it doesn't work... it seems to record, but it doesn't play the resulting videos neither on Android nor iOS.
I wrote the following code merging some examples in the Codename One API. What's wrong?
Form hi = new Form("Capture", BorderLayout.center());
Container cnt = new Container(BoxLayout.y());
hi.setToolbar(new Toolbar());
Style s = UIManager.getInstance().getComponentStyle("Title");
FontImage icon = FontImage.createMaterial(FontImage.MATERIAL_VIDEOCAM, s);
FileSystemStorage fs = FileSystemStorage.getInstance();
String recordingsDir = fs.getAppHomePath() + "recordings/";
fs.mkdir(recordingsDir);
try {
for (String file : fs.listFiles(recordingsDir)) {
Button mb = new Button(file.substring(file.lastIndexOf("/") + 1) + " - " + (int) (fs.getLength(recordingsDir + file) / 1024.0 / 1024.0 * 100) / 100.0 + " MB");
mb.addActionListener((e) -> {
try {
Media video = MediaManager.createMedia(recordingsDir + file, true);
hi.removeAll();
hi.add(BorderLayout.CENTER, new MediaPlayer(video));
hi.revalidate();
} catch (IOException err) {
Log.e(err);
}
});
cnt.add(mb);
}
hi.add(BorderLayout.CENTER, cnt);
hi.getToolbar().addCommandToRightBar("", icon, (ev) -> {
try {
String file = Capture.captureVideo();
if (file != null) {
SimpleDateFormat sd = new SimpleDateFormat("yyyy-MMM-dd-kk-mm");
String fileName = sd.format(new Date());
String filePath = recordingsDir + fileName;
Util.copy(fs.openInputStream(file), fs.openOutputStream(filePath));
Button mb = new Button(file.substring(file.lastIndexOf("/") + 1) + " - " + (int) (fs.getLength(filePath) / 1024.0 / 1024.0 * 100) / 100.0 + " MB");
mb.addActionListener((e) -> {
try {
Media video = MediaManager.createMedia(filePath, true);
hi.removeAll();
hi.add(BorderLayout.CENTER, new MediaPlayer(video));
hi.revalidate();
} catch (IOException err) {
Log.e(err);
}
});
cnt.add(mb);
cnt.getParent().revalidate();
}
} catch (IOException err) {
Log.e(err);
}
});
} catch (IOException err) {
Log.e(err);
}
hi.show();
This is what I see on iPhone X after tapping a Button to open a recorded video (that is very similar to what I see on Android 7):

Answer 1

I spent so much time looking at this it's embarrassing...
Change this:
Form hi = new Form("Capture", BorderLayout.center());
To this:
Form hi = new Form("Capture", new BorderLayout());
The former gives the component its preferred size. The latter scales it to take up available space. The preferred size is zero on most platforms since the video needs to load for preferred size to apply. When it loads one would need to reflow the layout.