mirror of
https://github.com/xpltdco/media-rip.git
synced 2026-06-02 10:44:30 -06:00
3a099cb29c
Critical fix: - Input field no longer disabled during URL analysis — the race condition fix (isAnalyzing=true on paste) was disabling the input mid-paste, causing the browser to drop the pasted text. Input now only disabled during submission. UI polish: - All action row elements standardized to 42px height - Mobile toggle pills wider (min-width: 42px, matches gear icon) - URL clear button (floating X) in the input field - Footer visible in mobile view (padding above bottom nav) - FormatPicker mobile: ellipsis on codec text, wrapped layout at narrow widths
63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { api } from '@/api/client'
|
|
|
|
const appVersion = ref('')
|
|
const ytDlpVersion = ref('')
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const health = await api.getHealth()
|
|
appVersion.value = health.version
|
|
ytDlpVersion.value = health.yt_dlp_version
|
|
} catch {
|
|
appVersion.value = '?.?.?'
|
|
ytDlpVersion.value = 'unknown'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<footer v-if="appVersion" class="app-footer">
|
|
<span>media.rip() v{{ appVersion }}</span>
|
|
<span class="sep">|</span>
|
|
<span>yt-dlp {{ ytDlpVersion }}</span>
|
|
<span class="sep">|</span>
|
|
<a
|
|
href="https://github.com/xpltdco/media-rip"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>GitHub</a>
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-footer {
|
|
text-align: center;
|
|
padding: var(--space-lg) var(--space-md);
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-sm);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.app-footer {
|
|
padding-bottom: calc(var(--mobile-nav-height) + var(--space-md));
|
|
}
|
|
}
|
|
|
|
.sep {
|
|
margin: 0 var(--space-sm);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.app-footer a {
|
|
color: var(--color-text-muted);
|
|
text-decoration: none;
|
|
transition: color var(--transition-normal);
|
|
}
|
|
|
|
.app-footer a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
</style>
|