Skip to content

Commit

Permalink
fix: add emotion auto detection
Browse files Browse the repository at this point in the history
  • Loading branch information
@younes200
younes200 committed Dec 17, 2024
1 parent c1769fc commit a7a93f6
Show file tree
Hide file tree
Showing 28 changed files with 1,306 additions and 404 deletions.
4 changes: 3 additions & 1 deletion apps/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"@trpc/server": "^10.45.2",
"@types/linkify-urls": "^3.1.1",
"@uidotdev/usehooks": "^2.4.1",
"@vladmandic/face-api": "^1.7.14",
"adminjs": "^7.8.13",
"better-auth": "^1.0.21",
"change-case": "^4.1.2",
Expand Down Expand Up @@ -94,7 +95,8 @@
"vite-express": "^0.19.0",
"xml2js": "^0.6.2",
"yup": "^1.4.0",
"yup-locales": "^1.2.28"
"yup-locales": "^1.2.28",
"zustand": "^5.0.2"
},
"browserslist": {
"production": [
Expand Down
11 changes: 8 additions & 3 deletions apps/frontend/src/components/annotation/AnnotationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@ import {
useContextualEditorPosition,
useContextualEditorVisibleState,
useEditAnnotation,
useEmotionEditor,
} from "./useAnnotationEditor";
import { EmotionsPalette } from "./emotion-palette";
import { EmotionsPalette } from "../emotion-detection/emotion-palette";

type AnnotationFormProps = {
duration: number;
Expand Down Expand Up @@ -99,7 +100,7 @@ export const AnnotationFormContent: React.FC<
stopTime: editedAnnotation.stopTime,
pause: editedAnnotation.pause,
text: editedAnnotation.text,
emotion: editedAnnotation.extra?.emotion,
emotion: editedAnnotation.emotion,
}
: {
startTime: videoProgress,
Expand Down Expand Up @@ -136,6 +137,9 @@ export const AnnotationFormContent: React.FC<
startTime: values.startTime,
stopTime: values.stopTime,
pause: values.pause,
emotion: values.emotion,
// mode: values.mode,
// detection: values.detection,
extra: contextualEditorPosition ? contextualEditorPosition : {},
});
if (newAnnotation) {
Expand Down Expand Up @@ -194,7 +198,7 @@ export const AnnotationFormContent: React.FC<
value={formik.values.text}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
error={formik.errors.text}
error={!!formik.errors.text}
disabled={formik.isSubmitting}
inputProps={{
"aria-label": "Saissez votre annotation",
Expand All @@ -208,6 +212,7 @@ export const AnnotationFormContent: React.FC<
projectId={project.id}
semiAutoAnnotation={false}
semiAutoAnnotationMe={false}
position={videoProgress}
onEmotionChange={(emotion) => {
formik.setFieldValue("emotion", emotion);
}}
Expand Down
65 changes: 48 additions & 17 deletions apps/frontend/src/components/annotation/AnnotationHints.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,20 @@ import CancelIcon from "@mui/icons-material/Clear";
import { Box, Fade, IconButton, Paper, Stack, Typography } from "@mui/material";
import { grey } from "@mui/material/colors";
import { styled } from "@mui/material/styles";
import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
import Tooltip, {
tooltipClasses,
type TooltipProps,
} from "@mui/material/Tooltip";
import React from "react";
import { useTranslation } from "react-i18next";

import { Avatar } from "~components/Avatar";
import { MultiLineTypography } from "~components/MultiLineTypography";
import { AnnotationByProjectId, ProjectById } from "~utils/trpc";
import type { AnnotationByProjectId, ProjectById } from "~utils/trpc";
import { getUserColor } from "~utils/UserUtils";

import { useAnnotationHintsVisible } from "./useAnnotationEditor";
import { getEmojiFromName } from "../emotion-detection/emoji";

interface AnnotationHintsProps {
project: ProjectById;
Expand Down Expand Up @@ -55,21 +59,48 @@ const AnnotationHintsItem: React.FC<AnnotationHintsItemProps> = ({
<Stack sx={{ py: 1 }} spacing={1}>
<Box>
<Stack direction={"row"} spacing={1} alignItems={"center"}>
<Avatar
sx={{
background: annotation.user.color,
width: 24,
height: 24,
borderWidth: 2,
borderColor: annotation.user.color,
borderStyle: "solid",
}}
src={annotation.user.avatar?.publicUrl}
>
{annotation.user.initial}
</Avatar>
<Stack>
<Typography component="span" color="white" variant="body2">
<Box position={"relative"}>
<Avatar
sx={{
background: annotation.user.color,
width: 30,
height: 30,
borderWidth: 2,
borderColor: annotation.user.color,
borderStyle: "solid",
}}
src={annotation.user.avatar?.publicUrl}
>
{annotation.user.initial}
</Avatar>
{annotation.emotion && (
<Box
sx={{
position: "absolute",
top: 18,
left: 18,
color: "white",
backgroundColor: "#000000",
borderRadius: "100%",
width: 20,
height: 20,
fontSize: 12,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{getEmojiFromName(annotation.emotion)}
</Box>
)}
</Box>
<Stack direction={"row"} justifyItems={"space-between"}>
<Typography
component="span"
color="white"
variant="body2"
flex={1}
>
{annotation.user.username}
</Typography>
</Stack>
Expand Down
37 changes: 30 additions & 7 deletions apps/frontend/src/components/annotation/AnnotationItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,17 @@ import { Avatar } from "~components/Avatar";
import { MultiLineTypography } from "~components/MultiLineTypography";
import { formatDuration } from "~utils/DurationUtils";
import {
AnnotationByProjectId,
AnnotationCommentByProjectId,
ProjectById,
type AnnotationByProjectId,
type AnnotationCommentByProjectId,
type ProjectById,
trpc,
UserMe,
type UserMe,
} from "~utils/trpc";

import { CommentForm } from "./CommentForm";
import { CommentItem } from "./CommentItem";
import { useEditAnnotation } from "./useAnnotationEditor";
import { getEmojiFromName } from "../emotion-detection/emoji";

interface AnnotationItemProps {
project: ProjectById;
Expand Down Expand Up @@ -75,9 +76,10 @@ export const AnnotationItem: React.FC<AnnotationItemProps> = ({
},
});

const isContextual = Object.keys(annotation.extra || {}).length;
const isContextual = Object.keys(annotation.extra?.x || {}).length;

const canEdit = annotation.user.id == user?.id || project.user.id == user?.id;
const canEdit =
annotation.user.id === user?.id || project.user.id === user?.id;

const handleDelete: React.MouseEventHandler<HTMLButtonElement> = (event) => {
event.stopPropagation();
Expand Down Expand Up @@ -143,7 +145,7 @@ export const AnnotationItem: React.FC<AnnotationItemProps> = ({
alignContent: "center",
}}
>
<ListItemAvatar>
<ListItemAvatar sx={{ position: "relative" }}>
<Avatar
sx={{
background: annotation.user.color,
Expand All @@ -156,6 +158,27 @@ export const AnnotationItem: React.FC<AnnotationItemProps> = ({
>
{annotation.user.initial}
</Avatar>
{annotation.emotion && (
<Tooltip title={annotation.emotion} placement="top" arrow>
<Box
sx={{
position: "absolute",
bottom: -10,
right: 10,
color: "white",
backgroundColor: "#000000",
borderRadius: "100%",
width: 25,
height: 25,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{getEmojiFromName(annotation.emotion)}
</Box>
</Tooltip>
)}
</ListItemAvatar>
<ListItemText
primaryTypographyProps={{
Expand Down
69 changes: 67 additions & 2 deletions apps/frontend/src/components/annotation/AnnotationPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ import {
Badge,
type BadgeProps,
Box,
Button,
Fab,
Grow,
List,
Paper,
Stack,
styled,
Tab,
ToggleButton,
Tooltip,
Typography,
} from "@mui/material";
Expand All @@ -27,8 +29,12 @@ import type { AnnotationByProjectId, ProjectById, UserMe } from "~utils/trpc";
import { AnnotationForm } from "./AnnotationForm";
import { AnnotationItem } from "./AnnotationItem";
import { useAnnotationHintsVisible } from "./useAnnotationEditor";
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { LoadingButton, TabContext, TabList, TabPanel } from "@mui/lab";
import { ChaptersPanel } from "~components/chapters/panel";
import { SmallSwitch } from "../small-switch";

import { usePlayerModeStore } from "../emotion-detection/store";
import AutoDetectionMenu from "../emotion-detection/menu";

const StyledBadge = styled(Badge)<BadgeProps>(({ theme }) => ({
"& .MuiBadge-badge": {
Expand Down Expand Up @@ -165,6 +171,7 @@ const AnnotationList: React.FC<
export const AnnotationPanel: React.FC<AnnotationPanelProps> = ({
annotationCount,
playerIsReady,
annotations,
...props
}) => {
const [value, setValue] = useState("1");
Expand All @@ -180,6 +187,12 @@ export const AnnotationPanel: React.FC<AnnotationPanelProps> = ({

const [hintsVisible, setHintsVisible] = useAnnotationHintsVisible();

const [onlyMine, setOnlyMine] = useState(false);

const onlyMyAnnotations = onlyMine
? annotations.filter((annotation) => annotation.user.id === props.user?.id)
: annotations;

return (
<Paper
ref={ref}
Expand Down Expand Up @@ -257,7 +270,15 @@ export const AnnotationPanel: React.FC<AnnotationPanelProps> = ({
height: "100%",
}}
>
<AnnotationList playerIsReady={playerIsReady} {...props} />
<AdvancedControls
onlyMine={onlyMine}
onOnlyMineChange={setOnlyMine}
/>
<AnnotationList
playerIsReady={playerIsReady}
annotations={onlyMyAnnotations}
{...props}
/>
</Box>
</TabPanel>
<TabPanel
Expand All @@ -275,3 +296,47 @@ export const AnnotationPanel: React.FC<AnnotationPanelProps> = ({
</Paper>
);
};

function AdvancedControls({
onlyMine,
onOnlyMineChange,
}: {
onlyMine: boolean;
onOnlyMineChange: (onlyMine: boolean) => void;
}) {
const { mode, setMode } = usePlayerModeStore();

return (
<Stack
direction="row"
spacing={1}
paddingX={2}
paddingY={1}
justifyContent={"flex-end"}
>
<AutoDetectionMenu />
<Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
<SmallSwitch
checked={onlyMine}
onChange={() => onOnlyMineChange(!onlyMine)}
inputProps={{ "aria-label": "ant design" }}
/>
<Typography sx={{ color: "text.secondary", fontSize: "12px" }}>
Show Only Mine
</Typography>
</Stack>
<Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
<SmallSwitch
checked={mode === "performance"}
onChange={() =>
setMode(mode === "performance" ? "analysis" : "performance")
}
inputProps={{ "aria-label": "ant design" }}
/>
<Typography sx={{ color: "text.secondary", fontSize: "12px" }}>
Performance Mode
</Typography>
</Stack>
</Stack>
);
}
4 changes: 2 additions & 2 deletions apps/frontend/src/components/annotation/ContextualAnnotations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Avatar, Box, hexToRgb, Paper, Stack, Typography } from "@mui/material";
import React, { memo, useMemo, useRef } from "react";

import { MultiLineTypography } from "~components/MultiLineTypography";
import { AnnotationByProjectId } from "~utils/trpc";
import type { AnnotationByProjectId } from "~utils/trpc";

import { HtmlTooltip } from "./AnnotationHints";

Expand Down Expand Up @@ -152,7 +152,7 @@ export const ContextualAnnotations: React.FC<ContextualAnnotationsProps> = memo(
() =>
annotations.filter((item) => {
return (
typeof item === "object" && Object.keys(item.extra || {}).length
typeof item === "object" && Object.keys(item.extra?.x || {}).length
);
}),
[annotations]
Expand Down
Loading

0 comments on commit a7a93f6

Please sign in to comment.