Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Toastr sound #978

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Toastr sound #978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
198aa83
Howler & Sound
cherishSachdeva Feb 25, 2023
7e3c938
Sound
cherishSachdeva Feb 25, 2023
52c4341
Enable Sound Option
cherishSachdeva Feb 25, 2023
4dee521
Add enableSound in README.md
cherishSachdeva Feb 25, 2023
e5325d9
Check for enableSound in cloned options
cherishSachdeva Feb 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 39 additions & 36 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@ DEMO: https://ngx-toastr.vercel.app

Latest version available for each version of Angular

| ngx-toastr | Angular |
| ---------- | ----------- |
| 11.3.3 | 8.x |
| 12.1.0 | 9.x |
| 13.2.1 | 10.x 11.x |
| 14.3.0 | 12.x 13.x |
| 15.2.2 | 14.x. |
| current | >= 15.x |
| ngx-toastr | Angular |
| ---------- | --------- |
| 11.3.3 | 8.x |
| 12.1.0 | 9.x |
| 13.2.1 | 10.x 11.x |
| 14.3.0 | 12.x 13.x |
| 15.2.2 | 14.x. |
| current | >= 15.x |

## Install

Expand Down Expand Up @@ -137,25 +137,26 @@ There are **individual options** and **global options**.

Passed to `ToastrService.success/error/warning/info/show()`

| Option | Type | Default | Description
| ----------------- | ------------------------------ | ------------------------------ | ------------------------------------------------- |
| toastComponent | Component | Toast | Angular component that will be used |
| closeButton | boolean | false | Show close button |
| timeOut | number | 5000 | Time to live in milliseconds |
| extendedTimeOut | number | 1000 | Time to close after a user hovers over toast |
| disableTimeOut | `boolean \| 'timeOut' \| 'extendedTimeOut'` | false | Disable both timeOut and extendedTimeOut when set to `true`. Allows specifying which timeOut to disable, either: `timeOut` or `extendedTimeOut` |
| easing | string | 'ease-in' | Toast component easing |
| easeTime | string \| number | 300 | Time spent easing |
| enableHtml | boolean | false | Allow html in message |
| newestOnTop | boolean | true | New toast placement |
| progressBar | boolean | false | Show progress bar |
| progressAnimation | `'decreasing' \| 'increasing'` | 'decreasing' | Changes the animation of the progress bar. |
| toastClass | string | 'ngx-toastr' | CSS class(es) for toast |
| positionClass | string | 'toast-top-right' | CSS class(es) for toast container |
| titleClass | string | 'toast-title' | CSS class(es) for inside toast on title |
| messageClass | string | 'toast-message' | CSS class(es) for inside toast on message |
| tapToDismiss | boolean | true | Close on click |
| onActivateTick | boolean | false | Fires `changeDetectorRef.detectChanges()` when activated. Helps show toast from asynchronous events outside of Angular's change detection |
| Option | Type | Default | Description |
| ----------------- | ------------------------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| toastComponent | Component | Toast | Angular component that will be used |
| closeButton | boolean | false | Show close button |
| timeOut | number | 5000 | Time to live in milliseconds |
| extendedTimeOut | number | 1000 | Time to close after a user hovers over toast |
| disableTimeOut | `boolean \| 'timeOut' \| 'extendedTimeOut'` | false | Disable both timeOut and extendedTimeOut when set to `true`. Allows specifying which timeOut to disable, either: `timeOut` or `extendedTimeOut` |
| easing | string | 'ease-in' | Toast component easing |
| easeTime | string \| number | 300 | Time spent easing |
| enableHtml | boolean | false | Allow html in message |
| newestOnTop | boolean | true | New toast placement |
| progressBar | boolean | false | Show progress bar |
| progressAnimation | `'decreasing' \| 'increasing'` | 'decreasing' | Changes the animation of the progress bar. |
| toastClass | string | 'ngx-toastr' | CSS class(es) for toast |
| positionClass | string | 'toast-top-right' | CSS class(es) for toast container |
| titleClass | string | 'toast-title' | CSS class(es) for inside toast on title |
| messageClass | string | 'toast-message' | CSS class(es) for inside toast on message |
| tapToDismiss | boolean | true | Close on click |
| onActivateTick | boolean | false | Fires `changeDetectorRef.detectChanges()` when activated. Helps show toast from asynchronous events outside of Angular's change detection |
| enableSound | boolean | false | Allow sound with notification |

#### Setting Individual Options

Expand All @@ -175,14 +176,14 @@ options to affect all toasts. In addition, global options include the following
options:

