add BitPageVisibility utility class bitfoundation#10231

Author: msynk

src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor.cs

@@ -23,6 +23,7 @@ public partial class BitCarousel : BitComponentBase
 
 
     [Inject] private IJSRuntime _js { get; set; } = default!;
+    [Inject] private BitPageVisibility _pageVisibility { get; set; } = default!;
 
 
 
@@ -128,6 +129,22 @@ public async Task GoTo(int index)
         await GotoPage(index - 1);
     }
 
+    /// <summary>
+    /// Pauses the AutoPlay if enabled.
+    /// </summary>
+    public async Task Pause()
+    {
+        _autoPlayTimer?.Stop();
+    }
+
+    /// <summary>
+    /// Resumes the AutoPlay if enabled.
+    /// </summary>
+    public async Task Resume()
+    {
+        _autoPlayTimer?.Start();
+    }
+
 
 
     [JSInvokable("OnResize")]
@@ -179,6 +196,8 @@ protected override void OnInitialized()
     {
         _dotnetObj = DotNetObjectReference.Create(this);
 
+        _pageVisibility.OnChange += PageVisibilityChange;
+
         base.OnInitialized();
     }
 
@@ -195,17 +214,26 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         await base.OnAfterRenderAsync(firstRender);
 
-        if (firstRender is false) return;
-
-        await _js.BitObserversRegisterResize(UniqueId, RootElement, _dotnetObj);
-
-        if (AutoPlay)
+        if (AutoPlay && _autoPlayTimer is null)
         {
             _autoPlayTimer = new System.Timers.Timer(AutoPlayInterval);
             _autoPlayTimer.Elapsed += AutoPlayTimerElapsed;
             _autoPlayTimer.Start();
         }
 
+        if (AutoPlay is false && _autoPlayTimer is not null)
+        {
+            _autoPlayTimer.Elapsed -= AutoPlayTimerElapsed;
+            _autoPlayTimer.Dispose();
+            _autoPlayTimer = null;
+        }
+
+        if (firstRender is false) return;
+
+        await _pageVisibility.Init();
+
+        await _js.BitObserversRegisterResize(UniqueId, RootElement, _dotnetObj);
+
         if (ScrollItemsCount > VisibleItemsCount)
         {
             _internalScrollItemsCount = VisibleItemsCount;
@@ -421,12 +449,28 @@ private async void AutoPlayTimerElapsed(object? sender, System.Timers.ElapsedEve
         await InvokeAsync(Next);
     }
 
+    private async Task PageVisibilityChange(bool hidden)
+    {
+        Console.WriteLine($"PageVisibilityChange: {hidden}");
+
+        if (hidden)
+        {
+            await Pause();
+        }
+        else
+        {
+            await Resume();
+        }
+    }
+
 
 
     protected override async ValueTask DisposeAsync(bool disposing)
     {
         if (IsDisposed || disposing is false) return;
 
+        _pageVisibility.OnChange -= PageVisibilityChange;
+
         if (_autoPlayTimer is not null)
         {
             _autoPlayTimer.Elapsed -= AutoPlayTimerElapsed;

src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.razor.cs

@@ -1,6 +1,4 @@
-using System.Text;
-
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 /// <summary>
 /// SnackBars provide brief notifications. The component is also known as a toast.

src/BlazorUI/Bit.BlazorUI/Extensions/IServiceCollectionExtensions.cs

@@ -9,6 +9,8 @@ public static IServiceCollection AddBitBlazorUIServices(this IServiceCollection
     {
         services.TryAddScoped<BitThemeManager>();
 
+        services.TryAddScoped<BitPageVisibility>();
+
         return services;
     }
 }

src/BlazorUI/Bit.BlazorUI/Scripts/PageVisibility.ts

@@ -0,0 +1,13 @@
+namespace BitBlazorUI {
+    export class PageVisibility {
+        private static _isInitialized = false;
+
+        public static init(dotnetObj: DotNetObject) {
+            if (PageVisibility._isInitialized) return;
+
+            PageVisibility._isInitialized = true;
+
+            document.addEventListener('visibilitychange', () => dotnetObj.invokeMethodAsync('VisibilityChanged', document.hidden));
+        }
+    }
+}

src/BlazorUI/Bit.BlazorUI/Utils/BitPageVisibility.cs

@@ -0,0 +1,45 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden.
+/// <br />
+/// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API"/>
+/// </summary>
+public class BitPageVisibility(IJSRuntime js)
+{
+    private bool _isInitialized;
+    private DotNetObjectReference<BitPageVisibility>? _dotnetObj;
+
+
+
+    /// <summary>
+    /// Fires when the content of the document has become visible or hidden.
+    /// </summary>
+    public event Func<bool, Task>? OnChange;
+
+
+
+    public async Task Init()
+    {
+        if (_isInitialized) return;
+
+        _isInitialized = true;
+
+        _dotnetObj = DotNetObjectReference.Create(this);
+
+        await js.InvokeVoid("BitBlazorUI.PageVisibility.init", _dotnetObj);
+    }
+
+
+
+    [JSInvokable("VisibilityChanged")]
+    public async Task _VisibilityChanged(bool hidden)
+    {
+        var onChange = OnChange;
+        if (onChange is not null)
+        {
+            await onChange(hidden);
+        }
+    }
+
+}

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.cs

@@ -209,6 +209,18 @@ public partial class BitCarouselDemo
             Name = "GoTo",
             Type = "Task",
             Description = "Navigates to the given carousel item index.",
+        },
+        new()
+        {
+            Name = "Pause",
+            Type = "Task",
+            Description = "Pauses the AutoPlay if enabled.",
+        },
+        new()
+        {
+            Name = "Resume",
+            Type = "Task",
+            Description = "Resumes the AutoPlay if enabled.",
         }
     ];