Enhance cookie handling and video playback logic

Refactored `MainLayout.razor` to introduce `_cookiesMode` for tracking user cookie preferences (`AllCookies`, `EssentialOnly`, or none). Improved error handling and added `#if !DEBUG` directives to conditionally load third-party scripts in production.

Updated `DemoLanding.razor` to dynamically adjust video playback UI based on third-party consent. Added fallback options for users without consent, including external links and inline playback toggles. Enhanced messaging with `MudAlert` components.

Introduced `HasThirdPartyConsent` and `InlinePlaybackEnabled` in `DemoLanding.razor.cs` to manage consent and playback state. Added lifecycle methods (`OnAfterRenderAsync`, `EnableVideoAsync`) for consent handling. Debug-specific logic avoids unnecessary third-party script errors during development.

Improved maintainability with code cleanup, reusable patterns, and better state management. Updated YouTube embed URLs for privacy-friendly playback.

Author: David Warwick

JwtIdentity.Client/Layout/MainLayout.razor

@@ -103,6 +103,7 @@
     string _theme = "light";
     bool _cookiesAccepted = false;
     bool _showCookieBanner = false;
+    string _cookiesMode = string.Empty; // "AllCookies" | "EssentialOnly" | ""
 
     MudTheme MyCustomLightTheme = new MudTheme()
     {
@@ -162,9 +163,10 @@
             }
             await SetTheme();
 
-            // Check if cookies have been accepted
-            var cookiesAccepted = await LocalStorage.GetItemAsync<bool>("cookiesAccepted");
-            _cookiesAccepted = cookiesAccepted;
+            // Read cookie preference state
+            _cookiesAccepted = await LocalStorage.GetItemAsync<bool>("cookiesAccepted");
+            _cookiesMode = await LocalStorage.GetItemAsStringAsync("cookiesMode") ?? string.Empty;
+
             if (!_cookiesAccepted)
             {
                 // Add a small delay to show the banner after the page loads
@@ -174,11 +176,12 @@
             }
 
             bool consentGiven = await JSRuntime.InvokeAsync<bool>("userHasThirdPartyConsent");
+#if !DEBUG
             if (consentGiven)
             {
                 await JSRuntime.InvokeVoidAsync("loadGoogleAds");
             }
-
+#endif
             StateHasChanged();
         }
         catch (Exception ex)
@@ -228,51 +231,78 @@
 
     private async Task AcceptAllCookies()
     {
-        // Save cookie acceptance to local storage
-        await LocalStorage.SetItemAsync("cookiesAccepted", true);
-        _cookiesAccepted = true;
-        _showCookieBanner = false;
-        
-        // Call our JavaScript function to set the cookie with the API
-        await JSRuntime.InvokeVoidAsync("acceptAllCookies");
-        
-        // Load Google Ads once consent is given
-        await JSRuntime.InvokeVoidAsync("loadGoogleAds");
-        
-        StateHasChanged();
+        try
+        {
+            // Save cookie acceptance to local storage first
+            await LocalStorage.SetItemAsync("cookiesAccepted", true);
+            await LocalStorage.SetItemAsStringAsync("cookiesMode", "AllCookies");
+            _cookiesAccepted = true;
+            _cookiesMode = "AllCookies";
+            _showCookieBanner = false;
+            
+            // Persist server-side and then (prod) load ads
+            await JSRuntime.InvokeVoidAsync("acceptAllCookies");
+#if !DEBUG
+            await JSRuntime.InvokeVoidAsync("loadGoogleAds");
+#endif
+        }
+        catch (Exception ex)
+        {
+            Console.Error.WriteLine($"AcceptAllCookies failed: {ex}");
+        }
+        finally
+        {
+            StateHasChanged();
+        }
     }
 
     private async Task RejectThirdPartyCookies()
     {
-        // First perform a complete cleanup of all third-party services
-        await JSRuntime.InvokeVoidAsync("clearThirdPartyServicesCompletely");
-        
-        // Save cookie acceptance to local storage
-        await LocalStorage.SetItemAsync("cookiesAccepted", true);
-        _cookiesAccepted = true;
-        _showCookieBanner = false;
-        
-        // Call our JavaScript function to set cookie rejection
-        await JSRuntime.InvokeVoidAsync("rejectThirdPartyCookies");
-        
-        // Force page reload to ensure a clean state
-        await JSRuntime.InvokeVoidAsync("eval", "location.reload()");
-        
-        // Note: The state change below will likely not execute due to the page reload
-        StateHasChanged();
+        try
+        {
+            // Persist choice to local storage first to survive any JS errors/reloads
+            await LocalStorage.SetItemAsync("cookiesAccepted", true);
+            await LocalStorage.SetItemAsStringAsync("cookiesMode", "EssentialOnly");
+            _cookiesAccepted = true;
+            _cookiesMode = "EssentialOnly";
+            _showCookieBanner = false;
+
+            // Best-effort cleanup and server notification
+            try { await JSRuntime.InvokeVoidAsync("clearThirdPartyServicesCompletely"); } catch {}
+            try { await JSRuntime.InvokeVoidAsync("rejectThirdPartyCookies"); } catch {}
+
+            // Force page reload to ensure a clean state
+            try { await JSRuntime.InvokeVoidAsync("eval", "location.reload()"); } catch {}
+        }
+        catch (Exception ex)
+        {
+            Console.Error.WriteLine($"RejectThirdPartyCookies failed: {ex}");
+        }
+        finally
+        {
+            StateHasChanged();
+        }
     }
 
     private async Task OpenCookieSettings()
     {
-        // Clear existing cookie consent from localStorage
-        await LocalStorage.RemoveItemAsync("cookiesAccepted");
-        _cookiesAccepted = false;
-        
-        // Call JavaScript to clear the third-party cookies and consent cookie
-        await JSRuntime.InvokeVoidAsync("clearCookieConsent");
-        
-        // Show the cookie banner again
-        _showCookieBanner = true;
-        StateHasChanged();
+        try
+        {
+            // Clear existing cookie consent from localStorage
+            await LocalStorage.RemoveItemAsync("cookiesAccepted");
+            await LocalStorage.RemoveItemAsync("cookiesMode");
+            _cookiesAccepted = false;
+            _cookiesMode = string.Empty;
+            
+            // Call JavaScript to clear the third-party cookies and consent cookie
+            try { await JSRuntime.InvokeVoidAsync("clearCookieConsent"); } catch {}
+
+            // Show the cookie banner again
+            _showCookieBanner = true;
+        }
+        finally
+        {
+            StateHasChanged();
+        }
     }
 }

