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

completed the ts migration

Browse source
This commit is contained in:
arabcoders 2025-07-26 21:14:53 +03:00
parent c94a4e5c75
commit 964a24cdd5
5 changed files with 217 additions and 278 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/library/Utils.py
View file

@ -373,14 +373,18 @@ def check_id(file: Path) -> bool | str:
id = match.groupdict().get("id")
for f in file.parent.iterdir():
if id not in f.stem:
continue
try:
for f in file.parent.iterdir():
if id not in f.stem:
continue
if f.suffix != file.suffix:
continue
if f.suffix != file.suffix:
continue
return f.absolute()
return f.absolute()
except OSError as e:
LOG.error(f"Error checking file '{file}': {e!s}")
return False
return False

1
app/routes/api/browser.py
View file

@ -324,6 +324,7 @@ async def prepare_zip_file(request: Request, config: Config, cache: Cache):
for f in json:
if not isinstance(f, str):
continue
ref, status = get_file(download_path=config.download_path, file=f)
if status == web.HTTPNotFound.status_code:
continue

272
ui/app/components/History.vue
View file

@ -161,7 +161,7 @@
<div class="field is-grouped is-grouped-centered">
<div class="control" v-if="item.status != 'finished' || !item.filename">
<button class="button is-warning is-fullwidth is-small" v-tooltip="'Retry download'"
@click="(event) => retryItem(item, event)">
@click="() => retryItem(item, true)">
<span class="icon"><i class="fa-solid fa-rotate-right" /></span>
</button>
</div>
@ -188,7 +188,8 @@
<hr class="dropdown-divider" />
</template>
<template v-else-if="isEmbedable(item.url)">
<NuxtLink class="dropdown-item has-text-danger" @click="embed_url = getEmbedable(item.url)">
<NuxtLink class="dropdown-item has-text-danger"
@click="embed_url = getEmbedable(item.url) as string">
<span class="icon"><i class="fa-solid fa-play" /></span>
<span>Play video</span>
</NuxtLink>
@ -279,7 +280,8 @@
v-if="item.extras?.thumbnail" />
<img v-else src="/images/placeholder.png" />
</span>
<span v-else-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url)" class="play-overlay">
<span v-else-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url) as string"
class="play-overlay">
<div class="play-icon embed-icon"></div>
<img @load="e => pImg(e)" :src="uri('/api/thumbnail?url=' + encodePath(item.extras.thumbnail))"
v-if="item.extras?.thumbnail" />
@ -322,7 +324,7 @@
</div>
<div class="columns is-mobile is-multiline">
<div class="column is-half-mobile" v-if="item.status != 'finished' || !item.filename">
<a class="button is-warning is-fullwidth" @click="(event) => retryItem(item, event)">
<a class="button is-warning is-fullwidth" @click="() => retryItem(item, false)">
<span class="icon-text is-block">
<span class="icon"><i class="fa-solid fa-rotate-right" /></span>
<span>Retry</span>
@ -360,7 +362,8 @@
</template>
<template v-else-if="isEmbedable(item.url)">
<NuxtLink class="dropdown-item has-text-danger" @click="embed_url = getEmbedable(item.url)">
<NuxtLink class="dropdown-item has-text-danger"
@click="embed_url = getEmbedable(item.url) as string">
<span class="icon"><i class="fa-solid fa-play" /></span>
<span>Play video</span>
</NuxtLink>
@ -459,24 +462,22 @@
@cancel="() => dialog_confirm.visible = false" />
</div>
</template>
<script setup>
import { useStorage } from '@vueuse/core'
<script setup lang="ts">
import moment from 'moment'
import { useStorage } from '@vueuse/core'
import type { StoreItem } from '~/types/store'
const emitter = defineEmits(['getInfo', 'add_new', 'getItemInfo', 'clear_search'])
const emitter = defineEmits<{
(e: 'getInfo', url: string, preset: string): void
(e: 'add_new', item: Partial<StoreItem>): void
(e: 'getItemInfo', id: string): void
(e: 'clear_search'): void
}>()
const props = defineProps({
thumbnails: {
type: Boolean,
default: true
},
query: {
type: String,
required: false,
default: '',
}
})
const props = defineProps<{
thumbnails?: boolean
query?: string
}>()
const config = useConfigStore()
const stateStore = useStateStore()
@ -484,19 +485,25 @@ const socket = useSocketStore()
const toast = useNotification()
const box = useConfirm()
const showCompleted = useStorage('showCompleted', true)
const hideThumbnail = useStorage('hideThumbnailHistory', false)
const direction = useStorage('sortCompleted', 'desc')
const display_style = useStorage('display_style', 'cards')
const bg_enable = useStorage('random_bg', true)
const bg_opacity = useStorage('random_bg_opacity', 0.95)
const showCompleted = useStorage<boolean>('showCompleted', true)
const hideThumbnail = useStorage<boolean>('hideThumbnailHistory', false)
const direction = useStorage<'asc' | 'desc'>('sortCompleted', 'desc')
const display_style = useStorage<'cards' | 'list'>('display_style', 'cards')
const bg_enable = useStorage<boolean>('random_bg', true)
const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
const selectedElms = ref([])
const selectedElms = ref<string[]>([])
const masterSelectAll = ref(false)
const table_container = ref(false)
const embed_url = ref('')
const video_item = ref(null)
const dialog_confirm = ref({
const video_item = ref<StoreItem | null>(null)
const dialog_confirm = ref<{
visible: boolean
title: string
confirm: (opts?: any) => void
message: string
options: { key: string; label: string }[]
}>({
visible: false,
title: 'Confirm Action',
confirm: () => { },
@ -506,60 +513,57 @@ const dialog_confirm = ref({
],
})
const showThumbnails = computed(() => props.thumbnails && !hideThumbnail.value)
const showThumbnails = computed(() => (props.thumbnails || true) && !hideThumbnail.value)
const playVideo = item => video_item.value = item
const closeVideo = () => video_item.value = null
const playVideo = (item: StoreItem) => { video_item.value = item }
const closeVideo = () => { video_item.value = null }
const filteredItems = items => !props.query ? items : items.filter(filterItem)
const filteredItems = (items: StoreItem[]) => !props.query ? items : items.filter(filterItem)
const filterItem = item => {
const filterItem = (item: StoreItem) => {
const q = props.query?.toLowerCase()
if (!q) {
return true
}
return Object.values(item).some(v => typeof v === 'string' && v.toLowerCase().includes(q))
return Object.values(item).some(v =>
typeof v === 'string' && v.toLowerCase().includes(q)
)
}
watch(masterSelectAll, (value) => {
for (const key in stateStore.history) {
const element = stateStore.history[key]
if (value) {
selectedElms.value.push(element._id)
} else {
selectedElms.value = []
}
if (value) {
selectedElms.value = Object.values(stateStore.history).map((element: StoreItem) => element._id)
} else {
selectedElms.value = []
}
})
const sortCompleted = computed(() => {
const thisDirection = direction.value
return Object.values(stateStore.history).sort((a, b) => {
return Object.values(stateStore.history as Record<string, StoreItem>).sort((a, b) => {
if ('asc' === thisDirection) {
return new Date(a.datetime) - new Date(b.datetime)
return new Date(a.datetime).getTime() - new Date(b.datetime).getTime()
}
return new Date(b.datetime) - new Date(a.datetime)
return new Date(b.datetime).getTime() - new Date(a.datetime).getTime()
})
})
const hasSelected = computed(() => selectedElms.value.length > 0)
const hasItems = computed(() => filteredItems(sortCompleted.value).length > 0)
const hasItems = computed(() => filteredItems(sortCompleted.value as StoreItem[]).length > 0)
const showMessage = (item) => {
const showMessage = (item: StoreItem) => {
if (!item?.msg || item.msg === item?.error) {
return false
}
return item.msg.length > 0
return (item.msg?.length || 0) > 0
}
const hasIncomplete = computed(() => {
if (Object.keys(stateStore.history)?.length < 0) {
return false
}
for (const key in stateStore.history) {
const element = stateStore.history[key]
const element = stateStore.history[key] as StoreItem
if (element.status !== 'finished') {
return true
}
@ -571,9 +575,8 @@ const hasCompleted = computed(() => {
if (Object.keys(stateStore.history)?.length < 0) {
return false
}
for (const key in stateStore.history) {
const element = stateStore.history[key]
const element = stateStore.history[key] as StoreItem
if (element.status === 'finished') {
return true
}
@ -585,9 +588,8 @@ const hasDownloaded = computed(() => {
if (Object.keys(stateStore.history)?.length < 0) {
return false
}
for (const key in stateStore.history) {
const element = stateStore.history[key]
const element = stateStore.history[key] as StoreItem
if (element.status === 'finished' && element.filename) {
return true
}
@ -600,18 +602,19 @@ const deleteSelectedItems = () => {
toast.error('No items selected.')
return
}
let msg = `${config.app.remove_files ? 'Remove' : 'Clear'} '${selectedElms.value.length}' items?`
if (true === config.app.remove_files) {
msg += ' This will remove any associated files if they exists.'
}
if (false === box.confirm(msg, config.app.remove_files)) {
return
}
for (const key in selectedElms.value) {
const item = stateStore.history[selectedElms.value[key]]
const item_id = selectedElms.value[key]
if (!item_id) {
continue
}
const item = stateStore.get('history', item_id, {} as StoreItem) as StoreItem
if ('finished' === item.status) {
socket.emit('archive_item', item)
}
@ -628,10 +631,9 @@ const clearCompleted = () => {
if (false === box.confirm(msg)) {
return
}
for (const key in stateStore.history) {
if ('finished' === ag(stateStore.get('history', key, {}), 'status')) {
socket.emit('item_delete', { id: stateStore.history[key]._id, remove_file: false, })
if ('finished' === ag(stateStore.get('history', key, {} as StoreItem), 'status')) {
socket.emit('item_delete', { id: stateStore.history[key]?._id, remove_file: false, })
}
}
}
@ -640,18 +642,17 @@ const clearIncomplete = () => {
if (false === box.confirm('Clear all in-complete downloads?')) {
return
}
for (const key in stateStore.history) {
if (stateStore.history[key].status !== 'finished') {
if ((stateStore.history[key] as StoreItem).status !== 'finished') {
socket.emit('item_delete', {
id: stateStore.history[key]._id,
id: stateStore.history[key]?._id,
remove_file: false,
})
}
}
}
const setIcon = item => {
const setIcon = (item: StoreItem) => {
if ('finished' === item.status) {
if (!item.filename) {
return 'fa-solid fa-exclamation'
@ -661,73 +662,59 @@ const setIcon = item => {
}
return item.is_live ? 'fa-solid fa-globe' : 'fa-solid fa-circle-check'
}
if ('error' === item.status) {
return 'fa-solid fa-circle-xmark'
}
if ('cancelled' === item.status) {
return 'fa-solid fa-eject'
}
if ('not_live' === item.status) {
return item.extras?.is_premiere ? 'fa-solid fa-star' : 'fa-solid fa-headset'
}
if ('skip' === item.status) {
return 'fa-solid fa-ban'
}
return 'fa-solid fa-circle'
}
const setIconColor = item => {
const setIconColor = (item: StoreItem) => {
if ('finished' === item.status) {
if (!item.filename) {
return 'has-text-warning'
}
return 'has-text-success'
}
if ('not_live' === item.status) {
return 'has-text-info'
}
if ('cancelled' === item.status || "skipped" === item.status) {
if ('cancelled' === item.status || "skip" === item.status) {
return 'has-text-warning'
}
return 'has-text-danger'
}
const setStatus = item => {
const setStatus = (item: StoreItem) => {
if ('finished' === item.status) {
if (item.extras?.is_premiere) {
return 'Premiered'
}
return item.is_live ? 'Streamed' : 'Completed'
}
if ('error' === item.status) {
return 'Error'
}
if ('cancelled' === item.status) {
return 'Cancelled'
}
if ('not_live' === item.status) {
if (item.extras?.is_premiere) {
return 'Premiere'
}
return display_style.value === 'cards' ? 'Stream' : 'Live'
}
if ('skip' === item.status) {
return 'Skipped'
}
return item.status
}
@ -735,9 +722,8 @@ const retryIncomplete = () => {
if (false === box.confirm('Retry all incomplete downloads?')) {
return false
}
for (const key in stateStore.history) {
const item = stateStore.get('history', key, {})
const item = stateStore.get('history', key, {} as StoreItem) as StoreItem
if ('finished' === item.status) {
continue
}
@ -745,96 +731,85 @@ const retryIncomplete = () => {
}
}
const addArchiveDialog = (item) => {
const addArchiveDialog = (item: StoreItem) => {
dialog_confirm.value.visible = true
dialog_confirm.value.title = 'Archive Item'
dialog_confirm.value.message = `Archive '${item.title ?? item.id ?? item.url ?? '??'}'?`
dialog_confirm.value.confirm = opts => archiveItem(item, opts)
dialog_confirm.value.message = `Archive '${item.title || item.id || item.url || '??'}'?`
dialog_confirm.value.confirm = (opts: any) => archiveItem(item, opts)
}
const archiveItem = async (item, opts = {}) => {
const archiveItem = async (item: StoreItem, opts = {}) => {
try {
const req = await request(`/api/archive/${item._id}`, {
credentials: 'include',
method: 'POST',
})
const data = await req.json()
dialog_confirm.value.visible = false
if (!req.ok) {
toast.error(data.error)
return
}
toast.success(data.message ?? `Archived '${item.title ?? item.id ?? item.url ?? '??'}'.`)
} catch (e) {
toast.success(data.message ?? `Archived '${item.title || item.id || item.url || '??'}'.`)
} catch (e: any) {
console.error(e)
}
if (!opts?.remove_history) {
if (!(opts as any)?.remove_history) {
return
}
socket.emit('item_delete', { id: item._id, remove_file: false })
}
const removeItem = item => {
let msg = `${config.app.remove_files ? 'Remove' : 'Clear'} '${item.title ?? item.id ?? item.url ?? '??'}'?`
const removeItem = (item: StoreItem) => {
let msg = `${config.app.remove_files ? 'Remove' : 'Clear'} '${item.title || item.id || item.url || '??'}'?`
if (item.status === 'finished' && config.app.remove_files) {
msg += ' This will remove any associated files if they exists.'
}
if (false === box.confirm(msg, item.filename && config.app.remove_files)) {
if (false === box.confirm(msg, Boolean(item.filename && config.app.remove_files))) {
return false
}
socket.emit('item_delete', {
id: item._id,
remove_file: config.app.remove_files
})
}
const retryItem = (item, re_add = false) => {
const item_req = {
const retryItem = (item: StoreItem, re_add = false) => {
const item_req: Partial<StoreItem> = {
url: item.url,
preset: item.preset,
folder: item.folder,
cookies: item.cookies,
template: item.template,
cli: item?.cli,
extras: toRaw(item.extras ?? {}) ?? {},
};
extras: toRaw(item?.extras || {}) ?? {},
}
socket.emit('item_delete', { id: item._id, remove_file: false })
if (true === re_add) {
toast.info('Cleared the item from history, and added it to the new download form.')
emitter('add_new', item_req)
return
}
socket.emit('add_url', item_req)
}
const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
const pImg = (e: Event) => {
const target = e.target as HTMLImageElement
target.naturalHeight > target.naturalWidth && target.classList.add('image-portrait')
}
watch(video_item, v => {
if (!bg_enable.value) {
return
}
document.querySelector('body').setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
document.querySelector('body')?.setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
})
watch(embed_url, v => {
if (!bg_enable.value) {
return
}
document.querySelector('body').setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
document.querySelector('body')?.setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
})
const downloadSelected = async () => {
@ -842,100 +817,89 @@ const downloadSelected = async () => {
toast.error('No items selected.')
return
}
let files_list = []
let files_list: string[] = []
for (const key in selectedElms.value) {
const item = stateStore.history[selectedElms.value[key]]
const item_id = selectedElms.value[key]
if (!item_id) {
continue
}
const item = stateStore.get('history', item_id, {} as StoreItem) as StoreItem
if ('finished' !== item.status || !item.filename) {
continue
}
files_list.push(item.folder ? item.folder + '/' + item.filename : item.filename)
}
selectedElms.value = []
try {
const response = await request('/api/file/download', {
method: 'POST',
credentials: 'include',
body: JSON.stringify(files_list),
});
const json = await response.json();
})
const json = await response.json()
if (!response.ok) {
toast.error(json.error || 'Failed to start download.');
toast.error(json.error || 'Failed to start download.')
return
}
const token = json.token
const body = document.querySelector('body')
const link = document.createElement('a');
link.href = uri(`/api/file/download/${token}`);
link.setAttribute('target', '_blank');
body.appendChild(link);
link.click();
body.removeChild(link);
} catch (e) {
console.error(e);
toast.error(`Error: ${e.message}`);
return;
const link = document.createElement('a')
link.href = uri(`/api/file/download/${token}`)
link.setAttribute('target', '_blank')
body?.appendChild(link)
link.click()
body?.removeChild(link)
} catch (e: any) {
console.error(e)
toast.error(`Error: ${e.message}`)
return
}
}
const toggle_class = e => ['is-text-overflow', 'is-word-break'].forEach(c => e.currentTarget.classList.toggle(c))
const toggle_class = (e: Event) => ['is-text-overflow', 'is-word-break'].forEach(c => (e.currentTarget as HTMLElement).classList.toggle(c))
const removeFromArchiveDialog = (item) => {
const removeFromArchiveDialog = (item: StoreItem) => {
dialog_confirm.value.visible = true
dialog_confirm.value.title = 'Remove from Archive'
dialog_confirm.value.message = `Remove '${item.title ?? item.id ?? item.url ?? '??'}' from archive?`
dialog_confirm.value.message = `Remove '${item.title || item.id || item.url || '??'}' from archive?`
dialog_confirm.value.confirm = () => removeFromArchive(item)
}
const removeFromArchive = async (item, opts) => {
const removeFromArchive = async (item: StoreItem, opts?: { remove_history?: boolean }) => {
try {
const req = await request(`/api/archive/${item._id}`, {
credentials: 'include',
method: 'DELETE',
})
const data = await req.json()
if (!req.ok) {
toast.error(data.error)
return
}
toast.success(data.message ?? `Removed '${item.title ?? item.id ?? item.url ?? '??'}' from archive.`)
} catch (e) {
toast.success(data.message || `Removed '${item.title || item.id || item.url || '??'}' from archive.`)
} catch (e: any) {
console.error(e)
toast.error(`Error: ${e.message}`)
} finally {
dialog_confirm.value.visible = false
}
if (opts?.remove_history) {
socket.emit('item_delete', { id: item._id, remove_file: false })
}
}
const is_queued = item => {
const is_queued = (item: StoreItem) => {
if (!item?.status || 'not_live' !== item.status) {
return ''
}
return item.live_in || item.extras?.live_in || item.extras?.release_in ? 'fa-spin fa-spin-10' : ''
}
const makePath = item => {
const makePath = (item: StoreItem) => {
if (!item?.filename) {
return ''
}
const real_path = eTrim(item.download_dir, '/') + '/' + sTrim(item.filename, '/')
return real_path.replace(config.app.download_path, '').replace(/^\//, '')
}
</script>

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

@ -108,7 +108,7 @@
<td>
<div class="progress-bar is-unselectable">
<div class="progress-percentage">{{ updateProgress(item) }}</div>
<div class="progress" :style="{ width: percentPipe(item.percent) + '%' }"></div>
<div class="progress" :style="{ width: percentPipe(item.percent as number) + '%' }"></div>
</div>
</td>
<td class="has-text-centered is-text-overflow is-unselectable">
@ -119,7 +119,8 @@
<Dropdown icons="fa-solid fa-cogs" @open_state="s => table_container = !s"
:button_classes="'is-small'" label="Actions">
<template v-if="isEmbedable(item.url)">
<NuxtLink class="dropdown-item has-text-danger" @click="embed_url = getEmbedable(item.url)">
<NuxtLink class="dropdown-item has-text-danger"
@click="embed_url = getEmbedable(item.url) as string">
<span class="icon"><i class="fa-solid fa-play" /></span>
<span>Play video</span>
</NuxtLink>
@ -202,7 +203,8 @@
</header>
<div v-if="showThumbnails" class="card-image">
<figure class="image is-3by1">
<span v-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url)" class="play-overlay">
<span v-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url) as string"
class="play-overlay">
<div class="play-icon embed-icon"></div>
<img @load="e => pImg(e)" :src="uri('/api/thumbnail?url=' + encodePath(item.extras.thumbnail))"
v-if="item.extras?.thumbnail" />
@ -220,7 +222,7 @@
<div class="column is-12">
<div class="progress-bar is-unselectable">
<div class="progress-percentage">{{ updateProgress(item) }}</div>
<div class="progress" :style="{ width: percentPipe(item.percent) + '%' }"></div>
<div class="progress" :style="{ width: percentPipe(item.percent as number) + '%' }"></div>
</div>
</div>
<div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
@ -267,7 +269,8 @@
<div class="column is-half-mobile">
<Dropdown icons="fa-solid fa-cogs" @open_state="s => table_container = !s" label="Actions">
<template v-if="isEmbedable(item.url)">
<NuxtLink class="dropdown-item has-text-danger" @click="embed_url = getEmbedable(item.url)">
<NuxtLink class="dropdown-item has-text-danger"
@click="embed_url = getEmbedable(item.url) as string">
<span class="icon"><i class="fa-solid fa-play" /></span>
<span>Play video</span>
</NuxtLink>
@ -312,26 +315,27 @@
</div>
</template>
<script setup>
<script setup lang="ts">
import moment from 'moment'
import { useStorage } from '@vueuse/core'
import type { StoreItem } from '~/types/store'
const emitter = defineEmits<{
(e: 'getInfo', url: string, preset: string): void
(e: 'getItemInfo', id: string): void
(e: 'clear_search'): void
}>()
const props = defineProps<{
thumbnails?: boolean
query?: string
}>()
const emitter = defineEmits(['getInfo', 'clear_search', 'getItemInfo'])
const props = defineProps({
thumbnails: {
type: Boolean,
default: true
},
query: {
type: String,
required: false,
default: ''
}
})
const config = useConfigStore()
const stateStore = useStateStore()
const socket = useSocketStore()
const box = useConfirm()
const toast = useNotification()
const showQueue = useStorage('showQueue', true)
const hideThumbnail = useStorage('hideThumbnailQueue', false)
@ -339,135 +343,116 @@ const display_style = useStorage('display_style', 'cards')
const bg_enable = useStorage('random_bg', true)
const bg_opacity = useStorage('random_bg_opacity', 0.95)
const selectedElms = ref([])
const selectedElms = ref<string[]>([])
const masterSelectAll = ref(false)
const embed_url = ref('')
const table_container = ref(false)
const showThumbnails = computed(() => props.thumbnails && !hideThumbnail.value)
const showThumbnails = computed(() => !!props.thumbnails && !hideThumbnail.value)
watch(masterSelectAll, (value) => {
for (const key in stateStore.queue) {
const element = stateStore.queue[key]
if (value) {
selectedElms.value.push(element._id)
} else {
selectedElms.value = []
}
if (value) {
selectedElms.value = Object.values(stateStore.queue).map((element: StoreItem) => element._id)
} else {
selectedElms.value = []
}
})
const filteredItems = computed(() => {
const q = props.query?.toLowerCase();
const filteredItems = computed<StoreItem[]>(() => {
const q = props.query?.toLowerCase()
if (!q) {
return Object.values(stateStore.queue)
}
return Object.values(stateStore.queue).filter(i => Object.values(i).some(v => typeof v === 'string' && v.toLowerCase().includes(q)));
});
return Object.values(stateStore.queue).filter((i: StoreItem) =>
Object.values(i).some(v => typeof v === 'string' && v.toLowerCase().includes(q))
)
})
const hasSelected = computed(() => selectedElms.value.length > 0)
const hasQueuedItems = computed(() => stateStore.count('queue') > 0)
const hasSelected = computed(() => 0 < selectedElms.value.length)
const hasQueuedItems = computed(() => 0 < stateStore.count('queue'))
const hasManualStart = computed(() => {
if (stateStore.count('queue') < 0) {
if (0 > stateStore.count('queue')) {
return false
}
for (const key in stateStore.queue) {
const item = stateStore.queue[key]
if (!item.status && item.auto_start === false) {
const item = stateStore.queue[key] as StoreItem
if (!item.status && false === item.auto_start) {
return true
}
}
return false
})
const hasPausable = computed(() => {
if (stateStore.count('queue') < 0) {
if (0 > stateStore.count('queue')) {
return false
}
for (const key in stateStore.queue) {
const item = stateStore.queue[key]
if (!item.status && item.auto_start === true) {
const item = stateStore.queue[key] as StoreItem
if (!item.status && true === item.auto_start) {
return true
}
}
return false
})
const setIcon = item => {
const setIcon = (item: StoreItem): string => {
if (!item.auto_start) {
return 'fa-hourglass-half'
}
if ('downloading' === item.status && item.is_live) {
return 'fa-globe fa-spin'
}
if ('downloading' === item.status) {
return 'fa-download'
}
if ('postprocessing' === item.status) {
return 'fa-cog fa-spin'
}
if (null === item.status && true === config.paused) {
return 'fa-pause-circle'
}
if (!item.status) {
return 'fa-question'
}
return 'fa-spinner fa-spin'
}
const setStatus = item => {
const setStatus = (item: StoreItem): string => {
if (!item.auto_start) {
return 'Pending'
}
if (null === item.status && true === config.paused) {
return 'Paused'
}
if ('downloading' === item.status && item.is_live) {
return 'Streaming'
}
if ('preparing' === item.status) {
return ag(item, 'extras.external_downloader') ? 'External-DL' : 'Preparing..';
// @ts-ignore
return ag(item, 'extras.external_downloader') ? 'External-DL' : 'Preparing..'
}
if (!item.status) {
return 'Unknown...'
}
return ucFirst(item.status)
}
const setIconColor = item => {
if (item.status === 'downloading') {
const setIconColor = (item: StoreItem): string => {
if ('downloading' === item.status) {
return 'has-text-success'
}
if ('postprocessing' === item.status) {
return 'has-text-info'
}
if (!item.auto_start || (null === item.status && true === config.paused)) {
return 'has-text-warning'
}
return ''
}
const ETAPipe = value => {
if (value === null || 0 === value) {
const ETAPipe = (value: number | null): string => {
if (null === value || 0 === value) {
return 'Live'
}
if (value < 60) {
@ -481,11 +466,10 @@ const ETAPipe = value => {
return `${hours}h ${Math.floor(minutes / 60)}m ${Math.round(minutes % 60)}s`
}
const speedPipe = value => {
const speedPipe = (value: number | null): string => {
if (null === value || 0 === value) {
return '0KB/s'
}
const k = 1024
const dm = 2
const sizes = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s', 'EB/s', 'ZB/s', 'YB/s']
@ -493,46 +477,39 @@ const speedPipe = value => {
return parseFloat((value / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
}
const percentPipe = value => {
if (value === null || 0 === value) {
const percentPipe = (value: number | null): string => {
if (null === value || 0 === value) {
return '00.00'
}
return parseFloat(value).toFixed(2)
return parseFloat(String(value)).toFixed(2)
}
const updateProgress = (item) => {
const updateProgress = (item: StoreItem): string => {
let string = ''
if (!item.auto_start) {
return 'Manual start'
}
if (null === item.status && true === config.paused) {
return 'Global Pause'
}
if ('postprocessing' === item.status) {
return 'Post-processors are running.'
}
if ('preparing' === item.status) {
// @ts-ignore
return ag(item, 'extras.external_downloader') ? 'External downloader.' : 'Preparing'
}
if (null != item.status) {
string += item.percent && !item.is_live ? percentPipe(item.percent) + '%' : 'Live'
}
string += item.speed ? ' - ' + speedPipe(item.speed) : ' - Waiting..'
if (null != item.status && item.eta) {
string += ' - ' + ETAPipe(item.eta)
}
return string;
return string
}
const confirmCancel = item => {
const confirmCancel = (item: StoreItem) => {
if (true !== box.confirm(`Cancel '${item.title}'?`)) {
return false
}
@ -542,97 +519,84 @@ const confirmCancel = item => {
const cancelSelected = () => {
if (true !== box.confirm(`Cancel '${selectedElms.value.length}' selected items?`)) {
return false;
return false
}
cancelItems(selectedElms.value)
selectedElms.value = []
return true;
return true
}
const cancelItems = item => {
const items = []
if (typeof item === 'object') {
const cancelItems = (item: string | string[]) => {
const items: string[] = []
if ('object' === typeof item) {
for (const key in item) {
items.push(item[key])
items.push((item as any)[key])
}
} else {
items.push(item)
}
if (items.length < 0) {
if (0 > items.length) {
return
}
items.forEach(id => socket.emit('item_cancel', id))
}
const startItem = item => socket.emit('item_start', item._id)
const pauseItem = item => socket.emit('item_pause', item._id)
const startItem = (item: StoreItem) => socket.emit('item_start', item._id)
const pauseItem = (item: StoreItem) => socket.emit('item_pause', item._id)
const startItems = () => {
if (selectedElms.value.length < 1) {
if (1 > selectedElms.value.length) {
return
}
let filtered = []
let filtered: string[] = []
selectedElms.value.forEach(id => {
const item = stateStore.get('queue', id)
const item = stateStore.get('queue', id) as StoreItem
if (item && !item.auto_start && !item.status) {
filtered.push(id)
}
})
selectedElms.value = []
if (filtered.length < 1) {
if (1 > filtered.length) {
toast.error('No eligible items to start.')
return
}
if (true !== box.confirm(`Start '${filtered.length}' selected items?`)) {
return false
}
filtered.forEach(id => socket.emit('item_start', id))
}
const pauseSelected = () => {
if (selectedElms.value.length < 1) {
if (1 > selectedElms.value.length) {
return
}
let filtered = []
let filtered: string[] = []
selectedElms.value.forEach(id => {
const item = stateStore.get('queue', id)
const item = stateStore.get('queue', id) as StoreItem
if (item && item.auto_start && !item.status) {
filtered.push(id)
}
})
selectedElms.value = []
if (filtered.length < 1) {
if (1 > filtered.length) {
toast.error('No eligible items to pause.')
return
}
if (true !== box.confirm(`Pause '${filtered.length}' selected items?`)) {
return false
}
filtered.forEach(id => socket.emit('item_pause', id))
}
const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
const pImg = (e: Event) => {
const target = e.target as HTMLImageElement
target.naturalHeight > target.naturalWidth ? target.classList.add('image-portrait') : null
}
watch(embed_url, v => {
if (!bg_enable.value) {
return
}
document.querySelector('body').setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
document.querySelector('body')?.setAttribute('style', `opacity: ${v ? 1 : bg_opacity.value}`)
})
</script>

10
ui/app/types/store.d.ts vendored
View file

@ -1,5 +1,5 @@
export type ItemStatus = 'finished' | 'preparing' | 'error' | 'cancelled' | 'downloading' | 'postprocessing' | 'not_live' | null;
export type StoreItem = {
type ItemStatus = 'finished' | 'preparing' | 'error' | 'cancelled' | 'downloading' | 'postprocessing' | 'not_live' | 'skip' | null;
type StoreItem = {
/** Unique identifier for the item */
_id: string
/** Error message if available */
@ -59,6 +59,10 @@ export type StoreItem = {
/** If the item has audio stream */
is_video?: boolean
/** If the item has video stream */
live_in?: string
/** Live stream start time if available */
is_premiere?: boolean
/** If the item is a premiere */
}
/** The item temporary filename */
tmpfilename?: string | null
@ -79,3 +83,5 @@ export type StoreItem = {
/** Time remaining for the item download if available */
eta?: number | null
}
export type { ItemStatus, StoreItem }