diff --git a/src/client/components/PlayData.tsx b/src/client/components/PlayData.tsx
index e926d560..26cde6aa 100644
--- a/src/client/components/PlayData.tsx
+++ b/src/client/components/PlayData.tsx
@@ -1,11 +1,10 @@
import React, { Fragment, useMemo, useState } from 'react';
-import { EmptyState, DataList, HStack, Tag, Wrap, Box, Flex, SegmentGroup, Stack, Text, Separator, IconButton, Container, SimpleGrid } from "@chakra-ui/react"
+import { EmptyState, DataList, HStack, Tag, Tabs, Wrap, Box, Flex, SegmentGroup, Stack, Text, Separator, IconButton, Container, SimpleGrid, Float } from "@chakra-ui/react"
import { LuCode, LuText } from "react-icons/lu"
import { JsonPlayObject } from '../../core/Atomic.js';
import { shortTodayAwareFormat } from '../../core/TimeUtils.js';
import dayjs from 'dayjs';
import { ChakraCodeBlock } from './CodeBlock.js';
-import { safeStringify } from '../../core/StringUtils.js';
import { TextMuted } from './TextMuted.js';
const EmptyPlayData = () => {
@@ -21,13 +20,14 @@ const EmptyPlayData = () => {
);
}
+export type DisplayDates = false | 'all' | 'played' | 'seen';
+
export interface PlayInfoProps {
play?: JsonPlayObject
final?: JsonPlayObject
showCodeToggle?: boolean
showCompare?: boolean
compareDefault?: 'Initial' | 'Final'
- datesFooter?: false | 'all' | 'played' | 'seen'
dates?: false | 'all' | 'played' | 'seen'
}
@@ -38,7 +38,6 @@ export const PlayData = (props?: PlayInfoProps) => {
showCodeToggle = true,
showCompare = true,
compareDefault = 'Initial',
- datesFooter = false,
dates = 'all'
} = props ?? {};
@@ -46,61 +45,62 @@ export const PlayData = (props?: PlayInfoProps) => {
return
}
- const [compareVal, setCompareVal] = useState(compareDefault)
const [codeMode, setCodeMode] = useState(false);
- const displayedPlay = compareVal === 'Initial' ? play : final;
+ let code: JSX.Element | null = null;
- let comparer: JSX.Element | null = null,
- copy: JSX.Element | null = null;
+ const comparable = showCompare && final !== undefined;
- if (showCompare && final !== undefined) {
- comparer = (
- setCompareVal(e.value as 'Initial' | 'Final')}>
-
-
-
- );
- }
if (showCodeToggle) {
- copy = (
+ code = (
setCodeMode(!codeMode)}>
{codeMode ? : }
);
}
- const datesFooterContent = useMemo(() => {
- let dateElm: JSX.Element;
- if (datesFooter !== false) {
- let playDate: JSX.Element,
- seenDate: JSX.Element;
- if (play.data.playDate !== undefined && ['all', 'played'].includes(datesFooter)) {
- playDate = {`Played ${shortTodayAwareFormat(dayjs(play.data.playDate))}`}
- }
- // TODO implement seenAt for play data
- if (play.data.playDateCompleted !== undefined && ['all', 'seen'].includes(datesFooter)) {
- seenDate = {`Seen ${shortTodayAwareFormat(dayjs(play.data.playDateCompleted))}`}
- }
- if (playDate !== undefined && seenDate !== undefined) {
- dateElm = {playDate}{seenDate}
- } else if (playDate !== undefined) {
- dateElm = playDate;
- } else if (seenDate !== undefined) {
- dateElm = seenDate;
- }
- }
- return dateElm;
- }, [play, datesFooter]);
+ if (!comparable) {
+ return (
+ {code}
+ {codeMode ? : }
+ );
+ }
+
+ return (
+
+ {code}
+
+
+ Initial
+ Final
+
+
+ {codeMode ? : }
+
+
+ {codeMode ? : }
+
+
+
+ );
+}
+
+export const PlayDataDataList = (props: { play: JsonPlayObject, dates: DisplayDates }) => {
+
+ const {
+ play,
+ dates
+ } = props;
+
let albumArtistElm: JSX.Element;
- if (displayedPlay.data.albumArtists !== undefined && displayedPlay.data.albumArtists.length > 0) {
+ if (play.data.albumArtists !== undefined && play.data.albumArtists.length > 0) {
albumArtistElm = (
Album Artists
- {displayedPlay.data.albumArtists.map((x, index) => {
+ {play.data.albumArtists.map((x, index) => {
return (
{x}
@@ -116,20 +116,67 @@ export const PlayData = (props?: PlayInfoProps) => {
data: {
artists = []
} = {}
- } = displayedPlay;
+ } = play;
+
+ return (
+
+
+
+
+ Title
+ {play.data.track}
+
+
+ Artists
+
+ {artists.length === 0 ? (No Artists) :
+ {play.data.artists.map((x, index) => {
+ return (
+
+ {x}
+
+ );
+ })}}
+
+
+ {albumArtistElm}
+
+ Album
+ {play.data.album}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export const PlayInfoContainer = (props?: PlayInfoProps) => {
+ return
+}
+
+export const PlayDatesStack = (props: { play: JsonPlayObject, dates: DisplayDates }) => {
+ const {
+ play,
+ dates
+ } = props;
let datesItem: JSX.Element | null;
- if(dates === false) {
+ if (dates === false) {
datesItem = null;
} else {
const dateElements = [];
- if(dates.includes('played') || dates.includes('all')) {
+ if (dates.includes('played') || dates.includes('all')) {
dateElements.push(({`Played ${shortTodayAwareFormat(dayjs(play.data.playDate))}`}));
- if(play.data.playDateCompleted !== undefined) {
+ if (play.data.playDateCompleted !== undefined) {
dateElements.push(({`Played Until ${shortTodayAwareFormat(dayjs(play.data.playDateCompleted))}`}));
}
}
- if(dates.includes('seen') || dates.includes('all')) {
+ if (dates.includes('seen') || dates.includes('all')) {
dateElements.push(({`Seen ${shortTodayAwareFormat(dayjs(play.data.playDate))}`}));
}
datesItem = (
@@ -144,55 +191,35 @@ export const PlayData = (props?: PlayInfoProps) => {
)
}
- return (
-
-
-
- {comparer} {copy}
-
- {
- codeMode ? : (
-
-
-
-
- Title
- {displayedPlay.data.track}
-
-
- Artists
-
- {artists.length === 0 ? (No Artists) :
- {displayedPlay.data.artists.map((x, index) => {
- return (
-
- {x}
-
- );
- })}}
-
-
- {albumArtistElm}
-
- Album
- {displayedPlay.data.album}
-
-
-
-
-
- {datesItem}
-
-
- {datesFooterContent}
-
- )
- }
-
-
- )
+ return datesItem;
}
-export const PlayInfoContainer = (props?: PlayInfoProps) => {
- return
+export const PlayDatesFooter = (props: { play: JsonPlayObject, dates: DisplayDates }) => {
+
+ const {
+ play,
+ dates
+ } = props;
+
+ let dateElm: JSX.Element;
+
+ if (dates !== false) {
+ let playDate: JSX.Element,
+ seenDate: JSX.Element;
+ if (play.data.playDate !== undefined && ['all', 'played'].includes(dates)) {
+ playDate = {`Played ${shortTodayAwareFormat(dayjs(play.data.playDate))}`}
+ }
+ // TODO implement seenAt for play data
+ if (play.data.playDateCompleted !== undefined && ['all', 'seen'].includes(dates)) {
+ seenDate = {`Seen ${shortTodayAwareFormat(dayjs(play.data.playDateCompleted))}`}
+ }
+ if (playDate !== undefined && seenDate !== undefined) {
+ dateElm = {playDate}{seenDate}
+ } else if (playDate !== undefined) {
+ dateElm = playDate;
+ } else if (seenDate !== undefined) {
+ dateElm = seenDate;
+ }
+ }
+ return dateElm;
}
\ No newline at end of file