From 652bd88fcb8176bfbd4b3df5f787dd1d986d3667 Mon Sep 17 00:00:00 2001 From: Sara Date: Tue, 12 Dec 2023 17:56:55 +0100 Subject: [PATCH] UI improvements --- .../correct/participantList.tsx | 122 ++++++++++-------- .../[transcriptId]/correct/soundWaveCss.tsx | 29 +++++ .../[transcriptId]/correct/topicPlayer.tsx | 66 ++++++++-- www/tailwind.config.js | 38 ++++++ 4 files changed, 193 insertions(+), 62 deletions(-) create mode 100644 www/app/[domain]/transcripts/[transcriptId]/correct/soundWaveCss.tsx diff --git a/www/app/[domain]/transcripts/[transcriptId]/correct/participantList.tsx b/www/app/[domain]/transcripts/[transcriptId]/correct/participantList.tsx index b187b400..69412e11 100644 --- a/www/app/[domain]/transcripts/[transcriptId]/correct/participantList.tsx +++ b/www/app/[domain]/transcripts/[transcriptId]/correct/participantList.tsx @@ -1,6 +1,6 @@ import { faArrowTurnDown, faSpinner } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { useEffect, useRef, useState } from "react"; +import { ChangeEvent, useEffect, useRef, useState } from "react"; import { Participant } from "../../../../api"; import getApi from "../../../../lib/getApi"; import { UseParticipants } from "../../useParticipants"; @@ -60,30 +60,7 @@ const ParticipantList = ({ setAction(null); } } - }, [selectedText]); - - useEffect(() => { - if ( - participants.response && - (action == "Create and assign" || action == "Create to rename") - ) { - if ( - participants.response.filter((p) => p.name.startsWith(participantInput)) - .length == 1 - ) { - setOneMatch( - participants.response.find((p) => - p.name.startsWith(participantInput), - ), - ); - } else { - setOneMatch(undefined); - } - } - if (participantInput && !action) { - setAction("Create"); - } - }, [participantInput]); + }, [selectedText, participants]); useEffect(() => { document.onkeyup = (e) => { @@ -251,6 +228,9 @@ const ParticipantList = ({ topicWithWords.refetch(); participants.refetch(); setLoading(false); + setAction(null); + setSelectedText(undefined); + setSelectedParticipant(undefined); }); }; @@ -271,23 +251,48 @@ const ParticipantList = ({ e?.stopPropagation(); e?.preventDefault(); }; + const changeParticipantInput = (e: ChangeEvent) => { + const value = e.target.value.replaceAll(/,|\.| /g, ""); + setParticipantInput(value); + if ( + value.length > 0 && + participants.response && + (action == "Create and assign" || action == "Create to rename") + ) { + if ( + participants.response.filter((p) => p.name.startsWith(value)).length == + 1 + ) { + setOneMatch( + participants.response.find((p) => p.name.startsWith(value)), + ); + } else { + setOneMatch(undefined); + } + } + if (value.length > 0 && !action) { + setAction("Create"); + } + }; return (
-
+
setParticipantInput(e.target.value)} + onChange={changeParticipantInput} value={participantInput} + className="border border-blue-400 p-1" /> {action && ( - )}
@@ -306,14 +311,14 @@ const ParticipantList = ({
  • 0 && selectedText && participant.name.startsWith(participantInput) ? "bg-blue-100 " : "") + (participant.id == selectedParticipant?.id - ? "border-blue-400 border" + ? "bg-blue-200 border" : "") } key={participant.id} @@ -324,41 +329,52 @@ const ParticipantList = ({ {selectedTextIsSpeaker(selectedText) && !selectedParticipant && !loading && ( - )} {selectedTextIsTimeSlice(selectedText) && !loading && ( - )} -
    • diff --git a/www/app/[domain]/transcripts/[transcriptId]/correct/soundWaveCss.tsx b/www/app/[domain]/transcripts/[transcriptId]/correct/soundWaveCss.tsx new file mode 100644 index 00000000..7e35787f --- /dev/null +++ b/www/app/[domain]/transcripts/[transcriptId]/correct/soundWaveCss.tsx @@ -0,0 +1,29 @@ +export default ({ playing }) => ( +
    +
    +
    +
    +
    +
    +
    +); diff --git a/www/app/[domain]/transcripts/[transcriptId]/correct/topicPlayer.tsx b/www/app/[domain]/transcripts/[transcriptId]/correct/topicPlayer.tsx index 0cdaee50..6aa5ad7f 100644 --- a/www/app/[domain]/transcripts/[transcriptId]/correct/topicPlayer.tsx +++ b/www/app/[domain]/transcripts/[transcriptId]/correct/topicPlayer.tsx @@ -1,5 +1,7 @@ import { useEffect, useState } from "react"; import useMp3 from "../../useMp3"; +import { formatTime } from "../../../../lib/time"; +import SoundWaveCss from "./soundWaveCss"; const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => { const mp3 = useMp3(transcriptId); @@ -7,9 +9,10 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => { const [endTopicCallback, setEndTopicCallback] = useState<() => void>(); const [endSelectionCallback, setEndSelectionCallback] = useState<() => void>(); + const [showTime, setShowTime] = useState(""); const keyHandler = (e) => { - if (e.key == "!") { + if (e.key == " ") { if (isPlaying) { mp3.media?.pause(); setIsPlaying(false); @@ -17,6 +20,8 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => { mp3.media?.play(); setIsPlaying(true); } + } else if (selectedTime && e.key == ",") { + playSelection(); } }; useEffect(() => { @@ -26,6 +31,24 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => { }; }); + const calcShowTime = () => { + setShowTime( + `${ + mp3.media?.currentTime + ? formatTime(mp3.media?.currentTime - topicTime.start) + : "00:00" + }/${formatTime(topicTime.end - topicTime.start)}`, + ); + }; + + useEffect(() => { + let i; + if (isPlaying) { + i = setInterval(calcShowTime, 1000); + } + return () => i && clearInterval(i); + }, [isPlaying]); + useEffect(() => { setEndTopicCallback( () => @@ -38,6 +61,7 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => { mp3.media.pause(); setIsPlaying(false); mp3.media.currentTime = topicTime.start; + calcShowTime(); } }, ); @@ -47,6 +71,7 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => { setTimeout(() => { if (mp3.media) { mp3.media.currentTime = topicTime.start; + setShowTime(`00:00/${formatTime(topicTime.end - topicTime.start)}`); } }, 10); setIsPlaying(false); @@ -65,9 +90,12 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => { }; }, [endTopicCallback]); - const playSelection = () => { + const playSelection = (e?) => { + e?.preventDefault(); + e?.target?.blur(); if (mp3.media && selectedTime?.start !== undefined) { mp3.media.currentTime = selectedTime.start; + calcShowTime(); setEndSelectionCallback( () => function () { @@ -99,7 +127,9 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => { }; }, [endSelectionCallback]); - const playTopic = () => { + const playTopic = (e) => { + e?.preventDefault(); + e?.target?.blur(); if (mp3.media) { mp3.media.currentTime = topicTime.start; mp3.media.play(); @@ -109,28 +139,46 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => { } }; - const playCurrent = () => { + const playCurrent = (e) => { + e.preventDefault(); + e?.target?.blur(); + mp3.media?.play(); setIsPlaying(true); }; const pause = (e) => { + e.preventDefault(); + e?.target?.blur(); + mp3.media?.pause(); setIsPlaying(false); }; if (mp3.media) { return ( -
    +
    + +
    {showTime}
    + {topicTime && ( + + )} {!isPlaying ? ( - + ) : ( - + )} {selectedTime && ( - + )} - {topicTime && }
    ); } diff --git a/www/tailwind.config.js b/www/tailwind.config.js index e8d6c176..cb11ba63 100644 --- a/www/tailwind.config.js +++ b/www/tailwind.config.js @@ -15,6 +15,44 @@ module.exports = { }, animation: { "spin-slow": "spin 3s linear infinite", + "wave-quiet": "wave-quiet 1.2s ease-in-out infinite", + "wave-normal": "wave-normal 1.2s ease-in-out infinite", + "wave-loud": "wave-loud 1.2s ease-in-out infinite", + }, + keyframes: { + "wave-quiet": { + "25%": { + transform: "scaleY(.6)", + }, + "50%": { + transform: "scaleY(.4)", + }, + "75%": { + transform: "scaleY(.4)", + }, + }, + "wave-normal": { + "25%": { + transform: "scaleY(1)", + }, + "50%": { + transform: "scaleY(.4)", + }, + "75%": { + transform: "scaleY(.6)", + }, + }, + "wave-loud": { + "25%": { + transform: "scaleY(1)", + }, + "50%": { + transform: "scaleY(.4)", + }, + "75%": { + transform: "scaleY(1.2)", + }, + }, }, colors: { bluegrey: "RGB(90, 122, 158)",