forked from Kieran/zap.stream
feat: forward ui improvements
This commit is contained in:
parent
f61d5b3119
commit
3dabb0d929
GPG Key ID:
DE71CEB3925BE941
@ -110,5 +110,8 @@
|
||||
<path d="M14.58 2.32607C14.4538 2.26442 14.3127 2.23947 14.173 2.25405C14.0333 2.26864 13.9005 2.32218 13.7897 2.40857L7.24219 7.50013H3C2.60218 7.50013 2.22064 7.65817 1.93934 7.93947C1.65804 8.22077 1.5 8.6023 1.5 9.00013V15.0001C1.5 15.398 1.65804 15.7795 1.93934 16.0608C2.22064 16.3421 2.60218 16.5001 3 16.5001H7.24219L13.7897 21.5917C13.921 21.6946 14.0831 21.7504 14.25 21.7501C14.4489 21.7501 14.6397 21.6711 14.7803 21.5305C14.921 21.3898 15 21.199 15 21.0001V3.00013C15.0001 2.85972 14.9608 2.72211 14.8865 2.60294C14.8123 2.48378 14.7061 2.38785 14.58 2.32607Z" fill="currentColor"/>
|
||||
<path d="M21.3107 12.0004L23.031 10.281C23.1718 10.1403 23.2508 9.94944 23.2508 9.75042C23.2508 9.55139 23.1718 9.36052 23.031 9.21979C22.8903 9.07906 22.6994 9 22.5004 9C22.3014 9 22.1105 9.07906 21.9698 9.21979L20.2504 10.9401L18.531 9.21979C18.3903 9.07906 18.1994 9 18.0004 9C17.8014 9 17.6105 9.07906 17.4698 9.21979C17.3291 9.36052 17.25 9.55139 17.25 9.75042C17.25 9.94944 17.3291 10.1403 17.4698 10.281L19.1901 12.0004L17.4698 13.7198C17.3291 13.8605 17.25 14.0514 17.25 14.2504C17.25 14.4494 17.3291 14.6403 17.4698 14.781C17.6105 14.9218 17.8014 15.0008 18.0004 15.0008C18.1994 15.0008 18.3903 14.9218 18.531 14.781L20.2504 13.0607L21.9698 14.781C22.1105 14.9218 22.3014 15.0008 22.5004 15.0008C22.6994 15.0008 22.8903 14.9218 23.031 14.781C23.1718 14.6403 23.2508 14.4494 23.2508 14.2504C23.2508 14.0514 23.1718 13.8605 23.031 13.7198L21.3107 12.0004Z" fill="currentColor"/>
|
||||
</symbol>
|
||||
<symbol id="line-chart-up" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M19 19H2.6C2.03995 19 1.75992 19 1.54601 18.891C1.35785 18.7951 1.20487 18.6422 1.10899 18.454C1 18.2401 1 17.9601 1 17.4V1M19 5L13.5657 10.4343C13.3677 10.6323 13.2687 10.7313 13.1545 10.7684C13.0541 10.8011 12.9459 10.8011 12.8455 10.7684C12.7313 10.7313 12.6323 10.6323 12.4343 10.4343L10.5657 8.56569C10.3677 8.36768 10.2687 8.26867 10.1545 8.23158C10.0541 8.19895 9.94591 8.19895 9.84549 8.23158C9.73133 8.26867 9.63232 8.36768 9.43431 8.56569L5 13M19 5H15M19 5V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 33 KiB |
@ -8,6 +8,7 @@ import { SendZaps } from "./send-zap";
|
||||
import { StreamEditor, StreamEditorProps } from "./stream-editor";
|
||||
import Spinner from "./spinner";
|
||||
import AsyncButton from "./async-button";
|
||||
import { unwrap } from "@snort/shared";
|
||||
|
||||
export function NostrProviderDialog({
|
||||
provider,
|
||||
@ -244,7 +245,7 @@ export function NostrProviderDialog({
|
||||
<FormattedMessage defaultMessage="Stream Forwarding" id="W7DNWx" />
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{info.forwards?.map(a => (
|
||||
<>
|
||||
<div className="paper">{a.name}</div>
|
||||
@ -255,11 +256,10 @@ export function NostrProviderDialog({
|
||||
}}>
|
||||
<FormattedMessage defaultMessage="Remove" id="G/yZLu" />
|
||||
</AsyncButton>
|
||||
<div></div>
|
||||
</>
|
||||
))}
|
||||
<AddForwardInputs provider={provider} onAdd={() => {}} />
|
||||
</div>
|
||||
<AddForwardInputs provider={provider} onAdd={() => {}} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -273,6 +273,15 @@ export function NostrProviderDialog({
|
||||
);
|
||||
}
|
||||
|
||||
enum ForwardService {
|
||||
Custom = "custom",
|
||||
Twitch = "twitch",
|
||||
Youtube = "youtube",
|
||||
Facebook = "facebook",
|
||||
Kick = "kick",
|
||||
Trovo = "trovo",
|
||||
}
|
||||
|
||||
function AddForwardInputs({
|
||||
provider,
|
||||
onAdd,
|
||||
@ -282,31 +291,153 @@ function AddForwardInputs({
|
||||
}) {
|
||||
const [name, setName] = useState("");
|
||||
const [target, setTarget] = useState("");
|
||||
const [svc, setService] = useState(ForwardService.Twitch);
|
||||
const [error, setError] = useState("");
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
async function getTargetFull() {
|
||||
if (svc === ForwardService.Custom) {
|
||||
return target;
|
||||
}
|
||||
|
||||
if (svc === ForwardService.Twitch) {
|
||||
const urls = (await (await fetch("https://ingest.twitch.tv/ingests")).json()) as {
|
||||
ingests: Array<{
|
||||
availability: number;
|
||||
name: string;
|
||||
url_template: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
const ingestsEurope = urls.ingests.filter(
|
||||
a => a.name.toLowerCase().startsWith("europe:") && a.availability === 1
|
||||
);
|
||||
const random = ingestsEurope.at(ingestsEurope.length * Math.random());
|
||||
return unwrap(random).url_template.replace("{stream_key}", target);
|
||||
}
|
||||
|
||||
if (svc === ForwardService.Youtube) {
|
||||
return `rtmp://a.rtmp.youtube.com:1935/live2/${target}`;
|
||||
}
|
||||
|
||||
if (svc === ForwardService.Facebook) {
|
||||
return `rtmps://live-api-s.facebook.com:443/rtmp/${target}`;
|
||||
}
|
||||
|
||||
if (svc === ForwardService.Trovo) {
|
||||
return `rtmp://livepush.trovo.live:1935/live/${target}`;
|
||||
}
|
||||
|
||||
if (svc === ForwardService.Kick) {
|
||||
return `rtmps://fa723fc1b171.global-contribute.live-video.net:443/app/${target}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function doAdd() {
|
||||
await provider.addForward(name, target);
|
||||
if (svc === ForwardService.Custom) {
|
||||
if (!target.startsWith("rtmp://")) {
|
||||
setError(
|
||||
formatMessage({
|
||||
defaultMessage: "Stream url must start with rtmp://",
|
||||
id: "7+bCC1",
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// stupid URL parser doesnt work for non-http protocols
|
||||
const u = new URL(target.replace("rtmp://", "http://"));
|
||||
console.debug(u);
|
||||
if (u.host.length < 1) {
|
||||
throw new Error();
|
||||
}
|
||||
if (u.pathname === "/") {
|
||||
throw new Error();
|
||||
}
|
||||
} catch {
|
||||
setError(
|
||||
formatMessage({
|
||||
defaultMessage: "Not a valid URL",
|
||||
id: "1q4BO/",
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (target.length < 2) {
|
||||
setError(
|
||||
formatMessage({
|
||||
defaultMessage: "Stream Key is required",
|
||||
id: "50+/JW",
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (name.length < 2) {
|
||||
setError(
|
||||
formatMessage({
|
||||
defaultMessage: "Name is required",
|
||||
id: "Gvxoji",
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const t = await getTargetFull();
|
||||
if (!t)
|
||||
throw new Error(
|
||||
formatMessage({
|
||||
defaultMessage: "Could not create stream URL",
|
||||
id: "E9APoR",
|
||||
})
|
||||
);
|
||||
await provider.addForward(name, t);
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
}
|
||||
setName("");
|
||||
setTarget("");
|
||||
onAdd(name, target);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col p-4 gap-2 bg-gray-3 rounded-xl">
|
||||
<div className="flex gap-2">
|
||||
<div className="paper flex-1">
|
||||
<select value={svc} onChange={e => setService(e.target.value as ForwardService)} className="bg-gray-1">
|
||||
<option value="twitch">Twitch</option>
|
||||
<option value="youtube">Youtube</option>
|
||||
<option value="facebook">Facebook Gaming</option>
|
||||
<option value="kick">Kick</option>
|
||||
<option value="trovo">Trovo</option>
|
||||
<option value="custom">Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="paper flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={formatMessage({ defaultMessage: "Display name", id: "dOQCL8" })}
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="paper">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={formatMessage({ defaultMessage: "Human readable name", id: "QuXHCg" })}
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
placeholder={
|
||||
svc === ForwardService.Custom ? "rtmp://" : formatMessage({ defaultMessage: "Stream key", id: "QWlMq9" })
|
||||
}
|
||||
value={target}
|
||||
onChange={e => setTarget(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="paper">
|
||||
<input type="text" placeholder="rtmp://" value={target} onChange={e => setTarget(e.target.value)} />
|
||||
</div>
|
||||
<AsyncButton className="btn btn-primary" onClick={doAdd}>
|
||||
<FormattedMessage defaultMessage="Add" id="2/2yg+" />
|
||||
</AsyncButton>
|
||||
</>
|
||||
{error && <b className="warning">{error}</b>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -35,6 +35,9 @@
|
||||
"1EYCdR": {
|
||||
"defaultMessage": "Tags"
|
||||
},
|
||||
"1q4BO/": {
|
||||
"defaultMessage": "Not a valid URL"
|
||||
},
|
||||
"1qsXCO": {
|
||||
"defaultMessage": "eg. name@wallet.com"
|
||||
},
|
||||
@ -68,6 +71,9 @@
|
||||
"4uI538": {
|
||||
"defaultMessage": "Resolutions"
|
||||
},
|
||||
"50+/JW": {
|
||||
"defaultMessage": "Stream Key is required"
|
||||
},
|
||||
"5JcXdV": {
|
||||
"defaultMessage": "Create Account"
|
||||
},
|
||||
@ -89,6 +95,9 @@
|
||||
"6pr6hJ": {
|
||||
"defaultMessage": "Minimum amount for text to speech"
|
||||
},
|
||||
"7+bCC1": {
|
||||
"defaultMessage": "Stream url must start with rtmp://"
|
||||
},
|
||||
"79lLl+": {
|
||||
"defaultMessage": "Music"
|
||||
},
|
||||
@ -134,6 +143,9 @@
|
||||
"Dn82AL": {
|
||||
"defaultMessage": "Live"
|
||||
},
|
||||
"E9APoR": {
|
||||
"defaultMessage": "Could not create stream URL"
|
||||
},
|
||||
"ESyhzp": {
|
||||
"defaultMessage": "Your comment for {name}"
|
||||
},
|
||||
@ -155,6 +167,9 @@
|
||||
"Gq6x9o": {
|
||||
"defaultMessage": "Cover Image"
|
||||
},
|
||||
"Gvxoji": {
|
||||
"defaultMessage": "Name is required"
|
||||
},
|
||||
"H/bNs9": {
|
||||
"defaultMessage": "Save this and keep it safe! If you lose this key, you won't be able to access your account ever again. Yep, it's that serious!"
|
||||
},
|
||||
@ -233,15 +248,15 @@
|
||||
"QRRCp0": {
|
||||
"defaultMessage": "Stream URL"
|
||||
},
|
||||
"QWlMq9": {
|
||||
"defaultMessage": "Stream key"
|
||||
},
|
||||
"QceMQZ": {
|
||||
"defaultMessage": "Goal: {amount}"
|
||||
},
|
||||
"Qe1MJu": {
|
||||
"defaultMessage": "{name} with {amount}"
|
||||
},
|
||||
"QuXHCg": {
|
||||
"defaultMessage": "Human readable name"
|
||||
},
|
||||
"RJ2VxG": {
|
||||
"defaultMessage": "A new version has been detected"
|
||||
},
|
||||
@ -327,6 +342,9 @@
|
||||
"d5zWyh": {
|
||||
"defaultMessage": "Test voice"
|
||||
},
|
||||
"dOQCL8": {
|
||||
"defaultMessage": "Display name"
|
||||
},
|
||||
"dVD/AR": {
|
||||
"defaultMessage": "Top Zappers"
|
||||
},
|
||||
@ -360,6 +378,9 @@
|
||||
"hpl4BP": {
|
||||
"defaultMessage": "Chat Widget"
|
||||
},
|
||||
"hzSNj4": {
|
||||
"defaultMessage": "Dashboard"
|
||||
},
|
||||
"ieGrWo": {
|
||||
"defaultMessage": "Follow"
|
||||
},
|
||||
|
||||
@ -80,6 +80,10 @@ export function LayoutPage() {
|
||||
<Icon name="user" size={24} />
|
||||
<FormattedMessage defaultMessage="Profile" id="itPgxd" />
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate("/dashboard")}>
|
||||
<Icon name="line-chart-up" size={24} />
|
||||
<FormattedMessage defaultMessage="Dashboard" id="hzSNj4" />
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate("/settings")}>
|
||||
<Icon name="settings" size={24} />
|
||||
<FormattedMessage defaultMessage="Settings" id="D3idYv" />
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"0VV/sK": "Goal",
|
||||
"0hNxBy": "Starts",
|
||||
"1EYCdR": "Tags",
|
||||
"1q4BO/": "Not a valid URL",
|
||||
"1qsXCO": "eg. name@wallet.com",
|
||||
"2/2yg+": "Add",
|
||||
"37mth/": "Viewers",
|
||||
@ -22,6 +23,7 @@
|
||||
"4l69eO": "Hmm, your lightning address looks wrong",
|
||||
"4l6vz1": "Copy",
|
||||
"4uI538": "Resolutions",
|
||||
"50+/JW": "Stream Key is required",
|
||||
"5JcXdV": "Create Account",
|
||||
"5QYdPU": "Start Time",
|
||||
"5kx+2v": "Server Url",
|
||||
@ -29,6 +31,7 @@
|
||||
"69hmpj": "Raid from {name}",
|
||||
"6Z2pvJ": "Stream Providers",
|
||||
"6pr6hJ": "Minimum amount for text to speech",
|
||||
"7+bCC1": "Stream url must start with rtmp://",
|
||||
"79lLl+": "Music",
|
||||
"7UOvbT": "Offline",
|
||||
"8YT6ja": "Insert text to speak",
|
||||
@ -44,6 +47,7 @@
|
||||
"D3idYv": "Settings",
|
||||
"DZKuuP": "Logged in as",
|
||||
"Dn82AL": "Live",
|
||||
"E9APoR": "Could not create stream URL",
|
||||
"ESyhzp": "Your comment for {name}",
|
||||
"FjDlus": "You can always replace it with your own address later.",
|
||||
"Fodi9+": "Get paid by viewers",
|
||||
@ -51,6 +55,7 @@
|
||||
"GGaJMU": "Top Chatters",
|
||||
"Gmiwnd": "Refresh the page to use the latest version",
|
||||
"Gq6x9o": "Cover Image",
|
||||
"Gvxoji": "Name is required",
|
||||
"H/bNs9": "Save this and keep it safe! If you lose this key, you won't be able to access your account ever again. Yep, it's that serious!",
|
||||
"H5+NAX": "Balance",
|
||||
"HAlOn1": "Name",
|
||||
@ -77,9 +82,9 @@
|
||||
"Q3au2v": "About {estimate}",
|
||||
"QRHNuF": "What are we steaming today?",
|
||||
"QRRCp0": "Stream URL",
|
||||
"QWlMq9": "Stream key",
|
||||
"QceMQZ": "Goal: {amount}",
|
||||
"Qe1MJu": "{name} with {amount}",
|
||||
"QuXHCg": "Human readable name",
|
||||
"RJ2VxG": "A new version has been detected",
|
||||
"RJOmzk": "I have read and agree with {provider}''s {terms}.",
|
||||
"RS6smY": "Raid Message",
|
||||
@ -108,6 +113,7 @@
|
||||
"cvAsEh": "Streamed on {date}",
|
||||
"cyR7Kh": "Back",
|
||||
"d5zWyh": "Test voice",
|
||||
"dOQCL8": "Display name",
|
||||
"dVD/AR": "Top Zappers",
|
||||
"ebmhes": "Nostr Extension",
|
||||
"f6biFA": "Oh, and you have {n} sats of free streaming on us! 💜",
|
||||
@ -119,6 +125,7 @@
|
||||
"hMzcSq": "Messages",
|
||||
"heyxZL": "Enable text to speech",
|
||||
"hpl4BP": "Chat Widget",
|
||||
"hzSNj4": "Dashboard",
|
||||
"ieGrWo": "Follow",
|
||||
"itPgxd": "Profile",
|
||||
"izWS4J": "Unfollow",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user