| Option | Type | Default | Description |
| ----------------------- | ------- | ---------------------------------- | ------------------------------------------------------------------ |
| maxOpened | number | 0 | Max toasts opened. Toasts will be queued. 0 is unlimited |
| autoDismiss | boolean | false | Dismiss current toast when max is reached |
| iconClasses | object | [see below](#iconclasses-defaults) | Classes used on toastr service methods |
| preventDuplicates | boolean | false | Block duplicate messages |
| ----------------------- | ------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| maxOpened | number | 0 | Max toasts opened. Toasts will be queued. 0 is unlimited |
| autoDismiss | boolean | false | Dismiss current toast when max is reached |
| iconClasses | object | [see below](#iconclasses-defaults) | Classes used on toastr service methods |
| preventDuplicates | boolean | false | Block duplicate messages |
| countDuplicates | boolean | false | Displays a duplicates counter (preventDuplicates must be true). Toast must have a title and duplicate message |
| resetTimeoutOnDuplicate | boolean | false | Reset toast timeout on duplicate (preventDuplicates must be true) |
| includeTitleDuplicates | boolean | false | Include the title of a toast when checking for duplicates (by default only message is compared) |
| resetTimeoutOnDuplicate | boolean | false | Reset toast timeout on duplicate (preventDuplicates must be true) |
| includeTitleDuplicates | boolean | false | Include the title of a toast when checking for duplicates (by default only message is compared) |

##### iconClasses defaults

Expand Down Expand Up @@ -391,6 +392,7 @@ ngOnInit() {
4. How can I translate messages?\
See: https://github.com/scttcper/ngx-toastr/issues/201.
5. How to handle toastr click/tap action?

```ts
showToaster() {
this.toastr.success('Hello world!', 'Toastr fun!')
Expand All @@ -403,10 +405,11 @@ ngOnInit() {
console.log('Toastr clicked');
}
```
6. How to customize styling without overridding defaults?\

6. How to customize styling without overridding defaults?\
Add multiple CSS classes separated by a space:
```ts
toastClass: 'yourclass ngx-toastr'
toastClass: 'yourclass ngx-toastr';
```
See: https://github.com/scttcper/ngx-toastr/issues/594.

Expand Down
14 changes: 14 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@angular/platform-browser-dynamic": "15.0.4",
"@angular/router": "15.0.4",
"@ctrl/ngx-github-buttons": "8.0.0",
"@types/howler": "^2.2.7",
"@types/jasmine": "4.3.1",
"@types/lodash-es": "4.17.6",
"@types/node": "18.11.18",
Expand All @@ -44,6 +45,7 @@
"bootstrap": "5.2.3",
"cpy-cli": "4.2.0",
"eslint": "8.31.0",
"howler": "^2.2.3",
"jasmine-core": "4.5.0",
"jasmine-spec-reporter": "7.0.0",
"karma": "6.4.1",
Expand Down
9 changes: 9 additions & 0 deletions src/app/home/home.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,15 @@
/>
<label class="form-check-label" for="progressBar"> Progress bar </label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
[(ngModel)]="options.enableSound"
id="enableSound"
/>
<label class="form-check-label" for="enableSound"> Enable Sound </label>
</div>
</div>
<fieldset class="form-group mb-3">
<label>
Expand Down
31 changes: 25 additions & 6 deletions src/app/home/home.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { Component, QueryList, Renderer2, ViewChildren, VERSION } from '@angular/core';
import { Component, QueryList, Renderer2, VERSION, ViewChildren } from '@angular/core';
import { Howl } from 'howler';
import { cloneDeep, random } from 'lodash-es';


import {
GlobalConfig,
ToastrService,
ToastContainerDirective,
ToastNoAnimation,
GlobalConfig, ToastContainerDirective,
ToastNoAnimation, ToastrService
} from '../../lib/public_api';

import { BootstrapToast } from '../bootstrap.toast';
import { NotyfToast } from '../notyf.toast';
import { PinkToast } from '../pink.toast';
import { BootstrapToast } from '../bootstrap.toast';

interface Quote {
title?: string;
Expand Down Expand Up @@ -56,6 +56,22 @@ export class HomeComponent {
private lastInserted: number[] = [];
inline = false;
inlinePositionIndex = 0;

soundToastTypeMap: Map<string,Howl> = new Map([
['success', new Howl({
src: ['assets/notification-sound/success.mp3'],
})],
['error', new Howl({
src: ['assets/notification-sound/error.mp3'],
})],
['info', new Howl({
src: ['assets/notification-sound/info.mp3']
})],
['warning', new Howl({
src: ['assets/notification-sound/warning.mp3']
})],
]);

@ViewChildren(ToastContainerDirective) inlineContainers!: QueryList<ToastContainerDirective>;


Expand All @@ -79,6 +95,9 @@ export class HomeComponent {
const { message, title } = this.getMessage();
// Clone current config so it doesn't change when ngModel updates
const opt = cloneDeep(this.options);

if(opt.enableSound) this.soundToastTypeMap.get(this.type)?.play();

const inserted = this.toastr.show(
message,
title,
Expand Down
Binary file added src/assets/notification-sound/error.mp3
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/notification-sound/info.mp3
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/notification-sound/success.mp3
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/notification-sound/warning.mp3
View file
Open in desktop
Binary file not shown.
6 changes: 6 additions & 0 deletions src/lib/toastr/toastr-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,11 @@ export interface IndividualConfig {
* default: true
*/
newestOnTop: boolean;
/**
* enable sound in toast
* default: false
*/
enableSound: boolean;

/**
* payload to pass to the toastComponent
Expand Down Expand Up @@ -237,6 +242,7 @@ export const DefaultNoComponentGlobalConfig: GlobalConfig = {
tapToDismiss: true,
onActivateTick: false,
progressAnimation: 'decreasing',
enableSound: false,

payload: null
};
Expand Down