Burn My Windows

Author: DustinBrett

IDEAS.md

@@ -268,8 +268,6 @@
 ## Visuals & Effects
 
 - [Frosted Glass](https://frosted-glass.shud.in/)
-- Window Animations
-  - [Burn My Windows](https://github.com/Schneegans/Burn-My-Windows) ([#358](https://github.com/Schneegans/Burn-My-Windows/discussions/358))
 - 3D
   - [noclip](https://noclip.website/)
   - [Object Viewer](https://rubenandrebarreiro.github.io/projects/threejs/3d-object-viewer-super-mario-bros/3d-object-viewer-super-mario-bros.html)

components/system/Files/FileManager/useFolderContextMenu.ts

@@ -18,6 +18,7 @@ import { useProcesses } from "contexts/process";
 import { useSession } from "contexts/session";
 import { useProcessesRef } from "hooks/useProcessesRef";
 import { useWebGPUCheck } from "hooks/useWebGPUCheck";
+import { CLOSE_EFFECT_NAMES } from "utils/closeEffect";
 import {
   DESKTOP_PATH,
   FOLDER_ICON,
@@ -85,7 +86,9 @@ const useFolderContextMenu = (
     updateFolder,
   } = useFileSystem();
   const {
+    closeEffect,
     iconPositions,
+    setCloseEffect,
     setForegroundId,
     setWallpaper: setSessionWallpaper,
     setIconPositions,
@@ -471,6 +474,14 @@ const useFolderContextMenu = (
                       : []
                   ),
                 },
+                {
+                  label: "Window close effect",
+                  menu: CLOSE_EFFECT_NAMES.map((effectName) => ({
+                    action: () => setCloseEffect(effectName),
+                    label: effectName,
+                    toggle: closeEffect === effectName,
+                  })),
+                },
                 ...(canCapture
                   ? [
                       {
@@ -579,6 +590,7 @@ const useFolderContextMenu = (
       addToFolder,
       canCapture,
       captureScreen,
+      closeEffect,
       contextMenu,
       exists,
       hasWebGPU,
@@ -594,6 +606,7 @@ const useFolderContextMenu = (
       pasteToFolder,
       processesRef,
       rootFs?.mntMap,
+      setCloseEffect,
       setForegroundId,
       setSessionWallpaper,
       sortBy,

contexts/process/useProcessContextState.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   closeProcess,
   maximizeProcess,
@@ -15,6 +15,7 @@ import {
   type ProcessElements,
   type Processes,
 } from "contexts/process/types";
+import { startCloseEffect } from "utils/closeEffect";
 import { TRANSITIONS_IN_MILLISECONDS } from "utils/constants";
 
 type ProcessContextState = {
@@ -48,6 +49,12 @@ const useProcessContextState = (): ProcessContextState => {
   const [processes, setProcesses] = useState<Processes>(
     Object.create(null) as Processes
   );
+  const processesRef = useRef<Processes>({} as Processes);
+
+  useEffect(() => {
+    processesRef.current = processes;
+  }, [processes]);
+
   const argument = useCallback(
     (
       id: string,
@@ -108,8 +115,17 @@ const useProcessContextState = (): ProcessContextState => {
   );
   const closeWithTransition = useCallback(
     (id: string): void => {
-      close(id, true);
-      window.setTimeout(() => close(id), TRANSITIONS_IN_MILLISECONDS.WINDOW);
+      const { componentWindow, hasWindow } = processesRef.current[id] || {};
+      const initClose = (): void => {
+        close(id, true);
+        window.setTimeout(() => close(id), TRANSITIONS_IN_MILLISECONDS.WINDOW);
+      };
+
+      if (componentWindow && hasWindow !== false) {
+        startCloseEffect(componentWindow, initClose);
+      } else {
+        initClose();
+      }
     },
     [close]
   );

contexts/session/types.ts

@@ -41,6 +41,7 @@ export type IconPositions = Record<string, IconPosition>;
 export type SessionData = {
   aiEnabled: boolean;
   clockSource: ClockSource;
+  closeEffect: string;
   cursor: string | undefined;
   iconPositions: IconPositions;
   lazySheep?: boolean;
@@ -61,6 +62,7 @@ export type SessionContextState = SessionData & {
   sessionLoaded: boolean;
   setAiEnabled: React.Dispatch<React.SetStateAction<boolean>>;
   setClockSource: React.Dispatch<React.SetStateAction<ClockSource>>;
+  setCloseEffect: React.Dispatch<React.SetStateAction<string>>;
   setCursor: React.Dispatch<React.SetStateAction<string | undefined>>;
   setForegroundId: React.Dispatch<React.SetStateAction<string>>;
   setHaltSession: React.Dispatch<React.SetStateAction<boolean>>;

contexts/session/useSessionContextState.ts

@@ -20,9 +20,11 @@ import {
   type WindowStates,
 } from "contexts/session/types";
 import defaultSession from "public/session.json";
+import { setCurrentCloseEffect } from "utils/closeEffect";
 import {
   DEFAULT_ASCENDING,
   DEFAULT_CLOCK_SOURCE,
+  DEFAULT_CLOSE_EFFECT,
   DEFAULT_THEME,
   DEFAULT_WALLPAPER,
   DEFAULT_WALLPAPER_FIT,
@@ -60,6 +62,7 @@ const useSessionContextState = (): SessionContextState => {
   const [clockSource, setClockSource] = useState(DEFAULT_CLOCK_SOURCE);
   const [cursor, setCursor] = useState<string | undefined>();
   const [aiEnabled, setAiEnabled] = useState(false);
+  const [closeEffect, setCloseEffect] = useState(DEFAULT_CLOSE_EFFECT);
   const [lazySheep, setLazySheep] = useState(false);
   const [windowStates, setWindowStates] = useState(
     Object.create(null) as WindowStates
@@ -216,6 +219,7 @@ const useSessionContextState = (): SessionContextState => {
           JSON.stringify({
             aiEnabled,
             clockSource,
+            closeEffect,
             cursor,
             iconPositions,
             lazySheep,
@@ -235,6 +239,7 @@ const useSessionContextState = (): SessionContextState => {
   }, [
     aiEnabled,
     clockSource,
+    closeEffect,
     cursor,
     haltSession,
     iconPositions,
@@ -280,6 +285,7 @@ const useSessionContextState = (): SessionContextState => {
           }
 
           if (session.clockSource) setClockSource(session.clockSource);
+          if (session.closeEffect) setCloseEffect(session.closeEffect);
           if (session.cursor) setCursor(session.cursor);
           if (session.aiEnabled) setAiEnabled(session.aiEnabled);
           if (session.themeName) setThemeName(session.themeName);
@@ -386,9 +392,12 @@ const useSessionContextState = (): SessionContextState => {
     }
   }, [deletePath, lstat, readFile, rootFs, setWallpaper]);
 
+  useEffect(() => setCurrentCloseEffect(closeEffect), [closeEffect]);
+
   return {
     aiEnabled,
     clockSource,
+    closeEffect,
     cursor,
     foregroundId,
     iconPositions,
@@ -399,6 +408,7 @@ const useSessionContextState = (): SessionContextState => {
     sessionLoaded,
     setAiEnabled,
     setClockSource,
+    setCloseEffect,
     setCursor,
     setForegroundId,
     setHaltSession,

next.config.js

@@ -79,6 +79,12 @@ const nextConfig = {
     config.module.parser.javascript = config.module.parser.javascript || {};
     config.module.parser.javascript.dynamicImportFetchPriority = "high";
 
+    config.module.rules.push({
+      include: path.resolve(__dirname, "node_modules/Burn-My-Windows"),
+      test: /\.(frag|glsl|xml)$/,
+      type: "asset/source",
+    });
+
     return config;
   },
 };

package.json

@@ -48,6 +48,7 @@
     "@panzoom/panzoom": "^4.6.0",
     "@prettier/plugin-xml": "^3.4.2",
     "@wasmer/wasm-transformer": "^0.12.0",
+    "Burn-My-Windows": "https://github.com/Schneegans/Burn-My-Windows",
     "ani-cursor": "^0.0.5",
     "browserfs": "https://github.com/jvilk/BrowserFS.git#a96aa2d",
     "butterchurn-presets": "^3.0.0-beta.4",

public/CREDITS.md

@@ -30,6 +30,7 @@ This project is greatly augmented by code from the open source community. Thank
 - [3D Maze](https://github.com/ibid-11962/Windows-95-3D-Maze-Screensaver)
 - [7z-wasm](https://github.com/use-strict/7z-wasm)
 - [ani-cursor](https://github.com/captbaritone/webamp/tree/master/packages/ani-cursor)
+- [Burn-My-Windows](https://github.com/Schneegans/Burn-My-Windows)
 - [Coastal Landscape](https://www.shadertoy.com/view/fstyD4)
 - [codecbox.js](https://github.com/duanyao/codecbox.js)
 - [decode-ico](https://github.com/LinusU/decode-ico)