restyle troubleshooting page (#1208)

ErsatzTV.Application/Troubleshooting/Queries/GetTroubleshootingInfoHandler.cs

@@ -105,11 +105,9 @@ public class GetTroubleshootingInfoHandler : IRequestHandler<GetTroubleshootingI
                                          Optional(GetDriverName(activeDriver)),
                                          vaapiDevice))
                             {
-                                vaapiCapabilities += $"Checking driver {activeDriver} device {vaapiDevice}  {Environment.NewLine}  {Environment.NewLine}";
-                                vaapiCapabilities += $@"```shell
-{output}
-```";
-                                vaapiCapabilities += "  " + Environment.NewLine + "  " + Environment.NewLine;
+                                vaapiCapabilities += $"Checking driver {activeDriver} device {vaapiDevice}{Environment.NewLine}{Environment.NewLine}";
+                                vaapiCapabilities += output;
+                                vaapiCapabilities += Environment.NewLine + Environment.NewLine;
                             }
                         }
                     }

ErsatzTV/Pages/Troubleshooting.razor

@@ -5,38 +5,41 @@
 @using ErsatzTV.Application.Troubleshooting
 @implements IDisposable
 @inject IMediator Mediator
+@inject IJSRuntime JsRuntime
 
 <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-    <MudCard Class="mb-6">
-        <MudCardHeader>
-            <CardHeaderContent>
-                <MudText Typo="Typo.h5">General</MudText>
-            </CardHeaderContent>
-        </MudCardHeader>
-        <MudCardContent>
-            <MarkdownView Content="@_troubleshootingInfo"/>
-        </MudCardContent>
-    </MudCard>
-    <MudCard Class="mb-6">
-        <MudCardHeader>
-            <CardHeaderContent>
-                <MudText Typo="Typo.h5">Nvidia Capabilities</MudText>
-            </CardHeaderContent>
-        </MudCardHeader>
-        <MudCardContent>
-            <MarkdownView Content="@_nvidiaCapabilities"/>
-        </MudCardContent>
-    </MudCard>
-    <MudCard>
-        <MudCardHeader>
-            <CardHeaderContent>
-                <MudText Typo="Typo.h5">Vaapi Capabilities</MudText>
-            </CardHeaderContent>
-        </MudCardHeader>
-        <MudCardContent>
-            <MarkdownView Content="@_vaapiCapabilities"/>
-        </MudCardContent>
-    </MudCard>
+    <MudExpansionPanels>
+        <MudExpansionPanel Text="General" Class="mb-6">
+            <div class="overflow-y-scroll" style="max-height: 500px">
+                <pre>
+                    <code @ref="_troubleshootingView">@_troubleshootingInfo</code>
+                </pre>
+            </div>
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="mt-4" OnClick="(() => CopyToClipboard(_troubleshootingView))">
+                Copy
+            </MudButton>
+        </MudExpansionPanel>
+        <MudExpansionPanel Text="NVIDIA Capabilities" Class="mb-6">
+            <div class="overflow-y-scroll" style="max-height: 500px">
+                <pre>
+                    <code @ref="_nvidiaView">@_nvidiaCapabilities</code>
+                </pre>
+            </div>
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="mt-4" OnClick="(() => CopyToClipboard(_nvidiaView))">
+                Copy
+            </MudButton>
+        </MudExpansionPanel>
+        <MudExpansionPanel Text="VAAPI Capabilities">
+            <div class="overflow-y-scroll" style="max-height: 500px">
+                <pre>
+                    <code @ref="_vaapiView">@_vaapiCapabilities</code>
+                </pre>
+            </div>
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="mt-4" OnClick="(() => CopyToClipboard(_vaapiView))">
+                Copy
+            </MudButton>
+        </MudExpansionPanel>
+    </MudExpansionPanels>
 </MudContainer>
 
 @code {
@@ -44,6 +47,9 @@
     private string _troubleshootingInfo;
     private string _nvidiaCapabilities;
     private string _vaapiCapabilities;
+    private ElementReference _troubleshootingView;
+    private ElementReference _nvidiaView;
+    private ElementReference _vaapiView;
 
     public void Dispose()
     {
@@ -57,7 +63,7 @@
         {
             TroubleshootingInfo info = await Mediator.Send(new GetTroubleshootingInfo(), _cts.Token);
 
-            string json = JsonSerializer.Serialize(
+            _troubleshootingInfo = JsonSerializer.Serialize(
                 new { info.Version, info.Health, info.FFmpegSettings, info.Channels, info.FFmpegProfiles },
                 new JsonSerializerOptions
                 {
@@ -65,23 +71,18 @@
                     DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull,
                     WriteIndented = true
                 });
-            
-            _troubleshootingInfo = $@"```json
-{json}
-```";
-            string formattedCapabilities = info.NvidiaCapabilities.Replace("\n", $"  {Environment.NewLine}");
-
-            _nvidiaCapabilities = $@"```shell
-{formattedCapabilities}
-```";
 
+            _nvidiaCapabilities = info.NvidiaCapabilities;
             _vaapiCapabilities = info.VaapiCapabilities;
         }
         catch (Exception ex)
         {
-            _troubleshootingInfo = $@"```
-{ex}
-```";
+            _troubleshootingInfo = ex.ToString();
         }
     }
+    
+    private async Task CopyToClipboard(ElementReference view)
+    {
+        await JsRuntime.InvokeVoidAsync("clipboardCopy.copyText", view);
+    }
 }

ErsatzTV/Pages/_Host.cshtml

@@ -77,6 +77,15 @@
             }
         }
     };
+    
+    window.clipboardCopy = {
+        copyText: function (codeElement) {
+            navigator.clipboard.writeText(codeElement.textContent)
+            .catch(function (error) {
+                console.log(error);
+            });
+        }
+    };
 </script>
 </body>
 </html>