import { CircleIcon } from '@radix-ui/react-icons';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useLiveKey } from '~/lib/react';
import {
EventSubNotification,
EventSubNotificationType,
unwrapEvent,
} from '~/lib/eventSub';
import { PageContainer, SectionHeader, styled, TextBlock } from '../theme';
import WIPNotice from '../components/utils/WIPNotice';
import BrowserLink from '../components/BrowserLink';
import Scrollbar from '../components/utils/Scrollbar';
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',
});
const Darken = styled(BrowserLink, {
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,
},
});
const EventListContainer = styled('div', {
display: 'flex',
flexDirection: 'column',
gap: '5px',
});
const TwitchEventContainer = styled('div', {
background: '$gray3',
padding: '8px',
borderRadius: '5px',
});
const supportedMessages: EventSubNotificationType[] = [
EventSubNotificationType.Followed,
];
function TwitchEvent({ data }: { data: EventSubNotification }) {
let content: JSX.Element | string;
const message = unwrapEvent(data);
switch (message.type) {
case EventSubNotificationType.Followed: {
content = `${message.event.user_name} followed you!`;
break;
}
default:
content = {message.type};
}
return {content};
}
function TwitchEventLog({ events }: { events: EventSubNotification[] }) {
// TODO Include a note specifying that it's not ALL events!!
return (
<>
Latest events
{events
.filter((ev) => supportedMessages.includes(ev.subscription.type))
.map((ev) => (
))}
>
);
}
function TwitchStreamStatus({ info }: { info: StreamInfo }) {
const { t } = useTranslation();
return (
{t('pages.dashboard.live')}
{info.title}
{info.game_name} -{' '}
{t('pages.dashboard.x-viewers', {
count: info.viewer_count,
})}
);
}
function TwitchSection() {
const { t } = useTranslation();
const twitchInfo = useLiveKey('twitch/stream-info');
// const twitchActivity = useLiveKey('twitch/chat-activity');
const twitchEvents = useLiveKey(
'twitch/eventsub-history',
);
console.log(twitchEvents);
return (
<>
{t('pages.dashboard.twitch-status')}
{twitchInfo && twitchInfo.length > 0 ? (
) : (
{t('pages.dashboard.not-live')}
)}
{twitchEvents ? : null}
>
);
}
export default function Dashboard(): React.ReactElement {
return (
);
}