@webitel/ui-chats 0.1.41 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.1.41",
+	"version": "0.1.42",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",

package/src/ui/messaging/composables/useChatScroll.ts

@@ -50,6 +50,8 @@ export const useChatScroll = ({
 	let lastVisibleMessageEl: HTMLElement | null = null;
 	let prevScrollHeight = 0;
 	let resizeObserver: ResizeObserver | null = null;
+	let isViewportTransition = false;
+	let viewportTransitionTimer: ReturnType<typeof setTimeout> | null = null;
 	/**
 	 * @author PolinaSukhorukova-webitel
 	 *
@@ -113,6 +115,12 @@ export const useChatScroll = ({
 
 			const newScrollHeight = el.scrollHeight;
 
+			if (isViewportTransition) {
+				prevScrollHeight = newScrollHeight;
+				updateScrollToBottomBtnVisibility(el);
+				return;
+			}
+
 			const wasNearBottom =
 				el.scrollTop + el.clientHeight >= prevScrollHeight - bottomThreshold;
 			const contentGrown = newScrollHeight > prevScrollHeight;
@@ -157,6 +165,26 @@ export const useChatScroll = ({
 		resetScrollToBottomBtn();
 	};
 
+	const onFullscreenChange = () => {
+		isViewportTransition = true;
+
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
+
+		viewportTransitionTimer = setTimeout(() => {
+			isViewportTransition = false;
+			viewportTransitionTimer = null;
+		}, 500);
+	};
+
+	/**
+	 * @author PolinaSukhorukova-webitel
+	 *
+	 * WTEL-9968 (https://webitel.atlassian.net/browse/WTEL-9968)
+	 * to avoid extra bottom scroll when chat is in fullscreen
+	 */
+
+	document.addEventListener('fullscreenchange', onFullscreenChange);
+
 	watch(
 		() => messages.value?.length,
 		(newValue, oldValue) => {
@@ -215,6 +243,8 @@ export const useChatScroll = ({
 
 	onUnmounted(() => {
 		stopStickToBottomObserving();
+		document.removeEventListener('fullscreenchange', onFullscreenChange);
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
 	});
 
 	return {

package/src/ui/messaging/composables/useObserveHeightUntilStable.ts

@@ -12,6 +12,19 @@ export const useObserveHeightUntilStable = (
 	callback: () => void,
 ) => {
 	let observer: ResizeObserver | null = null;
+	let isViewportTransition = false;
+	let viewportTransitionTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const onFullscreenChange = () => {
+		isViewportTransition = true;
+
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
+
+		viewportTransitionTimer = setTimeout(() => {
+			isViewportTransition = false;
+			viewportTransitionTimer = null;
+		}, 500);
+	};
 
 	const stopObserve = () => {
 		observer?.disconnect();
@@ -26,7 +39,8 @@ export const useObserveHeightUntilStable = (
 
 		observer = new ResizeObserver(() => {
 			const currentClientHeight = chatContainer.value?.clientHeight;
-			callback();
+
+			if (!isViewportTransition) callback();
 
 			if (currentClientHeight === lastClientHeight) {
 				stableCount++;
@@ -40,7 +54,19 @@ export const useObserveHeightUntilStable = (
 		observer.observe(chatContainer.value);
 	};
 
-	onUnmounted(stopObserve);
+	/**
+	 * @author PolinaSukhorukova-webitel
+	 *
+	 * WTEL-9968 (https://webitel.atlassian.net/browse/WTEL-9968)
+	 * to avoid extra bottom scroll when chat is in fullscreen
+	 */
+	document.addEventListener('fullscreenchange', onFullscreenChange);
+
+	onUnmounted(() => {
+		stopObserve();
+		document.removeEventListener('fullscreenchange', onFullscreenChange);
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
+	});
 
 	return {
 		startObserve,