From c7217944a344afc3afb48748f3b888ff7cb69cba Mon Sep 17 00:00:00 2001
From: dbuechel <damian.buechel@let.ethz.ch>
Date: Fri, 16 Aug 2019 10:08:10 +0200
Subject: [PATCH] SEBWIN-303: Implemented audio controls for mobile UI.

---
 .../Controls/ActionCenterAudioControl.xaml    |  49 ++++++
 .../Controls/ActionCenterAudioControl.xaml.cs | 161 +++++++++++++++++
 .../Controls/TaskbarAudioControl.xaml         |  43 +++++
 .../Controls/TaskbarAudioControl.xaml.cs      | 166 ++++++++++++++++++
 .../Images/Audio_100.xaml                     |  13 ++
 .../Images/Audio_33.xaml                      |  13 ++
 .../Images/Audio_66.xaml                      |  13 ++
 .../Images/Audio_Light_100.xaml               |  13 ++
 .../Images/Audio_Light_33.xaml                |  13 ++
 .../Images/Audio_Light_66.xaml                |  13 ++
 .../Images/Audio_Light_NoDevice.xaml          |  16 ++
 .../Images/Audio_Muted.xaml                   |  12 ++
 .../Images/Audio_NoDevice.xaml                |  16 ++
 ...afeExamBrowser.UserInterface.Mobile.csproj |  50 ++++++
 .../UserInterfaceFactory.cs                   |  10 +-
 15 files changed, 599 insertions(+), 2 deletions(-)
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Controls/ActionCenterAudioControl.xaml
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Controls/ActionCenterAudioControl.xaml.cs
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Controls/TaskbarAudioControl.xaml
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Controls/TaskbarAudioControl.xaml.cs
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Images/Audio_100.xaml
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Images/Audio_33.xaml
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Images/Audio_66.xaml
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_100.xaml
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_33.xaml
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_66.xaml
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_NoDevice.xaml
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Images/Audio_Muted.xaml
 create mode 100644 SafeExamBrowser.UserInterface.Mobile/Images/Audio_NoDevice.xaml

