This pull request encapsulates the efforts to enhance the user interface and interaction of the Say, Pi application by introducing refined visual and audible notifications. The key focus has been on improving user experience by providing clear, intuitive cues during the application's listening and responding states.
Major Changes:
Progress Ring Animation: A new progress ring animation has been added around the call button. This serves as a visual timer, indicating the remaining listening period, thereby offering users a clear sense of timing.
Dynamic Neon Glow Effect: The call button now features an engaging neon glow that synchronizes with the listening period. As the listening time concludes, the glow fades out, providing a seamless transition and enhancing the overall aesthetic.
Audible Notification Enhancements: The audible cues have been optimized to be more distinct and clear, signaling the start and end of the transcription process effectively.
SCSS Refactoring for Glow Effect: Leveraged SCSS variables to handle the neon glow effect, reducing redundancy and enhancing the code's maintainability.
Modular JavaScript Implementation: The VisualNotificationsModule class has been updated for better management of both the progress ring and the neon glow, ensuring a cohesive and synchronized animation flow.
CSS Animation for Glow Fade-Out: Implemented CSS animations to achieve a gradual fade-out effect for the neon glow, aligning this visual cue with the completion of the progress ring.
Other Changes:
Startup Icon: A new icon identifies the period while the microphone is being acquired/VAD is being initialised. This can take a couple of seconds, or longer in the userscript. A startup sound plays on completion.
Error Icon: Errors during listening are now transient and non-fatal, and won't interrupt the recording or transcription. They are indicated by a subtle blurring of the call icon.
Call Starts Audio: Starting a call starts the audio output as well as the audio input (recording). Pi's audio is muted until after the user's first prompt.
Testing and Feedback:
The changes are significant in terms of user interaction and require thorough testing. I encourage reviewers to focus on the following aspects:
The responsiveness and accuracy of the progress ring.
The synchronization between the progress ring and the neon glow fade-out.
The clarity and timeliness of the audible notifications.
General usability and aesthetic appeal.
Your feedback is invaluable in refining these features. Please share any insights, suggestions, or potential issues you might encounter.
Additional Notes:
The changes have been tested in various scenarios:
-- Chrome and Edge with browser extensions on macOS
-- Edge with userscript on macOS
-- Kiwi Browser with Chrome extension on Android
This pull request encapsulates the efforts to enhance the user interface and interaction of the Say, Pi application by introducing refined visual and audible notifications. The key focus has been on improving user experience by providing clear, intuitive cues during the application's listening and responding states.
Major Changes:
Progress Ring Animation: A new progress ring animation has been added around the call button. This serves as a visual timer, indicating the remaining listening period, thereby offering users a clear sense of timing.
Dynamic Neon Glow Effect: The call button now features an engaging neon glow that synchronizes with the listening period. As the listening time concludes, the glow fades out, providing a seamless transition and enhancing the overall aesthetic.
Audible Notification Enhancements: The audible cues have been optimized to be more distinct and clear, signaling the start and end of the transcription process effectively.
SCSS Refactoring for Glow Effect: Leveraged SCSS variables to handle the neon glow effect, reducing redundancy and enhancing the code's maintainability.
Modular JavaScript Implementation: The
VisualNotificationsModuleclass has been updated for better management of both the progress ring and the neon glow, ensuring a cohesive and synchronized animation flow.CSS Animation for Glow Fade-Out: Implemented CSS animations to achieve a gradual fade-out effect for the neon glow, aligning this visual cue with the completion of the progress ring.
Other Changes:
Startup Icon: A new icon identifies the period while the microphone is being acquired/VAD is being initialised. This can take a couple of seconds, or longer in the userscript. A startup sound plays on completion.
Error Icon: Errors during listening are now transient and non-fatal, and won't interrupt the recording or transcription. They are indicated by a subtle blurring of the call icon.
Call Starts Audio: Starting a call starts the audio output as well as the audio input (recording). Pi's audio is muted until after the user's first prompt.
Testing and Feedback:
The changes are significant in terms of user interaction and require thorough testing. I encourage reviewers to focus on the following aspects:
Your feedback is invaluable in refining these features. Please share any insights, suggestions, or potential issues you might encounter.
Additional Notes: