Add setting to toggle sound effects (#568)

* Use soundPlayer object with setting

* Style changes

plugin/src/App/Notifications.lua

@@ -11,7 +11,6 @@ local bindingUtil = require(script.Parent.bindingUtil)
 
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
-local playSound = require(Plugin.playSound)
 
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 
@@ -53,7 +52,7 @@ function Notification:didMount()
 		})
 	)
 
-	playSound(Assets.Sounds.Notification)
+	self.props.soundPlayer:play(Assets.Sounds.Notification)
 
 	self.timeout = task.spawn(function()
 		local clock = os.clock()
@@ -182,6 +181,7 @@ function Notifications:render()
 
 	for index, notif in ipairs(self.props.notifications) do
 		notifs[notif] = e(Notification, {
+			soundPlayer = self.props.soundPlayer,
 			text = notif.text,
 			timestamp = notif.timestamp,
 			timeout = notif.timeout,

plugin/src/App/PluginSettings.lua

@@ -10,6 +10,7 @@ local defaultSettings = {
 	openScriptsExternally = false,
 	twoWaySync = false,
 	showNotifications = true,
+	playSounds = true,
 }
 
 local Settings = {}

plugin/src/App/StatusPages/Settings.lua

@@ -210,12 +210,20 @@ function SettingsPage:render()
 				layoutOrder = 2,
 			}),
 
+			PlaySounds = e(Setting, {
+				id = "playSounds",
+				name = "Play Sounds",
+				description = "Toggle sound effects",
+				transparency = self.props.transparency,
+				layoutOrder = 3,
+			}),
+
 			TwoWaySync = e(Setting, {
 				id = "twoWaySync",
 				name = "Two-Way Sync",
 				description = "EXPERIMENTAL! Editing files in Studio will sync them into the filesystem",
 				transparency = self.props.transparency,
-				layoutOrder = 3,
+				layoutOrder = 4,
 			}),
 
 			Layout = e("UIListLayout", {

plugin/src/App/init.lua

@@ -12,6 +12,7 @@ local Dictionary = require(Plugin.Dictionary)
 local ServeSession = require(Plugin.ServeSession)
 local ApiContext = require(Plugin.ApiContext)
 local preloadAssets = require(Plugin.preloadAssets)
+local soundPlayer = require(Plugin.soundPlayer)
 local Theme = require(script.Theme)
 local PluginSettings = require(script.PluginSettings)
 
@@ -272,6 +273,7 @@ function App:render()
 					Padding = UDim.new(0, 5),
 				}),
 				notifs = e(Notifications, {
+					soundPlayer = self.props.soundPlayer,
 					notifications = self.state.notifications,
 					onClose = function(index)
 						self:closeNotification(index)
@@ -347,10 +349,11 @@ return function(props)
 		plugin = props.plugin,
 	}, {
 		App = PluginSettings.with(function(settings)
-			local settingsProps = Dictionary.merge(props, {
+			local mergedProps = Dictionary.merge(props, {
 				settings = settings,
+				soundPlayer = soundPlayer.new(settings),
 			})
-			return e(App, settingsProps)
+			return e(App, mergedProps)
 		end),
 	})
 end