Dynamic wallpapers

src/components/apps/AppNexus.tsx

@@ -1,5 +1,5 @@
 import { AppID } from '__/stores/apps.store';
-import { lazy } from 'react';
+import { lazy } from 'preact/compat';
 
 type AppNexusProps = {
  appID: AppID;
@@ -9,13 +9,15 @@ type AppNexusProps = {
 const Calculator = lazy(() => import('./Calculator/Calculator'));
 const VSCode = lazy(() => import('./VSCode/VSCode'));
 const Calendar = lazy(() => import('./Calendar/Calendar'));
+const SystemPreferences = lazy(() => import('./SystemPreferences/SystemPreferences'));
 
 const PlaceholderApp = lazy(() => import('./Placeholder/Placeholder'));
 
 export const AppNexus = ({ appID, isBeingDragged }: AppNexusProps) => {
  if (appID === 'calculator') return <Calculator />;
  if (appID === 'vscode') return <VSCode isBeingDragged={isBeingDragged} />;
  if (appID === 'calendar') return <Calendar />;
+ if (appID === 'system-preferences') return <SystemPreferences />;
 
  return <PlaceholderApp appID={appID} />;
 };

src/components/apps/SystemPreferences/SystemPreferences.module.scss

@@ -0,0 +1,13 @@
+.container {
+ background-color: var(--app-color-light);
+}
+
+.header {
+ padding: 1rem 1rem;
+
+ width: 100%;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+}

src/components/apps/SystemPreferences/SystemPreferences.tsx

@@ -0,0 +1,14 @@
+import { WallpaperSwitcher } from './WallpaperSwitcher/WallpaperSwitcher';
+import css from './SystemPreferences.module.scss';
+import clsx from 'clsx';
+
+export const SystemPreferences = () => {
+ return (
+ <section class={css.container}>
+ <header class={clsx('app-window-drag-handle', css.header)}></header>
+ <WallpaperSwitcher />
+ </section>
+ );
+};
+
+export default SystemPreferences;

src/components/apps/SystemPreferences/WallpaperSwitcher/WallpaperSwitcher.tsx

@@ -0,0 +1,5 @@
+export const WallpaperSwitcher = () => {
+ return <></>;
+};
+
+export default WallpaperSwitcher;

src/data/wallpapers/wallpapers.config.ts

@@ -0,0 +1,63 @@
+import { Theme } from '__/stores/theme.store';
+
+export type Wallpaper = {
+ name: string;
+ type: 'standalone' | 'automatic' | 'dynamic';
+
+ /** Timestamps definition in terms of when a new wallpaper should take effect */
+ wallpaperTimestamps?: Record<number, string>;
+
+ /** Timestamps for when the theme changes */
+ themeTimestamps?: Record<number, Theme>;
+};
+
+const createWallpapersConfig = <TConfig>(et: Record<keyof TConfig, Wallpaper>) => et;
+
+export const wallpapersConfig = createWallpapersConfig({
+ 'big-sur-graphic': {
+ name: 'Big Sur Graphic',
+ type: 'automatic',
+ wallpaperTimestamps: {
+ 7: '3-2',
+ 18: '3-1',
+ },
+ themeTimestamps: {
+ 7: 'light',
+ 18: 'dark',
+ },
+ },
+
+ monterey: {
+ name: 'Monterey',
+ type: 'automatic',
+ wallpaperTimestamps: {
+ 7: '37-2',
+ 18: '37-1',
+ },
+ themeTimestamps: {
+ 7: 'light',
+ 18: 'dark',
+ },
+ },
+
+ catalina: {
+ name: 'Catalina',
+ type: 'dynamic',
+ wallpaperTimestamps: {
+ 7: '24-2',
+ 9: '24-3',
+ 11: '24-4',
+ 13: '24-5',
+ 15: '24-6',
+ 16: '24-7',
+ 17: '24-8',
+ 18: '24-1',
+ },
+ themeTimestamps: {
+ 9: 'light',
+ 17: 'dark',
+ },
+ },
+});
+
+export type WallpaperID = keyof typeof wallpapersConfig;

src/helpers/smaller-closest-value.ts

@@ -0,0 +1,16 @@
+/**
+ * Find the closest smaller number in an array
+ * @param arr Ascendingly sorted array
+ * @param value Value to check against
+ */
+export function smallerClosestValue(arr: number[], value: number) {
+ let prevVal = arr[0];
+
+ for (const val of arr) {
+ if (val > value) return prevVal;
+ if (val == value) return val;
+ prevVal = val;
+ }
+
+ return arr[arr.length - 1];
+}

src/hooks/index.ts

@@ -4,3 +4,6 @@ export { useTheme } from './use-theme';
 export { useTimeout } from './use-timeout';
 export { useContextMenu } from './use-context-menu';
 export { useFocusOutside } from './use-focus-outside';
+export { useTimelyWallpapers } from './use-timely-wallpapers';
+export { useWallpaperName } from './use-wallpaper-name';
+export { usePrevious } from './use-previous';

src/hooks/use-previous.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+export function usePrevious<T>(value: T) {
+ const ref = useRef<T>();
+
+ useEffect(() => {
+ ref.current = value;
+ });
+
+ return ref.current;
+}

src/hooks/use-timely-wallpapers.ts

@@ -0,0 +1,76 @@
+import { useAtom } from 'jotai';
+import { useEffect } from 'preact/hooks';
+import { wallpapersConfig } from '__/data/wallpapers/wallpapers.config';
+import { smallerClosestValue } from '__/helpers/smaller-closest-value';
+import { wallpaperImageStore } from '__/stores/wallpapers.store';
+import { useInterval } from './use-interval';
+import { useTheme } from './use-theme';
+import { useWallpaperName } from './use-wallpaper-name';
+
+export const useTimelyWallpapers = () => {
+ const [wallpaperName] = useWallpaperName();
+ const [currWallpaperImg, setCurrWallpaperImg] = useAtom(wallpaperImageStore);
+ const [, setTheme] = useTheme();
+
+ function handleWallpaper() {
+ const date = new Date();
+ const hour = date.getHours();
+
+ const wallpaperTimestampsMap = wallpapersConfig[wallpaperName].wallpaperTimestamps;
+ const timestamps = Object.keys(wallpaperTimestampsMap);
+
+ const minTimestamp = Math.min(...timestamps);
+ const maxTimestamp = Math.max(...timestamps);
+
+ if (hour > maxTimestamp || hour < minTimestamp) {
+ // Go for the min timestamp value
+ setCurrWallpaperImg(wallpaperTimestampsMap?.[maxTimestamp] || currWallpaperImg);
+ return;
+ }
+
+ // Now set the right timestamp
+ const chosenTimeStamp = smallerClosestValue(timestamps, hour);
+ setCurrWallpaperImg(wallpaperTimestampsMap?.[chosenTimeStamp] || currWallpaperImg);
+ }
+
+ function handleTheme() {
+ const date = new Date();
+ const hour = date.getHours();
+
+ const themeTimestampsMap = wallpapersConfig[wallpaperName].themeTimestamps;
+ const timestamps = Object.keys(themeTimestampsMap);
+
+ const minTimestamp = Math.min(...timestamps);
+ const maxTimestamp = Math.max(...timestamps);
+
+ if (hour > maxTimestamp || hour < minTimestamp) {
+ // Go for the min timestamp value
+ setTheme('dark');
+ return;
+ }
+
+ // Now set the right timestamp
+ const chosenTimeStamp = smallerClosestValue(timestamps, hour);
+ setTheme(themeTimestampsMap?.[chosenTimeStamp] || 'light');
+ }
+
+ function handler() {
+ if (wallpapersConfig[wallpaperName].type === 'standalone') return;
+ // console.log({ wallpaperName });
+ /** Only dynamic and light/dark wallpaper logic to tackle */
+ // Now check if user really wants the change to happen.
+
+ handleTheme();
+ handleWallpaper();
+ }
+
+ useEffect(() => {
+ handler();
+ }, [wallpaperName]);
+
+ useInterval(() => {
+ handler();
+ }, 60 * 1000);
+
+ return [currWallpaperImg, setCurrWallpaperImg] as const;
+};

src/hooks/use-wallpaper-name.ts

@@ -0,0 +1,8 @@
+import { useAtom } from 'jotai';
+import { wallpaperNameStore } from '__/stores/wallpapers.store';
+
+export function useWallpaperName() {
+ const [wallpaperName, setWallpaperName] = useAtom(wallpaperNameStore);
+
+ return [wallpaperName, setWallpaperName] as const;
+}

src/stores/wallpapers.store.ts

@@ -0,0 +1,7 @@
+import { atom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import type { WallpaperID } from '__/data/wallpapers/wallpapers.config';
+
+export const wallpaperImageStore = atom('24-3');
+
+export const wallpaperNameStore = atomWithStorage<WallpaperID>('wallpaper:name', 'catalina');

src/views/desktop/Desktop.module.scss

@@ -17,6 +17,8 @@
 
  will-change: background-image;
 
+ transition: background-image 200ms ease-in;
+
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

src/views/desktop/Desktop.tsx

@@ -1,21 +1,28 @@
-import { useEffect, useRef } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { ContextMenu } from '__/components/Desktop/ContextMenu/ContextMenu';
 import { StartupChime } from '__/components/Desktop/StartupChime';
 import { WindowsArea } from '__/components/Desktop/Window/WindowsArea';
 import { Dock } from '__/components/dock/Dock';
 import { TopBar } from '__/components/topbar/TopBar';
+import { useTimelyWallpapers } from '__/hooks';
+import { useWallpaperName } from '__/hooks/use-wallpaper-name';
 import css from './Desktop.module.scss';
 
-const DarkBackground = '/assets/wallpapers/3-1.jpg';
-const LightBackground = '/assets/wallpapers/3-2.jpg';
-
 export const Desktop = () => {
  const outerRef = useRef<HTMLDivElement>();
 
+ const [wallpaperName, setWallpaperName] = useWallpaperName();
+ const [currWallpaperImg] = useTimelyWallpapers();
+
+ const [wallpaper, setWallpaper] = useState('');
+
  useEffect(() => {
- preloadImage(DarkBackground);
- preloadImage(LightBackground);
- }, []);
+ async function main() {
+ await preloadImage(`/assets/wallpapers/${currWallpaperImg}.jpg`);
+ setWallpaper(currWallpaperImg);
+ }
+ main();
+ }, [currWallpaperImg]);
 
  return (
  <>
@@ -28,12 +35,20 @@ export const Desktop = () => {
 
  <StartupChime />
 
- <div class={css.backgroundCover} aria-hidden="true" />
+ <div
+ class={css.backgroundCover}
+ style={{ backgroundImage: `url(/assets/wallpapers/${wallpaper}.jpg)` }}
+ aria-hidden="true"
+ />
  </>
  );
 };
 
-function preloadImage(path: string) {
- const img = new Image();
- img.src = path;
+async function preloadImage(path: string) {
+ return new Promise((resolve) => {
+ const img = new Image();
+ img.src = path;
+
+ img.onload = resolve;
+ });
 }