(feat) Add text-to-speech voice call support for ticket numbers in queue screen #1317

FelixKiprotich350 · 2024-09-17T19:59:25Z

…queues

Requirements

This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
My work includes tests or is validated by existing tests.

Summary

This feature aims at voice calling ticket number in Service Queue by using Text-to-Speech web api

Screenshots

https://drive.google.com/file/d/1i_mW3YTR6XcOHsdrGbUiQ0bLMz8M8Ju5/view?usp=sharing

Related Issue

https://openmrs.atlassian.net/browse/O3-3995

Other

…queues

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx

…sm-patient-management into main

denniskigen · 2024-09-18T09:36:47Z

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx

+  function readTicket(queue, speaker) {
+    if ('speechSynthesis' in window) {
+      const message = new SpeechSynthesisUtterance();
+      const utterance =
+        'Ticket Number: ' +
+        queue.ticketNumber.split('-')[0].split('') +
+        ', - ' +
+        queue.ticketNumber.split('-')[1].split('') +
+        ', Please Proceed To Room, ' +
+        queue.room;
+      message.rate = 1;
+      message.pitch = 1;
+      message.text = utterance;
+      return new Promise((resolve) => {
+        message.onend = resolve;
+        speaker.speak(message);
+      });
+    } else {
+      return Promise.resolve();
+    }
+  }


This could be moved into the component function body and memoized with a useCallback:

const readTicket = useCallback((queue) => { if ('speechSynthesis' in window) { const message = new SpeechSynthesisUtterance(); const [prefix, suffix] = queue.ticketNumber.split('-'); const utterance = `Ticket Number: ${prefix.split('')}, - ${suffix.split('')}, Please Proceed To Room, ${queue.room}`; message.rate = 1; message.pitch = 1; message.text = utterance; return new Promise<void>((resolve) => { message.onend = resolve; speaker.speak(message); }); } return Promise.resolve(); }, [speaker]);

Also, if the SpeechSynthesisUtterance API is locale-aware (it probably is), we should consider internationalising utterance using something like:

const utterance = t( 'ticketAnnouncement', 'Ticket number: {{prefix}}, - {{suffix}}, please proceed to room {{room}}', { prefix: prefix.split('').join(' '), suffix: suffix.split('').join(' '), room: queue.room, }, );

denniskigen · 2024-09-18T09:39:25Z

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx

