Merge pull request #3 from Moldrok/main

feature: add notification sounds

README.md

@@ -39,7 +39,8 @@ Through exports:
 -- msgType: string
 --  -options: success, error, warning, primary, default
 -- msg: string
-exports.rr_uilib:NotifyS(msgType, msg)
+-- useSound | optional: boolean
+exports.rr_uilib:NotifyS(msgType, msg, useSound)
 ```
 
 `Serversided`
@@ -49,7 +50,8 @@ exports.rr_uilib:NotifyS(msgType, msg)
 -- msgType: string
 --  -options: success, error, warning, primary, default
 -- msg: string
-exports.rr_uilib:NotifyS(source, msgType, msg)
+-- useSound | optional: boolean
+exports.rr_uilib:NotifyS(source, msgType, msg, useSound)
 ```
 
 Through event:
@@ -59,7 +61,8 @@ Through event:
 -- msgType: string
 --  -options: success, error, warning, primary, default
 -- msg: string
-TriggerClientEvent("rr_uilib:NotifyS", source, msgType, msg)
+-- useSound | optional: boolean
+TriggerClientEvent("rr_uilib:NotifyS", source, msgType, msg, useSound)
 ```
 
 ### **Notifications**
@@ -155,6 +158,18 @@ local data = {
 }
 ```
 
+**Sound**
+You can import your .mp3 files into the web/public/sounds path. To retrieve them, simply enter the file name in the sound field as in the example below.Instead the volume field is used to set the sound volume.
+
+```lua
+local data = {
+  sound = "soundName",
+  volume = 0.1 -- Optional / Default 0.5
+}
+```
+
+Options: `"success", "info", "error"`
+
 ### **DrawText**
 
 <br>

resources/client/client.lua

@@ -9,12 +9,25 @@ AddEventHandler('rr_uilib:Notify', function(props)
   Notify(props)
 end)
 
-function NotifyS(msgType, msg)
+function NotifyS(msgType, msg, sound)
+  local useSound = false
+
   local data = {
     type = msgType,
     msg = msg,
   }
 
+  if sound then 
+    useSound = true
+    if msgType == "success" then 
+      data.sound = "success"
+    elseif msgType == "error" then 
+      data.sound = "error"
+    else 
+      data.sound = "info"
+    end 
+  end 
+
   if msgType == "success" then 
     data.icon = "fa-solid fa-check"
   elseif msgType == "error" then 
@@ -31,8 +44,8 @@ function NotifyS(msgType, msg)
 end 
 
 RegisterNetEvent('rr_uilib:NotifyS')
-AddEventHandler('rr_uilib:NotifyS', function(msgType, msg)
-  NotifyS(msgType, msg)
+AddEventHandler('rr_uilib:NotifyS', function(msgType, msg, sound)
+  NotifyS(msgType, msg, sound)
 end)
 
 exports("NotifyS", NotifyS)

resources/server/server.lua

@@ -3,8 +3,8 @@ function Notify(source, props)
 end
 exports('Notify', Notify)
 
-function NotifyS(source, msgType, msg)
-    TriggerClientEvent('rr_uilib:NotifyS', source, msgType, msg)
+function NotifyS(source, msgType, msg, useSound)
+    TriggerClientEvent('rr_uilib:NotifyS', source, msgType, msg, useSound)
 end
 exports('NotifyS', NotifyS)
 

web/src/components/DrawText.tsx

@@ -9,7 +9,7 @@ const DrawText: React.FC = () => {
 	const handlePosition = (data: any) => {
 		let classes = "h-screen p-7 flex ";
 
-		if (data.style == "dark") {
+		if (data.style === "dark") {
 			classes += "dark ";
 		}
 

web/src/components/Notification.tsx

@@ -9,30 +9,24 @@ const Notification: React.FC = () => {
 	const handleBackgroundClasses = (data: any) => {
 		if (!data.type) data.type = "success";
 
-		let oldClass =
-			"inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg ";
+		let oldClass = "inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg ";
 
 		if (data.style && data.style !== "colored") {
 			switch (data.type) {
 				case "success":
-					oldClass +=
-						"text-green-500 bg-green-200 dark:bg-green-800 dark:text-green-200";
+					oldClass += "text-green-500 bg-green-200 dark:bg-green-800 dark:text-green-200";
 					break;
 				case "error":
-					oldClass +=
-						"text-red-600 bg-red-200 dark:bg-red-800 dark:text-red-200";
+					oldClass += "text-red-600 bg-red-200 dark:bg-red-800 dark:text-red-200";
 					break;
 				case "primary":
-					oldClass +=
-						"text-blue-600 bg-blue-200 dark:bg-blue-800 dark:text-blue-200";
+					oldClass += "text-blue-600 bg-blue-200 dark:bg-blue-800 dark:text-blue-200";
 					break;
 				case "warning":
-					oldClass +=
-						"text-yellow-600 bg-yellow-200 dark:bg-yellow-600 dark:text-yellow-200";
+					oldClass += "text-yellow-600 bg-yellow-200 dark:bg-yellow-600 dark:text-yellow-200";
 					break;
 				case "default":
-					oldClass +=
-						"text-slate-600 bg-slate-200 dark:text-slate-200 dark:bg-slate-700";
+					oldClass += "text-slate-600 bg-slate-200 dark:text-slate-200 dark:bg-slate-700";
 					break;
 			}
 		} else if (data.style === "colored") {
@@ -44,8 +38,7 @@ const Notification: React.FC = () => {
 	};
 
 	const handleWrapperClasses = (data: any) => {
-		let className =
-			"flex items-center p-3 mb-0.5 w-full max-w-xs shadow rounded-lg ";
+		let className = "flex items-center p-3 mb-0.5 w-full max-w-xs shadow rounded-lg ";
 
 		if (!data.style) data.style = "default";
 
@@ -92,6 +85,13 @@ const Notification: React.FC = () => {
 		return "";
 	};
 
+	const handleSoundClass = (soundName: string, soundVolume: number = 0.5) => {
+		const soundFolder = process.env.PUBLIC_URL + "/sounds/";
+		let sound = new Audio(`${soundFolder + soundName}.mp3`);
+		sound.volume = soundVolume;
+		sound.play();
+	};
+
 	const handleNotification = (data: any) => {
 		const bgClass = handleBackgroundClasses(data);
 		const wrapperClass = handleWrapperClasses(data);
@@ -113,8 +113,11 @@ const Notification: React.FC = () => {
 		);
 	};
 
-	useNuiEvent<any>("notify", data => {
+	useNuiEvent<any>("notify", (data) => {
 		handleNotification(data);
+		if (data.sound && data.sound !== null && data.sound !== "") {
+			handleSoundClass(data.sound, data.volume);
+		}
 	});
 	return (
 		<div>

web/src/index.tsx

@@ -2,13 +2,10 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./components/App";
-import { VisibilityProvider } from "./providers/VisibilityProvider";
 
 ReactDOM.render(
 	<React.StrictMode>
-		{/* <VisibilityProvider> */}
 		<App />
-		{/* </VisibilityProvider> */}
 	</React.StrictMode>,
 	document.getElementById("root")
 );