JwtIdentity.Client/Pages/Demo/DemoLanding.razor

@@ -122,14 +122,70 @@
 
     <MudPaper Elevation="1" Class="pa-5 mt-6">
         <MudText Typo="Typo.h5" Class="mb-3">Watch the Survey Shark Demo Walkthrough</MudText>
-       
+ 
+        @{
+#if DEBUG
+        if (HasThirdPartyConsent && InlinePlaybackEnabled)
+        {
             <iframe class="video-container"
-                    src="https://www.youtube.com/embed/v0XqRue1aAM"
+                    src="https://www.youtube-nocookie.com/embed/v0XqRue1aAM?rel=0&modestbranding=1&playsinline=1"
                     title="Survey Shark Demo Video"
-                    frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin"
+                    loading="lazy"
                     allowfullscreen>
             </iframe>
+            <div class="mt-2">
+                <MudButton Variant="Variant.Outlined" Color="Color.Primary" Href="https://www.youtube.com/watch?v=v0XqRue1aAM" Target="_blank" Rel="noopener noreferrer">
+                    Open on YouTube
+                </MudButton>
+            </div>
+        }
+        else
+        {
+            if (!HasThirdPartyConsent)
+            {
+                <MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Class="mb-2">
+                    To watch this video, enable third-party cookies.
+                </MudAlert>
+                <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="EnableVideoAsync">Enable video</MudButton>
+            }
+            else
+            {
+                <MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Class="mb-2">
+                    Third-party cookies enabled. To avoid debug-time script errors, open externally or choose inline playback below.
+                </MudAlert>
+                <MudStack Spacing="1">
+                    <MudButton Variant="Variant.Outlined" Color="Color.Secondary" Href="https://www.youtube.com/watch?v=v0XqRue1aAM" Target="_blank" Rel="noopener noreferrer">
+                        Open on YouTube instead
+                    </MudButton>
+                    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="EnableInlinePlaybackAsync">
+                        Play inline (may trigger third-party scripts)
+                    </MudButton>
+                </MudStack>
+            }
+        }
+#else
+        if (HasThirdPartyConsent)
+        {
+            <iframe class="video-container"
+                    src="https://www.youtube-nocookie.com/embed/v0XqRue1aAM?rel=0&modestbranding=1&playsinline=1"
+                    title="Survey Shark Demo Video"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin"
+                    loading="lazy"
+                    allowfullscreen>
+            </iframe>
+        }
+        else
+        {
+            <MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Class="mb-2">
+                To watch this video, enable third-party cookies.
+            </MudAlert>
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="EnableVideoAsync">Enable video</MudButton>
+        }
+#endif
+}
 
     </MudPaper>
 </MudContainer>

JwtIdentity.Client/Pages/Demo/DemoLanding.razor.cs

@@ -11,11 +11,62 @@ public class DemoLandingModel : BlazorBase
 
         protected string YoutubeEmbedCode => AppSettings.Youtube?.HomePageCode ?? string.Empty;
 
+        protected bool HasThirdPartyConsent { get; set; }
+        protected bool InlinePlaybackEnabled { get; set; }
+
         protected override async Task OnInitializedAsync()
         {
             AppSettings = await ApiService.GetPublicAsync<AppSettings>("/api/appsettings");
         }
 
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (!firstRender)
+            {
+                return;
+            }
+
+            try
+            {
+                HasThirdPartyConsent = await JSRuntime.InvokeAsync<bool>("userHasThirdPartyConsent");
+#if !DEBUG
+                // In non-DEBUG (production) automatically enable inline playback once consent exists
+                if (HasThirdPartyConsent)
+                {
+                    InlinePlaybackEnabled = true;
+                }
+#endif
+                await InvokeAsync(StateHasChanged);
+            }
+            catch
+            {
+                // ignore JS interop failures during prerender or debug
+            }
+        }
+
+        protected async Task EnableVideoAsync()
+        {
+            try
+            {
+                await JSRuntime.InvokeVoidAsync("setThirdPartyCookieConsent", "AllCookies");
+                HasThirdPartyConsent = true;
+#if !DEBUG
+                // Auto-enable inline playback in production immediately after consent
+                InlinePlaybackEnabled = true;
+#endif
+                await InvokeAsync(StateHasChanged);
+            }
+            catch { }
+        }
+
+#if DEBUG
+        protected Task EnableInlinePlaybackAsync()
+        {
+            InlinePlaybackEnabled = true;
+            return InvokeAsync(StateHasChanged);
+        }
+#endif
+
         protected async Task BeginLinearDemo()
         {
             if (IsStartingLinearDemo)