Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients docs.multi-scrobbler.app
Something went wrong. Try again.
5.2 kB · 135 lines
TSX
at debugStartup
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136import React, {Fragment, useCallback} from 'react';import StatusCardSkeleton, {type StatusCardSkeletonData} from "./StatusCardSkeleton";import SkeletonParagraph from "../skeleton/SkeletonParagraph";import {clientAdapter} from "../../status/ducks";import type {RootState} from "../../store";import {connect, type ConnectedProps} from "react-redux";import {Link} from "react-router-dom";import {useStartClientMutation, useListenClientMutation} from "./clientDucks";
export interface ClientStatusCardData extends StatusCardSkeletonData, PropsFromRedux { loading?: boolean key: any}
const statusToStatusType = (status: string) => { const lower = status.toLowerCase(); if(lower.includes('running') || lower.includes('data')) { return 'active'; } if(lower.includes('idle')) { return 'warn'; } return 'error';}
const ClientStatusCard = (props: ClientStatusCardData) => { const { loading = false, data, data: { name, type, display, status, scrobbled: scrobbledCount = 0, queued = 0, deadLetterScrobbles = 0, deadLetterScrobblesTotal = 0, } = {} } = props;
const [startClientPut, startResult] = useStartClientMutation(); const [listenPut, listenResult] = useListenClientMutation();
const tryStart = useCallback((name: string, force?: boolean) => startClientPut({name, force}), [startClientPut]); const tryListen = useCallback((name: string, type: string, currentListening?: boolean) => { // cycle through states let nextListen: boolean | undefined; switch(currentListening) { case true: nextListen = false; break; case false: nextListen = undefined; break; case undefined: nextListen = true; break; } listenPut({name, type, listening: nextListen}); }, [listenPut]);
let header: string | undefined = display; let body = <SkeletonParagraph/>; const startClientElement = ( <Fragment> <div onClick={() => tryStart(name)} className="capitalize underline cursor-pointer inline mr-1">{status === 'Running' ? 'Restart' : 'Start'}</div> (<div onClick={() => tryStart(name, true)} className="capitalize underline cursor-pointer inline">Force</div>) </Fragment>) let subtitleElement = startClientElement; if(data !== undefined) { const { hasAuth, hasAuthInteraction, manualListening, systemListeningBehavior, name, type, authed, initialized } = data; header = `${display} (Client)`;
const ml = useMemo(() => { if(listenResult.status !== 'fulfilled' || listenResult.data === undefined) { return manualListening; } return (listenResult.data as any).listening; }, [manualListening, listenResult]);
const manualListenElement = (<Fragment> <span>Monitoring:</span> <div onClick={() => tryListen(name, type, ml)} className="capitalize underline cursor-pointer inline mr-1 ml-1"> {ml !== undefined ? (ml ? 'Yes' : 'No') : null} {ml === undefined ? <span>System {systemListeningBehavior ? '(Yes)' : '(No)'}</span> : null} </div> {/* {ml !== undefined ? <div onClick={() => tryListen(name, type, undefined)} className="capitalize underline cursor-pointer inline">Clear </div> : null} */} </Fragment>); subtitleElement = <Fragment>{startClientElement}</Fragment>;//<Fragment>{manualListenElement} | {startClientElement}</Fragment>;
const scrobbled = initialized && (!hasAuth || (hasAuth && authed)) ? <Link to={`/scrobbled?type=${type}&name=${name}`}>Tracks Scrobbled</Link> : <span>Tracks Scrobbled</span>; body = (<Fragment> <div>{scrobbled}: {scrobbledCount}</div> <div>Queued Scrobbles: {queued}</div> <div><Link to={`/dead?type=${type}&name=${name}`}>Failed Scrobbles</Link>: {deadLetterScrobbles} Queued / {deadLetterScrobblesTotal} Total</div> {hasAuthInteraction ? <a target="_blank" href={`/api/client/auth?name=${name}&type=${type}`}>(Re)authenticate</a> : null} </Fragment>); } return ( <StatusCardSkeleton loading={loading} title={header} subtitle={name} status={status} subtitleRight={subtitleElement} statusType={statusToStatusType(status)}> {body} </StatusCardSkeleton> );}
const simpleSelectors = clientAdapter.getSelectors();
const mapStateToProps = (state: RootState, props) => ({ data: simpleSelectors.selectById(state.clients, props.id)});
const connector = connect(mapStateToProps);
type PropsFromRedux = ConnectedProps<typeof connector>
export default connector(ClientStatusCard);