diff --git a/README.md b/README.md index 922c3f0..f55d4c8 100644 --- a/README.md +++ b/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**
diff --git a/resources/client/client.lua b/resources/client/client.lua index 7739ccb..13f14bf 100644 --- a/resources/client/client.lua +++ b/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) diff --git a/resources/server/server.lua b/resources/server/server.lua index 3034110..73318be 100644 --- a/resources/server/server.lua +++ b/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) diff --git a/web/public/sounds/error.mp3 b/web/public/sounds/error.mp3 new file mode 100644 index 0000000..b760415 Binary files /dev/null and b/web/public/sounds/error.mp3 differ diff --git a/web/public/sounds/info.mp3 b/web/public/sounds/info.mp3 new file mode 100644 index 0000000..a1ad34a Binary files /dev/null and b/web/public/sounds/info.mp3 differ diff --git a/web/public/sounds/success.mp3 b/web/public/sounds/success.mp3 new file mode 100644 index 0000000..3ae2794 Binary files /dev/null and b/web/public/sounds/success.mp3 differ diff --git a/web/src/components/DrawText.tsx b/web/src/components/DrawText.tsx index c11fa83..f27982a 100644 --- a/web/src/components/DrawText.tsx +++ b/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 "; } diff --git a/web/src/components/Notification.tsx b/web/src/components/Notification.tsx index 5f1818b..ca85a9c 100644 --- a/web/src/components/Notification.tsx +++ b/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("notify", data => { + useNuiEvent("notify", (data) => { handleNotification(data); + if (data.sound && data.sound !== null && data.sound !== "") { + handleSoundClass(data.sound, data.volume); + } }); return (
diff --git a/web/src/index.tsx b/web/src/index.tsx index 79f8162..616db36 100644 --- a/web/src/index.tsx +++ b/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( - {/* */} - {/* */} , document.getElementById("root") );