+  }
+
+  useEffect(() => {
+    const ticketsToCallOut = locationFilteredTickets.filter((item) => item.status == 'calling');


Suggested change

const ticketsToCallOut = locationFilteredTickets.filter((item) => item.status == 'calling');

const ticketsToCallOut = locationFilteredTickets.filter((item) => item.status === 'calling');

denniskigen · 2024-09-18T09:39:48Z

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx

+        if (typeof mutate === 'function') {
+          mutate();
+        }


Suggested change

if (typeof mutate === 'function') {

mutate();

}

mutate?.();

denniskigen · 2024-09-18T09:41:04Z

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx

@@ -19,13 +73,6 @@ const QueueScreen: React.FC<QueueScreenProps> = () => {
    return <div>Error</div>;


We need a better error state here. Consider using the ErrorState component from the framework:

return <ErrorState error={error} headerTitle={t('queueScreenError', 'Queue screen error')} />;

denniskigen · 2024-09-18T09:43:04Z

Thanks for taking a stab at this, @FelixKiprotich350. I've left a few suggestions around optimising the code, handling internationalisation, and error states. It'd be great to also extend the QueueScreen test to account for the new functionality. LMK if you need help with that.

denniskigen · 2024-09-18T09:49:28Z

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx

+  const { activeTickets, isLoading, error, mutate } = useActiveTickets();
+  const speaker = window.speechSynthesis;
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const selectedLocation = useSelectedQueueLocationUuid();


Looks like we're not using this variable. If so, we should remove it.

denniskigen · 2024-09-18T09:50:41Z

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx

+  const rowData = locationFilteredTickets.map((ticket, index) => ({
+    id: `${index}`,
+    room: ticket.room,
+    ticketNumber: ticket.ticketNumber,
+    status: ticket.status,
+  }));


Consider memoizing rowData:

const rowData = useMemo(() => activeTickets.map((ticket, index) => ({ id: `${index}`, room: ticket.room, ticketNumber: ticket.ticketNumber, status: ticket.status, })), [activeTickets]);

Also, is there something unique in the response that we could use as the id instead of index? Maybe a UUID?

@denniskigen currently the response does not have uuid thats why i opted to use index

denniskigen · 2024-09-18T09:52:41Z

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx

+  const speaker = window.speechSynthesis;
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const selectedLocation = useSelectedQueueLocationUuid();
+  const locationFilteredTickets = activeTickets;


Did you mean to filter activeTickets by location here? If not, then we probably don't need the alias and we should use activeTickets directly.

i did this because ill be making a follow up later to filter by location, am waiting for someone to include the locaion uuid in the response so that i can utilize that,,, just like the selectedlocation variable they are unused for now

Best to not include it until then. It's best to keep things as easily understandable as possible.

well gotten

…sm-patient-management into main

ibacher · 2024-09-18T13:38:55Z

This option needs to be behind some kind of configuration. I don't think it should be enabled by default. I'm also slightly suspicious that embedding this in a frontend module is the right approach. While it works for a small clinic, I don't think it is a great idea for larger clinics. Basically, this is the type of feature that needs some community discussion before it's mergeable, but I like it!

ojwanganto · 2024-09-18T18:05:19Z

This option needs to be behind some kind of configuration. I don't think it should be enabled by default. I'm also slightly suspicious that embedding this in a frontend module is the right approach. While it works for a small clinic, I don't think it is a great idea for larger clinics. Basically, this is the type of feature that needs some community discussion before it's mergeable, but I like it!

This will be helpful.

FelixKiprotich350 · 2024-09-18T19:07:06Z

Yea sure ,,, with the community discussions i believe we will have good ideas on how best we can implement this and configure dynamically

FelixKiprotich350 · 2024-09-18T19:10:47Z

This option needs to be behind some kind of configuration. I don't think it should be enabled by default. I'm also slightly suspicious that embedding this in a frontend module is the right approach. While it works for a small clinic, I don't think it is a great idea for larger clinics. Basically, this is the type of feature that needs some community discussion before it's mergeable, but I like it!

this is true @ibacher , but how do you see it given that the feature can be used dynamically with the help of some configurations. Given an example of a large clinic/facility with multiple queue locations and service points, where every point or Queue has a screen to call tickets specifically for that point?
Whats your thoughts on this?

ibacher · 2024-09-18T19:48:07Z

@FelixKiprotich350 If I had exact thoughts on how this kind of feature should work, I would've included them. That's why I think we need a community discussion on Talk, because I'm not exactly sure what the best behaviour is here. My guess is that there's a lot of additional layers that are needed, i.e., for a user viewing the queue to select to be a system that automatically calls out tickets so that, e.g., a clinic manager or clinician viewing the queue in an office doesn't need to be bothered. Similarly, with a larger clinic, there may be two or more, e.g., nurse stations working on the same queue, in which case only one should probably be announcing.

But this requires more thought than is ideal to document on a PR in comments, hence, a Talk post would be ideal.

FelixKiprotich350 · 2024-09-18T19:51:36Z

@ibacher Agree..... You can guide on how to go about it

denniskigen · 2024-09-18T13:47:20Z

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx

+      if ('speechSynthesis' in window) {
+        const message = new SpeechSynthesisUtterance();
+        const [prefix, suffix] = queue.ticketNumber.split('-');
+        // const utterance = `Ticket Number: ${prefix.split('')}, - ${suffix.split('')}, Please Proceed To Room, ${queue.room}`;


This should be removed

mogoodrich · 2024-09-19T01:32:08Z

I tend to agree with @ibacher , thanks... fyi @mseaton @chibongho

denniskigen · 2024-09-19T12:05:20Z

Could we wire up some test coverage for this new functionality?

FelixKiprotich350 · 2024-09-23T08:38:02Z

Could we wire up some test coverage for this new functionality?

yes sure i can do that

brandones · 2024-10-01T18:13:05Z

Agree with @ibacher that more discussion is needed. Since there's no Talk link posted here I assume there's no Talk thread and will share my thoughts here.

My suggestion would be that there should just be a page for this functionality. If someone wants their computer to make announcements for the queue, they just leave a tab open on that page.

Eventually, and this would need design, the full vision might be a "queue display" page which has a toggle for whether to make audio announcements and which has a button that will open a separate window that is intended to be displayed full-screen on a monitor facing the patients in the waiting room. Like Google Slides "presenter view" feature.

FelixKiprotich350 and others added 2 commits September 17, 2024 22:35

(Feat) Added Text-to-speech voice call for ticket numbers in service …

25d83db

…queues

Merge branch 'main' into main

dcf3214

ojwanganto requested review from donaldkibet, CynthiaKamau, brandones, denniskigen and ibacher September 18, 2024 04:09

ojwanganto reviewed Sep 18, 2024

View reviewed changes

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx Outdated Show resolved Hide resolved

FelixKiprotich350 and others added 3 commits September 18, 2024 12:20

renamed tickets to be called variable

db06a5e

Merge branch 'main' of https://github.com/FelixKiprotich350/openmrs-e…

5aec713

…sm-patient-management into main

Merge branch 'main' into main

fc51a45

denniskigen reviewed Sep 18, 2024

View reviewed changes

denniskigen changed the title ~~(Feat) Added Text-to-speech voice call for ticket numbers in service Queue~~ (feat) Add text-to-speech voice call support for ticket numbers in queue screen Sep 18, 2024

denniskigen reviewed Sep 18, 2024

View reviewed changes

FelixKiprotich350 added 5 commits September 18, 2024 15:28

effected reviews and comments to optimize code

fca4e76

handled error message in a better way

3b831e8

Merge branch 'main' of https://github.com/FelixKiprotich350/openmrs-e…

e685f49

…sm-patient-management into main

fixed test error

d813ea1

memoized rowData

a2e531c

FelixKiprotich350 and others added 2 commits September 18, 2024 21:59

set speech language based on translation language

219a960

Merge branch 'main' into main

1e094eb

denniskigen reviewed Sep 18, 2024

View reviewed changes

Merge branch 'main' into main

b5f6d90

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(feat) Add text-to-speech voice call support for ticket numbers in queue screen #1317

(feat) Add text-to-speech voice call support for ticket numbers in queue screen #1317

FelixKiprotich350 commented Sep 17, 2024 •

edited by denniskigen

Loading

denniskigen Sep 18, 2024

denniskigen Sep 18, 2024

denniskigen Sep 18, 2024

denniskigen Sep 18, 2024

denniskigen commented Sep 18, 2024 •

edited

Loading

denniskigen Sep 18, 2024

denniskigen Sep 18, 2024

FelixKiprotich350 Sep 18, 2024

denniskigen Sep 18, 2024

FelixKiprotich350 Sep 18, 2024 •

edited

Loading

denniskigen Sep 18, 2024 •

edited

Loading

FelixKiprotich350 Sep 18, 2024

ibacher commented Sep 18, 2024

ojwanganto commented Sep 18, 2024

FelixKiprotich350 commented Sep 18, 2024

FelixKiprotich350 commented Sep 18, 2024 •

edited

Loading

ibacher commented Sep 18, 2024

FelixKiprotich350 commented Sep 18, 2024 •

edited

Loading

denniskigen Sep 18, 2024

FelixKiprotich350 Sep 23, 2024

mogoodrich commented Sep 19, 2024

denniskigen commented Sep 19, 2024

FelixKiprotich350 commented Sep 23, 2024

brandones commented Oct 1, 2024

	const ticketsToCallOut = locationFilteredTickets.filter((item) => item.status == 'calling');
	const ticketsToCallOut = locationFilteredTickets.filter((item) => item.status === 'calling');

		@@ -19,13 +73,6 @@ const QueueScreen: React.FC<QueueScreenProps> = () => {
		return <div>Error</div>;

(feat) Add text-to-speech voice call support for ticket numbers in queue screen #1317

Are you sure you want to change the base?

(feat) Add text-to-speech voice call support for ticket numbers in queue screen #1317

Conversation

FelixKiprotich350 commented Sep 17, 2024 • edited by denniskigen Loading

Requirements

Summary

Screenshots

Related Issue

Other

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

denniskigen commented Sep 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FelixKiprotich350 Sep 18, 2024 • edited Loading

Choose a reason for hiding this comment

denniskigen Sep 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ibacher commented Sep 18, 2024

ojwanganto commented Sep 18, 2024

FelixKiprotich350 commented Sep 18, 2024

FelixKiprotich350 commented Sep 18, 2024 • edited Loading

ibacher commented Sep 18, 2024

FelixKiprotich350 commented Sep 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mogoodrich commented Sep 19, 2024

denniskigen commented Sep 19, 2024

FelixKiprotich350 commented Sep 23, 2024

brandones commented Oct 1, 2024

FelixKiprotich350 commented Sep 17, 2024 •

edited by denniskigen

Loading

denniskigen commented Sep 18, 2024 •

edited

Loading

FelixKiprotich350 Sep 18, 2024 •

edited

Loading

denniskigen Sep 18, 2024 •

edited

Loading

FelixKiprotich350 commented Sep 18, 2024 •

edited

Loading

FelixKiprotich350 commented Sep 18, 2024 •

edited

Loading