diff --git a/src/assets/icons/sentiment-1.svg b/src/assets/icons/sentiment-1.svg
new file mode 100644
index 00000000..2b552627
--- /dev/null
+++ b/src/assets/icons/sentiment-1.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/icons/sentiment-2.svg b/src/assets/icons/sentiment-2.svg
new file mode 100644
index 00000000..4e04ff77
--- /dev/null
+++ b/src/assets/icons/sentiment-2.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/icons/sentiment-3.svg b/src/assets/icons/sentiment-3.svg
new file mode 100644
index 00000000..d8b12fe5
--- /dev/null
+++ b/src/assets/icons/sentiment-3.svg
@@ -0,0 +1,13 @@
+
diff --git a/src/assets/icons/sentiment-4.svg b/src/assets/icons/sentiment-4.svg
new file mode 100644
index 00000000..544a853d
--- /dev/null
+++ b/src/assets/icons/sentiment-4.svg
@@ -0,0 +1,13 @@
+
diff --git a/src/assets/icons/sentiment-5.svg b/src/assets/icons/sentiment-5.svg
new file mode 100644
index 00000000..6894ec65
--- /dev/null
+++ b/src/assets/icons/sentiment-5.svg
@@ -0,0 +1,13 @@
+
diff --git a/src/stories/highlight/demo-parts/data.ts b/src/stories/highlight/demo-parts/data.ts
index 5eb48779..4f349007 100644
--- a/src/stories/highlight/demo-parts/data.ts
+++ b/src/stories/highlight/demo-parts/data.ts
@@ -3653,6 +3653,7 @@ export const DemoTranscript = {
num_words: 147,
start: 55.68,
end: 120.93,
+ sentiment: 4
},
{
sentences: [
@@ -3666,6 +3667,7 @@ export const DemoTranscript = {
num_words: 48,
start: 122.75,
end: 142.36499,
+ sentiment: 4
},
{
sentences: [
@@ -3679,6 +3681,8 @@ export const DemoTranscript = {
num_words: 1,
start: 143.22499,
end: 143.72499,
+ sentiment: 3
+
},
{
sentences: [
@@ -3702,6 +3706,7 @@ export const DemoTranscript = {
num_words: 24,
start: 146.98999,
end: 159.355,
+ sentiment: 4
},
{
sentences: [
@@ -3715,6 +3720,7 @@ export const DemoTranscript = {
num_words: 5,
start: 160.92,
end: 167.73999,
+ sentiment: 3
},
{
sentences: [
@@ -3728,6 +3734,7 @@ export const DemoTranscript = {
num_words: 17,
start: 168.765,
end: 176.94499,
+ sentiment: 3
},
{
sentences: [
@@ -3740,7 +3747,8 @@ export const DemoTranscript = {
speaker: 1,
num_words: 13,
start: 177.85,
- end: 184.25,
+ end: 184.25,
+ sentiment: 3
},
{
sentences: [
@@ -3754,6 +3762,7 @@ export const DemoTranscript = {
num_words: 4,
start: 184.25,
end: 186.27,
+ sentiment: 3
},
{
sentences: [
@@ -3772,6 +3781,7 @@ export const DemoTranscript = {
num_words: 7,
start: 190.015,
end: 191.955,
+ sentiment: 3
},
{
sentences: [
@@ -3785,6 +3795,7 @@ export const DemoTranscript = {
num_words: 24,
start: 192.33499,
end: 206.02,
+ sentiment: 3
},
{
sentences: [
@@ -3798,6 +3809,7 @@ export const DemoTranscript = {
num_words: 58,
start: 208.065,
end: 247.195,
+ sentiment: 3
},
{
sentences: [
@@ -3811,6 +3823,7 @@ export const DemoTranscript = {
num_words: 6,
start: 249.7,
end: 252.2,
+ sentiment: 3
},
{
sentences: [
@@ -3824,6 +3837,7 @@ export const DemoTranscript = {
num_words: 27,
start: 254.98,
end: 280.595,
+ sentiment: 2
},
{
sentences: [
@@ -3837,6 +3851,7 @@ export const DemoTranscript = {
num_words: 8,
start: 282.21,
end: 286.79,
+ sentiment: 3
},
{
sentences: [
@@ -3850,6 +3865,7 @@ export const DemoTranscript = {
num_words: 5,
start: 289.64502,
end: 293.665,
+ sentiment: 3
},
{
sentences: [
@@ -3863,6 +3879,7 @@ export const DemoTranscript = {
num_words: 10,
start: 295.223,
end: 299.723,
+ sentiment: 3
},
],
},
@@ -3871,4 +3888,11 @@ export const DemoTranscript = {
},
],
},
-};
\ No newline at end of file
+};
+
+
+export const DemoSentiment = {
+ role: "assistant",
+ rate: 4,
+ content: "The reason for this rating is that the tone of the text is overall polite, professional, and cooperative. The speaker expresses gratitude, ensures the participant feels comfortable, and clearly explains the purpose and process of the meeting. There is an emphasis on open communication, feedback, and collaboration, which creates a positive and constructive atmosphere. The overall attitude and approach towards the interaction appear positive and respectful."
+}
\ No newline at end of file
diff --git a/src/stories/highlight/demo-parts/sentiment-tag.tsx b/src/stories/highlight/demo-parts/sentiment-tag.tsx
new file mode 100644
index 00000000..e40e71e0
--- /dev/null
+++ b/src/stories/highlight/demo-parts/sentiment-tag.tsx
@@ -0,0 +1,77 @@
+import { theme } from "../../theme";
+import { Span } from "../../typography/span";
+import { ReactComponent as Sentiment1 } from "../../../assets/icons/sentiment-1.svg";
+import { ReactComponent as Sentiment2 } from "../../../assets/icons/sentiment-2.svg";
+import { ReactComponent as Sentiment3 } from "../../../assets/icons/sentiment-3.svg";
+import { ReactComponent as Sentiment4 } from "../../../assets/icons/sentiment-4.svg";
+import { ReactComponent as Sentiment5 } from "../../../assets/icons/sentiment-5.svg";
+import styled from "styled-components";
+
+const StyledDiv = styled.div`
+ svg {
+ width: ${({ theme }) => theme.space.sm};
+ height: ${({ theme }) => theme.space.sm};
+ margin-right: ${(p) => p.theme.space.xs};
+ flex-shrink: 0;
+ }
+`;
+
+export const getSentiment = (value: number) => {
+ switch (value) {
+ case 1:
+ return {
+ color: theme.palette.red[500],
+ text: (
+
+ {" "}
+ Very Negative
+
+ ),
+ };
+ case 2:
+ return {
+ color: theme.palette.red[500],
+ text: (
+
+ {" "}
+ Negative
+
+ ),
+ };
+ case 3:
+ return {
+ color: theme.palette.yellow[500],
+ text: (
+
+ Neutral
+
+ ),
+ };
+ case 4:
+ return {
+ color: theme.palette.green[500],
+ text: (
+
+ {" "}
+ Positive
+
+ ),
+ };
+ case 5:
+ return {
+ color: theme.palette.green[500],
+ text: (
+
+ {" "}
+ Very Positive
+
+ ),
+ };
+
+ default:
+ return {
+ color: theme.palette.yellow[500],
+ text: "",
+ };
+ }
+};
diff --git a/src/stories/highlight/demo-parts/transcript-sentiment.tsx b/src/stories/highlight/demo-parts/transcript-sentiment.tsx
new file mode 100644
index 00000000..382143f5
--- /dev/null
+++ b/src/stories/highlight/demo-parts/transcript-sentiment.tsx
@@ -0,0 +1,71 @@
+import { styled } from "styled-components";
+import { Highlight } from "..";
+import { formatDuration } from "../../player/parts/utils";
+import { SM } from "../../typography/typescale";
+import { StoryArgs } from "../index.stories";
+import { DemoTranscript as demo, DemoSentiment } from "./data";
+import { getSentiment } from "./sentiment-tag";
+import { Textarea } from "../../forms/textarea";
+
+const StyledDiv = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ margin-bottom: ${({ theme }) => theme.space.sm};
+`;
+
+export const TSentiment = (
+ args: StoryArgs & { currentTime: number; offset: number }
+) => {
+ const words = demo.results.channels[0].alternatives[0].words.map((w) => ({
+ word: w.punctuated_word,
+ start: w.start,
+ end: w.end,
+ speaker: w.speaker,
+ }));
+ const paragraphs =
+ demo.results.channels[0].alternatives[0].paragraphs.paragraphs.map((w) => ({
+ words: words.filter((word) => word.start >= w.start && word.end <= w.end),
+ start: w.start,
+ end: w.end,
+ speaker: w.speaker,
+ text: w.sentences.map((s) => s.text).join(" "),
+ sentiment: w.sentiment,
+ }));
+ return (
+
+ Overall: 4 - Positive
+
+
+
+ {paragraphs.map((p, index) => (
+
+
+
+ {p.speaker === 1 ? "Tester" : "Interviewer"} (
+ {formatDuration(p.start - args.offset)} -{" "}
+ {formatDuration(p.end - args.offset)})
+
+ {p.sentiment && getSentiment(p.sentiment).text}
+
+ {p.words.map((w) => (
+
+ ))}
+
+ ))}
+
+ );
+};
diff --git a/src/stories/highlight/index.stories.tsx b/src/stories/highlight/index.stories.tsx
index 702ce927..61524e68 100644
--- a/src/stories/highlight/index.stories.tsx
+++ b/src/stories/highlight/index.stories.tsx
@@ -16,6 +16,7 @@ import { Transcript } from "./demo-parts/transcript-base";
import { TDiarization } from "./demo-parts/transcript-diarization";
import { TParagraph } from "./demo-parts/transcript-paragraph";
import { Tag } from "../tags";
+import { TSentiment } from "./demo-parts/transcript-sentiment";
export interface StoryArgs extends HighlightArgs {
words: Array;
@@ -632,6 +633,17 @@ const DemoTemplate: StoryFn = (args) => {
offset={VIDEO_OFFSET}
/>
+
+
+
diff --git a/src/stories/player/assets/plus.svg b/src/stories/player/assets/plus.svg
new file mode 100644
index 00000000..705a830e
--- /dev/null
+++ b/src/stories/player/assets/plus.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/stories/player/parts/controls.tsx b/src/stories/player/parts/controls.tsx
index abd49f18..72ebac64 100644
--- a/src/stories/player/parts/controls.tsx
+++ b/src/stories/player/parts/controls.tsx
@@ -12,6 +12,7 @@ import { useProgressContext } from "./progressContext";
import { TimeLabel } from "./timeLabel";
import { PlayerTooltip } from "./tooltip";
import { formatDuration } from "./utils";
+import useDebounce from "../../../hooks/useDebounce";
export const ControlsWrapper = styled.div`
position: absolute;
@@ -65,8 +66,11 @@ export const Controls = ({
const [tooltipMargin, setTooltipMargin] = useState(0);
const [tooltipLabel, setTooltipLabel] = useState("00:00");
const [marks, setMarks] = useState(bookmarks);
+ const [updatedMark, setUpdatedMark] = useState();
+
const progressRef = useRef(null);
const { context, setCurrentTime } = useVideoContext();
+ const debouncedMark = useDebounce(updatedMark, 500);
const { reset, isGrabbing, activeBookmark, fromEnd } = useProgressContext();
@@ -154,16 +158,9 @@ export const Controls = ({
...marks.slice(currentObsIndex + 1),
];
setMarks(newMarks);
- onBookMarkUpdated?.(updatedMark);
+ setUpdatedMark(updatedMark);
},
- [
- activeBookmark,
- context.part.start,
- duration,
- fromEnd,
- onBookMarkUpdated,
- marks,
- ]
+ [activeBookmark, context.part.start, duration, fromEnd, marks]
);
useEffect(() => {
@@ -180,6 +177,12 @@ export const Controls = ({
};
}, [reset, marks]);
+ useEffect(() => {
+ if (debouncedMark) {
+ onBookMarkUpdated?.(debouncedMark);
+ }
+ }, [debouncedMark, onBookMarkUpdated]);
+
return (
-
+
diff --git a/src/stories/player/parts/cutterButton.tsx b/src/stories/player/parts/cutterButton.tsx
index 3b4dbee9..b4ae301a 100644
--- a/src/stories/player/parts/cutterButton.tsx
+++ b/src/stories/player/parts/cutterButton.tsx
@@ -1,5 +1,6 @@
import { useVideoContext } from "@appquality/stream-player";
import { ReactComponent as TagIcon } from "../../../assets/icons/tag-stroke.svg";
+import { ReactComponent as PlusIcon } from "../assets/plus.svg";
import { Button } from "../../buttons/button";
import { PlayerI18n } from "../_types";
@@ -21,7 +22,7 @@ export const Cutter = ({
return (
);
};