Fix missing stream URL, summarize streams in probe log, don't lock type for first stream

src/misc/coders/settings/Video.js

@@ -327,6 +327,43 @@ Format.defaultProps = {
 	onChange: function (event) {},
 };
 
+function PixFormat(props) {
+	const { i18n } = useLingui();
+	const sizes = [
+		{ value: 'yuv420p', label: 'yuv420p' },
+		{ value: 'nv12', label: 'nv12' },
+	];
+
+	if (props.allowAuto === true) {
+		sizes.unshift({ value: 'auto', label: 'auto' });
+	}
+
+	if (props.allowCustom === true) {
+		sizes.push({ value: 'custom', label: i18n._(t`Custom ...`) });
+	}
+
+	return (
+		<SelectCustom
+			options={sizes}
+			label={props.label}
+			customLabel={props.customLabel}
+			value={props.value}
+			onChange={props.onChange}
+			variant={props.variant}
+			allowCustom={props.allowCustom}
+		/>
+	);
+}
+
+PixFormat.defaultProps = {
+	allowAuto: false,
+	allowCustom: false,
+	variant: 'outlined',
+	label: <Trans>Pixel Format</Trans>,
+	customLabel: <Trans>Custom format</Trans>,
+	onChange: function (event) {},
+};
+
 function FpsMode(props) {
 	return (
 		<Select label={<Trans>Framerate mode</Trans>} value={props.value} onChange={props.onChange}>
@@ -360,5 +397,6 @@ export default {
 	Width,
 	Height,
 	Format,
+	PixFormat,
 	FpsMode,
 };

src/misc/modals/Hint.js

@@ -36,6 +36,10 @@ const Stream = function (props) {
 					stream.width = 1920;
 					stream.height = 1080;
 				}
+
+				if (stream.pix_fmt === '') {
+					stream.pix_fmt = 'yuv240p';
+				}
 			}
 			stream.type = value;
 		} else if (what === 'size') {
@@ -53,7 +57,7 @@ const Stream = function (props) {
 	return (
 		<Grid container spacing={1}>
 			<Grid item xs={6}>
-				<Select label={<Trans>Type</Trans>} value={props.stream.type} onChange={handleChange('type')} disabled={props.locked}>
+				<Select label={<Trans>Type</Trans>} value={props.stream.type} onChange={handleChange('type')}>
 					<MenuItem value="audio">Audio</MenuItem>
 					<MenuItem value="video">Video</MenuItem>
 				</Select>
@@ -87,6 +91,9 @@ const Stream = function (props) {
 					<Grid item xs={12}>
 						<Video.Size value={props.stream.width + 'x' + props.stream.height} onChange={handleChange('size')} allowCustom />
 					</Grid>
+					<Grid item xs={12}>
+						<Video.PixFormat value={props.stream.pix_fmt} onChange={handleChange('pix_fmt')} allowCustom />
+					</Grid>
 				</React.Fragment>
 			)}
 		</Grid>
@@ -95,7 +102,6 @@ const Stream = function (props) {
 
 Stream.defaultProps = {
 	stream: {},
-	locked: false,
 	onChange: () => {},
 };
 
@@ -138,7 +144,7 @@ const Streams = function (props) {
 				<Grid key={stream.index + ':' + stream.stream} item xs={12}>
 					<Stack spacing={1}>
 						<Typography>Stream {stream.stream}</Typography>
-						<Stream stream={stream} onChange={handleChange(index)} locked={index === 0} />
+						<Stream stream={stream} onChange={handleChange(index)} />
 						{index > 0 && (
 							<Button variant="outlined" color="secondary" onClick={handleRemoveStream(index)}>
 								<Trans>Remove Stream</Trans>

src/utils/metadata.js

@@ -949,12 +949,14 @@ const initStream = (initialStream) => {
 	}
 
 	const stream = {
+		url: '',
 		index: 0,
 		stream: 0,
 		type: '',
 		codec: '',
 		width: 0,
 		height: 0,
+		pix_fmt: '',
 		sampling_hz: 0,
 		layout: '',
 		channels: 0,

src/views/Edit/Profile.js

@@ -374,12 +374,14 @@ export default function Profile(props) {
 		if (type === 'video') {
 			streams = [
 				{
+					url: '',
 					index: 0,
 					stream: 0,
 					type: 'video',
 					codec: 'h264',
 					width: 1920,
 					height: 1080,
+					pix_fmt: 'yuv420p',
 					sampling_hz: 0,
 					layout: '',
 					channels: 0,
@@ -388,13 +390,14 @@ export default function Profile(props) {
 		} else if (type === 'audio') {
 			streams = [
 				{
+					url: '',
 					index: 1,
 					stream: 0,
 					type: 'audio',
 					codec: 'aac',
 					width: 0,
 					height: 0,
-					sampling_hz: 44100,
+					sampling_hz: '44100',
 					layout: 'stereo',
 					channels: 2,
 				},
@@ -448,9 +451,26 @@ export default function Profile(props) {
 		const inputs = $sources[type].inputs;
 		const probe = {
 			streams: $hintModal.streams,
-			log: ['Stream hints'],
+			log: [],
 		};
 
+		const url = inputs[0].address;
+
+		probe.log.push(`Stream hints for input from '${url}'`);
+
+		for (let s of $hintModal.streams) {
+			s.url = url;
+
+			let stream = `Stream #${s.index}:${s.stream}: `;
+			if (s.type === 'video') {
+				stream += `Video: ${s.codec}, ${s.pix_fmt}, ${s.width}x${s.height}`;
+			} else if (s.type === 'audio') {
+				stream += `Audio: ${s.codec}, ${s.sampling_hz} Hz, ${s.layout}`;
+			}
+
+			probe.log.push(stream);
+		}
+
 		handleProbeStreams(type, device, settings, inputs, probe);
 
 		handleHintModal('none')(null);
@@ -656,6 +676,15 @@ export default function Profile(props) {
 															.
 														</Trans>
 													</Typography>
+													<Typography>
+														<Trans>
+															In order to proceed anyways, you can provide{' '}
+															<Link color="textSecondary" href="#!" onClick={handleHintModal('audio', [])}>
+																hints
+															</Link>{' '}
+															about the available streams.
+														</Trans>
+													</Typography>
 												</BoxText>
 											</Grid>
 										)}