fixed force end call

apps/dispatch/app/_components/Audio/Audio.tsx

@@ -45,10 +45,9 @@ export const Audio = () => {
 	});
 
 	const { selectedStation, status: pilotState } = usePilotConnectionStore((state) => state);
-
 	const { selectedZone, status: dispatcherState } = useDispatchConnectionStore((state) => state);
 	const session = useSession();
-
+	const [isReceivingBlick, setIsReceivingBlick] = useState(false);
 	const [recentSpeakers, setRecentSpeakers] = useState<typeof speakingParticipants>([]);
 
 	useEffect(() => {
@@ -63,6 +62,20 @@ export const Audio = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [speakingParticipants]);
 
+	useEffect(() => {
+		if (speakingParticipants.length > 0) {
+			setIsReceivingBlick(true);
+
+			const timeout = setInterval(() => {
+				setIsReceivingBlick((s) => !s);
+			}, 1000);
+			return () => {
+				clearTimeout(timeout);
+				setIsReceivingBlick(false);
+			};
+		}
+	}, [setIsReceivingBlick, speakingParticipants]);
+
 	useEffect(() => {
 		if (message && state !== "error") {
 			const timeout = setTimeout(() => {
@@ -93,39 +106,37 @@ export const Audio = () => {
 							className={cn("btn btn-sm btn-ghost border-warning bg-transparent ")}
 							onClick={() => {
 								removeMessage();
-								// Probably via socket event to set ppt = false for participant
-								if (!canStopOtherSpeakers) return;
-								speakingParticipants.forEach((p) => {
-									dispatchSocket.emit("stop-other-transmition", {
-										ownRole: role,
-										otherRole: p.attributes.role,
-									});
-								});
 							}}
 						>
 							{message}
 						</button>
 					</div>
 				)}
-				{(displayedSpeakers.length || message) && (
+				{displayedSpeakers.length > 0 && (
 					<div
 						className={cn(
 							"tooltip-left tooltip-error font-semibold",
-							canStopOtherSpeakers && "tooltip",
+							canStopOtherSpeakers && speakingParticipants.length > 0 && "tooltip",
 						)}
 						data-tip="Funkspruch unterbrechen"
 					>
 						<button
 							className={cn(
-								"btn btn-sm btn-soft border-none bg-transparent",
-								canStopOtherSpeakers && "hover:bg-error",
+								"btn btn-sm btn-soft bg-transparent border",
+								canStopOtherSpeakers && speakingParticipants.length > 0 && "hover:bg-error",
+								speakingParticipants.length > 0 && " hover:bg-errorborder",
+								isReceivingBlick && "border-warning",
 							)}
 							onClick={() => {
 								if (!canStopOtherSpeakers) return;
-								speakingParticipants.forEach((p) => {
-									dispatchSocket.emit("stop-other-transmition", {
-										ownRole: role,
-										otherRole: p.attributes.role,
+								const payload = JSON.stringify({
+									by: role,
+								});
+								speakingParticipants.forEach(async (p) => {
+									await room?.localParticipant.performRpc({
+										destinationIdentity: p.identity,
+										method: "force-mute",
+										payload,
 									});
 								});
 							}}