Some Know Bugs are You cant pass parameter manually in play media

ui not that responsive

Author: PrashantUnity

App.razor

@@ -6,7 +6,7 @@
     <NotFound>
         <PageTitle>Not found</PageTitle>
         <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Sorry, there's nothing at this address.</p>
+            <ErrorPage/>
         </LayoutView>
     </NotFound>
 </Router>

Component/AppBar.razor

@@ -1,4 +1,8 @@
-<MudAppBar 
+@inject Data Datas
+@inject NavigationManager nav
+@inject IJSRuntime JSRuntime
+@inject Data Datas
+<MudAppBar 
     Color="Color.Secondary" 
     Fixed="true" 
     Dense="true" 
@@ -28,26 +32,10 @@
         </div>
     </MudPaper>
 </MudAppBar>
-
-
-
-@inject Data Datas
-@inject NavigationManager nav
-@inject IJSRuntime JSRuntime
-@inject Data Datas
-
+ 
 @code {     
     public string FindData = string.Empty;
-    protected override async Task OnInitializedAsync()
-    {
-        Datas.OnChange += StateHasChanged;
-        await Datas.InitializeAsync();
-    }
-
-    public void Dispose()
-    {
-        Datas.OnChange -= StateHasChanged;
-    }
+    
     void GoToHomePage()
     { 
         nav.NavigateTo(""); 
@@ -86,6 +74,18 @@
     }
 }
  
+@code{
+    protected override async Task OnInitializedAsync()
+    {
+        Datas.OnChange += StateHasChanged;
+        await Datas.InitializeAsync();
+    }
+
+    public void Dispose()
+    {
+        Datas.OnChange -= StateHasChanged;
+    }
+}
 <style>
     .InputContainer {
         height: 40px;

Component/ErrorPage.razor

@@ -0,0 +1,47 @@
+@inject NavigationManager nav
+@inject IDialogService DialogService
+<MudPaper Class="d-flex flex-wrap justify-center "
+          Style="background-color:transparent"
+          Elevation="0"
+          Width="100%"> 
+        <MudImage  
+            Src="Tom.png" 
+            Alt="404 Error page" 
+            Class="rounded-lg imageHight"  
+            @onclick="Home"  
+            /> 
+</MudPaper>  
+<MudDialog @bind-IsVisible="visible" Options="dialogOptions"> 
+    <DialogContent> 
+        <MudImage Src="Tom.png"
+                  Alt="404 Error page"
+                  Class="rounded-lg"
+                  Fluid=true
+                  @onclick="Home" />
+        <MudButton Variant="Variant.Outlined" 
+        Color="Color.Secondary"
+                   OnClick="Home"
+                   Class="px-10 " FullWidth=true>Go Home</MudButton>
+    </DialogContent> 
+</MudDialog>
+@code {
+    private bool visible = true;   
+    private DialogOptions dialogOptions = new() { FullWidth = true, ClassBackground = "my-custom-class" };
+    void Home()
+    {
+        visible = false;
+        nav.NavigateTo($"");
+    }
+}
+
+<style>
+    .imageHight
+    {
+        height:80%;
+        width:80%;
+    }
+
+    .my-custom-class {
+        backdrop-filter: blur(10px);
+    }
+</style>

Component/Thumbnail.razor

@@ -13,7 +13,7 @@
 
 @code
 {
-    [Parameter] public Video VideoModel { get; set; }
+    [Parameter] public Video VideoModel { get; set; } = new();
     public void GoTOPage()
     {
         nav.NavigateTo($"playmedia/{VideoModel.VideoId}");

Pages/Home.razor

@@ -26,7 +26,7 @@
     protected override async Task OnInitializedAsync()
     {
         Datas.OnChange += StateHasChanged;
-        await Datas.InitializeAsync();
+        //await Datas.InitializeAsync();
     }
 
     public void Dispose()

Pages/PlayMedia.razor

@@ -26,16 +26,28 @@
                     </MudText>
                 </MudListItem>
                 <MudListItem> 
-                    <MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
-                        <MudTabPanel Text="Giscuss"> 
-                            <Giscus Term="@Datas.GetVideo(VideId).CommentName" />
-                        </MudTabPanel> 
-                        <MudTabPanel 
-                            Text="Disqus" 
-                            OnClick="@(()=>LoadGiscud(Datas.GetVideo(VideId).CommentName))">
-                            <div id="disqus_thread"></div>
-                        </MudTabPanel>
-                    </MudTabs>
+                    @if(show)
+                    {
+                        <MudButton 
+                            OnClick="ShowComment" 
+                            Color="Color.Secondary" 
+                            Variant="Variant.Outlined">
+                            Show Comment
+                        </MudButton>
+                    }
+                    else
+                    { 
+                        <MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
+                            <MudTabPanel Text="Giscuss"> 
+                                <Giscus Term="@Datas.GetVideo(VideId).CommentName" />
+                            </MudTabPanel> 
+                            <MudTabPanel 
+                                Text="Disqus" 
+                                OnClick="@(()=>LoadGiscud(Datas.GetVideo(VideId).CommentName))">
+                                <div id="disqus_thread"></div>
+                            </MudTabPanel>
+                        </MudTabs>
+                    }
                 </MudListItem>
             </MudList>
         </MudItem>
@@ -57,6 +69,7 @@
 
 @code
 {
+    bool show = true;
     [Parameter] public string VideId { get; set; } = string.Empty; 
     public async Task GoTOPage(Video video)
     {
@@ -67,11 +80,15 @@
     {  
         await JS.InvokeVoidAsync("loadDisqus", nav.Uri, id);
     }
-
-    protected override async Task OnInitializedAsync()
+    void ShowComment()
     {
+        show = false;
+        StateHasChanged();
+    }
+    protected override async Task OnInitializedAsync()
+    { 
         Datas.OnChange += StateHasChanged;
-        await Datas.InitializeAsync();
+        //await Datas.InitializeAsync();
     }
 
     public void Dispose()

Pages/Search.razor

@@ -25,7 +25,7 @@
     {
         Datas.OnChange += StateHasChanged;
 
-        await Datas.InitializeAsync();
+        //await Datas.InitializeAsync();
         //await Datas.GetFilteredVideos(searchterm);
     }
 

wwwroot/Tom.png

@@ -5,7 +5,7 @@
   "start_url": "./",
   "display": "standalone",
   "background_color": "#ffffff",
-  "theme_color": "#03173d",
+  "theme_color": "#f64a82",
   "prefer_related_applications": false,
   "icons": [
     {