Merge pull request #368 from arabcoders/dev

Disable opacity whenever an overlay is showing

ui/app/components/ConfirmDialog.vue

@@ -39,6 +39,8 @@
 </template>
 
 <script setup lang="ts">
+import { disableOpacity, enableOpacity } from '~/utils'
+
 const props = defineProps({
   visible: {
     type: Boolean,
@@ -104,4 +106,7 @@ watch(() => props.visible, async visible => {
 
 const handleConfirm = () => emit('confirm', { ...selected })
 const cancel = () => emit('cancel')
+
+onMounted(() => disableOpacity())
+onBeforeUnmount(() => enableOpacity())
 </script>

ui/app/components/DLFields.vue

@@ -121,8 +121,8 @@
                     </label>
                     <input type="text" v-model="item.icon" class="input" :disabled="isLoading" />
                     <span class="help is-bold">
-                      The icon of the field, must be from <NuxtLink
-                        href="https://fontawesome.com/search?ic=free&o=r" target="_blank">
+                      The icon of the field, must be from <NuxtLink href="https://fontawesome.com/search?ic=free&o=r"
+                        target="_blank">
                         font-awesome</NuxtLink> icon. e.g. <code>fa-solid fa-image</code>. Leave empty for no icon.
                     </span>
                   </div>
@@ -165,6 +165,7 @@
 <script setup lang="ts">
 import { defineEmits, ref } from 'vue'
 import type { DLField } from '~/types/dl_fields'
+import { disableOpacity, enableOpacity } from '~/utils'
 
 const emitter = defineEmits<{ (e: 'cancel'): void }>()
 
@@ -271,6 +272,11 @@ const validateItem = (item: DLField, index: number): boolean => {
   return true
 }
 
-onMounted(async () => await loadContent())
 const sortedDLFields = computed(() => items.value.sort((a, b) => (a.order || 0) - (b.order || 0)))
+
+onMounted(async () => {
+  disableOpacity()
+  await loadContent()
+})
+onBeforeUnmount(() => enableOpacity())
 </script>

ui/app/components/EmbedPlayer.vue

@@ -16,6 +16,8 @@
 </template>
 
 <script setup lang="ts">
+import { disableOpacity, enableOpacity } from '~/utils'
+
 defineProps({
   url: {
     type: String,
@@ -32,6 +34,13 @@ const handle_event = (e: KeyboardEvent) => {
   emitter('closeModel')
 }
 
-onMounted(() => document.addEventListener('keydown', handle_event))
-onBeforeUnmount(() => document.removeEventListener('keydown', handle_event))
+onMounted(() => {
+  document.addEventListener('keydown', handle_event)
+  disableOpacity()
+})
+
+onBeforeUnmount(() => {
+  enableOpacity()
+  document.removeEventListener('keydown', handle_event)
+})
 </script>

ui/app/components/FloatingImage.vue

@@ -20,6 +20,8 @@
 </template>
 
 <script setup lang="ts">
+import { disableOpacity, enableOpacity } from '~/utils'
+
 const props = defineProps<{
   image?: string
   title?: string
@@ -111,4 +113,13 @@ const pImg = (e: Event): void => {
     target.classList.add('image-portrait')
   }
 }
+onMounted(() => disableOpacity())
+onBeforeUnmount(() => {
+  enableOpacity()
+  if (null !== loadTimer) {
+    clearTimeout(loadTimer)
+  }
+  cancelRequest.abort('not_needed')
+})
+
 </script>

ui/app/components/GetInfo.vue

@@ -38,6 +38,8 @@ code {
 </template>
 
 <script setup lang="ts">
+import { disableOpacity, enableOpacity } from '~/utils';
+
 const toast = useNotification()
 const emitter = defineEmits<{ (e: 'closeModel'): void }>()
 
@@ -58,6 +60,7 @@ const handle_event = (e: KeyboardEvent): void => {
 }
 
 onMounted(async (): Promise<void> => {
+  disableOpacity()
   document.addEventListener('keydown', handle_event)
 
   let url = props.useUrl ? props.link || '' : '/api/yt-dlp/url/info'
@@ -90,6 +93,7 @@ onMounted(async (): Promise<void> => {
 })
 
 onBeforeUnmount(() => {
+  enableOpacity()
   document.removeEventListener('keydown', handle_event)
 })
 </script>

ui/app/components/ImageView.vue

@@ -19,6 +19,8 @@ img {
 </template>
 
 <script setup lang="ts">
+import { disableOpacity, enableOpacity } from '~/utils'
+
 const toast = useNotification()
 const emitter = defineEmits(['closeModel'])
 
@@ -40,6 +42,7 @@ const handle_event = (e: KeyboardEvent) => {
 }
 
 onMounted(async () => {
+  disableOpacity()
   document.addEventListener('keydown', handle_event)
 
   const url = props.link.startsWith('/') ? props.link : '/api/thumbnail?url=' + encodePath(props.link)
@@ -61,5 +64,11 @@ onMounted(async () => {
   }
 })
 
-onBeforeUnmount(() => document.removeEventListener('keydown', handle_event))
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handle_event)
+  if (image.value) {
+    URL.revokeObjectURL(image.value)
+  }
+  enableOpacity()
+})
 </script>

ui/app/components/Modal.vue

@@ -12,6 +12,8 @@
 </template>
 
 <script setup lang="ts">
+import { disableOpacity, enableOpacity } from '~/utils'
+
 const emitter = defineEmits(['close'])
 
 defineProps({
@@ -29,6 +31,13 @@ const handle_event = (e: KeyboardEvent) => {
   emitter('close')
 }
 
-onMounted(() => document.addEventListener('keydown', handle_event))
-onBeforeUnmount(() => document.removeEventListener('keydown', handle_event))
+onMounted(() => {
+  document.addEventListener('keydown', handle_event)
+  disableOpacity()
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handle_event)
+  enableOpacity()
+})
 </script>

ui/app/components/VideoPlayer.vue

@@ -29,6 +29,7 @@
 import { useStorage } from '@vueuse/core'
 import Hls from 'hls.js'
 import type { StoreItem } from '~/types/store'
+import { disableOpacity, enableOpacity } from '~/utils'
 
 type video_track_element = {
   file: string,
@@ -108,6 +109,7 @@ const volume_change_handler = () => {
 }
 
 onMounted(async () => {
+  disableOpacity()
   const req = await request(makeDownload(config, props.item, 'api/file/info'))
 
   const response: file_info = await req.json()
@@ -189,6 +191,7 @@ onMounted(async () => {
 onUpdated(() => prepareVideoPlayer())
 
 onBeforeUnmount(() => {
+  enableOpacity()
   if (hls) {
     hls.destroy()
   }

ui/app/pages/console.vue

@@ -56,18 +56,15 @@
 </template>
 
 <script setup lang="ts">
-import "@xterm/xterm/css/xterm.css"
-import { Terminal } from "@xterm/xterm"
-import { FitAddon } from "@xterm/addon-fit"
-import { useStorage } from '@vueuse/core'
+import '@xterm/xterm/css/xterm.css'
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import { disableOpacity, enableOpacity } from '~/utils'
 
 const config = useConfigStore()
 const socket = useSocketStore()
 const toast = useNotification()
 
-const bg_enable = useStorage<boolean>('random_bg', true)
-const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
-
 const terminal = ref<Terminal>()
 const terminalFit = ref<FitAddon>()
 const command = ref<string>('')
@@ -200,17 +197,13 @@ onMounted(async () => {
   socket.off('cli_output', writer)
   socket.on('cli_close', loader)
   socket.on('cli_output', writer)
-  if (bg_enable.value) {
-    document.querySelector('body')?.setAttribute("style", `opacity: 1.0`)
-  }
+  disableOpacity()
 })
 
 onBeforeUnmount(() => {
   socket.off('cli_close', loader)
   socket.off('cli_output', writer)
   document.removeEventListener('resize', handle_event)
-  if (bg_enable.value) {
-    document.querySelector('body')?.setAttribute("style", `opacity: ${bg_opacity.value}`)
-  }
+  enableOpacity()
 });
 </script>

ui/app/utils/index.ts

@@ -1,3 +1,4 @@
+import { useStorage } from '@vueuse/core'
 import type { convert_args_response } from "~/types/responses";
 import type { StoreItem } from "~/types/store";
 
@@ -651,10 +652,31 @@ const decode = (str: string): object => {
   return JSON.parse(jsonStr);
 }
 
+const disableOpacity = (): boolean => {
+  const bg_enable = useStorage<boolean>('random_bg', true)
+  if (!bg_enable) {
+    return false;
+  }
+
+  document.querySelector('body')?.setAttribute("style", `opacity: 1.0`)
+  return true
+}
+
+const enableOpacity = (): boolean => {
+  const bg_enable = useStorage<boolean>('random_bg', true)
+  if (!bg_enable) {
+    return false;
+  }
+
+  const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
+  document.querySelector('body')?.setAttribute("style", `opacity: ${bg_opacity.value}`)
+  return true
+}
+
 export {
   separators, convertCliOptions, getSeparatorsName, iTrim, eTrim, sTrim, ucFirst,
   getValue, ag, ag_set, awaitElement, r, copyText, dEvent, makePagination, encodePath,
   request, removeANSIColors, dec2hex, makeId, basename, dirname, getQueryParams,
   makeDownload, formatBytes, has_data, toggleClass, cleanObject, uri, formatTime,
-  sleep, awaiter, encode, decode
+  sleep, awaiter, encode, decode, disableOpacity, enableOpacity
 }