mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
feat: add recent event replay
This commit is contained in:
parent
534e12a01a
commit
63c0fef602
4 changed files with 41 additions and 8 deletions
|
@ -275,7 +275,8 @@
|
||||||
"subscribed-multi": "<n>{{name}}</n> subscribed to you <m>({{months}} months)</m> <t>(Tier {{tier}})</t>",
|
"subscribed-multi": "<n>{{name}}</n> subscribed to you <m>({{months}} months)</m> <t>(Tier {{tier}})</t>",
|
||||||
"subscrition-gift_one": "<n>{{name}}</n> gifted <c>{{count}}</c> subscription <t>(Tier {{tier}})</t>",
|
"subscrition-gift_one": "<n>{{name}}</n> gifted <c>{{count}}</c> subscription <t>(Tier {{tier}})</t>",
|
||||||
"subscrition-gift_other": "<n>{{name}}</n> gifted <c>{{count}}</c> subscriptions <t>(Tier {{tier}})</t>"
|
"subscrition-gift_other": "<n>{{name}}</n> gifted <c>{{count}}</c> subscriptions <t>(Tier {{tier}})</t>"
|
||||||
}
|
},
|
||||||
|
"replay": "Replay event"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"onboarding": {
|
"onboarding": {
|
||||||
|
|
|
@ -156,7 +156,8 @@
|
||||||
"subscribed-multi": "<n>{{name}}</n> si è abbonato <m>({{months}} mesi)</m> <t>(Livello {{tier}})</t>",
|
"subscribed-multi": "<n>{{name}}</n> si è abbonato <m>({{months}} mesi)</m> <t>(Livello {{tier}})</t>",
|
||||||
"subscrition-gift_one": "<n>{{name}}</n> ha regalato <c>{{count}}</c> abbonamento <t>(Livello {{tier}})</t>",
|
"subscrition-gift_one": "<n>{{name}}</n> ha regalato <c>{{count}}</c> abbonamento <t>(Livello {{tier}})</t>",
|
||||||
"subscrition-gift_other": "<n>{{name}}</n> ha regalato <c>{{count}}</c> abbonamenti <t>(Livello {{tier}})</t>"
|
"subscrition-gift_other": "<n>{{name}}</n> ha regalato <c>{{count}}</c> abbonamenti <t>(Livello {{tier}})</t>"
|
||||||
}
|
},
|
||||||
|
"replay": "Ripeti evento"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"debug": {
|
"debug": {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { CircleIcon, InfoCircledIcon } from '@radix-ui/react-icons';
|
import { CircleIcon, InfoCircledIcon, UpdateIcon } from '@radix-ui/react-icons';
|
||||||
import { Trans, useTranslation } from 'react-i18next';
|
import { Trans, useTranslation } from 'react-i18next';
|
||||||
import {
|
import {
|
||||||
EventSubNotification,
|
EventSubNotification,
|
||||||
|
@ -6,6 +6,7 @@ import {
|
||||||
unwrapEvent,
|
unwrapEvent,
|
||||||
} from '~/lib/eventSub';
|
} from '~/lib/eventSub';
|
||||||
import { useLiveKey } from '~/lib/react';
|
import { useLiveKey } from '~/lib/react';
|
||||||
|
import { useAppSelector } from '~/store';
|
||||||
import { PageContainer, SectionHeader, styled, TextBlock } from '../theme';
|
import { PageContainer, SectionHeader, styled, TextBlock } from '../theme';
|
||||||
import WIPNotice from '../components/utils/WIPNotice';
|
import WIPNotice from '../components/utils/WIPNotice';
|
||||||
import BrowserLink from '../components/BrowserLink';
|
import BrowserLink from '../components/BrowserLink';
|
||||||
|
@ -87,6 +88,17 @@ const TwitchEventContainer = styled('div', {
|
||||||
const TwitchEventContent = styled('div', {
|
const TwitchEventContent = styled('div', {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
});
|
});
|
||||||
|
const TwitchEventActions = styled('div', {
|
||||||
|
display: 'flex',
|
||||||
|
margin: '0 10px',
|
||||||
|
'& a': {
|
||||||
|
color: '$gray10',
|
||||||
|
'&:hover': {
|
||||||
|
color: '$gray12',
|
||||||
|
cursor: 'pointer',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
const TwitchEventTime = styled('time', {
|
const TwitchEventTime = styled('time', {
|
||||||
color: '$gray10',
|
color: '$gray10',
|
||||||
fontSize: '13px',
|
fontSize: '13px',
|
||||||
|
@ -107,6 +119,17 @@ const supportedMessages: EventSubNotificationType[] = [
|
||||||
|
|
||||||
function TwitchEvent({ data }: { data: EventSubNotification }) {
|
function TwitchEvent({ data }: { data: EventSubNotification }) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
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(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
let content: JSX.Element | string;
|
let content: JSX.Element | string;
|
||||||
const message = unwrapEvent(data);
|
const message = unwrapEvent(data);
|
||||||
|
@ -292,13 +315,23 @@ function TwitchEvent({ data }: { data: EventSubNotification }) {
|
||||||
>
|
>
|
||||||
{date.toLocaleTimeString()}
|
{date.toLocaleTimeString()}
|
||||||
</TwitchEventTime>
|
</TwitchEventTime>
|
||||||
|
<TwitchEventActions>
|
||||||
|
<a
|
||||||
|
aria-label={t('pages.dashboard.twitch-events.replay')}
|
||||||
|
title={t('pages.dashboard.twitch-events.replay')}
|
||||||
|
onClick={() => {
|
||||||
|
replay();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<UpdateIcon />
|
||||||
|
</a>
|
||||||
|
</TwitchEventActions>
|
||||||
</TwitchEventContainer>
|
</TwitchEventContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function TwitchEventLog({ events }: { events: EventSubNotification[] }) {
|
function TwitchEventLog({ events }: { events: EventSubNotification[] }) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
// TODO Include a note specifying that it's not ALL events!!
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SectionHeader>
|
<SectionHeader>
|
||||||
|
@ -360,7 +393,6 @@ function TwitchSection() {
|
||||||
const twitchEvents = useLiveKey<EventSubNotification[]>(
|
const twitchEvents = useLiveKey<EventSubNotification[]>(
|
||||||
'twitch/eventsub-history',
|
'twitch/eventsub-history',
|
||||||
);
|
);
|
||||||
console.log(twitchEvents);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -4,10 +4,9 @@ import { helix } from '@wailsapp/go/models';
|
||||||
import { BrowserOpenURL } from '@wailsapp/runtime/runtime';
|
import { BrowserOpenURL } from '@wailsapp/runtime/runtime';
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Trans, useTranslation } from 'react-i18next';
|
import { Trans, useTranslation } from 'react-i18next';
|
||||||
import { useSelector } from 'react-redux';
|
|
||||||
import eventsubTests from '~/data/eventsub-tests';
|
import eventsubTests from '~/data/eventsub-tests';
|
||||||
import { useModule, useStatus } from '~/lib/react';
|
import { useModule, useStatus } from '~/lib/react';
|
||||||
import { RootState, useAppDispatch } from '~/store';
|
import { useAppDispatch, useAppSelector } from '~/store';
|
||||||
import apiReducer, { modules } from '~/store/api/reducer';
|
import apiReducer, { modules } from '~/store/api/reducer';
|
||||||
import { checkTwitchKeys } from '~/lib/twitch';
|
import { checkTwitchKeys } from '~/lib/twitch';
|
||||||
import BrowserLink from '../components/BrowserLink';
|
import BrowserLink from '../components/BrowserLink';
|
||||||
|
@ -376,7 +375,7 @@ const TwitchName = styled('p', { fontWeight: 'bold' });
|
||||||
function TwitchEventSubSettings() {
|
function TwitchEventSubSettings() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [userStatus, setUserStatus] = useState<helix.User | SyncError>(null);
|
const [userStatus, setUserStatus] = useState<helix.User | SyncError>(null);
|
||||||
const kv = useSelector((state: RootState) => state.api.client);
|
const kv = useAppSelector((state) => state.api.client);
|
||||||
|
|
||||||
const getUserInfo = async () => {
|
const getUserInfo = async () => {
|
||||||
try {
|
try {
|
||||||
|
|
Loading…
Reference in a new issue