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

wip

Browse source
This commit is contained in:
arabcoders 2025-08-31 22:05:11 +03:00
parent 974efc700d
commit e0227c1772
7 changed files with 55 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ui/app/components/Queue.vue
View file

@ -240,7 +240,7 @@
v-rtime="item.datetime" />
</div>
<div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"
v-if="item.downloaded_bytes">
v-if="item.downloaded_bytes" v-tooltip="`Saving to: ${makePath(item)}`">
{{ formatBytes(item.downloaded_bytes) }}
</div>
@ -598,4 +598,15 @@ watch(embed_url, v => {
}
document.querySelector('body')?.setAttribute('style', `opacity: ${v ? 1 : bg_opacity.value}`)
})
const makePath = (item: StoreItem) => {
const parts = [
eTrim(item.download_dir, '/').replace(config.app.download_path, ''),
]
if (item?.filename) {
parts.push(eTrim(item.filename, '/'))
}
return '/' + sTrim(parts.filter(p => !!p).map(p => p.replace(/\\/g, '/').replace(/\/+/g, '/')).join('/'), '/')
}
</script>

4
ui/app/pages/browser/[...slug].vue
View file

@ -29,6 +29,7 @@
<div class="control">
<button class="button is-danger is-light" @click="toggleFilter" v-tooltip.bottom="'Filter content'">
<span class="icon"><i class="fas fa-filter" /></span>
<span v-if="!isMobile">Filter</span>
</button>
</div>
@ -37,12 +38,14 @@
:class="{ 'is-loading': isLoading }" :disabled="!socket.isConnected || isLoading"
v-tooltip.bottom="'Create new directory'" v-if="config.app.browser_control_enabled">
<span class="icon"><i class="fas fa-folder-plus" /></span>
<span v-if="!isMobile">New Folder</span>
</button>
</p>
<p class="control">
<button class="button is-info" @click="reloadContent(path, true)" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading">
<span class="icon"><i class="fas fa-refresh" /></span>
<span v-if="!isMobile">Reload</span>
</button>
</p>
</div>
@ -201,6 +204,7 @@ const route = useRoute()
const toast = useNotification()
const config = useConfigStore()
const socket = useSocketStore()
const isMobile = useMediaQuery({ maxWidth: 1024 })
const bg_enable = useStorage('random_bg', true)
const bg_opacity = useStorage('random_bg_opacity', 0.95)

3
ui/app/pages/conditions.vue
View file

@ -13,12 +13,14 @@
<p class="control">
<button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm;">
<span class="icon"><i class="fas fa-add" /></span>
<span v-if="!isMobile">New Condition</span>
</button>
</p>
<p class="control">
<button class="button is-info" @click="reloadContent(false)" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading" v-if="items && items.length > 0">
<span class="icon"><i class="fas fa-refresh" /></span>
<span v-if="!isMobile">Reload</span>
</button>
</p>
</div>
@ -121,6 +123,7 @@ const toast = useNotification()
const config = useConfigStore()
const socket = useSocketStore()
const box = useConfirm()
const isMobile = useMediaQuery({ maxWidth: 1024 })
const items = ref<ConditionItem[]>([])
const item = ref<Partial<ConditionItem>>({})

10
ui/app/pages/index.vue
View file

