2023-01-26 09:05:58 +00:00
|
|
|
import { CircleIcon, InfoCircledIcon, UpdateIcon } from '@radix-ui/react-icons';
|
2023-01-11 11:30:58 +00:00
|
|
|
import { Trans, useTranslation } from 'react-i18next';
|
2023-01-09 15:31:27 +00:00
|
|
|
import {
|
|
|
|
EventSubNotification,
|
|
|
|
EventSubNotificationType,
|
|
|
|
unwrapEvent,
|
|
|
|
} from '~/lib/eventSub';
|
2023-01-11 11:30:58 +00:00
|
|
|
import { useLiveKey } from '~/lib/react';
|
2023-01-26 09:05:58 +00:00
|
|
|
import { useAppSelector } from '~/store';
|
2022-12-20 14:42:27 +00:00
|
|
|
import { PageContainer, SectionHeader, styled, TextBlock } from '../theme';
|
2022-01-22 12:05:24 +00:00
|
|
|
import WIPNotice from '../components/utils/WIPNotice';
|
2022-11-18 19:28:13 +00:00
|
|
|
import BrowserLink from '../components/BrowserLink';
|
2023-01-09 15:31:27 +00:00
|
|
|
import Scrollbar from '../components/utils/Scrollbar';
|
2022-01-22 12:05:24 +00:00
|
|
|
|
|
|
|
interface StreamInfo {
|
|
|
|
id: string;
|
|
|
|
user_name: string;
|
|
|
|
user_login: string;
|
|
|
|
game_name: string;
|
|
|
|
title: string;
|
|
|
|
viewer_count: number;
|
|
|
|
started_at: string;
|
|
|
|
language: string;
|
|
|
|
thumbnail_url: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
const StreamBlock = styled('div', {
|
|
|
|
display: 'grid',
|
|
|
|
gap: '1rem',
|
|
|
|
gridTemplateColumns: '160px 1fr',
|
|
|
|
});
|
|
|
|
const StreamTitle = styled('h3', {
|
|
|
|
gridRow: 1,
|
|
|
|
gridColumn: 2,
|
|
|
|
fontWeight: 400,
|
|
|
|
margin: 0,
|
|
|
|
marginTop: '0.5rem',
|
|
|
|
});
|
|
|
|
const StreamInfo = styled('div', {
|
|
|
|
gridRow: 2,
|
|
|
|
gridColumn: 2,
|
|
|
|
fontWeight: 'bold',
|
|
|
|
margin: 0,
|
|
|
|
marginBottom: '0.5rem',
|
|
|
|
});
|
|
|
|
const LiveIndicator = styled('div', {
|
|
|
|
gridRow: '1/3',
|
|
|
|
gridColumn: 1,
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
fontWeight: 'bold',
|
|
|
|
zIndex: 2,
|
|
|
|
backgroundSize: 'cover',
|
|
|
|
backgroundPosition: 'center',
|
|
|
|
});
|
2022-11-18 19:28:13 +00:00
|
|
|
const Darken = styled(BrowserLink, {
|
2022-01-22 12:05:24 +00:00
|
|
|
flex: 1,
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
background: 'rgba(0,0,0,0.5)',
|
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
|
|
|
gap: '0.5rem',
|
|
|
|
color: '$red11 !important',
|
|
|
|
textDecoration: 'none !important',
|
|
|
|
transition: 'all 0.2s ease-in-out',
|
|
|
|
'&:hover': {
|
|
|
|
opacity: 0.5,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2023-01-09 15:31:27 +00:00
|
|
|
const EventListContainer = styled('div', {
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
gap: '5px',
|
|
|
|
});
|
|
|
|
|
|
|
|
const TwitchEventContainer = styled('div', {
|
|
|
|
background: '$gray3',
|
|
|
|
padding: '8px',
|
|
|
|
borderRadius: '5px',
|
2023-01-11 11:30:58 +00:00
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
});
|
|
|
|
|
|
|
|
const TwitchEventContent = styled('div', {
|
|
|
|
flex: 1,
|
|
|
|
});
|
2023-01-26 09:05:58 +00:00
|
|
|
const TwitchEventActions = styled('div', {
|
|
|
|
display: 'flex',
|
|
|
|
margin: '0 10px',
|
|
|
|
'& a': {
|
|
|
|
color: '$gray10',
|
|
|
|
'&:hover': {
|
|
|
|
color: '$gray12',
|
|
|
|
cursor: 'pointer',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
2023-01-11 11:30:58 +00:00
|
|
|
const TwitchEventTime = styled('time', {
|
|
|
|
color: '$gray10',
|
|
|
|
fontSize: '13px',
|
2023-01-09 15:31:27 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const supportedMessages: EventSubNotificationType[] = [
|
|
|
|
EventSubNotificationType.Followed,
|
2023-01-11 11:30:58 +00:00
|
|
|
EventSubNotificationType.CustomRewardRedemptionAdded,
|
|
|
|
EventSubNotificationType.StreamWentOnline,
|
|
|
|
EventSubNotificationType.StreamWentOffline,
|
|
|
|
EventSubNotificationType.ChannelUpdated,
|
|
|
|
EventSubNotificationType.Raided,
|
|
|
|
EventSubNotificationType.Cheered,
|
|
|
|
EventSubNotificationType.Subscription,
|
|
|
|
EventSubNotificationType.SubscriptionWithMessage,
|
|
|
|
EventSubNotificationType.SubscriptionGifted,
|
2023-01-09 15:31:27 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
function TwitchEvent({ data }: { data: EventSubNotification }) {
|
2023-01-11 11:30:58 +00:00
|
|
|
const { t } = useTranslation();
|
2023-01-26 09:05:58 +00:00
|
|
|
const client = useAppSelector((state) => state.api.client);
|
|
|
|
|
|
|
|
const replay = () => {
|
|
|
|
void client.putJSON('twitch/ev/eventsub-event', {
|
|
|
|
...data,
|
|
|
|
subscription: {
|
|
|
|
...data.subscription,
|
|
|
|
created_at: new Date().toISOString(),
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
2023-01-11 11:30:58 +00:00
|
|
|
|
2023-01-09 15:31:27 +00:00
|
|
|
let content: JSX.Element | string;
|
|
|
|
const message = unwrapEvent(data);
|
|
|
|
switch (message.type) {
|
|
|
|
case EventSubNotificationType.Followed: {
|
2023-01-11 11:30:58 +00:00
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey={'pages.dashboard.twitch-events.events.follow'}
|
|
|
|
values={{ name: message.event.user_name }}
|
|
|
|
components={{
|
|
|
|
n: <b />,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case EventSubNotificationType.CustomRewardRedemptionAdded: {
|
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey={'pages.dashboard.twitch-events.events.redemption'}
|
|
|
|
values={{
|
|
|
|
name: message.event.user_name,
|
|
|
|
reward: message.event.reward.title,
|
|
|
|
}}
|
|
|
|
components={{
|
|
|
|
n: <b />,
|
|
|
|
r: <b />,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case EventSubNotificationType.StreamWentOnline: {
|
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey={'pages.dashboard.twitch-events.events.stream-start'}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
2023-01-09 15:31:27 +00:00
|
|
|
break;
|
|
|
|
}
|
2023-01-11 11:30:58 +00:00
|
|
|
case EventSubNotificationType.StreamWentOffline: {
|
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey={'pages.dashboard.twitch-events.events.stream-stop'}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case EventSubNotificationType.ChannelUpdated: {
|
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey={'pages.dashboard.twitch-events.events.channel-updated'}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case EventSubNotificationType.Raided: {
|
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey={'pages.dashboard.twitch-events.events.raided'}
|
|
|
|
values={{
|
|
|
|
name: message.event.from_broadcaster_user_name,
|
|
|
|
viewers: message.event.viewers,
|
|
|
|
}}
|
|
|
|
components={{
|
|
|
|
n: <b />,
|
|
|
|
v: <b />,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case EventSubNotificationType.Cheered: {
|
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey={'pages.dashboard.twitch-events.events.cheered'}
|
|
|
|
values={{
|
|
|
|
name: message.event.is_anonymous
|
|
|
|
? t('pages.dashboard.twitch-events.anonymous')
|
|
|
|
: message.event.user_name,
|
|
|
|
bits: message.event.bits,
|
|
|
|
}}
|
|
|
|
components={{
|
|
|
|
n: <b />,
|
|
|
|
b: <b />,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case EventSubNotificationType.Subscription:
|
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey={'pages.dashboard.twitch-events.events.subscribed'}
|
|
|
|
values={{
|
|
|
|
name: message.event.user_name,
|
|
|
|
tier: message.event.tier.substring(0, 1),
|
|
|
|
}}
|
|
|
|
components={{
|
|
|
|
n: <b />,
|
|
|
|
t: <></>,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
case EventSubNotificationType.SubscriptionWithMessage:
|
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey={'pages.dashboard.twitch-events.events.subscribed-multi'}
|
|
|
|
values={{
|
|
|
|
name: message.event.user_name,
|
|
|
|
months: message.event.cumulative_months,
|
|
|
|
tier: message.event.tier.substring(0, 1),
|
|
|
|
}}
|
|
|
|
components={{
|
|
|
|
n: <b />,
|
|
|
|
m: <></>,
|
|
|
|
t: <></>,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
case EventSubNotificationType.SubscriptionGifted:
|
|
|
|
content = (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
t={t}
|
|
|
|
i18nKey={'pages.dashboard.twitch-events.events.subscrition-gift'}
|
|
|
|
values={{
|
|
|
|
count: message.event.total,
|
|
|
|
name: message.event.is_anonymous
|
|
|
|
? t('pages.dashboard.twitch-events.anonymous')
|
|
|
|
: message.event.user_name,
|
|
|
|
tier: message.event.tier.substring(0, 1),
|
|
|
|
}}
|
|
|
|
components={{
|
|
|
|
n: <b />,
|
|
|
|
c: <></>,
|
|
|
|
t: <></>,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
break;
|
2023-01-09 15:31:27 +00:00
|
|
|
default:
|
|
|
|
content = <small>{message.type}</small>;
|
|
|
|
}
|
2023-01-11 11:30:58 +00:00
|
|
|
const date = new Date(message.subscription.created_at);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<TwitchEventContainer>
|
|
|
|
<TwitchEventContent>{content}</TwitchEventContent>
|
|
|
|
<TwitchEventTime
|
|
|
|
title={date.toLocaleString()}
|
|
|
|
dateTime={message.subscription.created_at}
|
|
|
|
>
|
|
|
|
{date.toLocaleTimeString()}
|
|
|
|
</TwitchEventTime>
|
2023-01-26 09:05:58 +00:00
|
|
|
<TwitchEventActions>
|
|
|
|
<a
|
|
|
|
aria-label={t('pages.dashboard.twitch-events.replay')}
|
|
|
|
title={t('pages.dashboard.twitch-events.replay')}
|
|
|
|
onClick={() => {
|
|
|
|
replay();
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<UpdateIcon />
|
|
|
|
</a>
|
|
|
|
</TwitchEventActions>
|
2023-01-11 11:30:58 +00:00
|
|
|
</TwitchEventContainer>
|
|
|
|
);
|
2023-01-09 15:31:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function TwitchEventLog({ events }: { events: EventSubNotification[] }) {
|
2023-01-11 11:30:58 +00:00
|
|
|
const { t } = useTranslation();
|
2023-01-09 15:31:27 +00:00
|
|
|
return (
|
|
|
|
<>
|
2023-01-11 11:30:58 +00:00
|
|
|
<SectionHeader>
|
|
|
|
{t('pages.dashboard.twitch-events.header')}
|
|
|
|
<a
|
|
|
|
style={{ marginLeft: '10px' }}
|
|
|
|
title={t('pages.dashboard.twitch-events.warning')}
|
|
|
|
>
|
|
|
|
<InfoCircledIcon />
|
|
|
|
</a>
|
|
|
|
</SectionHeader>
|
2023-01-13 00:40:51 +00:00
|
|
|
<Scrollbar vertical={true} viewport={{ maxHeight: '250px' }}>
|
2023-01-09 15:31:27 +00:00
|
|
|
<EventListContainer>
|
|
|
|
{events
|
|
|
|
.filter((ev) => supportedMessages.includes(ev.subscription.type))
|
2023-01-13 00:40:51 +00:00
|
|
|
.reverse()
|
2023-01-09 15:31:27 +00:00
|
|
|
.map((ev) => (
|
|
|
|
<TwitchEvent
|
|
|
|
key={`${ev.subscription.id}-${ev.subscription.created_at}`}
|
|
|
|
data={ev}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</EventListContainer>
|
|
|
|
</Scrollbar>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function TwitchStreamStatus({ info }: { info: StreamInfo }) {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
|
|
<StreamBlock>
|
|
|
|
<LiveIndicator
|
|
|
|
css={{
|
|
|
|
backgroundImage: `url(${info.thumbnail_url
|
|
|
|
.replace('{width}', '160')
|
|
|
|
.replace('{height}', '90')})`,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Darken target="_blank" href={`https://twitch.tv/${info.user_login}`}>
|
|
|
|
<CircleIcon /> {t('pages.dashboard.live')}
|
|
|
|
</Darken>
|
|
|
|
</LiveIndicator>
|
|
|
|
<StreamTitle>{info.title}</StreamTitle>
|
|
|
|
<StreamInfo>
|
|
|
|
{info.game_name} -{' '}
|
|
|
|
{t('pages.dashboard.x-viewers', {
|
|
|
|
count: info.viewer_count,
|
|
|
|
})}
|
|
|
|
</StreamInfo>
|
|
|
|
</StreamBlock>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-01-22 12:05:24 +00:00
|
|
|
function TwitchSection() {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const twitchInfo = useLiveKey<StreamInfo[]>('twitch/stream-info');
|
2022-11-18 14:46:50 +00:00
|
|
|
// const twitchActivity = useLiveKey<StreamInfo[]>('twitch/chat-activity');
|
2023-01-09 15:31:27 +00:00
|
|
|
const twitchEvents = useLiveKey<EventSubNotification[]>(
|
|
|
|
'twitch/eventsub-history',
|
|
|
|
);
|
2022-01-22 12:05:24 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2023-01-09 15:31:27 +00:00
|
|
|
<SectionHeader spacing="none">
|
|
|
|
{t('pages.dashboard.twitch-status')}
|
|
|
|
</SectionHeader>
|
2022-01-22 12:05:24 +00:00
|
|
|
{twitchInfo && twitchInfo.length > 0 ? (
|
2023-01-09 15:31:27 +00:00
|
|
|
<TwitchStreamStatus info={twitchInfo[0]} />
|
2022-01-22 12:05:24 +00:00
|
|
|
) : (
|
2022-12-20 14:42:27 +00:00
|
|
|
<TextBlock>{t('pages.dashboard.not-live')}</TextBlock>
|
2022-01-22 12:05:24 +00:00
|
|
|
)}
|
2023-01-09 15:31:27 +00:00
|
|
|
{twitchEvents ? <TwitchEventLog events={twitchEvents} /> : null}
|
2022-01-22 12:05:24 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
2021-12-15 09:28:17 +00:00
|
|
|
|
|
|
|
export default function Dashboard(): React.ReactElement {
|
2022-01-22 12:05:24 +00:00
|
|
|
return (
|
|
|
|
<PageContainer>
|
|
|
|
<TwitchSection />
|
|
|
|
<WIPNotice />
|
|
|
|
</PageContainer>
|
|
|
|
);
|
2021-12-15 09:28:17 +00:00
|
|
|
}
|