From e1ca00dad2dcad7fd645b732fb31df26a0a7a321 Mon Sep 17 00:00:00 2001 From: GabbasovDinar Date: Wed, 28 Aug 2024 16:25:29 +0500 Subject: [PATCH] [IMP] web_notify:t3894 Allow notify with sound --- web_notify/README.rst | 17 +++++ web_notify/__manifest__.py | 5 +- web_notify/models/res_users.py | 17 +++-- web_notify/readme/CONTRIBUTORS.rst | 2 + web_notify/readme/USAGE.rst | 15 ++++ web_notify/static/description/index.html | 11 +++ .../static/src/components/audio_player.esm.js | 70 +++++++++++++++++++ .../static/src/components/audio_player.xml | 10 +++ .../js/services/notification_services.esm.js | 9 +-- .../static/src/services/effect_service.esm.js | 43 ++++++++++++ .../notification_sound_service.esm.js | 58 +++++++++++++++ web_notify/tests/test_res_users.py | 5 ++ 12 files changed, 251 insertions(+), 11 deletions(-) create mode 100644 web_notify/static/src/components/audio_player.esm.js create mode 100644 web_notify/static/src/components/audio_player.xml create mode 100644 web_notify/static/src/services/effect_service.esm.js create mode 100644 web_notify/static/src/services/notification_sound_service.esm.js diff --git a/web_notify/README.rst b/web_notify/README.rst index 27995bd1cf75..2bda15b06c5c 100644 --- a/web_notify/README.rst +++ b/web_notify/README.rst @@ -83,6 +83,21 @@ or self.env.user.notify_default(message='My default message') +You can also add sound to your notifications by using the sound parameter. The sound parameter expects a string containing the URL path to the audio file that should be played when the notification is displayed. + +Example: + +.. code-block:: python + + self.env.user.notify_success(message='My success message', sound='//static/audio/success.mp3' ) + +or + +.. code-block:: python + + self.env.user.notify_info( message='My information message', sound='//static/audio/info.mp3' ) + +The sound parameter can be used with any notification type (success, danger, warning, info, or default). If the sound parameter is not provided, the notification will be displayed without any sound. The notifications can bring interactivity with some buttons. @@ -146,6 +161,8 @@ Contributors * David Vidal +* Cetmix OÜ + Maintainers ~~~~~~~~~~~ diff --git a/web_notify/__manifest__.py b/web_notify/__manifest__.py index ae2df076cf2a..b8b764f1e94d 100644 --- a/web_notify/__manifest__.py +++ b/web_notify/__manifest__.py @@ -6,7 +6,7 @@ "name": "Web Notify", "summary": """ Send notification messages to user""", - "version": "16.0.2.0.0", + "version": "16.0.3.0.0", "license": "AGPL-3", "author": "ACSONE SA/NV," "AdaptiveCity," "Odoo Community Association (OCA)", "development_status": "Production/Stable", @@ -14,7 +14,8 @@ "depends": ["web", "bus", "base", "mail"], "assets": { "web.assets_backend": [ - "web_notify/static/src/js/services/*.js", + "web_notify/static/src/**/*.js", + "web_notify/static/src/**/*.xml", ] }, "demo": ["views/res_users_demo.xml"], diff --git a/web_notify/models/res_users.py b/web_notify/models/res_users.py index 19b641353a6b..23555e1034c6 100644 --- a/web_notify/models/res_users.py +++ b/web_notify/models/res_users.py @@ -49,9 +49,10 @@ def notify_success( sticky=False, target=None, action=None, + sound=None, ): title = title or _("Success") - self._notify_channel(SUCCESS, message, title, sticky, target, action) + self._notify_channel(SUCCESS, message, title, sticky, target, action, sound) def notify_danger( self, @@ -60,9 +61,10 @@ def notify_danger( sticky=False, target=None, action=None, + sound=None, ): title = title or _("Danger") - self._notify_channel(DANGER, message, title, sticky, target, action) + self._notify_channel(DANGER, message, title, sticky, target, action, sound) def notify_warning( self, @@ -71,9 +73,10 @@ def notify_warning( sticky=False, target=None, action=None, + sound=None, ): title = title or _("Warning") - self._notify_channel(WARNING, message, title, sticky, target, action) + self._notify_channel(WARNING, message, title, sticky, target, action, sound) def notify_info( self, @@ -82,9 +85,10 @@ def notify_info( sticky=False, target=None, action=None, + sound=None, ): title = title or _("Information") - self._notify_channel(INFO, message, title, sticky, target, action) + self._notify_channel(INFO, message, title, sticky, target, action, sound) def notify_default( self, @@ -93,9 +97,10 @@ def notify_default( sticky=False, target=None, action=None, + sound=None, ): title = title or _("Default") - self._notify_channel(DEFAULT, message, title, sticky, target, action) + self._notify_channel(DEFAULT, message, title, sticky, target, action, sound) def _notify_channel( self, @@ -105,6 +110,7 @@ def _notify_channel( sticky=False, target=None, action=None, + sound=None, ): if not (self.env.user._is_admin() or self.env.su) and any( user.id != self.env.uid for user in self @@ -122,6 +128,7 @@ def _notify_channel( "title": title, "sticky": sticky, "action": action, + "sound": sound, } notifications = [[partner, "web.notify", [bus_message]] for partner in target] diff --git a/web_notify/readme/CONTRIBUTORS.rst b/web_notify/readme/CONTRIBUTORS.rst index 77bb03c5e9dd..19a6804ad402 100644 --- a/web_notify/readme/CONTRIBUTORS.rst +++ b/web_notify/readme/CONTRIBUTORS.rst @@ -6,3 +6,5 @@ * `Tecnativa `_: * David Vidal + +* Cetmix OÜ diff --git a/web_notify/readme/USAGE.rst b/web_notify/readme/USAGE.rst index c86b1ad3ac27..f343c4bb9004 100644 --- a/web_notify/readme/USAGE.rst +++ b/web_notify/readme/USAGE.rst @@ -29,6 +29,21 @@ or self.env.user.notify_default(message='My default message') +You can also add sound to your notifications by using the sound parameter. The sound parameter expects a string containing the URL path to the audio file that should be played when the notification is displayed. + +Example: + +.. code-block:: python + + self.env.user.notify_success(message='My success message', sound='//static/audio/success.mp3' ) + +or + +.. code-block:: python + + self.env.user.notify_info( message='My information message', sound='//static/audio/info.mp3' ) + +The sound parameter can be used with any notification type (success, danger, warning, info, or default). If the sound parameter is not provided, the notification will be displayed without any sound. The notifications can bring interactivity with some buttons. diff --git a/web_notify/static/description/index.html b/web_notify/static/description/index.html index 6476ccf3f5ba..4297a1117859 100644 --- a/web_notify/static/description/index.html +++ b/web_notify/static/description/index.html @@ -419,6 +419,16 @@

Usage

 self.env.user.notify_default(message='My default message')
+

You can also add sound to your notifications by using the sound parameter. The sound parameter expects a string containing the URL path to the audio file that should be played when the notification is displayed.

+

Example:

+
+self.env.user.notify_success(message='My success message', sound='/<YOUR_MODULE>/static/audio/success.mp3' )
+
+

or

+
+self.env.user.notify_info( message='My information message', sound='/<YOUR_MODULE>/static/audio/info.mp3' )
+
+

The sound parameter can be used with any notification type (success, danger, warning, info, or default). If the sound parameter is not provided, the notification will be displayed without any sound.

The notifications can bring interactivity with some buttons.

  • One allowing to refresh the active view
    • @@ -472,6 +482,7 @@

    Contributors

  • David Vidal
+
  • Cetmix OÜ <https://cetmix.com/>
    • diff --git a/web_notify/static/src/components/audio_player.esm.js b/web_notify/static/src/components/audio_player.esm.js new file mode 100644 index 000000000000..54c445157054 --- /dev/null +++ b/web_notify/static/src/components/audio_player.esm.js @@ -0,0 +1,70 @@ +/** @odoo-module alias=web_notify.AudioPlayer **/ + +import {Component, useState} from "@odoo/owl"; + +/** + * @typedef AudioPlayerProps + * @property {string} src URL of the audio file to be played + * @property {number} [volume=1.0] Volume level of the audio (from 0.0 to 1.0) + * @property {boolean} [loop=false] Whether the audio should loop + * @property {Function} [onEnded] Callback function to be called when the audio ends + */ + +/** + * The AudioPlayer component is responsible for playing audio files with + * specified settings like volume and looping. It also provides the ability + * to trigger actions when the audio playback ends. + */ +export class AudioPlayer extends Component { + setup() { + this.state = useState({isPlaying: false}); + this.audioElement = new Audio(this.props.src); + + // Set audio properties + this.audioElement.volume = this.props.volume || 1.0; + this.audioElement.loop = this.props.loop || false; + + // Start playing the audio + this.audioElement + .play() + .then(() => { + this.state.isPlaying = true; + }) + .catch((error) => { + console.error("Audio playback failed:", error); + }); + + // Listen for the end of the audio playback + this.audioElement.addEventListener("ended", this.onAudioEnded.bind(this)); + } + + /** + * Stops the audio playback and triggers the onEnded callback if provided. + */ + stopAudio() { + this.audioElement.pause(); + this.audioElement.currentTime = 0; + this.state.isPlaying = false; + + if (this.props.onEnded) { + this.props.onEnded(); + } + } + + /** + * Handler for when the audio playback ends. + */ + onAudioEnded() { + if (!this.props.loop) { + this.stopAudio(); + } + } + + willUnmount() { + // Clean up the audio element and listeners + this.audioElement.removeEventListener("ended", this.onAudioEnded); + this.audioElement.pause(); + } +} + +AudioPlayer.template = "web_notify.AudioPlayer"; diff --git a/web_notify/static/src/components/audio_player.xml b/web_notify/static/src/components/audio_player.xml new file mode 100644 index 000000000000..5db199427dcd --- /dev/null +++ b/web_notify/static/src/components/audio_player.xml @@ -0,0 +1,10 @@ + + + + + + + + + diff --git a/web_notify/static/src/js/services/notification_services.esm.js b/web_notify/static/src/js/services/notification_services.esm.js index efec2be17baa..40594820859e 100644 --- a/web_notify/static/src/js/services/notification_services.esm.js +++ b/web_notify/static/src/js/services/notification_services.esm.js @@ -4,12 +4,12 @@ import {browser} from "@web/core/browser/browser"; import {registry} from "@web/core/registry"; export const webNotificationService = { - dependencies: ["bus_service", "notification", "action"], + dependencies: ["bus_service", "action", "notification_sound"], - start(env, {bus_service, notification, action}) { + start(env, {bus_service, action, notification_sound}) { let webNotifTimeouts = {}; /** - * Displays the web notification on user's screen + * Displays the web notification with sound on user's screen */ function displaywebNotification(notifications) { Object.values(webNotifTimeouts).forEach((notif) => @@ -31,12 +31,13 @@ export const webNotificationService = { }, ]; } - notification.add(Markup(notif.message), { + notification_sound.add(Markup(notif.message), { title: notif.title, type: notif.type, sticky: notif.sticky, className: notif.className, buttons: buttons, + sound: notif.sound, }); }); }); diff --git a/web_notify/static/src/services/effect_service.esm.js b/web_notify/static/src/services/effect_service.esm.js new file mode 100644 index 000000000000..95d9fe5d76e8 --- /dev/null +++ b/web_notify/static/src/services/effect_service.esm.js @@ -0,0 +1,43 @@ +/** @odoo-module **/ + +import {registry} from "@web/core/registry"; +import {AudioPlayer} from "../components/audio_player.esm"; +const effectRegistry = registry.category("effects"); + +// ----------------------------------------------------------------------------- +// Audio effect +// ----------------------------------------------------------------------------- + +/** + * Handles effect of type "audio_effect". It returns the AudioPlayer component + * with the given audio source URL and other properties. + * + * @param {Object} env + * @param {Object} [params={}] + * @param {string} params.src + * The URL of the audio file to play. + * @param {number} [params.volume=1.0] Volume level of the audio (from 0.0 to 1.0) + * @param {boolean} [params.loop=false] Whether the audio should loop + * @param {Function} [params.onEnded] Callback function to be called when the audio ends + */ + +function audioEffect(env, params = {}) { + if (!params.src) { + console.warn( + "Audio effect requires a 'src' parameter with the URL of the audio file." + ); + return; + } + + return { + Component: AudioPlayer, + props: { + src: params.src, + volume: params.volume || 1.0, + loop: params.loop || false, + onEnded: params.onEnded, + }, + }; +} + +effectRegistry.add("audio_effect", audioEffect); diff --git a/web_notify/static/src/services/notification_sound_service.esm.js b/web_notify/static/src/services/notification_sound_service.esm.js new file mode 100644 index 000000000000..46ea7ee2a767 --- /dev/null +++ b/web_notify/static/src/services/notification_sound_service.esm.js @@ -0,0 +1,58 @@ +/** @odoo-module **/ + +import {registry} from "@web/core/registry"; + +/** + * The notificationSoundService is responsible for handling the playback of audio + * notifications when a new notification is added. This service integrates with + * the notification system and the effect service to provide audible feedback + * based on the type of notification. + * + * Dependencies: + * - notification: The service responsible for displaying notifications on the UI. + * - effect: The service that handles visual and auditory effects in the application. + */ + +export const notificationSoundService = { + dependencies: ["notification", "effect"], + + /** + * Starts the notification sound service, enabling sound playback for notifications. + * + * @param {Object} env The environment object, providing access to various services. + * @param {Object} services An object containing the dependencies (notification, effect). + * @returns {Object} The add function, used to add notifications with sound. + */ + start(env, {notification, effect}) { + /** + * Adds a notification with an associated sound effect. + * + * @param {String} message The message to be displayed in the notification. + * @param {Object} [options={}] Additional options for the notification, such as type, sound and etc + * @returns {Function} A function to close the notification. + */ + function add(message, options = {}) { + const sound = options.sound || false; + delete options.sound; // Remove sound option from the options before passing to notification + + const closeFn = notification.add(message, options); + + if (sound) + // Trigger the audio effect. + effect.add({ + type: "audio_effect", + src: sound, + volume: 0.8, + loop: false, + onEnded: () => { + // Placeholder for any action after sound ends + }, + }); + return closeFn; + } + return {add}; + }, +}; + +// Register the notification sound service in the service registry +registry.category("services").add("notification_sound", notificationSoundService); diff --git a/web_notify/tests/test_res_users.py b/web_notify/tests/test_res_users.py index 76fedc1182a9..4ba636902331 100644 --- a/web_notify/tests/test_res_users.py +++ b/web_notify/tests/test_res_users.py @@ -19,6 +19,7 @@ def test_notify_success(self): "title": "title", "sticky": True, "action": None, + "sound": "/mail/static/src/audio/ting.mp3", } self.env.user.notify_success(**test_msg) news = bus_bus.search(domain) - existing @@ -36,6 +37,7 @@ def test_notify_danger(self): "title": "title", "sticky": True, "action": None, + "sound": "/mail/static/src/audio/ting.mp3", } self.env.user.notify_danger(**test_msg) news = bus_bus.search(domain) - existing @@ -53,6 +55,7 @@ def test_notify_warning(self): "title": "title", "sticky": True, "action": None, + "sound": "/mail/static/src/audio/ting.mp3", } self.env.user.notify_warning(**test_msg) news = bus_bus.search(domain) - existing @@ -70,6 +73,7 @@ def test_notify_info(self): "title": "title", "sticky": True, "action": None, + "sound": "/mail/static/src/audio/ting.mp3", } self.env.user.notify_info(**test_msg) news = bus_bus.search(domain) - existing @@ -87,6 +91,7 @@ def test_notify_default(self): "title": "title", "sticky": True, "action": None, + "sound": "/mail/static/src/audio/ting.mp3", } self.env.user.notify_default(**test_msg) news = bus_bus.search(domain) - existing