mirror of
https://github.com/Drop-OSS/drop-app.git
synced 2025-11-14 00:31:33 +10:00
Merge develop into main (#25)
* chore(process manager): refactor for generic way to implement cross platform launchers * feat(game): game uninstalling & partial compat * chore(metadata): update metadata * feat(errors): better download manager errors + modal * feat(process): better process management, including running state * feat(downloads): lockless tracking of downloaded chunks * fix(sign on): add message about nonce expiration * feat(download ui): add speed and time remaining information closes #7 Co-authored-by: AdenMGB <140392385+AdenMGB@users.noreply.github.com> * chore: Ran cargo clippy Signed-off-by: quexeky <git@quexeky.dev> * fix(auth initiate): add better error message * feat(auth): offer manual signin * feat(install modal): add note about more install dirs * fix(install flow): clear stale data before requesting new * Delete pages/library.vue * Add files via upload * adds nvm rc! * feat(install modal): add note about more install dirs * fix(install flow): clear stale data before requesting new * Delete pages/library.vue * Add files via upload * fix(library page): fix install button * fix(process): fix poorly designed parsing for executables with spaces * fix(scrollbars): fix ugly scrollbars on edge webview * feat(Compat): Implemented spawning with umu (using umu-wrapper-lib) Signed-off-by: quexeky <git@quexeky.dev> * feat(process manager): Game kill tauri command Signed-off-by: quexeky <git@quexeky.dev> * fix(deep links): Re-enabled deep links Signed-off-by: quexeky <git@quexeky.dev> * feat(process): shared child with stop command * squash(autostart): added adenmgb's autostart feature Squashed commit of the following: commit085cd9481dAuthor: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com> Date: Mon Dec 30 16:29:41 2024 +1030 Update lib.rs for the DB sync of autostart commit86f2fb19bdAuthor: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com> Date: Mon Dec 30 16:29:13 2024 +1030 Update db.rs to accomidate the settings sync commitece11e7581Author: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com> Date: Mon Dec 30 16:27:48 2024 +1030 Update autostart.rs to include DB commit7ea8a24fdcAuthor: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com> Date: Mon Dec 30 15:17:38 2024 +1030 Add files via upload commitaf2f232d94Author: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com> Date: Mon Dec 30 15:17:09 2024 +1030 Delete src-tauri/Cargo.toml commit5d27b65612Author: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com> Date: Mon Dec 30 15:15:42 2024 +1030 Add files via upload commit2eea7b97a8Author: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com> Date: Mon Dec 30 15:15:31 2024 +1030 Delete src-tauri/src/lib.rs commit9a635a10d1Author: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com> Date: Mon Dec 30 15:14:49 2024 +1030 Add files via upload commit2fb049531aAuthor: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com> Date: Mon Dec 30 15:13:37 2024 +1030 Add files via upload commitea1be4d750Author: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com> Date: Mon Dec 30 15:13:20 2024 +1030 Delete pages/settings/index.vue * fix(download manager): fix incorrect error assumptions & update types * feat(account settings): Add signout functionality (#16) * Create account.vue with logout button * Update auth.rs to add signout command * Update lib.rs to pass sign_out command to frontend * feat(settings): add debug page * Create debug.rs * Update settings.vue to add tab for debug * Update main.scss to add light theme * Update interface.vue to add light mode * Create debug.vue * Update debug.vue too add open log button * Update lib.rs * Update debug.rs * Update debug.rs * Update lib.rs * Update lib.rs * Update debug.rs * Update debug.vue * fix(debug): refactor and cleanup * revert(theme): revert light theming --------- Co-authored-by: DecDuck <declanahofmeyr@gmail.com> * feat(library ui): add installed ui in the library menu * chore(tool manager): Progress on adding tools Going to try changing around the download manager to take a generic trait rather than specifically for game downloads Signed-off-by: quexeky <git@quexeky.dev> * refactor(download manager): Moved download manager to separate directory Signed-off-by: quexeky <git@quexeky.dev> * refactor(download manager): Added Downloadable trait and replaced references to GameDownloadAgent Signed-off-by: quexeky <git@quexeky.dev> * chore(download manager): Renamed most instances of "game" outside of actual game downloads Signed-off-by: quexeky <git@quexeky.dev> * refactor(download manager): Renamed GameDonwloadError to ApplicationDownloadError and moved Signed-off-by: quexeky <git@quexeky.dev> * chore(download manager): Some easy cleanup of the download manager Signed-off-by: quexeky <git@quexeky.dev> * chore(download manager): Ensure that Downloadable is also send and sync Signed-off-by: quexeky <git@quexeky.dev> * refactor(download manager): Moved manifest and stored_manifest to download_manager Signed-off-by: quexeky <git@quexeky.dev> * Revert "refactor(download manager): Moved manifest and stored_manifest to download_manager" This reverts commit8db2393346. * chore(tool manager): Added ToolDownloadAgent Signed-off-by: quexeky <git@quexeky.dev> * chore(download manager): Added manage_queue_signal Signed-off-by: quexeky <git@quexeky.dev> * chore(download manager): Added manage_go_signal command Signed-off-by: quexeky <git@quexeky.dev> * refactor(download manager): Removed all references to anything outside of the DownloadManager Signed-off-by: quexeky <git@quexeky.dev> * refactor(download manager): Fully separate & generic download manager Signed-off-by: quexeky <git@quexeky.dev> * refactor(download manager): Removed Arc requirement for DownloadableMetadata Signed-off-by: quexeky <git@quexeky.dev> * feat(download manager): Added generic download manager Signed-off-by: quexeky <git@quexeky.dev> * fix(game launcher): Renamed game_id to id Signed-off-by: quexeky <git@quexeky.dev> * fix(uninstalling): Re-enabled uninstalling apps Signed-off-by: quexeky <git@quexeky.dev> * refactor(downloads): Moved all files relevant to game downloads to their own directory Signed-off-by: quexeky <git@quexeky.dev> * fix(kill game): Re-enabled killing games Signed-off-by: quexeky <git@quexeky.dev> * feat(recovery): Added database recovery Signed-off-by: quexeky <git@quexeky.dev> * feat(database): Added database corruption dialog Signed-off-by: quexeky <git@quexeky.dev> * chore(README): Updated README.md Signed-off-by: quexeky <git@quexeky.dev> * perf(game downloads): Moved some variable declarations outside of the spawned download thread Signed-off-by: quexeky <git@quexeky.dev> * fix(game downloads): Accidentally was attempting to lock onto something that was already in scope Signed-off-by: quexeky <git@quexeky.dev> * fix(db): Added Settings component Signed-off-by: quexeky <git@quexeky.dev> * refactor: Ran cargo clippy & fmt Signed-off-by: quexeky <git@quexeky.dev> * chore: More cleanup after cargo clippy Also added some type efficiency improvements (using references where possible and added SliceDeque crate) Signed-off-by: quexeky <git@quexeky.dev> * feat(settings): Added max_download_threads setting and separated settings from db Signed-off-by: quexeky <git@quexeky.dev> * chore: Moved generateGameMeta.ts to composables, using PathBuf instead of String for install_dirs Signed-off-by: quexeky <git@quexeky.dev> * chore: General cleanup - Changed some info!() statements to debug!() and warn!() - Removed most Turbofish syntax cases - Removed InvalidCodeError and replaced it with InvalidResponse Signed-off-by: quexeky <git@quexeky.dev> * chore: Removed tests/ Signed-off-by: quexeky <git@quexeky.dev> * chore: Removed tools/ Signed-off-by: quexeky <git@quexeky.dev> * chore: More refining info!() statements Signed-off-by: quexeky <git@quexeky.dev> * feat(download manager): Added UI to change download threads Co-authored-by: AdenMGB <140392385+AdenMGB@users.noreply.github.com> Signed-off-by: quexeky <git@quexeky.dev> * fix(metadata): update routes for new server * fix(handle invalid database): use set_file_name instead of pushing to strings * refactor(compat): remove unnecessary compat code (#20) * Delete pages/settings/compatibility.vue * Update settings.vue * Update debug.vue * Update lib.rs * Update compat.rs * feat(debug): use shift or DEBUG RUST_LOG to show Debug Info * Update settings.vue to have a conditional debug page * Update debug.rs to add RUST_LOG status fetching * Implement better error system and segregate errors and commands (#23) * chore: Progress on amend_settings command Signed-off-by: quexeky <git@quexeky.dev> * chore(errors): Progress on better error handling with segragation of files * chore: Progress on amend_settings command Signed-off-by: quexeky <git@quexeky.dev> * chore(commands): Separated commands under each subdirectory into respective commands.rs files Signed-off-by: quexeky <git@quexeky.dev> * chore(errors): Almost all errors and commands have been segregated * chore(errors): Added drop server error Signed-off-by: quexeky <git@quexeky.dev> * feat(core): Update to using nightly compiler Signed-off-by: quexeky <git@quexeky.dev> * chore(errors): More progress on error handling Signed-off-by: quexeky <git@quexeky.dev> * chore(errors): Implementing Try and FromResidual for UserValue Signed-off-by: quexeky <git@quexeky.dev> * refactor(errors): Segregated errors and commands from code, and made commands return UserValue struct Signed-off-by: quexeky <git@quexeky.dev> * fix(errors): Added missing files * chore(errors): Convert match statement to map_err * feat(settings): Implemented settings editing from UI * feat(errors): Clarified return values from retry_connect command * chore(errors): Moved autostart commands to autostart.rs * chore(process manager): Converted launch_process function for games to use game_id --------- Signed-off-by: quexeky <git@quexeky.dev> * fix(settings): Broken command invoke logic in settings/downloads.vue * feat(logging): Added line numbers to file logging and highlighting to console * chore(progress): Added rolling_progress_updates.rs Signed-off-by: quexeky <git@quexeky.dev> * chore(exit): Progress on cleanup and exit * chore(downloads): Progress on terminator * chore: Progress on rolling progress window * feat(progress): Added rolling progress window Still needs tweaks on specific timings, as well as cleanup * refactor(remote): Created separate function to generate requests * fix(install ui): stop loading on error * fix: fix other metadata endpoints * feat(errors): Using SerializeDisplay for better error management with Result * chore: Update .gitlab-ci.yml * refactor(logging): Using more appropriate logging statements Still probably needs some work, but that's enough for now * chore(logging): Imported appropriate logging macros * Revert "chore: Update .gitlab-ci.yml" This reverts commitfc6bab9381. * feat(settings): Allow settings to update UI using fetch_settings command * style(logging): Ensured that all logs start with lowercase capital and have no trailing punctuation * fix(download manager): don't crash download manager if multiple errors come in * feat(downloads): re-enable checksums * fix(logs): add file & line to console logs * fix(ui): modal stack doesn't cover whole app * feat(database): Ensure that any database issues are resolved by standalone functions Functions are as follows: - save_db() - borrow_db_checked() - borrow_db_mut_checked() * chore: Ran cargo clippy & cargo fmt * fix: assorted fixes * fix(download agent): fixed completed indexes * fix: Adding usize to completed_contexts_lock instead of &usize * fix(game downloads): Added error handling for chunk request errors * chore: Apply stashed changes * feat(games): Added multi-argument game launch and setup support * fix: Games not launching due to string semantics * build: Version bump & appimage build * chore: Update .gitlab-ci.yml * Update .gitlab-ci.yml * Update .gitlab-ci.yml with artifacts * feat(settings): Made save button include user feedback & only allow numeric characters * fix(library): Added "LIbrary Failed to Update" content to recover from library load fail * fix(logging): Restored RUST_LOG env functionality * Update changelog.md --------- Signed-off-by: quexeky <git@quexeky.dev> Signed-off-by: DecDuck <declanahofmeyr@gmail.com> Co-authored-by: DecDuck <declanahofmeyr@gmail.com> Co-authored-by: AdenMGB <140392385+AdenMGB@users.noreply.github.com> Co-authored-by: seethruhead <shane.keulen@gmail.com>
This commit is contained in:
quexeky
GitHub
72
pages/account.vue
Normal file
72
pages/account.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="mx-auto max-w-7xl px-8">
|
||||
<div class="border-b border-zinc-700 py-5">
|
||||
<h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
|
||||
Account
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<div class="divide-y divide-zinc-700">
|
||||
<div class="py-6">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium leading-6 text-zinc-100">Sign out</h3>
|
||||
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
||||
Sign out of your Drop account on this device
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@click="signOut"
|
||||
type="button"
|
||||
class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||
>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { listen } from '@tauri-apps/api/event'
|
||||
import { useRouter } from '#imports'
|
||||
import { XCircleIcon } from "@heroicons/vue/16/solid";
|
||||
|
||||
const router = useRouter()
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// Listen for auth events
|
||||
onMounted(async () => {
|
||||
await listen('auth/signedout', () => {
|
||||
router.push('/auth/signedout')
|
||||
})
|
||||
})
|
||||
|
||||
async function signOut() {
|
||||
try {
|
||||
error.value = null
|
||||
await invoke('sign_out')
|
||||
} catch (e) {
|
||||
error.value = `Failed to sign out: ${e}`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -26,7 +26,7 @@
|
||||
import { XCircleIcon } from "@heroicons/vue/16/solid";
|
||||
|
||||
const route = useRoute();
|
||||
const message = route.query.error ?? "An unknown error occurred.";
|
||||
const message = route.query.error ?? "An unknown error occurred";
|
||||
|
||||
definePageMeta({
|
||||
layout: "mini",
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<template />
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: false
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,56 +1,75 @@
|
||||
<template>
|
||||
<div class="flex flex-row h-full">
|
||||
<div class="flex-none max-h-full overflow-y-auto w-64 bg-zinc-950 px-2 py-1">
|
||||
<div
|
||||
class="flex-none max-h-full overflow-y-auto w-64 bg-zinc-950 px-2 py-1"
|
||||
>
|
||||
<ul class="flex flex-col gap-y-1">
|
||||
<NuxtLink
|
||||
v-for="(nav, navIdx) in navigation"
|
||||
:key="nav.route"
|
||||
:class="[
|
||||
'transition group rounded flex justify-between gap-x-6 py-2 px-3',
|
||||
navIdx === currentNavigationIndex ? 'bg-zinc-900' : '',
|
||||
'transition-all duration-200 rounded-lg flex items-center py-1.5 px-3',
|
||||
navIdx === currentNavigationIndex
|
||||
? 'bg-zinc-800 text-zinc-100'
|
||||
: nav.isInstalled.value
|
||||
? 'text-zinc-300 hover:bg-zinc-800/90 hover:text-zinc-200'
|
||||
: 'text-zinc-500 hover:bg-zinc-800/70 hover:text-zinc-300',
|
||||
]"
|
||||
:href="nav.route"
|
||||
>
|
||||
<div class="flex items-center min-w-0 gap-x-2">
|
||||
<div class="flex items-center w-full gap-x-3">
|
||||
<img
|
||||
class="h-5 w-auto flex-none object-cover rounded-sm bg-zinc-900"
|
||||
class="size-6 flex-none object-cover bg-zinc-900 rounded"
|
||||
:src="icons[navIdx]"
|
||||
alt=""
|
||||
/>
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p
|
||||
:class="[
|
||||
navIdx === currentNavigationIndex
|
||||
? 'text-zinc-100'
|
||||
: 'text-zinc-400 group-hover:text-zinc-300',
|
||||
'truncate transition text-sm font-display leading-6',
|
||||
]"
|
||||
>
|
||||
{{ nav.label }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="truncate text-sm font-display leading-6 flex-1">
|
||||
{{ nav.label }}
|
||||
</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="grow overflow-y-auto">
|
||||
<NuxtPage />
|
||||
<NuxtPage :libraryDownloadError = "libraryDownloadError" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import type { Game, NavigationItem } from "~/types";
|
||||
import { GameStatusEnum, type Game, type NavigationItem } from "~/types";
|
||||
|
||||
const games: Array<Game> = await invoke("fetch_library");
|
||||
const icons = await Promise.all(games.map((e) => useObject(e.mIconId)));
|
||||
let libraryDownloadError = false;
|
||||
|
||||
const navigation = games.map((e) => {
|
||||
const item: NavigationItem = {
|
||||
label: e.mName,
|
||||
route: `/library/${e.id}`,
|
||||
prefix: `/library/${e.id}`,
|
||||
async function calculateGames(): Promise<Game[]> {
|
||||
try {
|
||||
return await invoke("fetch_library");
|
||||
}
|
||||
catch(e) {
|
||||
libraryDownloadError = true;
|
||||
return new Array();
|
||||
}
|
||||
}
|
||||
|
||||
const rawGames: Array<Game> = await calculateGames();
|
||||
const games = await Promise.all(rawGames.map((e) => useGame(e.id)));
|
||||
const icons = await Promise.all(
|
||||
games.map(({ game, status }) => useObject(game.mIconId))
|
||||
);
|
||||
|
||||
const navigation = games.map(({ game, status }) => {
|
||||
const isInstalled = computed(
|
||||
() =>
|
||||
status.value.type == GameStatusEnum.Installed ||
|
||||
status.value.type == GameStatusEnum.SetupRequired
|
||||
);
|
||||
|
||||
const item = {
|
||||
label: game.mName,
|
||||
route: `/library/${game.id}`,
|
||||
prefix: `/library/${game.id}`,
|
||||
isInstalled,
|
||||
};
|
||||
return item;
|
||||
});
|
||||
|
||||
@ -20,8 +20,10 @@
|
||||
<div class="h-full flex flex-row gap-x-4 items-stretch">
|
||||
<GameStatusButton
|
||||
@install="() => installFlow()"
|
||||
@play="() => play()"
|
||||
@launch="() => launch()"
|
||||
@queue="() => queue()"
|
||||
@uninstall="() => uninstall()"
|
||||
@kill="() => kill()"
|
||||
:status="status"
|
||||
/>
|
||||
<a
|
||||
@ -38,285 +40,222 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TransitionRoot as="template" :show="installFlowOpen">
|
||||
<Dialog class="relative z-50" @close="installFlowOpen = false">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
|
||||
/>
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
|
||||
<div
|
||||
class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
|
||||
>
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-out duration-300"
|
||||
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enter-to="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<form
|
||||
@submit.prevent="() => install()"
|
||||
class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
|
||||
>
|
||||
<div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div class="mt-3 text-center sm:mt-0 sm:text-left">
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
class="text-base font-semibold text-zinc-100"
|
||||
>Install {{ game.mName }}?
|
||||
</DialogTitle>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-zinc-400">
|
||||
Drop will add {{ game.mName }} to the queue to be
|
||||
downloaded. While downloading, Drop may use up a large
|
||||
amount of resources, particularly network bandwidth and
|
||||
CPU utilisation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div v-if="versionOptions && versionOptions.length > 0">
|
||||
<Listbox as="div" v-model="installVersionIndex">
|
||||
<ListboxLabel
|
||||
class="block text-sm/6 font-medium text-zinc-100"
|
||||
>Version</ListboxLabel
|
||||
>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
|
||||
>
|
||||
<span class="block truncate"
|
||||
>{{
|
||||
versionOptions[installVersionIndex].versionName
|
||||
}}
|
||||
on
|
||||
{{
|
||||
versionOptions[installVersionIndex].platform
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
|
||||
>
|
||||
<ChevronUpDownIcon
|
||||
class="h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-100"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
as="template"
|
||||
v-for="(version, versionIdx) in versionOptions"
|
||||
:key="version.versionName"
|
||||
:value="versionIdx"
|
||||
v-slot="{ active, selected }"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'text-zinc-300',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
selected
|
||||
? 'font-semibold text-zinc-100'
|
||||
: 'font-normal',
|
||||
'block truncate',
|
||||
]"
|
||||
>{{ version.versionName }} on
|
||||
{{ version.platform }}</span
|
||||
>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
]"
|
||||
>
|
||||
<CheckIcon
|
||||
class="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
<div v-else class="mt-1 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon
|
||||
class="h-5 w-5 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
There are no supported versions to install. Please
|
||||
contact your server admin or try again later.
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="installDirs">
|
||||
<Listbox as="div" v-model="installDir">
|
||||
<ListboxLabel
|
||||
class="block text-sm/6 font-medium text-zinc-100"
|
||||
>Install to</ListboxLabel
|
||||
>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
|
||||
>
|
||||
<span class="block truncate">{{
|
||||
installDirs[installDir]
|
||||
}}</span>
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
|
||||
>
|
||||
<ChevronUpDownIcon
|
||||
class="h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-100"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
as="template"
|
||||
v-for="(dir, dirIdx) in installDirs"
|
||||
:key="dir"
|
||||
:value="dirIdx"
|
||||
v-slot="{ active, selected }"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'text-zinc-300',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
selected
|
||||
? 'font-semibold text-zinc-100'
|
||||
: 'font-normal',
|
||||
'block truncate',
|
||||
]"
|
||||
>{{ dir }}</span
|
||||
>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
]"
|
||||
>
|
||||
<CheckIcon
|
||||
class="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="installError"
|
||||
class="mt-1 rounded-md bg-red-600/10 p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon
|
||||
class="h-5 w-5 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ installError }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-b-lg bg-zinc-800 px-4 py-3 sm:flex sm:gap-x-2 sm:flex-row-reverse sm:px-6"
|
||||
>
|
||||
<LoadingButton
|
||||
:disabled="
|
||||
!(
|
||||
versionOptions &&
|
||||
versionOptions.length > 0 &&
|
||||
!installDir
|
||||
)
|
||||
"
|
||||
:loading="installLoading"
|
||||
type="submit"
|
||||
class="w-full sm:w-fit"
|
||||
>
|
||||
Install
|
||||
</LoadingButton>
|
||||
<button
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
|
||||
@click="installFlowOpen = false"
|
||||
ref="cancelButtonRef"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</TransitionChild>
|
||||
<ModalTemplate v-model="installFlowOpen">
|
||||
<template #default>
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div class="mt-3 text-center sm:mt-0 sm:text-left">
|
||||
<DialogTitle as="h3" class="text-base font-semibold text-zinc-100"
|
||||
>Install {{ game.mName }}?
|
||||
</DialogTitle>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-zinc-400">
|
||||
Drop will add {{ game.mName }} to the queue to be downloaded.
|
||||
While downloading, Drop may use up a large amount of resources,
|
||||
particularly network bandwidth and CPU utilisation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<form class="space-y-6">
|
||||
<div v-if="versionOptions && versionOptions.length > 0">
|
||||
<Listbox as="div" v-model="installVersionIndex">
|
||||
<ListboxLabel class="block text-sm/6 font-medium text-zinc-100"
|
||||
>Version</ListboxLabel
|
||||
>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
|
||||
>
|
||||
<span class="block truncate"
|
||||
>{{ versionOptions[installVersionIndex].versionName }}
|
||||
on
|
||||
{{ versionOptions[installVersionIndex].platform }}</span
|
||||
>
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
|
||||
>
|
||||
<ChevronUpDownIcon
|
||||
class="h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-100"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
as="template"
|
||||
v-for="(version, versionIdx) in versionOptions"
|
||||
:key="version.versionName"
|
||||
:value="versionIdx"
|
||||
v-slot="{ active, selected }"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active ? 'bg-blue-600 text-white' : 'text-zinc-300',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
selected
|
||||
? 'font-semibold text-zinc-100'
|
||||
: 'font-normal',
|
||||
'block truncate',
|
||||
]"
|
||||
>{{ version.versionName }} on
|
||||
{{ version.platform }}</span
|
||||
>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
]"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
<div v-else class="mt-1 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
There are no supported versions to install. Please contact your
|
||||
server admin or try again later.
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="installDirs">
|
||||
<Listbox as="div" v-model="installDir">
|
||||
<ListboxLabel class="block text-sm/6 font-medium text-zinc-100"
|
||||
>Install to</ListboxLabel
|
||||
>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
|
||||
>
|
||||
<span class="block truncate">{{
|
||||
installDirs[installDir]
|
||||
}}</span>
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
|
||||
>
|
||||
<ChevronUpDownIcon
|
||||
class="h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-100"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
as="template"
|
||||
v-for="(dir, dirIdx) in installDirs"
|
||||
:key="dir"
|
||||
:value="dirIdx"
|
||||
v-slot="{ active, selected }"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active ? 'bg-blue-600 text-white' : 'text-zinc-300',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
selected
|
||||
? 'font-semibold text-zinc-100'
|
||||
: 'font-normal',
|
||||
'block truncate',
|
||||
]"
|
||||
>{{ dir }}</span
|
||||
>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="[
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
]"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="text-zinc-400 text-sm mt-2">
|
||||
Add more install directories in
|
||||
<PageWidget to="/settings/downloads">
|
||||
<WrenchIcon class="size-3" />
|
||||
Settings
|
||||
</PageWidget>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-if="installError" class="mt-1 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ installError }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<LoadingButton
|
||||
@click="() => install()"
|
||||
:disabled="
|
||||
!(versionOptions && versionOptions.length > 0 && !installDir)
|
||||
"
|
||||
:loading="installLoading"
|
||||
type="submit"
|
||||
class="ml-2 w-full sm:w-fit"
|
||||
>
|
||||
Install
|
||||
</LoadingButton>
|
||||
<button
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
|
||||
@click="installFlowOpen = false"
|
||||
ref="cancelButtonRef"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -331,7 +270,11 @@ import {
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
import {
|
||||
CheckIcon,
|
||||
ChevronUpDownIcon,
|
||||
WrenchIcon,
|
||||
} from "@heroicons/vue/20/solid";
|
||||
import { BuildingStorefrontIcon } from "@heroicons/vue/24/outline";
|
||||
import { XCircleIcon } from "@heroicons/vue/24/solid";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
@ -356,11 +299,14 @@ const versionOptions = ref<
|
||||
const installDirs = ref<undefined | Array<string>>();
|
||||
async function installFlow() {
|
||||
installFlowOpen.value = true;
|
||||
versionOptions.value = undefined;
|
||||
installDirs.value = undefined;
|
||||
|
||||
try {
|
||||
versionOptions.value = await invoke("fetch_game_verion_options", {
|
||||
gameId: game.value.id,
|
||||
});
|
||||
console.log(versionOptions.value);
|
||||
installDirs.value = await invoke("fetch_download_dir_stats");
|
||||
} catch (error) {
|
||||
installError.value = (error as string).toString();
|
||||
@ -374,24 +320,24 @@ const installDir = ref(0);
|
||||
async function install() {
|
||||
try {
|
||||
if (!versionOptions.value)
|
||||
throw new Error("Versions have not been loaded.");
|
||||
throw new Error("Versions have not been loaded");
|
||||
installLoading.value = true;
|
||||
await invoke("download_game", {
|
||||
gameId: game.value.id,
|
||||
gameVersion: versionOptions.value[installVersionIndex.value].versionName,
|
||||
installDir: installDir.value,
|
||||
});
|
||||
installLoading.value = false;
|
||||
|
||||
installFlowOpen.value = false;
|
||||
} catch (error) {
|
||||
installError.value = (error as string).toString();
|
||||
}
|
||||
|
||||
installLoading.value = false;
|
||||
}
|
||||
|
||||
async function play() {
|
||||
async function launch() {
|
||||
try {
|
||||
await invoke("launch_game", { gameId: game.value.id });
|
||||
await invoke("launch_game", { id: game.value.id });
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
@ -409,4 +355,25 @@ async function play() {
|
||||
async function queue() {
|
||||
router.push("/queue");
|
||||
}
|
||||
|
||||
async function uninstall() {
|
||||
await invoke("uninstall_game", { gameId: game.value.id });
|
||||
}
|
||||
|
||||
async function kill() {
|
||||
try {
|
||||
await invoke("kill_game", { gameId: game.value.id });
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: `Couldn't stop "${game.value.mName}"`,
|
||||
description: `Drop failed to stop "${game.value.mName}": ${e}`,
|
||||
buttonText: "Close",
|
||||
},
|
||||
(e, c) => c()
|
||||
);
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ libraryDownloadError: boolean }>();
|
||||
</script>
|
||||
<template>
|
||||
|
||||
<div v-if="libraryDownloadError" class="mx-auto pt-10 text-center text-gray-500">
|
||||
Library Failed to update
|
||||
</div>
|
||||
|
||||
</template>
|
||||
135
pages/queue.vue
135
pages/queue.vue
@ -1,27 +1,46 @@
|
||||
<template>
|
||||
<div class="bg-zinc-950 p-4 min-h-full">
|
||||
<div class="bg-zinc-950 p-4 min-h-full space-y-4">
|
||||
<div
|
||||
class="h-16 overflow-hidden relative rounded-xl flex flex-row border border-zinc-900"
|
||||
>
|
||||
<div
|
||||
class="bg-zinc-900 z-10 w-32 flex flex-col gap-x-2 text-blue-400 font-display items-left justify-center pl-2"
|
||||
>
|
||||
<span class="font-semibold">{{ formatKilobytes(stats.speed) }}/s</span>
|
||||
<span v-if="stats.time > 0" class="text-sm"
|
||||
>{{ formatTime(stats.time) }} left</span
|
||||
>
|
||||
</div>
|
||||
<div class="absolute inset-0 h-full flex flex-row items-end justify-end">
|
||||
<div
|
||||
v-for="bar in speedHistory"
|
||||
:style="{ height: `${(bar / speedMax) * 100}%` }"
|
||||
class="w-[8px] bg-blue-600/40"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<draggable v-model="queue.queue" @end="onEnd">
|
||||
<template #item="{ element }: { element: (typeof queue.value.queue)[0] }">
|
||||
<li
|
||||
v-if="games[element.id]"
|
||||
:key="element.id"
|
||||
v-if="games[element.meta.id]"
|
||||
:key="element.meta.id"
|
||||
class="mb-4 bg-zinc-900 rounded-lg flex flex-row justify-between gap-x-6 py-5 px-4"
|
||||
>
|
||||
<div class="w-full flex items-center max-w-md gap-x-4 relative">
|
||||
<img
|
||||
class="size-24 flex-none bg-zinc-800 object-cover rounded"
|
||||
:src="games[element.id].cover"
|
||||
:src="games[element.meta.id].cover"
|
||||
alt=""
|
||||
/>
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p class="text-xl font-semibold text-zinc-100">
|
||||
<NuxtLink :href="`/library/${element.id}`" class="">
|
||||
<NuxtLink :href="`/library/${element.meta.id}`" class="">
|
||||
<span class="absolute inset-x-0 -top-px bottom-0" />
|
||||
{{ games[element.id].game.mName }}
|
||||
{{ games[element.meta.id].game.mName }}
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<p class="mt-1 flex text-xs/5 text-gray-500">
|
||||
{{ games[element.id].game.mShortDescription }}
|
||||
{{ games[element.meta.id].game.mShortDescription }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,8 +58,17 @@
|
||||
:style="{ width: `${element.progress * 100}%` }"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="mt-2 inline-flex items-center gap-x-1 text-zinc-400 text-sm font-display"
|
||||
><span class="text-zinc-300">{{
|
||||
formatKilobytes(element.current / 1000)
|
||||
}}</span>
|
||||
/
|
||||
<span class="">{{ formatKilobytes(element.max / 1000) }}</span
|
||||
><ServerIcon class="size-5"
|
||||
/></span>
|
||||
</div>
|
||||
<button @click="() => cancelGame(element.id)" class="group">
|
||||
<button @click="() => cancelGame(element.meta)" class="group">
|
||||
<XMarkIcon
|
||||
class="transition size-8 flex-none text-zinc-600 group-hover:text-zinc-300"
|
||||
aria-hidden="true"
|
||||
@ -61,25 +89,72 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { XMarkIcon } from "@heroicons/vue/20/solid";
|
||||
import { ServerIcon, XMarkIcon } from "@heroicons/vue/20/solid";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import type { Game, GameStatus } from "~/types";
|
||||
import type { DownloadableMetadata, Game, GameStatus } from "~/types";
|
||||
|
||||
const windowWidth = ref(window.innerWidth);
|
||||
window.addEventListener("resize", (event) => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
});
|
||||
|
||||
const queue = useQueueState();
|
||||
|
||||
const current = computed(() => queue.value.queue.at(0));
|
||||
const rest = computed(() => queue.value.queue.slice(1));
|
||||
const stats = useStatsState();
|
||||
const speedHistory = useState<Array<number>>(() => []);
|
||||
const speedHistoryMax = computed(() => windowWidth.value / 8);
|
||||
const speedMax = computed(
|
||||
() => speedHistory.value.reduce((a, b) => (a > b ? a : b)) * 1.3
|
||||
);
|
||||
const previousGameId = ref<string | undefined>();
|
||||
|
||||
const games: Ref<{
|
||||
[key: string]: { game: Game; status: Ref<GameStatus>; cover: string };
|
||||
}> = ref({});
|
||||
|
||||
function resetHistoryGraph() {
|
||||
speedHistory.value = [];
|
||||
stats.value = { time: 0, speed: 0 };
|
||||
}
|
||||
function checkReset(v: QueueState) {
|
||||
const currentGame = v.queue.at(0)?.meta.id;
|
||||
// If we're finished
|
||||
if (!currentGame && previousGameId.value) {
|
||||
previousGameId.value = undefined;
|
||||
resetHistoryGraph();
|
||||
return;
|
||||
}
|
||||
// If we don't have a game
|
||||
if (!currentGame) return;
|
||||
// If we started a new download
|
||||
if (currentGame && !previousGameId.value) {
|
||||
previousGameId.value = currentGame;
|
||||
resetHistoryGraph();
|
||||
return;
|
||||
}
|
||||
// If it's a different game now
|
||||
if (currentGame != previousGameId.value) {
|
||||
previousGameId.value = currentGame;
|
||||
resetHistoryGraph();
|
||||
return;
|
||||
}
|
||||
}
|
||||
watch(queue, (v) => {
|
||||
loadGamesForQueue(v);
|
||||
checkReset(v);
|
||||
});
|
||||
|
||||
watch(stats, (v) => {
|
||||
const newLength = speedHistory.value.push(v.speed);
|
||||
if (newLength > speedHistoryMax.value) {
|
||||
speedHistory.value.splice(0, 1);
|
||||
}
|
||||
checkReset(queue.value);
|
||||
});
|
||||
|
||||
function loadGamesForQueue(v: typeof queue.value) {
|
||||
for (const { id } of v.queue) {
|
||||
for (const {
|
||||
meta: { id },
|
||||
} of v.queue) {
|
||||
if (games.value[id]) return;
|
||||
(async () => {
|
||||
const gameData = await useGame(id);
|
||||
@ -98,7 +173,35 @@ async function onEnd(event: { oldIndex: number; newIndex: number }) {
|
||||
});
|
||||
}
|
||||
|
||||
async function cancelGame(id: string) {
|
||||
await invoke("cancel_game", { gameId: id });
|
||||
async function cancelGame(meta: DownloadableMetadata) {
|
||||
await invoke("cancel_game", { meta });
|
||||
}
|
||||
|
||||
function formatKilobytes(bytes: number): string {
|
||||
const units = ["KB", "MB", "GB", "TB", "PB"];
|
||||
let value = bytes;
|
||||
let unitIndex = 0;
|
||||
const scalar = 1000;
|
||||
|
||||
while (value >= scalar && unitIndex < units.length - 1) {
|
||||
value /= scalar;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return `${value.toFixed(1)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
if (seconds < 60) {
|
||||
return `${Math.round(seconds)}s`;
|
||||
}
|
||||
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) {
|
||||
return `${minutes}m ${Math.round(seconds % 60)}s`;
|
||||
}
|
||||
|
||||
const hours = Math.floor(minutes / 60);
|
||||
return `${hours}h ${minutes % 60}m`;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -9,25 +9,18 @@
|
||||
<nav class="flex flex-col" aria-label="Sidebar">
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li v-for="(item, itemIdx) in navigation" :key="item.prefix">
|
||||
<NuxtLink
|
||||
:href="item.route"
|
||||
:class="[
|
||||
<NuxtLink :href="item.route" :class="[
|
||||
itemIdx === currentPageIndex
|
||||
? 'bg-zinc-800/50 text-zinc-100'
|
||||
: 'text-zinc-400 hover:bg-zinc-800/30 hover:text-zinc-200',
|
||||
'transition group flex gap-x-3 rounded-md p-2 pr-12 text-sm font-semibold leading-6',
|
||||
]">
|
||||
<component :is="item.icon" :class="[
|
||||
itemIdx === currentPageIndex
|
||||
? 'bg-zinc-800/50 text-zinc-100'
|
||||
: 'text-zinc-400 hover:bg-zinc-800/30 hover:text-zinc-200',
|
||||
'transition group flex gap-x-3 rounded-md p-2 pr-12 text-sm font-semibold leading-6',
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
:class="[
|
||||
itemIdx === currentPageIndex
|
||||
? 'text-zinc-100'
|
||||
: 'text-zinc-400 group-hover:text-zinc-200',
|
||||
'transition h-6 w-6 shrink-0',
|
||||
]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
? 'text-zinc-100'
|
||||
: 'text-zinc-400 group-hover:text-zinc-200',
|
||||
'transition h-6 w-6 shrink-0',
|
||||
]" aria-hidden="true" />
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
@ -43,13 +36,53 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ArrowDownTrayIcon,
|
||||
CubeIcon,
|
||||
HomeIcon,
|
||||
RectangleGroupIcon,
|
||||
BugAntIcon,
|
||||
} from "@heroicons/vue/16/solid";
|
||||
import type { Component } from "vue";
|
||||
import type { NavigationItem } from "~/types";
|
||||
import { platform } from '@tauri-apps/plugin-os';
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
const navigation: Array<NavigationItem & { icon: Component }> = [
|
||||
const systemData = await invoke<{
|
||||
clientId: string;
|
||||
baseUrl: string;
|
||||
dataDir: string;
|
||||
logLevel: string;
|
||||
}>("fetch_system_data");
|
||||
|
||||
const isDebugMode = ref(systemData.logLevel.toLowerCase() === "debug");
|
||||
const debugRevealed = ref(false);
|
||||
|
||||
// Track shift key state and debug reveal
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Shift') {
|
||||
isDebugMode.value = true;
|
||||
debugRevealed.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('keyup', (e) => {
|
||||
if (e.key === 'Shift') {
|
||||
isDebugMode.value = debugRevealed.value || systemData.logLevel.toLowerCase() === "debug";
|
||||
}
|
||||
});
|
||||
|
||||
// Reset debug reveal when leaving the settings page
|
||||
const router = useRouter();
|
||||
router.beforeEach((to) => {
|
||||
if (!to.path.startsWith('/settings')) {
|
||||
debugRevealed.value = false;
|
||||
isDebugMode.value = systemData.logLevel.toLowerCase() === "debug";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Make navigation reactive by wrapping in computed
|
||||
const navigation = computed(() => [
|
||||
{
|
||||
label: "Home",
|
||||
route: "/settings",
|
||||
@ -57,7 +90,7 @@ const navigation: Array<NavigationItem & { icon: Component }> = [
|
||||
icon: HomeIcon,
|
||||
},
|
||||
{
|
||||
label: "Interface",
|
||||
label: "Interface",
|
||||
route: "/settings/interface",
|
||||
prefix: "/settings/interface",
|
||||
icon: RectangleGroupIcon,
|
||||
@ -68,7 +101,21 @@ const navigation: Array<NavigationItem & { icon: Component }> = [
|
||||
prefix: "/settings/downloads",
|
||||
icon: ArrowDownTrayIcon,
|
||||
},
|
||||
];
|
||||
...(isDebugMode.value ? [{
|
||||
label: "Debug Info",
|
||||
route: "/settings/debug",
|
||||
prefix: "/settings/debug",
|
||||
icon: BugAntIcon,
|
||||
}] : []),
|
||||
]);
|
||||
|
||||
const currentPageIndex = useCurrentNavigationIndex(navigation);
|
||||
const currentPlatform = platform();
|
||||
|
||||
// Use .value to unwrap the computed ref
|
||||
const currentPageIndex = useCurrentNavigationIndex(navigation.value);
|
||||
|
||||
// Watch for navigation changes and update currentPageIndex
|
||||
watch(navigation, (newNav) => {
|
||||
currentPageIndex.value = useCurrentNavigationIndex(newNav).value;
|
||||
});
|
||||
</script>
|
||||
|
||||
136
pages/settings/debug.vue
Normal file
136
pages/settings/debug.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="divide-y divide-zinc-700">
|
||||
<div class="py-6">
|
||||
<h2 class="text-base font-semibold font-display leading-7 text-zinc-100">
|
||||
Debug Information
|
||||
</h2>
|
||||
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
||||
Technical information about your Drop client installation, helpful for
|
||||
debugging.
|
||||
</p>
|
||||
|
||||
<div class="mt-10 space-y-8">
|
||||
<div>
|
||||
<div class="flex items-center gap-x-3">
|
||||
<FingerPrintIcon class="h-5 w-5 text-zinc-400" />
|
||||
<h3 class="text-sm font-medium leading-6 text-zinc-100">
|
||||
Client ID
|
||||
</h3>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
|
||||
{{ clientId || "Not signed in" }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center gap-x-3">
|
||||
<ComputerDesktopIcon class="h-5 w-5 text-zinc-400" />
|
||||
<h3 class="text-sm font-medium leading-6 text-zinc-100">
|
||||
Platform
|
||||
</h3>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
|
||||
{{ platformInfo }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center gap-x-3">
|
||||
<ServerIcon class="h-5 w-5 text-zinc-400" />
|
||||
<h3 class="text-sm font-medium leading-6 text-zinc-100">
|
||||
Server URL
|
||||
</h3>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
|
||||
{{ baseUrl || "Not connected" }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center gap-x-3">
|
||||
<FolderIcon class="h-5 w-5 text-zinc-400" />
|
||||
<h3 class="text-sm font-medium leading-6 text-zinc-100">
|
||||
Data Directory
|
||||
</h3>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
|
||||
{{ dataDir || "Unknown" }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 flex gap-x-4">
|
||||
<button
|
||||
@click="() => openDataDir()"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<FolderIcon class="h-5 w-5" aria-hidden="true" />
|
||||
Open Data Directory
|
||||
</button>
|
||||
<button
|
||||
@click="() => openLogFile()"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<DocumentTextIcon class="h-5 w-5" aria-hidden="true" />
|
||||
Open Log File
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { platform, type } from "@tauri-apps/plugin-os";
|
||||
import {
|
||||
FingerPrintIcon,
|
||||
TagIcon,
|
||||
ComputerDesktopIcon,
|
||||
ServerIcon,
|
||||
FolderIcon,
|
||||
CubeIcon,
|
||||
DocumentTextIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
import { open } from "@tauri-apps/plugin-shell";
|
||||
|
||||
const clientId = ref<string | null>(null);
|
||||
const platformInfo = ref("Loading...");
|
||||
const baseUrl = ref<string | null>(null);
|
||||
const dataDir = ref<string | null>(null);
|
||||
|
||||
const systemData = await invoke<{
|
||||
clientId: string;
|
||||
baseUrl: string;
|
||||
dataDir: string;
|
||||
}>("fetch_system_data");
|
||||
|
||||
console.log(systemData);
|
||||
|
||||
clientId.value = systemData.clientId;
|
||||
baseUrl.value = systemData.baseUrl;
|
||||
dataDir.value = systemData.dataDir;
|
||||
|
||||
const currentPlatform = await platform();
|
||||
platformInfo.value = currentPlatform;
|
||||
|
||||
async function openDataDir() {
|
||||
if (!dataDir.value) return;
|
||||
try {
|
||||
await open(dataDir.value);
|
||||
} catch (error) {
|
||||
console.error("Failed to open data dir:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function openLogFile() {
|
||||
if (!dataDir.value) return;
|
||||
try {
|
||||
const logPath = `${dataDir.value}/drop.log`;
|
||||
await open(logPath);
|
||||
} catch (error) {
|
||||
console.error("Failed to open log file:", error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -59,6 +59,54 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="border-t border-zinc-600 py-6">
|
||||
<h3 class="text-base font-display font-semibold text-zinc-100">
|
||||
Download Settings
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-zinc-400 max-w-xl">
|
||||
Configure how Drop downloads games and other content.
|
||||
</p>
|
||||
|
||||
<div class="mt-6 max-w-xl">
|
||||
<label for="threads" class="block text-sm font-medium text-zinc-100">
|
||||
Maximum Download Threads
|
||||
</label>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
type="number"
|
||||
name="threads"
|
||||
id="threads"
|
||||
min="1"
|
||||
max="32"
|
||||
v-model="downloadThreads"
|
||||
@keypress="validateNumberInput"
|
||||
@paste="validatePaste"
|
||||
class="block w-full rounded-md border-0 py-1.5 text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 bg-zinc-800 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
The maximum number of concurrent download threads. Higher values may
|
||||
download faster but use more system resources. Default is 4.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<button
|
||||
type="button"
|
||||
@click="saveDownloadThreads"
|
||||
:disabled="saveState.loading"
|
||||
:class="[
|
||||
'inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-300',
|
||||
saveState.success
|
||||
? 'bg-green-600 hover:bg-green-500 focus-visible:outline-green-600'
|
||||
: 'bg-blue-600 hover:bg-blue-500 focus-visible:outline-blue-600',
|
||||
'disabled:bg-blue-600/50 disabled:cursor-not-allowed'
|
||||
]"
|
||||
>
|
||||
{{ saveState.success ? 'Saved' : 'Save Changes' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TransitionRoot as="template" :show="open">
|
||||
<Dialog class="relative z-50" @close="open = false">
|
||||
@ -172,6 +220,7 @@ import {
|
||||
} from "@headlessui/vue";
|
||||
import { FolderIcon, TrashIcon, XCircleIcon } from "@heroicons/vue/16/solid";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { type Settings } from "~/types";
|
||||
|
||||
const open = ref(false);
|
||||
const currentDirectory = ref<string | undefined>(undefined);
|
||||
@ -180,6 +229,14 @@ const createDirectoryLoading = ref(false);
|
||||
|
||||
const dirs = ref<Array<string>>([]);
|
||||
|
||||
const settings = await invoke<Settings>("fetch_settings");
|
||||
const downloadThreads = ref(settings?.maxDownloadThreads ?? 4);
|
||||
|
||||
const saveState = reactive({
|
||||
loading: false,
|
||||
success: false
|
||||
});
|
||||
|
||||
async function updateDirs() {
|
||||
const newDirs = await invoke<Array<string>>("fetch_download_dir_stats");
|
||||
dirs.value = newDirs;
|
||||
@ -213,7 +270,7 @@ async function submitDirectory() {
|
||||
try {
|
||||
error.value = undefined;
|
||||
if (!currentDirectory.value)
|
||||
throw new Error("Please select a directory first.");
|
||||
throw new Error("Please select a directory first");
|
||||
createDirectoryLoading.value = true;
|
||||
|
||||
// Add directory
|
||||
@ -235,4 +292,42 @@ async function deleteDirectory(index: number) {
|
||||
await invoke("delete_download_dir", { index });
|
||||
await updateDirs();
|
||||
}
|
||||
|
||||
async function saveDownloadThreads() {
|
||||
try {
|
||||
saveState.loading = true;
|
||||
await invoke("update_settings", {
|
||||
newSettings: { maxDownloadThreads: downloadThreads.value },
|
||||
});
|
||||
|
||||
// Show success state
|
||||
saveState.success = true;
|
||||
|
||||
// Reset back to normal state after 2 seconds
|
||||
setTimeout(() => {
|
||||
saveState.success = false;
|
||||
}, 2000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to save settings:', error);
|
||||
} finally {
|
||||
saveState.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function validateNumberInput(event: KeyboardEvent) {
|
||||
// Allow only numbers and basic control keys
|
||||
if (!/^\d$/.test(event.key) &&
|
||||
!['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function validatePaste(event: ClipboardEvent) {
|
||||
// Prevent paste if content contains non-numeric characters
|
||||
const pastedData = event.clipboardData?.getData('text');
|
||||
if (pastedData && !/^\d+$/.test(pastedData)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,60 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
<div class="divide-y divide-zinc-700">
|
||||
<div class="py-6">
|
||||
<h2 class="text-base font-semibold font-display leading-7 text-zinc-100">General</h2>
|
||||
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
||||
Configure basic application settings
|
||||
</p>
|
||||
|
||||
<div class="mt-10 space-y-8">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium leading-6 text-zinc-100">Start with system</h3>
|
||||
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
||||
Drop will automatically start when you log into your computer
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
v-model="autostartEnabled"
|
||||
:class="[
|
||||
autostartEnabled ? 'bg-blue-600' : 'bg-zinc-700',
|
||||
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out'
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
autostartEnabled ? 'translate-x-5' : 'translate-x-0',
|
||||
'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
|
||||
]"
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Switch } from '@headlessui/vue'
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
defineProps<{}>()
|
||||
|
||||
const autostartEnabled = ref<boolean>(false)
|
||||
|
||||
// Load initial state
|
||||
invoke('get_autostart_enabled').then((enabled) => {
|
||||
autostartEnabled.value = enabled as boolean
|
||||
})
|
||||
|
||||
// Watch for changes and update autostart
|
||||
watch(autostartEnabled, async (newValue: boolean) => {
|
||||
try {
|
||||
await invoke('toggle_autostart', { enabled: newValue })
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle autostart:', error)
|
||||
// Revert the toggle if it failed
|
||||
autostartEnabled.value = !newValue
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,3 +1,7 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user