diff --git a/SafeExamBrowser.UserInterface.Mobile/Controls/ActionCenterAudioControl.xaml b/SafeExamBrowser.UserInterface.Mobile/Controls/ActionCenterAudioControl.xaml
new file mode 100644
index 00000000..d15849b7
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Controls/ActionCenterAudioControl.xaml
@@ -0,0 +1,49 @@
+<UserControl x:Class="SafeExamBrowser.UserInterface.Mobile.Controls.ActionCenterAudioControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:SafeExamBrowser.UserInterface.Mobile.Controls"
+             mc:Ignorable="d" d:DesignHeight="100" d:DesignWidth="125">
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="../Templates/Buttons.xaml" />
+                <ResourceDictionary Source="../Templates/Colors.xaml" />
+                <ResourceDictionary Source="../Templates/ScrollViewers.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <Grid x:Name="Grid" Background="{StaticResource ActionCenterDarkBrush}" Height="82" Margin="2">
+        <Popup x:Name="Popup" IsOpen="False" Placement="Top" PlacementTarget="{Binding ElementName=Button}">
+            <Border Background="Gray">
+                <StackPanel Orientation="Vertical">
+                    <TextBlock x:Name="AudioDeviceName" Foreground="White" Margin="5" TextAlignment="Center" />
+                    <StackPanel Orientation="Horizontal" Height="60" Margin="5,0">
+                        <Button x:Name="MuteButton" Background="Transparent" Foreground="White" Padding="5" Template="{StaticResource ActionCenterButton}" Width="60">
+                            <ContentControl x:Name="PopupIcon" />
+                        </Button>
+                        <Slider x:Name="Volume" Grid.Column="1" Orientation="Horizontal" TickFrequency="1" Maximum="100" IsSnapToTickEnabled="True"
+                                IsMoveToPointEnabled="True" VerticalAlignment="Center" Width="125" Thumb.DragStarted="Volume_DragStarted" Thumb.DragCompleted="Volume_DragCompleted">
+                            <Slider.LayoutTransform>
+                                <ScaleTransform ScaleX="2" ScaleY="2" CenterX="0" CenterY="0"/>
+                            </Slider.LayoutTransform>
+                        </Slider>
+                        <TextBlock Grid.Column="2" FontWeight="DemiBold" FontSize="20" Text="{Binding ElementName=Volume, Path=Value}"
+                                   TextAlignment="Center" VerticalAlignment="Center" Foreground="White" Width="60" />
+                    </StackPanel>
+                </StackPanel>
+            </Border>
+        </Popup>
+        <Button x:Name="Button" Padding="2" Template="{StaticResource ActionCenterButton}">
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="2*" />
+                    <RowDefinition Height="3*" />
+                </Grid.RowDefinitions>
+                <ContentControl x:Name="TaskbarIcon" />
+                <TextBlock Grid.Row="1" x:Name="Text" FontSize="15" Foreground="White" TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" VerticalAlignment="Bottom" />
+            </Grid>
+        </Button>
+    </Grid>
+</UserControl>
diff --git a/SafeExamBrowser.UserInterface.Mobile/Controls/ActionCenterAudioControl.xaml.cs b/SafeExamBrowser.UserInterface.Mobile/Controls/ActionCenterAudioControl.xaml.cs
new file mode 100644
index 00000000..9d9a22c4
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Controls/ActionCenterAudioControl.xaml.cs
@@ -0,0 +1,161 @@
+/*
+ * Copyright (c) 2019 ETH Zürich, Educational Development and Technology (LET)
+ * 
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+using System;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
+using System.Windows.Media;
+using System.Windows.Threading;
+using SafeExamBrowser.Contracts.I18n;
+using SafeExamBrowser.Contracts.UserInterface.Shell;
+using SafeExamBrowser.Contracts.UserInterface.Shell.Events;
+using SafeExamBrowser.UserInterface.Shared.Utilities;
+
+namespace SafeExamBrowser.UserInterface.Mobile.Controls
+{
+	public partial class ActionCenterAudioControl : UserControl, ISystemAudioControl
+	{
+		private readonly IText text;
+		private bool muted;
+		private XamlIconResource MutedIcon;
+		private XamlIconResource NoDeviceIcon;
+
+		public event AudioMuteRequestedEventHandler MuteRequested;
+		public event AudioVolumeSelectedEventHandler VolumeSelected;
+
+		public ActionCenterAudioControl(IText text)
+		{
+			this.text = text;
+
+			InitializeComponent();
+			InitializeAudioControl();
+		}
+
+		public bool HasOutputDevice
+		{
+			set
+			{
+				Dispatcher.InvokeAsync(() =>
+				{
+					Button.IsEnabled = value;
+
+					if (!value)
+					{
+						TaskbarIcon.Content = IconResourceLoader.Load(NoDeviceIcon);
+					}
+				});
+			}
+		}
+
+		public bool OutputDeviceMuted
+		{
+			set
+			{
+				Dispatcher.InvokeAsync(() =>
+				{
+					muted = value;
+
+					if (value)
+					{
+						MuteButton.ToolTip = text.Get(TextKey.SystemControl_AudioDeviceUnmuteTooltip);
+						PopupIcon.Content = IconResourceLoader.Load(MutedIcon);
+						TaskbarIcon.Content = IconResourceLoader.Load(MutedIcon);
+					}
+					else
+					{
+						MuteButton.ToolTip = text.Get(TextKey.SystemControl_AudioDeviceMuteTooltip);
+						TaskbarIcon.Content = LoadIcon(Volume.Value / 100);
+					}
+				});
+			}
+		}
+
+		public string OutputDeviceName
+		{
+			set
+			{
+				Dispatcher.InvokeAsync(() => AudioDeviceName.Text = value);
+			}
+		}
+
+		public double OutputDeviceVolume
+		{
+			set
+			{
+				Dispatcher.InvokeAsync(() =>
+				{
+					Volume.ValueChanged -= Volume_ValueChanged;
+					Volume.Value = Math.Round(value * 100);
+					Volume.ValueChanged += Volume_ValueChanged;
+
+					if (!muted)
+					{
+						PopupIcon.Content = LoadIcon(value);
+						TaskbarIcon.Content = LoadIcon(value);
+					}
+				});
+			}
+		}
+
+		public void Close()
+		{
+			Popup.IsOpen = false;
+		}
+
+		public void SetInformation(string text)
+		{
+			Dispatcher.InvokeAsync(() =>
+			{
+				Button.ToolTip = text;
+				Text.Text = text;
+			});
+		}
+
+		private void InitializeAudioControl()
+		{
+			var originalBrush = Grid.Background;
+
+			Button.Click += (o, args) => Popup.IsOpen = !Popup.IsOpen;
+			Button.MouseLeave += (o, args) => Task.Delay(250).ContinueWith(_ => Dispatcher.Invoke(() => Popup.IsOpen = Popup.IsMouseOver));
+			MuteButton.Click += (o, args) => MuteRequested?.Invoke(!muted);
+			MutedIcon = new XamlIconResource(new Uri("pack://application:,,,/SafeExamBrowser.UserInterface.Desktop;component/Images/Audio_Muted.xaml"));
+			NoDeviceIcon = new XamlIconResource(new Uri("pack://application:,,,/SafeExamBrowser.UserInterface.Desktop;component/Images/Audio_Light_NoDevice.xaml"));
+			Popup.MouseLeave += (o, args) => Task.Delay(250).ContinueWith(_ => Dispatcher.Invoke(() => Popup.IsOpen = IsMouseOver));
+			Popup.Opened += (o, args) => Grid.Background = Brushes.Gray;
+			Popup.Closed += (o, args) => Grid.Background = originalBrush;
+			Volume.ValueChanged += Volume_ValueChanged;
+		}
+
+		private void Volume_DragStarted(object sender, DragStartedEventArgs e)
+		{
+			Volume.ValueChanged -= Volume_ValueChanged;
+		}
+
+		private void Volume_DragCompleted(object sender, DragCompletedEventArgs e)
+		{
+			VolumeSelected?.Invoke(Volume.Value / 100);
+			Volume.ValueChanged += Volume_ValueChanged;
+		}
+
+		private void Volume_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+		{
+			VolumeSelected?.Invoke(Volume.Value / 100);
+		}
+
+		private UIElement LoadIcon(double volume)
+		{
+			var icon = volume > 0.66 ? "100" : (volume > 0.33 ? "66" : "33");
+			var uri = new Uri($"pack://application:,,,/SafeExamBrowser.UserInterface.Desktop;component/Images/Audio_Light_{icon}.xaml");
+			var resource = new XamlIconResource(uri);
+
+			return IconResourceLoader.Load(resource);
+		}
+	}
+}
diff --git a/SafeExamBrowser.UserInterface.Mobile/Controls/TaskbarAudioControl.xaml b/SafeExamBrowser.UserInterface.Mobile/Controls/TaskbarAudioControl.xaml
new file mode 100644
index 00000000..ab59622d
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Controls/TaskbarAudioControl.xaml
@@ -0,0 +1,43 @@
+<UserControl x:Class="SafeExamBrowser.UserInterface.Mobile.Controls.TaskbarAudioControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:fa="http://schemas.fontawesome.io/icons/"
+             xmlns:local="clr-namespace:SafeExamBrowser.UserInterface.Mobile.Controls"
+             mc:Ignorable="d" d:DesignHeight="40" d:DesignWidth="40">
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="../Templates/Buttons.xaml" />
+                <ResourceDictionary Source="../Templates/Colors.xaml" />
+                <ResourceDictionary Source="../Templates/ScrollViewers.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <Grid>
+        <Popup x:Name="Popup" IsOpen="False" Placement="Top" PlacementTarget="{Binding ElementName=Button}">
+            <Border Background="LightGray" BorderBrush="Gray" BorderThickness="0.75,0.75,0.75,0">
+                <StackPanel Orientation="Vertical">
+                    <TextBlock x:Name="AudioDeviceName" Margin="5" TextAlignment="Center" />
+                    <StackPanel Orientation="Horizontal" Height="60" Margin="5,0">
+                        <Button x:Name="MuteButton" Background="Transparent" Padding="5" Template="{StaticResource TaskbarButton}" Width="60">
+                            <ContentControl x:Name="PopupIcon" />
+                        </Button>
+                        <Slider x:Name="Volume" Grid.Column="1" Orientation="Horizontal" TickFrequency="1" Maximum="100" IsSnapToTickEnabled="True"
+                                IsMoveToPointEnabled="True" VerticalAlignment="Center" Width="125" Thumb.DragStarted="Volume_DragStarted" Thumb.DragCompleted="Volume_DragCompleted">
+                            <Slider.LayoutTransform>
+                                <ScaleTransform ScaleX="2" ScaleY="2" CenterX="0" CenterY="0"/>
+                            </Slider.LayoutTransform>
+                        </Slider>
+                        <TextBlock Grid.Column="2" FontWeight="DemiBold" FontSize="20" Text="{Binding ElementName=Volume, Path=Value}"
+                                   TextAlignment="Center" VerticalAlignment="Center" Width="60" />
+                    </StackPanel>
+                </StackPanel>
+            </Border>
+        </Popup>
+        <Button x:Name="Button" Background="Transparent" Padding="5" Template="{StaticResource TaskbarButton}" ToolTipService.ShowOnDisabled="True" Width="60">
+            <ContentControl x:Name="TaskbarIcon" />
+        </Button>
+    </Grid>
+</UserControl>
diff --git a/SafeExamBrowser.UserInterface.Mobile/Controls/TaskbarAudioControl.xaml.cs b/SafeExamBrowser.UserInterface.Mobile/Controls/TaskbarAudioControl.xaml.cs
new file mode 100644
index 00000000..83b864ff
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Controls/TaskbarAudioControl.xaml.cs
@@ -0,0 +1,166 @@
+/*
+ * Copyright (c) 2019 ETH Zürich, Educational Development and Technology (LET)
+ * 
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+using System;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
+using System.Windows.Media;
+using SafeExamBrowser.Contracts.I18n;
+using SafeExamBrowser.Contracts.UserInterface.Shell;
+using SafeExamBrowser.Contracts.UserInterface.Shell.Events;
+using SafeExamBrowser.UserInterface.Shared.Utilities;
+
+namespace SafeExamBrowser.UserInterface.Mobile.Controls
+{
+	public partial class TaskbarAudioControl : UserControl, ISystemAudioControl
+	{
+		private readonly IText text;
+		private bool muted;
+		private XamlIconResource MutedIcon;
+		private XamlIconResource NoDeviceIcon;
+
+		public event AudioMuteRequestedEventHandler MuteRequested;
+		public event AudioVolumeSelectedEventHandler VolumeSelected;
+
+		public TaskbarAudioControl(IText text)
+		{
+			this.text = text;
+
+			InitializeComponent();
+			InitializeAudioControl();
+		}
+
+		public bool HasOutputDevice
+		{
+			set
+			{
+				Dispatcher.InvokeAsync(() =>
+				{
+					Button.IsEnabled = value;
+
+					if (!value)
+					{
+						TaskbarIcon.Content = IconResourceLoader.Load(NoDeviceIcon);
+					}
+				});
+			}
+		}
+
+		public bool OutputDeviceMuted
+		{
+			set
+			{
+				Dispatcher.InvokeAsync(() =>
+				{
+					muted = value;
+
+					if (value)
+					{
+						MuteButton.ToolTip = text.Get(TextKey.SystemControl_AudioDeviceUnmuteTooltip);
+						PopupIcon.Content = IconResourceLoader.Load(MutedIcon);
+						TaskbarIcon.Content = IconResourceLoader.Load(MutedIcon);
+					}
+					else
+					{
+						MuteButton.ToolTip = text.Get(TextKey.SystemControl_AudioDeviceMuteTooltip);
+						TaskbarIcon.Content = LoadIcon(Volume.Value / 100);
+					}
+				});
+			}
+		}
+
+		public string OutputDeviceName
+		{
+			set
+			{
+				Dispatcher.InvokeAsync(() => AudioDeviceName.Text = value);
+			}
+		}
+
+		public double OutputDeviceVolume
+		{
+			set
+			{
+				Dispatcher.InvokeAsync(() =>
+				{
+					Volume.ValueChanged -= Volume_ValueChanged;
+					Volume.Value = Math.Round(value * 100);
+					Volume.ValueChanged += Volume_ValueChanged;
+
+					if (!muted)
+					{
+						PopupIcon.Content = LoadIcon(value);
+						TaskbarIcon.Content = LoadIcon(value);
+					}
+				});
+			}
+		}
+
+		public void Close()
+		{
+			Popup.IsOpen = false;
+		}
+
+		public void SetInformation(string text)
+		{
+			Dispatcher.InvokeAsync(() => Button.ToolTip = text);
+		}
+
+		private void InitializeAudioControl()
+		{
+			var originalBrush = Button.Background;
+
+			Button.Click += (o, args) => Popup.IsOpen = !Popup.IsOpen;
+			Button.MouseLeave += (o, args) => Task.Delay(250).ContinueWith(_ => Dispatcher.Invoke(() => Popup.IsOpen = Popup.IsMouseOver));
+			MuteButton.Click += (o, args) => MuteRequested?.Invoke(!muted);
+			MutedIcon = new XamlIconResource(new Uri("pack://application:,,,/SafeExamBrowser.UserInterface.Desktop;component/Images/Audio_Muted.xaml"));
+			NoDeviceIcon = new XamlIconResource(new Uri("pack://application:,,,/SafeExamBrowser.UserInterface.Desktop;component/Images/Audio_NoDevice.xaml"));
+			Popup.MouseLeave += (o, args) => Task.Delay(250).ContinueWith(_ => Dispatcher.Invoke(() => Popup.IsOpen = IsMouseOver));
+			Volume.ValueChanged += Volume_ValueChanged;
+
+			Popup.Opened += (o, args) =>
+			{
+				Background = Brushes.LightGray;
+				Button.Background = Brushes.LightGray;
+			};
+
+			Popup.Closed += (o, args) =>
+			{
+				Background = originalBrush;
+				Button.Background = originalBrush;
+			};
+		}
+
+		private void Volume_DragStarted(object sender, DragStartedEventArgs e)
+		{
+			Volume.ValueChanged -= Volume_ValueChanged;
+		}
+
+		private void Volume_DragCompleted(object sender, DragCompletedEventArgs e)
+		{
+			VolumeSelected?.Invoke(Volume.Value / 100);
+			Volume.ValueChanged += Volume_ValueChanged;
+		}
+
+		private void Volume_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+		{
+			VolumeSelected?.Invoke(Volume.Value / 100);
+		}
+
+		private UIElement LoadIcon(double volume)
+		{
+			var icon = volume > 0.66 ? "100" : (volume > 0.33 ? "66" : "33");
+			var uri = new Uri($"pack://application:,,,/SafeExamBrowser.UserInterface.Desktop;component/Images/Audio_{icon}.xaml");
+			var resource = new XamlIconResource(uri);
+
+			return IconResourceLoader.Load(resource);
+		}
+	}
+}
diff --git a/SafeExamBrowser.UserInterface.Mobile/Images/Audio_100.xaml b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_100.xaml
new file mode 100644
index 00000000..00883e6a
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_100.xaml
@@ -0,0 +1,13 @@
+<Viewbox
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:fa="http://schemas.fontawesome.io/icons/"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Grid>
+        <fa:ImageAwesome Icon="VolumeOff" HorizontalAlignment="Left" />
+        <Canvas Width="100" Height="100">
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 55,35 C 65,45 65,55 55,65"/>
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 65,25 C 80,35 80,65 65,75"/>
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 75,15 C 95,30 95,70 75,85"/>
+        </Canvas>
+    </Grid>
+</Viewbox>
diff --git a/SafeExamBrowser.UserInterface.Mobile/Images/Audio_33.xaml b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_33.xaml
new file mode 100644
index 00000000..5e81559a
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_33.xaml
@@ -0,0 +1,13 @@
+<Viewbox
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:fa="http://schemas.fontawesome.io/icons/"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Grid>
+        <fa:ImageAwesome Icon="VolumeOff" HorizontalAlignment="Left" />
+        <Canvas Width="100" Height="100">
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 55,35 C 65,45 65,55 55,65"/>
+            <Path StrokeThickness="5.0" Stroke="DarkGray" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 65,25 C 80,35 80,65 65,75"/>
+            <Path StrokeThickness="5.0" Stroke="DarkGray" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 75,15 C 95,30 95,70 75,85"/>
+        </Canvas>
+    </Grid>
+</Viewbox>
diff --git a/SafeExamBrowser.UserInterface.Mobile/Images/Audio_66.xaml b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_66.xaml
new file mode 100644
index 00000000..11b04a28
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_66.xaml
@@ -0,0 +1,13 @@
+<Viewbox
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:fa="http://schemas.fontawesome.io/icons/"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Grid>
+        <fa:ImageAwesome Icon="VolumeOff" HorizontalAlignment="Left" />
+        <Canvas Width="100" Height="100">
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 55,35 C 65,45 65,55 55,65"/>
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 65,25 C 80,35 80,65 65,75"/>
+            <Path StrokeThickness="5.0" Stroke="DarkGray" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 75,15 C 95,30 95,70 75,85"/>
+        </Canvas>
+    </Grid>
+</Viewbox>
diff --git a/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_100.xaml b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_100.xaml
new file mode 100644
index 00000000..00883e6a
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_100.xaml
@@ -0,0 +1,13 @@
+<Viewbox
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:fa="http://schemas.fontawesome.io/icons/"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Grid>
+        <fa:ImageAwesome Icon="VolumeOff" HorizontalAlignment="Left" />
+        <Canvas Width="100" Height="100">
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 55,35 C 65,45 65,55 55,65"/>
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 65,25 C 80,35 80,65 65,75"/>
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 75,15 C 95,30 95,70 75,85"/>
+        </Canvas>
+    </Grid>
+</Viewbox>
diff --git a/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_33.xaml b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_33.xaml
new file mode 100644
index 00000000..92834be1
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_33.xaml
@@ -0,0 +1,13 @@
+<Viewbox
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:fa="http://schemas.fontawesome.io/icons/"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Grid>
+        <fa:ImageAwesome Icon="VolumeOff" HorizontalAlignment="Left" />
+        <Canvas Width="100" Height="100">
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 55,35 C 65,45 65,55 55,65"/>
+            <Path StrokeThickness="5.0" Stroke="#ffdddddd" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 65,25 C 80,35 80,65 65,75"/>
+            <Path StrokeThickness="5.0" Stroke="#ffdddddd" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 75,15 C 95,30 95,70 75,85"/>
+        </Canvas>
+    </Grid>
+</Viewbox>
diff --git a/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_66.xaml b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_66.xaml
new file mode 100644
index 00000000..f30ed5a9
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_66.xaml
@@ -0,0 +1,13 @@
+<Viewbox
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:fa="http://schemas.fontawesome.io/icons/"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Grid>
+        <fa:ImageAwesome Icon="VolumeOff" HorizontalAlignment="Left" />
+        <Canvas Width="100" Height="100">
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 55,35 C 65,45 65,55 55,65"/>
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 65,25 C 80,35 80,65 65,75"/>
+            <Path StrokeThickness="5.0" Stroke="#ffdddddd" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 75,15 C 95,30 95,70 75,85"/>
+        </Canvas>
+    </Grid>
+</Viewbox>
diff --git a/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_NoDevice.xaml b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_NoDevice.xaml
new file mode 100644
index 00000000..96c16524
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Light_NoDevice.xaml
@@ -0,0 +1,16 @@
+<Viewbox
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:fa="http://schemas.fontawesome.io/icons/"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Grid Margin="1">
+        <Grid Margin="5,0,0,0">
+            <fa:ImageAwesome Icon="VolumeOff" Foreground="#ffdddddd" HorizontalAlignment="Left" />
+            <Canvas Width="100" Height="100">
+                <Path StrokeThickness="5.0" Stroke="#ffdddddd" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 55,35 C 65,45 65,55 55,65"/>
+                <Path StrokeThickness="5.0" Stroke="#ffdddddd" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 65,25 C 80,35 80,65 65,75"/>
+                <Path StrokeThickness="5.0" Stroke="#ffdddddd" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 75,15 C 95,30 95,70 75,85"/>
+            </Canvas>
+        </Grid>
+        <fa:ImageAwesome Foreground="Red" Icon="Ban" Opacity="0.3" />
+    </Grid>
+</Viewbox>
diff --git a/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Muted.xaml b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Muted.xaml
new file mode 100644
index 00000000..f5479c85
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_Muted.xaml
@@ -0,0 +1,12 @@
+<Viewbox
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:fa="http://schemas.fontawesome.io/icons/"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Grid>
+        <fa:ImageAwesome Icon="VolumeOff" HorizontalAlignment="Left" />
+        <Canvas Width="100" Height="100">
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 60,35 L 90,65"/>
+            <Path StrokeThickness="5.0" Stroke="Black" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 60,65 L 90,35"/>
+        </Canvas>
+    </Grid>
+</Viewbox>
diff --git a/SafeExamBrowser.UserInterface.Mobile/Images/Audio_NoDevice.xaml b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_NoDevice.xaml
new file mode 100644
index 00000000..ef6abd7c
--- /dev/null
+++ b/SafeExamBrowser.UserInterface.Mobile/Images/Audio_NoDevice.xaml
@@ -0,0 +1,16 @@
+<Viewbox
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:fa="http://schemas.fontawesome.io/icons/"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Grid Margin="1">
+        <Grid Margin="5,0,0,0">
+            <fa:ImageAwesome Icon="VolumeOff" Foreground="DarkGray" HorizontalAlignment="Left" />
+            <Canvas Width="100" Height="100">
+                <Path StrokeThickness="5.0" Stroke="DarkGray" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 55,35 C 65,45 65,55 55,65"/>
+                <Path StrokeThickness="5.0" Stroke="DarkGray" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 65,25 C 80,35 80,65 65,75"/>
+                <Path StrokeThickness="5.0" Stroke="DarkGray" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 75,15 C 95,30 95,70 75,85"/>
+            </Canvas>
+        </Grid>
+        <fa:ImageAwesome Foreground="Red" Icon="Ban" Opacity="0.3" />
+    </Grid>
+</Viewbox>
diff --git a/SafeExamBrowser.UserInterface.Mobile/SafeExamBrowser.UserInterface.Mobile.csproj b/SafeExamBrowser.UserInterface.Mobile/SafeExamBrowser.UserInterface.Mobile.csproj
index 486d58cb..341077c8 100644
--- a/SafeExamBrowser.UserInterface.Mobile/SafeExamBrowser.UserInterface.Mobile.csproj
+++ b/SafeExamBrowser.UserInterface.Mobile/SafeExamBrowser.UserInterface.Mobile.csproj
@@ -82,6 +82,9 @@
     <Compile Include="Controls\ActionCenterApplicationControl.xaml.cs">
       <DependentUpon>ActionCenterApplicationControl.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Controls\ActionCenterAudioControl.xaml.cs">
+      <DependentUpon>ActionCenterAudioControl.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Controls\ActionCenterClock.xaml.cs">
       <DependentUpon>ActionCenterClock.xaml</DependentUpon>
     </Compile>
@@ -112,6 +115,9 @@
     <Compile Include="Controls\TaskbarApplicationInstanceButton.xaml.cs">
       <DependentUpon>TaskbarApplicationInstanceButton.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Controls\TaskbarAudioControl.xaml.cs">
+      <DependentUpon>TaskbarAudioControl.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Controls\TaskbarClock.xaml.cs">
       <DependentUpon>TaskbarClock.xaml</DependentUpon>
     </Compile>
@@ -195,6 +201,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Controls\ActionCenterAudioControl.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Controls\ActionCenterClock.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
@@ -235,6 +245,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Controls\TaskbarAudioControl.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Controls\TaskbarClock.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
@@ -267,6 +281,42 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Resource Include="Images\Audio_100.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Resource>
+    <Resource Include="Images\Audio_33.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Resource>
+    <Resource Include="Images\Audio_66.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Resource>
+    <Resource Include="Images\Audio_Light_100.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Resource>
+    <Resource Include="Images\Audio_Light_33.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Resource>
+    <Resource Include="Images\Audio_Light_66.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Resource>
+    <Resource Include="Images\Audio_Light_NoDevice.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Resource>
+    <Resource Include="Images\Audio_Muted.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Resource>
+    <Resource Include="Images\Audio_NoDevice.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Resource>
     <Page Include="Images\ZoomPageOut.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
diff --git a/SafeExamBrowser.UserInterface.Mobile/UserInterfaceFactory.cs b/SafeExamBrowser.UserInterface.Mobile/UserInterfaceFactory.cs
index 4fdf8d08..4b5ef91d 100644
--- a/SafeExamBrowser.UserInterface.Mobile/UserInterfaceFactory.cs
+++ b/SafeExamBrowser.UserInterface.Mobile/UserInterfaceFactory.cs
@@ -54,8 +54,14 @@ namespace SafeExamBrowser.UserInterface.Mobile
 
 		public ISystemAudioControl CreateAudioControl(Location location)
 		{
-			// TODO
-			throw new System.NotImplementedException();
+			if (location == Location.ActionCenter)
+			{
+				return new ActionCenterAudioControl(text);
+			}
+			else
+			{
+				return new TaskbarAudioControl(text);
+			}
 		}
 
 		public IBrowserWindow CreateBrowserWindow(IBrowserControl control, BrowserSettings settings, bool isMainWindow)