feat(shell): support live video wallpaper with toggle button

Replace static image wallpaper with a video wallpaper (mp4) as the default,
and add a toggle button to switch between live video and static image.
Enhance desktop icon and control button visibility with backdrop blur,
darker backgrounds, and edge-gradient overlay for better contrast.

Author: MinimaxLanbo

apps/webuiapps/src/components/Shell/index.module.scss

@@ -8,6 +8,17 @@
   position: relative;
 }
 
+.videoBg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+  pointer-events: none;
+}
+
 .desktop {
   width: 100%;
   height: 100%;
@@ -17,7 +28,16 @@
   display: flex;
   align-items: flex-start;
   padding: 32px;
-  background: rgba(0, 0, 0, 0.35);
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.7) 0%,
+    rgba(0, 0, 0, 0.3) 14%,
+    rgba(0, 0, 0, 0.05) 35%,
+    rgba(0, 0, 0, 0.05) 70%,
+    rgba(0, 0, 0, 0.3) 90%,
+    rgba(0, 0, 0, 0.65) 100%
+  );
+  z-index: 1;
 }
 
 .iconGrid {
@@ -61,6 +81,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  backdrop-filter: blur(16px);
+  background: rgba(0, 0, 0, 0.45);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
 }
 
 .iconLabel {
@@ -71,6 +94,47 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: #fff;
+  text-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.9),
+    0 0 8px rgba(0, 0, 0, 0.5);
+}
+
+.liveWallpaperToggle {
+  position: fixed;
+  right: 16px;
+  bottom: 160px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  transition: all 0.2s;
+  backdrop-filter: blur(16px);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
+
+  &.liveOn {
+    background: rgba(139, 92, 246, 0.3);
+    color: #a78bfa;
+    border: 1px solid rgba(139, 92, 246, 0.4);
+  }
+
+  &.liveOff {
+    background: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+  }
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &.chatOpen {
+    right: 336px;
+  }
 }
 
 .langToggle {
@@ -87,15 +151,18 @@
   justify-content: center;
   z-index: 9999;
   transition: all 0.2s;
-  background: rgba(250, 234, 95, 0.15);
+  background: rgba(250, 234, 95, 0.25);
+  backdrop-filter: blur(16px);
   color: #faea5f;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: -0.5px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(250, 234, 95, 0.3);
 
   &:hover {
     transform: scale(1.1);
-    background: rgba(250, 234, 95, 0.25);
+    background: rgba(250, 234, 95, 0.4);
   }
 
   &.chatOpen {
@@ -117,20 +184,26 @@
   justify-content: center;
   z-index: 9999;
   transition: all 0.2s;
+  backdrop-filter: blur(12px);
 
   &.reportOn {
-    background: rgba(46, 167, 255, 0.15);
+    background: rgba(46, 167, 255, 0.3);
     color: #2ea7ff;
-    box-shadow: 0 0 8px rgba(46, 167, 255, 0.3);
+    box-shadow:
+      0 2px 10px rgba(0, 0, 0, 0.6),
+      0 0 8px rgba(46, 167, 255, 0.3);
+    border: 1px solid rgba(46, 167, 255, 0.35);
 
     svg {
       animation: pulse-radio 1.5s ease-in-out infinite;
     }
   }
 
   &.reportOff {
-    background: rgba(255, 255, 255, 0.06);
-    color: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.5);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.15);
   }
 
   &:hover {
@@ -161,14 +234,14 @@
   border-radius: 50%;
   background: #faea5f;
   color: #121214;
-  border: none;
+  border: 2px solid rgba(255, 255, 255, 0.3);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   z-index: 9999;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
 
   &:hover {
     transform: scale(1.05);

apps/webuiapps/src/components/Shell/index.tsx

@@ -12,6 +12,8 @@ import {
   Shield,
   Newspaper,
   Radio,
+  Video,
+  VideoOff,
   type LucideIcon,
 } from 'lucide-react';
 import ChatPanel from '../ChatPanel';
@@ -49,17 +51,37 @@ const DESKTOP_APPS = getDesktopApps().map((app) => ({
   IconComp: ICON_MAP[app.icon] || Circle,
 }));
 
-const DEFAULT_WALLPAPER =
+const VIDEO_WALLPAPER =
+  'https://cdn.openroom.ai/public-cdn-s3-us-west-2/talkie-op-img/1609284623_1772622757413_1.mp4';
+
+const STATIC_WALLPAPER =
   'https://cdn.openroom.ai/public-cdn-s3-us-west-2/talkie-op-img/image/437110625_1772619481913_Aoi_default_Commander_Room.jpg';
 
+function isVideoUrl(url: string): boolean {
+  try {
+    const pathname = new URL(url).pathname.toLowerCase();
+    return /\.(mp4|webm|mov|ogg)$/.test(pathname);
+  } catch {
+    return false;
+  }
+}
+
 const Shell: React.FC = () => {
   const [chatOpen, setChatOpen] = useState(false);
   const [reportEnabled, setReportEnabled] = useState(true);
   const [lang, setLang] = useState<'en' | 'zh'>('en');
+  const [liveWallpaper, setLiveWallpaper] = useState(true);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [wallpaper, setWallpaper] = useState(DEFAULT_WALLPAPER);
+  const [wallpaper, setWallpaper] = useState(VIDEO_WALLPAPER);
   const windows = useWindows();
 
+  const activeWallpaper = liveWallpaper
+    ? wallpaper
+    : isVideoUrl(wallpaper)
+      ? STATIC_WALLPAPER
+      : wallpaper;
+  const showVideo = liveWallpaper && isVideoUrl(wallpaper);
+
   const handleToggleReport = useCallback(() => {
     setReportEnabled((prev) => {
       const next = !prev;
@@ -84,15 +106,18 @@ const Shell: React.FC = () => {
     <div
       className={styles.shell}
       style={
-        wallpaper
+        activeWallpaper && !showVideo
           ? {
-              backgroundImage: `url(${wallpaper})`,
+              backgroundImage: `url(${activeWallpaper})`,
               backgroundSize: 'cover',
               backgroundPosition: 'center',
             }
           : undefined
       }
     >
+      {showVideo && (
+        <video className={styles.videoBg} src={wallpaper} autoPlay loop muted playsInline />
+      )}
       {/* Desktop with app icons */}
       <div className={styles.desktop}>
         <div className={styles.iconGrid}>
@@ -126,6 +151,14 @@ const Shell: React.FC = () => {
       {/* Chat Panel */}
       {chatOpen && <ChatPanel onClose={() => setChatOpen(false)} />}
 
+      <button
+        className={`${styles.liveWallpaperToggle} ${chatOpen ? styles.chatOpen : ''} ${liveWallpaper ? styles.liveOn : styles.liveOff}`}
+        onClick={() => setLiveWallpaper((prev) => !prev)}
+        title={liveWallpaper ? 'Live wallpaper: ON' : 'Live wallpaper: OFF'}
+      >
+        {liveWallpaper ? <Video size={16} /> : <VideoOff size={16} />}
+      </button>
+
       <button
         className={`${styles.langToggle} ${chatOpen ? styles.chatOpen : ''}`}
         onClick={handleToggleLang}