Pause animation if document is hidden

ppy · Oct 4, 2024 · 8a90f1d · 8a90f1d
1 parent df65d56
commit 8a90f1d
Showing 1 changed file with 10 additions and 0 deletions.
diff --git 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) {