Twitch minor fix (#973)

* Made Twitch copy link buttons links so right-click -> copy URL works.

* Added Twitch OBS screenshot to public folder.
This commit is contained in:
Phil 2022-09-30 20:01:51 +01:00 committed by GitHub
parent 9d81e3b6d1
commit b2f81c1149
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 50 deletions

View File

@ -257,6 +257,30 @@ function BotSetupStep(props: {
) )
} }
function CopyLinkButton(props: { link: string; text: string }) {
const { link, text } = props
const toastTheme = {
className: '!bg-primary !text-white',
icon: <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />,
}
const copyLinkCallback = async () => {
copyToClipboard(link)
toast.success(text + ' copied', toastTheme)
}
return (
<a href={link} onClick={(e) => e.preventDefault()}>
<Button
size={'md'}
color={'green'}
className="w-full !border-none"
onClick={copyLinkCallback}
>
{text}
</Button>
</a>
)
}
function BotConnectButton(props: { function BotConnectButton(props: {
privateUser: PrivateUser | null | undefined privateUser: PrivateUser | null | undefined
}) { }) {
@ -338,39 +362,67 @@ function SetUpBot(props: {
}) { }) {
const { user, privateUser } = props const { user, privateUser } = props
const twitchLinked = const twitchLinked =
privateUser &&
privateUser?.twitchInfo?.twitchName && privateUser?.twitchInfo?.twitchName &&
!privateUser?.twitchInfo?.needsRelinking !privateUser?.twitchInfo?.needsRelinking
? true ? true
: undefined : undefined
const toastTheme = {
className: '!bg-primary !text-white',
icon: <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />,
}
const copyOverlayLink = async () => {
if (!privateUser) return
copyToClipboard(getOverlayURLForUser(privateUser))
toast.success('Overlay link copied!', toastTheme)
}
const copyDockLink = async () => {
if (!privateUser) return
copyToClipboard(getDockURLForUser(privateUser))
toast.success('Dock link copied!', toastTheme)
}
return ( return (
<> <>
<Title <Title
text={'Set up the bot for your own stream'} text={'Set up the bot for your own stream'}
className={'!mb-4 md:block'} className={'!mb-0 md:block'}
/> />
<Col className="gap-4"> <Col className="gap-4">
<img <img
src="https://raw.githubusercontent.com/PhilBladen/ManifoldTwitchIntegration/master/docs/OBS.png" // TODO: Copy this into the Manifold codebase public folder src="/twitch-bot-obs-screenshot.jpg"
className="!-my-2" className="rounded-md border-t border-l border-r shadow-md"
></img> ></img>
To add the bot to your stream make sure you have logged in then follow To add the bot to your stream make sure you have logged in then follow
the steps below. the steps below.
{!twitchLinked && ( {twitchLinked && privateUser ? (
<div className="flex flex-col gap-6 sm:flex-row">
<BotSetupStep
stepNum={1}
overrideButton={
twitchLinked && <BotConnectButton privateUser={privateUser} />
}
>
Use the button above to add the bot to your channel. Then mod it
by typing in your Twitch chat: <b>/mod ManifoldBot</b>
<br />
If the bot is not modded it will not be able to respond to
commands properly.
</BotSetupStep>
<BotSetupStep
stepNum={2}
overrideButton={
<CopyLinkButton
link={getOverlayURLForUser(privateUser)}
text={'Overlay link'}
/>
}
>
Create a new browser source in your streaming software such as
OBS. Paste in the above link and type in the desired size. We
recommend 450x375.
</BotSetupStep>
<BotSetupStep
stepNum={3}
overrideButton={
<CopyLinkButton
link={getDockURLForUser(privateUser)}
text={'Control dock link'}
/>
}
>
The bot can be controlled entirely through chat. But we made an
easy to use control panel. Share the link with your mods or embed
it into your OBS as a custom dock.
</BotSetupStep>
</div>
) : (
<ButtonGetStarted <ButtonGetStarted
user={user} user={user}
privateUser={privateUser} privateUser={privateUser}
@ -378,38 +430,6 @@ function SetUpBot(props: {
spinnerClass={'!my-0'} spinnerClass={'!my-0'}
/> />
)} )}
<div className="flex flex-col gap-6 sm:flex-row">
<BotSetupStep
stepNum={1}
overrideButton={
twitchLinked && <BotConnectButton privateUser={privateUser} />
}
>
Use the button above to add the bot to your channel. Then mod it by
typing in your Twitch chat: <b>/mod ManifoldBot</b>
<br />
If the bot is not modded it will not be able to respond to commands
properly.
</BotSetupStep>
<BotSetupStep
stepNum={2}
buttonName={twitchLinked && 'Overlay link'}
buttonOnClick={copyOverlayLink}
>
Create a new browser source in your streaming software such as OBS.
Paste in the above link and type in the desired size. We recommend
450x375.
</BotSetupStep>
<BotSetupStep
stepNum={3}
buttonName={twitchLinked && 'Control dock link'}
buttonOnClick={copyDockLink}
>
The bot can be controlled entirely through chat. But we made an easy
to use control panel. Share the link with your mods or embed it into
your OBS as a custom dock.
</BotSetupStep>
</div>
<div> <div>
Need help? Contact SirSalty#5770 in Discord or email Need help? Contact SirSalty#5770 in Discord or email
david@manifold.markets david@manifold.markets

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB