From 50e7956e65df6d0c0c2dcefdfa0d04964d805d1b 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 | 27 +++++-- web_notify/readme/CONTRIBUTORS.rst | 2 + web_notify/readme/USAGE.rst | 15 ++++ web_notify/static/description/index.html | 22 ++++-- .../static/src/components/audio_player.esm.js | 70 +++++++++++++++++++ .../static/src/components/audio_player.xml | 10 +++ .../js/services/notification_services.esm.js | 38 +++++----- .../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, 281 insertions(+), 31 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 ddea206f0f68..364158975d0f 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. @@ -147,6 +162,8 @@ Contributors * David Vidal +* Cetmix OÜ + Maintainers ~~~~~~~~~~~ diff --git a/web_notify/__manifest__.py b/web_notify/__manifest__.py index aee75c1abd5c..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.2", + "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 11339fd6f611..180cf67b1275 100644 --- a/web_notify/models/res_users.py +++ b/web_notify/models/res_users.py @@ -50,9 +50,12 @@ def notify_success( target=None, action=None, params=None, + sound=None, ): title = title or _("Success") - self._notify_channel(SUCCESS, message, title, sticky, target, action, params) + self._notify_channel( + SUCCESS, message, title, sticky, target, action, params, sound + ) def notify_danger( self, @@ -62,9 +65,12 @@ def notify_danger( target=None, action=None, params=None, + sound=None, ): title = title or _("Danger") - self._notify_channel(DANGER, message, title, sticky, target, action, params) + self._notify_channel( + DANGER, message, title, sticky, target, action, params, sound + ) def notify_warning( self, @@ -74,9 +80,12 @@ def notify_warning( target=None, action=None, params=None, + sound=None, ): title = title or _("Warning") - self._notify_channel(WARNING, message, title, sticky, target, action, params) + self._notify_channel( + WARNING, message, title, sticky, target, action, params, sound + ) def notify_info( self, @@ -86,9 +95,12 @@ def notify_info( target=None, action=None, params=None, + sound=None, ): title = title or _("Information") - self._notify_channel(INFO, message, title, sticky, target, action, params) + self._notify_channel( + INFO, message, title, sticky, target, action, params, sound + ) def notify_default( self, @@ -98,9 +110,12 @@ def notify_default( target=None, action=None, params=None, + sound=None, ): title = title or _("Default") - self._notify_channel(DEFAULT, message, title, sticky, target, action, params) + self._notify_channel( + DEFAULT, message, title, sticky, target, action, params, sound + ) def _notify_channel( self, @@ -111,6 +126,7 @@ def _notify_channel( target=None, action=None, params=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 @@ -129,6 +145,7 @@ def _notify_channel( "sticky": sticky, "action": action, "params": dict(params or []), + "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 d018bc7c85f0..0de3fcd4f2de 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 201ace0e5b79..fc6b9a68495f 100644 --- a/web_notify/static/description/index.html +++ b/web_notify/static/description/index.html @@ -8,11 +8,10 @@ /* :Author: David Goodger (goodger@python.org) -:Id: $Id: html4css1.css 9511 2024-01-13 09:50:07Z milde $ +:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $ :Copyright: This stylesheet has been placed in the public domain. Default cascading style sheet for the HTML output of Docutils. -Despite the name, some widely supported CSS2 features are used. See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to customize this style sheet. @@ -275,7 +274,7 @@ margin-left: 2em ; margin-right: 2em } -pre.code .ln { color: gray; } /* line numbers */ +pre.code .ln { color: grey; } /* line numbers */ pre.code, code { background-color: #eeeeee } pre.code .comment, code .comment { color: #5C6576 } pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold } @@ -301,7 +300,7 @@ span.pre { white-space: pre } -span.problematic, pre.problematic { +span.problematic { color: red } span.section-subtitle { @@ -420,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
    • @@ -477,14 +486,13 @@

    Contributors

  • David Vidal
+
  • Cetmix OÜ <https://cetmix.com/>

    • Maintainers

    This module is maintained by the OCA.

    - -Odoo Community Association - +Odoo Community Association

    OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.

    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 491a72f657bd..4eed2192bd78 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 * @param {*} notifications */ function displaywebNotification(notifications) { @@ -34,20 +34,24 @@ export const webNotificationService = { }, ]; } - const notificationRemove = notification.add(Markup(notif.message), { - title: notif.title, - type: notif.type, - sticky: notif.sticky, - className: notif.className, - buttons: buttons.map((button) => { - const onClick = button.onClick; - button.onClick = async () => { - await onClick(); - notificationRemove(); - }; - return button; - }), - }); + const notificationRemove = notification_sound.add( + Markup(notif.message), + { + title: notif.title, + type: notif.type, + sticky: notif.sticky, + className: notif.className, + buttons: buttons.map((button) => { + const onClick = button.onClick; + button.onClick = async () => { + await onClick(); + notificationRemove(); + }; + return button; + }), + 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 f05e6709a765..dddb7fa84e9d 100644 --- a/web_notify/tests/test_res_users.py +++ b/web_notify/tests/test_res_users.py @@ -20,6 +20,7 @@ def test_notify_success(self): "sticky": True, "action": None, "params": {}, + "sound": "/mail/static/src/audio/ting.mp3", } self.env.user.notify_success(**test_msg) news = bus_bus.search(domain) - existing @@ -38,6 +39,7 @@ def test_notify_danger(self): "sticky": True, "action": None, "params": {}, + "sound": "/mail/static/src/audio/ting.mp3", } self.env.user.notify_danger(**test_msg) news = bus_bus.search(domain) - existing @@ -56,6 +58,7 @@ def test_notify_warning(self): "sticky": True, "action": None, "params": {}, + "sound": "/mail/static/src/audio/ting.mp3", } self.env.user.notify_warning(**test_msg) news = bus_bus.search(domain) - existing @@ -74,6 +77,7 @@ def test_notify_info(self): "sticky": True, "action": None, "params": {}, + "sound": "/mail/static/src/audio/ting.mp3", } self.env.user.notify_info(**test_msg) news = bus_bus.search(domain) - existing @@ -92,6 +96,7 @@ def test_notify_default(self): "sticky": True, "action": None, "params": {}, + "sound": "/mail/static/src/audio/ting.mp3", } self.env.user.notify_default(**test_msg) news = bus_bus.search(domain) - existing