fix: transcription animation not working ml-357 (#377)

* fix(frontend): no animation if inactive tab ml-357

* fix(frontend): refactor auto scroll add style ml-357

* fix(frontend): change meeting status render ml-357

Author: VolodymyrKozel

apps/frontend/src/libs/components/transcription-panel/transcription-panel.module.css

@@ -53,6 +53,10 @@
 	border-radius: var(--border-radius-lg);
 }
 
+.transcription-bottom-spacer {
+	scroll-margin-bottom: 46px;
+}
+
 @media (width <=1024px) {
 	.meeting-details__transcription-panel {
 		grid-row: 1;

apps/frontend/src/libs/components/transcription-panel/transcription-panel.tsx

@@ -26,7 +26,7 @@ const TranscriptionPanel: React.FC = () => {
 		({ meetingDetails }) => meetingDetails.meeting,
 	);
 	const containerReference = useAutoScroll<HTMLDivElement>(
-		meeting?.status === MeetingStatus.STARTED ? [typedText] : [],
+		!!meeting && meeting.status !== MeetingStatus.ENDED ? [typedText] : [],
 	);
 	useFetchTranscriptions();
 
@@ -57,10 +57,10 @@ const TranscriptionPanel: React.FC = () => {
 			{dataStatus === DataStatus.PENDING && <Loader hasOverlay isLoading />}
 
 			{transcriptions.items.length > EMPTY_TRANSCRIPT_CHUNKS ? (
-				<div className={styles["transcription-area"]} ref={containerReference}>
+				<div className={styles["transcription-area"]}>
 					<p className={styles["transcription-text"]}>
 						{staticTranscript}
-						{meeting?.status === MeetingStatus.STARTED && (
+						{meeting?.status !== MeetingStatus.ENDED && (
 							<LiveTranscription isTyping={isTyping} typedText={typedText} />
 						)}
 					</p>
@@ -70,6 +70,10 @@ const TranscriptionPanel: React.FC = () => {
 					<p>No transcriptions</p>
 				</div>
 			)}
+			<div
+				className={styles["transcription-bottom-spacer"]}
+				ref={containerReference}
+			/>
 		</div>
 	);
 };

apps/frontend/src/libs/constants/type-speed.constant.ts

@@ -1,3 +1,3 @@
-const TYPING_SPEED = 40;
+const TYPING_SPEED = 20;
 
 export { TYPING_SPEED };

apps/frontend/src/libs/hooks/use-auto-scroll/use-auto-scroll.ts

@@ -5,11 +5,16 @@ import { useEffect, useRef } from "~/libs/hooks/hooks.js";
 const useAutoScroll = <T extends HTMLElement>(
 	dependencies: unknown[] = [],
 ): RefObject<null | T> => {
+	const SMOOTH = "smooth";
+	const END = "end";
 	const reference = useRef<T>(null);
 
 	useEffect(() => {
 		if (reference.current) {
-			reference.current.scrollTop = reference.current.scrollHeight;
+			reference.current.scrollIntoView({
+				behavior: SMOOTH,
+				block: END,
+			});
 		}
 	}, dependencies);
 

apps/frontend/src/libs/hooks/use-typing-queue/use-typing-queue.ts

@@ -68,6 +68,12 @@ const useTypingQueue = (typingSpeed = TYPING_SPEED): UseTypingQueueReturn => {
 				return;
 			}
 
+			if (document.hidden) {
+				dispatch(transcriptionActions.addTranscription(chunk));
+
+				return;
+			}
+
 			dispatch(transcriptionActions.addTranscription(chunk));
 			queueReference.current.push(chunk);
 			processQueue();