Skip to content

Commit fe78ea9

Browse files
adrmacadrmac
committed
changed name to PlaybarPlayer, restyled
1 parent 94fd6c7 commit fe78ea9

File tree

5 files changed

+99
-33
lines changed

5 files changed

+99
-33
lines changed

‎ui/src/components/CandidateCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export default function CandidateCard(props: {
153153
<Button onClick={() => handlePause()}>Pause</Button>
154154
)}{" "}
155155
{/* {feed && candidate.array[0].playlistTimestamp ? (
156-
<CandidateCardPlayer
156+
<PlaybarPlayer
157157
feed={feed}
158158
timestamp={startPlaylistTimestamp}
159159
startOffset={startOffset}
@@ -165,7 +165,7 @@ export default function CandidateCard(props: {
165165
/>
166166
) : candidate.array[0].audioUri ? (
167167
<>
168-
<CandidateCardAIPlayer
168+
<PlaybarAIPlayer
169169
audioUri={candidate.array[0].audioUri}
170170
// index={props.index}
171171
onPlayerInit={onPlayerInit}

‎ui/src/components/PlayBar.tsx‎

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
import { AppBar, Stack, Toolbar, Typography } from "@mui/material";
2-
import { useEffect, useState } from "react";
1+
import { AppBar, Toolbar } from "@mui/material";
2+
import { useEffect, useMemo, useState } from "react";
33

44
import { useData } from "@/context/DataContext";
55
import { useNowPlaying } from "@/context/NowPlayingContext";
66

7-
import { CandidateCardAIPlayer } from "./Player/CandidateCardAIPlayer";
8-
import { CandidateCardPlayer } from "./Player/CandidateCardPlayer";
7+
import { PlaybarAIPlayer } from "./Player/PlaybarAIPlayer";
8+
import { PlaybarPlayer } from "./Player/PlaybarPlayer";
99

1010
export default function PlayBar() {
1111
const { nowPlaying } = useNowPlaying();
1212
const { feeds } = useData();
1313

1414
const [playerProps, setPlayerProps] = useState({
1515
feed: feeds.length > 0 ? feeds[0] : null,
16+
image: feeds.length > 0 ? feeds[0].imageUrl : "",
1617
playlist: 0,
1718
startOffset: 0,
1819
endOffset: 0,
@@ -25,6 +26,7 @@ export default function PlayBar() {
2526
const firstDetection = candidateArray[candidateArray.length - 1];
2627
const lastDetection = candidateArray[0];
2728
const feed = feeds.find((feed) => feed.id === firstDetection.feedId);
29+
console.log("feed is: " + JSON.stringify(feed, null, 2));
2830

2931
const playlist =
3032
candidateArray.length > 0
@@ -49,15 +51,10 @@ export default function PlayBar() {
4951
const startOffset = Math.max(0, minOffset - offsetPadding);
5052
const endOffset = maxOffset + offsetPadding;
5153

52-
console.log("Updating PlayerProps:", {
53-
startOffset,
54-
endOffset,
55-
playlist,
56-
});
57-
5854
if (feed) {
5955
setPlayerProps({
6056
feed: feed ? feed : feeds[0],
57+
image: feed ? feed.imageUrl : feeds[0].imageUrl,
6158
playlist: playlist,
6259
startOffset: startOffset,
6360
endOffset: endOffset,
@@ -78,6 +75,26 @@ export default function PlayBar() {
7875
}
7976
}, [nowPlaying, feeds]);
8077

78+
const clipDateTime = useMemo(() => {
79+
if (nowPlaying?.array) {
80+
return new Date(nowPlaying?.array[0].timestamp).toLocaleString();
81+
} else {
82+
return "";
83+
}
84+
}, [nowPlaying]);
85+
86+
const clipNode = useMemo(() => {
87+
if (nowPlaying?.array) {
88+
return nowPlaying?.array[0]?.hydrophone;
89+
} else {
90+
return "";
91+
}
92+
}, [nowPlaying]);
93+
94+
useEffect(() => {
95+
console.log("candidate is: " + JSON.stringify(nowPlaying, null, 2));
96+
});
97+
8198
return (
8299
<AppBar
83100
position="fixed"
@@ -87,36 +104,38 @@ export default function PlayBar() {
87104
zIndex: (theme) => theme.zIndex.drawer + 1,
88105
bottom: 0,
89106
top: "auto",
90-
height: "100px",
107+
height: "87px",
91108
display: "flex",
92109
justifyContent: "center",
93110
alignItems: "center",
94111
}}
95112
>
96-
<Toolbar>
113+
<Toolbar
114+
sx={{
115+
width: "100%",
116+
}}
117+
>
97118
{nowPlaying.array && playerProps.feed ? (
98119
<>
99-
<Stack>
100-
<Typography component="h2">{`${new Date(nowPlaying?.array[0].timestamp).toLocaleString()}`}</Typography>
101-
<Typography>{`${nowPlaying?.array[0].hydrophone}`}</Typography>
102-
</Stack>
103-
<CandidateCardPlayer
120+
<PlaybarPlayer
104121
feed={playerProps.feed}
122+
image={playerProps.image?.toString()}
105123
playlistTimestamp={playerProps.playlist}
106124
startOffset={playerProps.startOffset}
107125
endOffset={playerProps.endOffset}
108126
key={playerProps.startOffset + "-" + playerProps.endOffset}
127+
clipDateTime={clipDateTime}
128+
clipNode={clipNode}
109129
/>
110130
</>
111131
) : nowPlaying.array && playerProps.audioUri.length > 0 ? (
112132
<>
113-
<Stack>
114-
<Typography component="h2">{`${new Date(nowPlaying?.array[0].timestamp).toLocaleString()}`}</Typography>
115-
<Typography>{`${nowPlaying?.array[0].hydrophone}`}</Typography>
116-
</Stack>
117-
<CandidateCardAIPlayer
133+
<PlaybarAIPlayer
134+
image={playerProps.image?.toString()}
118135
audioUri={playerProps.audioUri}
119136
key={playerProps.audioUri}
137+
clipDateTime={clipDateTime}
138+
clipNode={clipNode}
120139
/>
121140
</>
122141
) : !nowPlaying.array ||

ui/src/components/Player/CandidateCardAIPlayer.tsx renamed to ui/src/components/Player/PlaybarAIPlayer.tsx

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,11 @@ import { type VideoJSPlayer } from "./VideoJS";
1414

1515
const VideoJS = dynamic(() => import("./VideoJS"));
1616

17-
export function CandidateCardAIPlayer({
17+
export function PlaybarAIPlayer({
18+
clipDateTime,
19+
clipNode,
1820
// feed,
21+
image,
1922
marks,
2023
// timestamp,
2124
// startOffset,
@@ -29,7 +32,10 @@ export function CandidateCardAIPlayer({
2932
onPlay,
3033
// onPlayerEnd,
3134
}: {
35+
clipDateTime?: string;
36+
clipNode?: string;
3237
// feed: Pick<Feed, "nodeName" | "bucket">;
38+
image?: string | undefined;
3339
marks?: { label: string; value: number }[];
3440
// timestamp: number;
3541
// startOffset: number;
@@ -232,13 +238,25 @@ export function CandidateCardAIPlayer({
232238
<Box display="none" id="video-js">
233239
<VideoJS options={playerOptions} onReady={handleReady} />
234240
</Box>
235-
<Box ml={2} mr={6} id="play-pause-button">
241+
<Box ml={0} mr={3} id="play-pause-button">
236242
<PlayPauseButton
237243
playerStatus={playerStatus}
238244
onClick={handlePlayPauseClick}
239245
disabled={!audioUri}
240246
/>
241247
</Box>
248+
<Box
249+
mr={4}
250+
sx={{
251+
backgroundImage: `url(${image})`,
252+
backgroundPosition: "center",
253+
backgroundSize: "cover",
254+
backgroundRepeat: "no-repeat",
255+
width: "105px",
256+
height: "60px",
257+
borderRadius: "4px",
258+
}}
259+
></Box>
242260
<Box
243261
sx={{
244262
display: "flex",
@@ -248,6 +266,10 @@ export function CandidateCardAIPlayer({
248266
}}
249267
>
250268
<Box width={"100%"} id="slider">
269+
<Typography component="h2">
270+
<span style={{ fontWeight: "bold" }}>{clipDateTime}</span> •{" "}
271+
{clipNode}
272+
</Typography>
251273
<Slider
252274
valueLabelDisplay="auto"
253275
valueLabelFormat={(v) => `${v + startOffset.toFixed(2)} s`}

ui/src/components/Player/CandidateCardPlayer.tsx renamed to ui/src/components/Player/PlaybarPlayer.tsx

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,11 @@ import { type VideoJSPlayer } from "./VideoJS";
1717

1818
const VideoJS = dynamic(() => import("./VideoJS"));
1919

20-
export function CandidateCardPlayer({
20+
export function PlaybarPlayer({
21+
clipDateTime,
22+
clipNode,
2123
feed,
24+
image,
2225
marks,
2326
playlistTimestamp,
2427
startOffset,
@@ -31,7 +34,10 @@ export function CandidateCardPlayer({
3134
onPlay,
3235
// onPlayerEnd,
3336
}: {
37+
clipDateTime?: string;
38+
clipNode?: string;
3439
feed: Pick<Feed, "nodeName" | "bucket">;
40+
image: string | undefined;
3541
marks?: { label: string; value: number }[];
3642
playlistTimestamp: number;
3743
startOffset: number;
@@ -224,13 +230,25 @@ export function CandidateCardPlayer({
224230
<Box display="none" id="video-js">
225231
<VideoJS options={playerOptions} onReady={handleReady} />
226232
</Box>
227-
<Box ml={2} mr={6} id="play-pause-button">
233+
<Box ml={0} mr={3} id="play-pause-button">
228234
<PlayPauseButton
229235
playerStatus={playerStatus}
230236
onClick={handlePlayPauseClick}
231237
disabled={!feed}
232238
/>
233239
</Box>
240+
<Box
241+
mr={4}
242+
sx={{
243+
backgroundImage: `url(${image})`,
244+
backgroundPosition: "center",
245+
backgroundSize: "cover",
246+
backgroundRepeat: "no-repeat",
247+
width: "105px",
248+
height: "60px",
249+
borderRadius: "4px",
250+
}}
251+
></Box>
234252
<Box
235253
sx={{
236254
display: "flex",
@@ -239,7 +257,11 @@ export function CandidateCardPlayer({
239257
paddingRight: "2em",
240258
}}
241259
>
242-
<Box width={"100%"} id="slider">
260+
<Box width={"100%"} height={"42px"} id="slider">
261+
<Typography component="h2">
262+
<span style={{ fontWeight: "bold" }}>{clipDateTime}</span> •{" "}
263+
{clipNode}
264+
</Typography>
243265
<Slider
244266
valueLabelDisplay="auto"
245267
valueLabelFormat={(v) => `${(v + startOffset).toFixed(2)} s`}
@@ -250,6 +272,9 @@ export function CandidateCardPlayer({
250272
onChange={handleSliderChange}
251273
onChangeCommitted={handleSliderChangeCommitted}
252274
size="small"
275+
sx={{
276+
padding: "9px 0",
277+
}}
253278
/>
254279
</Box>
255280

‎ui/src/pages/moderator/[candidateId].tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import { useRouter } from "next/router";
1616
import { useEffect, useState } from "react";
1717

1818
import { getModeratorLayout } from "@/components/layouts/ModeratorLayout";
19-
import { CandidateCardAIPlayer } from "@/components/Player/CandidateCardAIPlayer";
20-
import { CandidateCardPlayer } from "@/components/Player/CandidateCardPlayer";
19+
import { PlaybarAIPlayer } from "@/components/Player/PlaybarAIPlayer";
20+
import { PlaybarPlayer } from "@/components/Player/PlaybarPlayer";
2121
import { useData } from "@/context/DataContext";
2222
import type { NextPageWithLayout } from "@/pages/_app";
2323
import { CombinedData } from "@/types/DataTypes";
@@ -173,15 +173,15 @@ const CandidatePage: NextPageWithLayout = () => {
173173
}}
174174
>
175175
{detections.human.length ? (
176-
<CandidateCardPlayer
176+
<PlaybarPlayer
177177
feed={feed}
178178
playlistTimestamp={startTimestamp}
179179
startOffset={startOffset}
180180
endOffset={endOffset}
181181
/>
182182
) : detections.ai.length ? (
183183
<>
184-
<CandidateCardAIPlayer audioUri={detections.ai[0].audioUri} />
184+
<PlaybarAIPlayer audioUri={detections.ai[0].audioUri} />
185185
</>
186186
) : (
187187
"no player found"

0 commit comments

Comments
 (0)