danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[FIX] Show loading screen while waiting for modal text content.

Browse source
This commit is contained in:
arabcoders 2025-11-10 16:43:13 +03:00
parent 1316cbf7c1
commit ddd7f77551
3 changed files with 22 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/app/components/GetInfo.vue
View file

@ -16,7 +16,7 @@ const props = defineProps<{
code_classes?: string
}>()
const isLoading = ref<boolean>(false)
const isLoading = ref<boolean>(true)
const data = ref<any>({})
onMounted(async (): Promise<void> => {
@ -35,7 +35,6 @@ onMounted(async (): Promise<void> => {
}
try {
isLoading.value = true
const response = await request(url)
const body = await response.text()

21
ui/app/components/ModalText.vue
View file

@ -31,14 +31,19 @@ code {
</div>
<div class="modal-content-max" style="height: 80vh;" v-else>
<div class="content p-0 m-0" style="position: relative">
<pre :class="[code_classes, custom_classes]"><code class="p-4 is-block" v-text="data" /></pre>
<div class="m-4 is-flex" style="position: absolute; top:0; right:0;">
<button class="button is-small is-purple mr-3" @click="() => toggleClass('is-pre-wrap-force')">
<span class="icon"><i class="fas fa-text-width" /></span>
</button>
<button class="button is-info is-small" @click="() => copyText(JSON.stringify(data, null, 2))">
<span class="icon"><i class="fas fa-copy" /></span>
</button>
<div style="font-size:30vh; width: 99%" class="has-text-centered" v-if="isLoading">
<i class="fas fa-circle-notch fa-spin" />
</div>
<div v-else>
<pre :class="[code_classes, custom_classes]"><code class="p-4 is-block" v-text="data" /></pre>
<div class="m-4 is-flex" style="position: absolute; top:0; right:0;">
<button class="button is-small is-purple mr-3" @click="() => toggleClass('is-pre-wrap-force')">
<span class="icon"><i class="fas fa-text-width" /></span>
</button>
<button class="button is-info is-small" @click="() => copyText(JSON.stringify(data, null, 2))">
<span class="icon"><i class="fas fa-copy" /></span>
</button>
</div>
</div>
</div>
</div>

11
ui/app/layouts/default.vue
View file

@ -39,7 +39,7 @@
<div class="navbar-brand pl-5">
<NuxtLink class="navbar-item is-text-overflow" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)"
v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'">
v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'" id="top">
<span class="is-text-overflow">
<span class="icon">
<i v-if="'connecting' === socket.connectionStatus" class="fas fa-arrows-rotate fa-spin" />
@ -172,15 +172,19 @@
<div class="column">
<div class="has-text-left" v-if="config.app?.app_version">
© {{ Year }} - <NuxtLink href="https://github.com/ArabCoders/ytptube" target="_blank">YTPTube</NuxtLink>
<span class="has-tooltip"
(<span class="has-tooltip"
v-tooltip="`Build Date: ${config.app?.app_build_date}, Branch: ${config.app?.app_branch}, commit: ${config.app?.app_commit_sha}`">
&nbsp;({{ config?.app?.app_version || 'unknown' }})</span>
{{ config?.app?.app_version || 'unknown' }}</span>)
- <NuxtLink target="_blank" href="https://github.com/yt-dlp/yt-dlp">yt-dlp</NuxtLink>
<span>&nbsp;({{ config?.app?.ytdlp_version || 'unknown' }})</span>
- <NuxtLink to="/changelog">CHANGELOG</NuxtLink>
- <NuxtLink @click="doc.file = '/api/docs/FAQ.md'">FAQ</NuxtLink>
- <NuxtLink @click="doc.file = '/api/docs/README.md'">README</NuxtLink>
- <NuxtLink @click="doc.file = '/api/docs/API.md'">API</NuxtLink>
- <NuxtLink @click="scrollToTop">
<span class="icon"><i class="fas fa-arrow-up" /></span>
<span>Top</span>
</NuxtLink>
</div>
</div>
<div class="column is-narrow" v-if="config.app?.started">
@ -507,4 +511,5 @@ const connectionStatusColor = computed(() => {
}
})
const scrollToTop = () => document.getElementById('top')?.scrollIntoView({ behavior: 'smooth' });
</script>