Skip to content

Commit

Permalink
Merge pull request #825 from roflcoopter/feature/fix-recording-deletion
Browse files Browse the repository at this point in the history 
fix deletion of individual recordings
  • Loading branch information
@roflcoopter
roflcoopter authored Nov 4, 2024
2 parents a7217fe + 69083be commit 06fdc9e
Show file tree
Hide file tree
Showing 7 changed files with 534 additions and 258 deletions.
104 changes: 51 additions & 53 deletions frontend/src/components/recording/RecordingCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import LazyLoad from "react-lazyload";
import MutationIconButton from "components/buttons/MutationIconButton";
import VideoPlayerPlaceholder from "components/videoplayer/VideoPlayerPlaceholder";
import { useAuthContext } from "context/AuthContext";
import { deleteRecordingParams, useDeleteRecording } from "lib/api/client";
import { useDeleteRecording } from "lib/api/recordings";
import { getTimeFromDate, getVideoElement } from "lib/helpers";
import * as types from "lib/types";

Expand All @@ -30,58 +30,56 @@ export default function RecordingCard({
const deleteRecording = useDeleteRecording();

return (
<LazyLoad height={200}>
<Card
variant="outlined"
sx={
camera.failed
? {
border: `2px solid ${
camera.retrying
? theme.palette.warning.main
: theme.palette.error.main
}`,
}
: undefined
}
>
<CardContent>
<Typography align="center">
{getTimeFromDate(new Date(recording.start_time))}
</Typography>
</CardContent>
<CardMedia>
<LazyLoad
height={200}
offset={500}
placeholder={
<VideoPlayerPlaceholder
aspectRatio={camera.width / camera.height}
/>
<Card
variant="outlined"
sx={
camera.failed
? {
border: `2px solid ${
camera.retrying
? theme.palette.warning.main
: theme.palette.error.main
}`,
}
>
{getVideoElement(camera, recording, auth.enabled)}
</LazyLoad>
</CardMedia>
<CardActions>
<Stack direction="row" spacing={1} sx={{ ml: "auto" }}>
<Tooltip title="Delete Recording">
<MutationIconButton<deleteRecordingParams>
mutation={deleteRecording}
onClick={() => {
deleteRecording.mutate({
identifier: camera.identifier,
recording_id: recording.id,
failed: camera.failed,
});
}}
>
<DeleteForeverIcon />
</MutationIconButton>
</Tooltip>
</Stack>
</CardActions>
</Card>
</LazyLoad>
: undefined
}
>
<CardContent>
<Typography align="center">
{getTimeFromDate(new Date(recording.start_time))}
</Typography>
</CardContent>
<CardMedia>
<LazyLoad
height={200}
offset={500}
placeholder={
<VideoPlayerPlaceholder
aspectRatio={camera.width / camera.height}
/>
}
>
{getVideoElement(camera, recording, auth.enabled)}
</LazyLoad>
</CardMedia>
<CardActions>
<Stack direction="row" spacing={1} sx={{ ml: "auto" }}>
<Tooltip title="Delete Recording">
<MutationIconButton
mutation={deleteRecording}
onClick={() => {
deleteRecording.mutate({
identifier: camera.identifier,
recording_id: recording.id,
failed: camera.failed,
});
}}
>
<DeleteForeverIcon />
</MutationIconButton>
</Tooltip>
</Stack>
</CardActions>
</Card>
);
}
138 changes: 68 additions & 70 deletions frontend/src/components/recording/RecordingCardDaily.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Link } from "react-router-dom";
import MutationIconButton from "components/buttons/MutationIconButton";
import VideoPlayerPlaceholder from "components/videoplayer/VideoPlayerPlaceholder";
import { useAuthContext } from "context/AuthContext";
import { deleteRecordingParams, useDeleteRecording } from "lib/api/client";
import { useDeleteRecording } from "lib/api/recordings";
import { getTimeFromDate, getVideoElement, objHasValues } from "lib/helpers";
import * as types from "lib/types";

Expand All @@ -35,76 +35,74 @@ export default function RecordingCardDaily({
const deleteRecording = useDeleteRecording();

return (
<LazyLoad height={200}>
<Card
variant="outlined"
sx={
camera.failed
? {
border: `2px solid ${
camera.retrying
? theme.palette.warning.main
: theme.palette.error.main
}`,
}
: undefined
}
>
<CardContent>
<Typography variant="h5" align="center">
{date}
</Typography>
{objHasValues<types.Recording>(recording) ? (
<Typography align="center">{`Last recording: ${getTimeFromDate(
new Date(recording.start_time),
)}`}</Typography>
) : (
<Typography align="center">No recordings found</Typography>
)}
</CardContent>
<CardMedia>
<LazyLoad
height={200}
offset={500}
placeholder={
<VideoPlayerPlaceholder
aspectRatio={camera.width / camera.height}
/>
<Card
variant="outlined"
sx={
camera.failed
? {
border: `2px solid ${
camera.retrying
? theme.palette.warning.main
: theme.palette.error.main
}`,
}
>
{getVideoElement(camera, recording, auth.enabled)}
</LazyLoad>
</CardMedia>
<CardActions>
<Stack direction="row" spacing={1} sx={{ ml: "auto" }}>
<Tooltip title="View Recordings">
<span>
<IconButton
component={Link}
to={`/recordings/${camera.identifier}/${date}`}
disabled={!objHasValues(recording)}
>
<VideoFileIcon />
</IconButton>
</span>
</Tooltip>
<Tooltip title="Delete Recordings">
<MutationIconButton<deleteRecordingParams>
mutation={deleteRecording}
onClick={() => {
deleteRecording.mutate({
identifier: camera.identifier,
date,
failed: camera.failed,
});
}}
: undefined
}
>
<CardContent>
<Typography variant="h5" align="center">
{date}
</Typography>
{objHasValues<types.Recording>(recording) ? (
<Typography align="center">{`Last recording: ${getTimeFromDate(
new Date(recording.start_time),
)}`}</Typography>
) : (
<Typography align="center">No recordings found</Typography>
)}
</CardContent>
<CardMedia>
<LazyLoad
height={200}
offset={500}
placeholder={
<VideoPlayerPlaceholder
aspectRatio={camera.width / camera.height}
/>
}
>
{getVideoElement(camera, recording, auth.enabled)}
</LazyLoad>
</CardMedia>
<CardActions>
<Stack direction="row" spacing={1} sx={{ ml: "auto" }}>
<Tooltip title="View Recordings">
<span>
<IconButton
component={Link}
to={`/recordings/${camera.identifier}/${date}`}
disabled={!objHasValues(recording)}
>
<DeleteForeverIcon />
</MutationIconButton>
</Tooltip>
</Stack>
</CardActions>
</Card>
</LazyLoad>
<VideoFileIcon />
</IconButton>
</span>
</Tooltip>
<Tooltip title="Delete Recordings">
<MutationIconButton
mutation={deleteRecording}
onClick={() => {
deleteRecording.mutate({
identifier: camera.identifier,
date,
failed: camera.failed,
});
}}
>
<DeleteForeverIcon />
</MutationIconButton>
</Tooltip>
</Stack>
</CardActions>
</Card>
);
}
Loading

0 comments on commit 06fdc9e

Please sign in to comment.