Add Facebook Live creation functionality and new settings fields

src/views/Edit/Sources/Network.js

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme) => ({
 		height: '56px',
 		minWidth: '56px',
 		color: 'rgba(255,255,255,0.5)',
-		borderColor: 'rgba(255,255,255,0.23)',
+		borderColor: 'rgba(128,128,128,0.35)',
 		'&:hover': {
 			borderColor: '#FF0000',
 			color: '#FF0000',

src/views/Publication/Services/Facebook.js

@@ -45,6 +45,12 @@ function init(settings) {
 		stream_key_backup: '',
 		rtmp_primary: true,
 		rtmp_backup: false,
+		// new fields
+		page_id: '',
+		page_access_token: '',
+		title: '',
+		description: '',
+		create_live: false,
 		...settings,
 	};
 
@@ -55,9 +61,9 @@ function Service(props) {
 	const settings = init(props.settings);
 
 	const handleChange = (what) => (event) => {
-		const value = event.target.value;
+		const value = event && event.target ? event.target.value : event;
 
-		if (['rtmp_primary', 'rtmp_backup'].includes(what)) {
+		if (['rtmp_primary', 'rtmp_backup', 'create_live'].includes(what)) {
 			settings[what] = !settings[what];
 		} else {
 			settings[what] = value;
@@ -96,6 +102,62 @@ function Service(props) {
 		return outputs;
 	};
 
+	// Creates a Facebook live video via Graph API and fills the primary stream key
+	const createFacebookLive = async () => {
+		if (!settings.page_id || !settings.page_access_token) {
+			window.alert('Please provide Page ID and Page Access Token to create a Facebook Live.');
+			return;
+		}
+
+		try {
+			const url = `https://graph.facebook.com/${encodeURIComponent(settings.page_id)}/live_videos`;
+			const form = new URLSearchParams();
+			if (settings.title) form.append('title', settings.title);
+			if (settings.description) form.append('description', settings.description);
+			form.append('access_token', settings.page_access_token);
+
+			const resp = await fetch(url, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+				},
+				body: form.toString(),
+			});
+
+			if (!resp.ok) {
+				const text = await resp.text();
+				throw new Error('Facebook API error: ' + text);
+			}
+
+			const data = await resp.json();
+
+			// Facebook returns a stream_url or stream_url/secure_stream_url — extract key
+			let stream = '';
+			if (data.stream_url) stream = data.stream_url;
+			else if (data.secure_stream_url) stream = data.secure_stream_url;
+
+			if (stream.length === 0) {
+				window.alert('Facebook did not return a stream URL.');
+				return;
+			}
+
+			// stream like rtmps://live-api-s.facebook.com:443/rtmp/STREAM_KEY
+			const parts = stream.split('/');
+			const key = parts[parts.length - 1] || '';
+
+			settings.stream_key_primary = key;
+			settings.create_live = true;
+
+			const outputs = createOutput(settings);
+			props.onChange(outputs, settings);
+
+			window.alert('Facebook Live creado y stream key rellenada.');
+		} catch (err) {
+			console.error(err);
+			window.alert('Error creando Facebook Live: ' + err.message);
+		}
+	};
+
 	return (
 		<Grid container spacing={2}>
 			{settings.rtmp_primary === true && (
@@ -107,6 +169,11 @@ function Service(props) {
 						value={settings.stream_key_primary}
 						onChange={handleChange('stream_key_primary')}
 					/>
+
+					{/* Button to create FB Live and populate stream key */}
+					<FormInlineButton onClick={createFacebookLive} style={{ marginTop: 8 }}>
+						<Trans>Create</Trans>
+					</FormInlineButton>
 				</Grid>
 			)}
 			{settings.rtmp_primary === true && (
@@ -134,9 +201,27 @@ function Service(props) {
 					</FormInlineButton>
 				</Grid>
 			)}
+
+			{/* New fields for page id, token, title and description */}
+			<Grid item xs={12} md={6}>
+				<TextField variant="outlined" fullWidth label={<Trans>Facebook Page ID</Trans>} value={settings.page_id} onChange={handleChange('page_id')} />
+			</Grid>
+			<Grid item xs={12} md={6}>
+				<TextField variant="outlined" fullWidth label={<Trans>Page Access Token</Trans>} value={settings.page_access_token} onChange={handleChange('page_access_token')} />
+			</Grid>
+
+			<Grid item xs={12}>
+				<TextField variant="outlined" fullWidth label={<Trans>Title</Trans>} value={settings.title} onChange={handleChange('title')} />
+			</Grid>
+			<Grid item xs={12}>
+				<TextField variant="outlined" fullWidth label={<Trans>Description</Trans>} value={settings.description} onChange={handleChange('description')} />
+			</Grid>
+
 			<Grid item xs={12}>
 				<Checkbox label={<Trans>Enable primary stream</Trans>} checked={settings.rtmp_primary} onChange={handleChange('rtmp_primary')} />
 				<Checkbox label={<Trans>Enable backup stream</Trans>} checked={settings.rtmp_backup} onChange={handleChange('rtmp_backup')} />
+				{/* Optionally mark that we created the live via API */}
+				<Checkbox label={<Trans>Create live via API</Trans>} checked={settings.create_live} onChange={handleChange('create_live')} />
 			</Grid>
 		</Grid>
 	);