diff --git a/src/client/components/ActivityDetail.tsx b/src/client/components/ActivityDetail.tsx index 847fabc8..d33384eb 100644 --- a/src/client/components/ActivityDetail.tsx +++ b/src/client/components/ActivityDetail.tsx @@ -1,6 +1,6 @@ import React, { ComponentProps, useState, Fragment, useEffect } from "react" import { Accordion, For, Span, Stack, Text, Box, AbsoluteCenter, Button, Clipboard, Separator, HStack, Flex, Badge, IconButton, Container, Icon, useAccordionItemContext, Skeleton, SkeletonText, Collapsible, BadgeProps } from '@chakra-ui/react'; -import { ComponentType, Second } from "../../core/Atomic"; +import { CLIENT_DEAD_QUEUE, ComponentType, QUEUE_NAMES, Second } from "../../core/Atomic"; import { PlayData } from "./PlayData"; import { ErrorAlert } from "./ErrorAlert"; import { AiOutlineExclamationCircle } from "react-icons/ai"; @@ -93,7 +93,7 @@ export interface ActivityDetailProps { } export interface ActivitySummaryProps extends SortPlaysByProps { - activity: PlayApiCommon & {isNew?: boolean | Second} + activity: PlayApiCommonDetailed & {isNew?: boolean | Second} componentType: ComponentType } @@ -109,6 +109,7 @@ export const ActivitySummary = (props: ActivitySummaryProps) => { } = props; const [updated, setUpdated] = useState<{lastUpdated: string, updated: boolean}>({lastUpdated: updatedAt, updated: false}); useEffect(() => { + // eslint-disable-next-line react-hooks/set-state-in-effect setUpdated((old) => { if(old.lastUpdated === activity.updatedAt) { return {lastUpdated: activity.updatedAt, updated: false}; @@ -237,20 +238,26 @@ export const ActivityDetailFetchable = (props: ActivityDetailFetchableProps) => return } - return + return } -export const ActivityStateActions = (props: {activity: PlayApiCommon}) => { +export const ActivityStateActions = (props: {activity: PlayApiCommonDetailed}) => { let suffix: React.JSX.Element | null; - let badgeProps: BadgeProps = {}; + const badgeProps: BadgeProps = {}; + const { + activity: { + queueStates = [] + } = {} + } = props; if(props.activity.state === 'failed') { suffix = ; badgeProps.paddingRight = 0; } + const hasDeadQueue = queueStates.some(x => x.queueName === CLIENT_DEAD_QUEUE && x.queueStatus === 'queued'); return ( - + diff --git a/src/client/components/Badges.tsx b/src/client/components/Badges.tsx index bf5b0f7e..8384a98a 100644 --- a/src/client/components/Badges.tsx +++ b/src/client/components/Badges.tsx @@ -1,18 +1,17 @@ import { Badge, Separator, HStack } from "@chakra-ui/react"; import React, { ComponentProps, useState, useCallback, useEffect } from "react"; -import { COMPONENT_STATE, ComponentCommonApiJson, componentStateToFriendly, MsSseEvent, MsSseEventPayload, PlayApiCommon } from "../../core/Api"; +import { COMPONENT_STATE, ComponentCommonApiJson, componentStateToFriendly, MsSseEvent, PlayApiCommon } from "../../core/Api"; import { capitalize } from "../../core/StringUtils"; -import { PlayerState } from "../../backend/common/infrastructure/config/source/mpd"; -import {useSSE, useSSEContext, useSSEEvent} from "@flamefrontend/sse-runtime-react"; +import {useSSEContext, useSSEEvent} from "@flamefrontend/sse-runtime-react"; import { Second } from "../../core/Atomic"; import { useTimeout } from 'react-use-timeout'; -export const PlayStateBadge = (props: ComponentProps & { state: PlayApiCommon['state'], suffix?: React.JSX.Element }) => { +export const PlayStateBadge = (props: ComponentProps & { state: PlayApiCommon['state'], suffix?: React.JSX.Element, hasDeadQueue?: boolean }) => { const { state, suffix, ...rest } = props; - let badgeColor = undefined, - badgeText = capitalize(state); + let badgeColor = undefined; + let badgeText = capitalize(state); switch (state) { case 'queued': @@ -24,6 +23,9 @@ export const PlayStateBadge = (props: ComponentProps & { state: Pl break; case 'failed': badgeColor = 'red'; + if(props.hasDeadQueue) { + badgeText = 'Dead Queued'; + } break; case 'discarded': badgeColor = 'grey'; diff --git a/src/client/components/playActivity/ListParts.tsx b/src/client/components/playActivity/ListParts.tsx index 823ccb4f..4e2afaa7 100644 --- a/src/client/components/playActivity/ListParts.tsx +++ b/src/client/components/playActivity/ListParts.tsx @@ -17,12 +17,12 @@ export interface GroupInfo { } export interface GroupData { - plays: PlayApiCommon[] + plays: PlayApiCommonDetailed[] date: Dayjs } export interface ActivityLogProps extends SortPlaysByProps { - data: PlayApiCommon[] + data: PlayApiCommonDetailed[] componentId: number componentType: ComponentType render?: 'virtNormal' | 'virtDynamic' | 'virtExp' | 'accordian' @@ -106,7 +106,7 @@ export const generateGroupPlays = (data: PlayApiCommon[]): GroupData[] => { return groupsReduced.groups; } -export const generateFlatItems = (data: PlayApiCommon[]) => { +export const generateFlatItems = (data: PlayApiCommonDetailed[]) => { // ensure there are no duplicates // this may happen if a play is "bumped" from one "page" to another, based on offset, // when new plays are inserted out of order (playedAt)