From 37fc7a760438570e58718e2979b92bb01b1632b2 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Fri, 28 Mar 2025 22:21:03 +0300
Subject: [PATCH] set opacity when model is active in file browser.

---
 ui/components/History.vue      |  2 +-
 ui/pages/browser/[...slug].vue | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/ui/components/History.vue b/ui/components/History.vue
index 9b1deef8..92d00baf 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -370,7 +370,7 @@
 <script setup>
 import moment from 'moment'
 import { useStorage } from '@vueuse/core'
-import { makeDownload, formatBytes, ucFirst } from '~/utils/index'
+import { makeDownload, formatBytes } from '~/utils/index'
 import toast from '~/plugins/toast'
 import { isEmbedable, getEmbedable } from '~/utils/embedable'
 
diff --git a/ui/pages/browser/[...slug].vue b/ui/pages/browser/[...slug].vue
index f78c61d4..8131f03b 100644
--- a/ui/pages/browser/[...slug].vue
+++ b/ui/pages/browser/[...slug].vue
@@ -129,6 +129,7 @@
 <script setup>
 import { request } from '~/utils/index'
 import moment from 'moment'
+import { useStorage } from '@vueuse/core'
 
 const route = useRoute()
 const toast = useToast()
@@ -140,6 +141,9 @@ const initialLoad = ref(true)
 const items = ref([])
 const path = ref(`/${route.params.slug?.length > 0 ? route.params.slug?.join('/') : ''}`)
 
+const bg_enable = useStorage('random_bg', true)
+const bg_opacity = useStorage('random_bg_opacity', 0.85)
+
 const model_item = ref()
 const closeModel = () => model_item.value = null
 
@@ -305,4 +309,12 @@ const makeBreadCrumb = path => {
   return links
 }
 
+
+watch(model_item, v => {
+  if (!bg_enable.value) {
+    return
+  }
+
+  document.querySelector('body').setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
+})
 </script>