@ -46,9 +46,9 @@
<button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
@click="() => changeDisplay()">
<span class="icon"><i class="fa-solid"
:class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
:class="{ 'fa-table': display_style !== 'list', 'fa-table-list': display_style === 'list' }" /></span>
<span v-if="!isMobile">
{{ display_style === 'cards' ? 'Cards' : 'List' }}
{{ display_style === 'list' ? 'List' : 'Grid' }}
</span>
</button>
</p>
@ -123,8 +123,9 @@ const stateStore = useStateStore()
const socket = useSocketStore()
const bg_enable = useStorage<boolean>('random_bg', true)
const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
const display_style = useStorage<string>('display_style', 'cards')
const display_style = useStorage<string>('display_style', 'grid')
const show_thumbnail = useStorage<boolean>('show_thumbnail', true)
const isMobile = useMediaQuery({ maxWidth: 1024 })
const info_view = ref({
url: '',
@ -143,7 +144,6 @@ const dialog_confirm = ref({
options: [],
})
const isMobile = useMediaQuery({ maxWidth: 1024 })
watch(toggleFilter, () => {
if (!toggleFilter.value) {
@ -217,7 +217,7 @@ watch(() => info_view.value.url, v => {
document.querySelector('body')?.setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
})
const changeDisplay = () => display_style.value = display_style.value === 'cards' ? 'list' : 'cards'
const changeDisplay = () => display_style.value = display_style.value === 'grid' ? 'list' : 'grid'
const toNewDownload = async (item: item_request | Partial<StoreItem>) => {
if (!item) {

13
ui/app/pages/notifications.vue
View file

@ -14,19 +14,25 @@
<button class="button is-primary" @click="resetForm(false); toggleForm = true"
v-tooltip="'Add new notification target.'">
<span class="icon"><i class="fas fa-add"></i></span>
<span v-if="!isMobile">New Notification</span>
</button>
</p>
<p class="control" v-if="notifications.length > 0">
<button class="button is-warning" @click="sendTest" v-tooltip="'Send test notification.'"
:class="{ 'is-loading': isLoading }" :disabled="!socket.isConnected || isLoading">
<span class="icon"><i class="fas fa-paper-plane"></i></span>
<span v-if="!isMobile">Send Test</span>
</button>
</p>
<p class="control" v-if="notifications.length > 0">
<button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
@click="() => display_style = display_style === 'cards' ? 'list' : 'cards'">
<span class="icon"><i class="fa-solid"
:class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
@click="() => display_style = display_style === 'list' ? 'grid' : 'list'">
<span class="icon">
<i class="fa-solid"
:class="{ 'fa-table': display_style !== 'list', 'fa-table-list': display_style === 'list' }" /></span>
<span v-if="!isMobile">
{{ display_style === 'list' ? 'List' : 'Grid' }}
</span>
</button>
</p>
@ -203,6 +209,7 @@ const config = useConfigStore()
const socket = useSocketStore()
const box = useConfirm()
const display_style = useStorage<string>("tasks_display_style", "cards")
const isMobile = useMediaQuery({ maxWidth: 1024 })
const allowedEvents = ref<string[]>([])
const notifications = ref<notification[]>([])

13
ui/app/pages/presets.vue
View file

@ -14,20 +14,26 @@
<button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm;"
v-tooltip.bottom="'Toggle add form'">
<span class="icon"><i class="fas fa-add" /></span>
<span v-if="!isMobile">New Preset</span>
</button>
</p>
<p class="control">
<button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
@click="() => display_style = display_style === 'cards' ? 'list' : 'cards'">
<span class="icon"><i class="fa-solid"
:class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
@click="() => display_style = display_style === 'list' ? 'grid' : 'list'">
<span class="icon">
<i class="fa-solid"
:class="{ 'fa-table': display_style !== 'list', 'fa-table-list': display_style === 'list' }" /></span>
<span v-if="!isMobile">
{{ display_style === 'list' ? 'List' : 'Grid' }}
</span>
</button>
</p>
<p class="control">
<button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading" v-if="presets && presets.length > 0">
<span class="icon"><i class="fas fa-refresh" /></span>
<span v-if="!isMobile">Reload</span>
</button>
</p>
</div>
@ -214,6 +220,7 @@ const socket = useSocketStore()
const box = useConfirm()
const display_style = useStorage<string>('preset_display_style', 'cards')
const isMobile = useMediaQuery({ maxWidth: 1024 })
const presets = ref<Preset[]>([])
const preset = ref<Partial<Preset>>({})

14
ui/app/pages/tasks.vue
View file

@ -20,6 +20,7 @@
<button class="button is-danger is-light" v-tooltip.bottom="'Filter'"
@click="toggleFilter = !toggleFilter">
<span class="icon"><i class="fas fa-filter" /></span>
<span v-if="!isMobile">Filter</span>
</button>
</p>
@ -27,14 +28,19 @@
<button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm"
v-tooltip.bottom="'Toggle Add form'">
<span class="icon"><i class="fas fa-add" /></span>
<span v-if="!isMobile">New Task</span>
</button>
</p>
<p class="control">
<button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
@click="() => display_style = display_style === 'cards' ? 'list' : 'cards'">
<span class="icon"><i class="fa-solid"
:class="{ 'fa-table': display_style === 'cards', 'fa-table-list': display_style === 'list' }" /></span>
@click="() => display_style = display_style === 'list' ? 'grid' : 'list'">
<span class="icon">
<i class="fa-solid"
:class="{ 'fa-table': display_style !== 'list', 'fa-table-list': display_style === 'list' }" /></span>
<span v-if="!isMobile">
{{ display_style === 'list' ? 'List' : 'Grid' }}
</span>
</button>
</p>
@ -42,6 +48,7 @@
<button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }"
:disabled="!socket.isConnected || isLoading" v-if="tasks && tasks.length > 0">
<span class="icon"><i class="fas fa-refresh" /></span>
<span v-if="!isMobile">Reload</span>
</button>
</p>
</div>
@ -382,6 +389,7 @@ const config = useConfigStore()
const socket = useSocketStore()
const { confirmDialog: cDialog } = useDialog()
const display_style = useStorage<string>("tasks_display_style", "cards")
const isMobile = useMediaQuery({ maxWidth: 1024 })
const tasks = ref<Array<task_item>>([])
const task = ref<task_item | Object>({})