fix: 全屏预览时深色皮肤反色的情况

kuaifan · Dec 17, 2024 · 60b5ecd · 60b5ecd
1 parent 6cce7d3
commit 60b5ecd
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
@@ -85,6 +85,7 @@ export default {
         window.addEventListener('resize', this.windowSizeListener)
         window.addEventListener('scroll', this.windowScrollListener)
         window.addEventListener('message', this.windowHandleMessage)
+        window.addEventListener('fullscreenchange', this.handleFullscreenchange);
         this.appInter = setInterval(this.appTimerHandler, 1000)
         $A.loadVConsole()
     },
@@ -93,6 +94,7 @@ export default {
         window.removeEventListener('resize', this.windowSizeListener)
         window.removeEventListener('scroll', this.windowScrollListener)
         window.removeEventListener('message', this.windowHandleMessage)
+        window.removeEventListener('fullscreenchange', this.handleFullscreenchange);
         this.appInter && clearInterval(this.appInter)
     },
 
@@ -293,6 +295,14 @@ export default {
             document.documentElement.setAttribute("data-platform", $A.isElectron ? "desktop" : $A.isEEUiApp ? "app" : "web")
         },
 
+        handleFullscreenchange() {
+            if (document.fullscreenElement) {
+                $A("body").addClass("fullscreen-mode")
+            } else {
+                $A("body").removeClass("fullscreen-mode")
+            }
+        },
+
         /**
          * 获取链接打开方式
          * @param url

diff --git a/resources/assets/js/functions/web.js b/resources/assets/js/functions/web.js
@@ -1047,7 +1047,11 @@ import {convertLocalResourcePath} from "../components/Replace/utils";
                     .no-dark-content [style*="background-image:url"],
                     .no-dark-content [style*="background: url"],
                     .no-dark-content [style*="background-image: url"],
-                    .no-dark-content [background] {
+                    .no-dark-content [background],
+                    .fullscreen-mode img,
+                    .fullscreen-mode video,
+                    .fullscreen-mode iframe,
+                    .fullscreen-mode canvas {
                         ${this.utils.noneFilter()}
                     }