From 8a90f1df8b83901acca727197ed955ba0cf2d8df Mon Sep 17 00:00:00 2001
From: nanaya <me@nanaya.net>
Date: Fri, 4 Oct 2024 21:17:51 +0900
Subject: [PATCH] Pause animation if document is hidden

---
 resources/js/components/menu-images.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/resources/js/components/menu-images.tsx b/resources/js/components/menu-images.tsx
index 6f55edbbfc7..cbcfae47993 100644
--- a/resources/js/components/menu-images.tsx
+++ b/resources/js/components/menu-images.tsx
@@ -46,10 +46,12 @@ export default class MenuImages extends React.Component<Props> {
 
   componentDidMount() {
     this.setAutoRotateTimer();
+    document.addEventListener('visibilitychange', this.handlePageVisibilityChange);
   }
 
   componentWillUnmount() {
     this.clearAutoRotateTimer();
+    document.removeEventListener('visibilitychange', this.handlePageVisibilityChange);
   }
 
   render() {
@@ -115,6 +117,14 @@ export default class MenuImages extends React.Component<Props> {
     );
   };
 
+  private readonly handlePageVisibilityChange = () => {
+    if (document.hidden) {
+      this.clearAutoRotateTimer();
+    } else {
+      this.setAutoRotateTimer();
+    }
+  };
+
   @action
   private readonly handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {
     if (event.propertyName !== 'transform' || event.currentTarget !== event.target) {