From 2be2ef6ce5232ea859ae814c401cd99e87f57af9 Mon Sep 17 00:00:00 2001 From: GeckoEidechse <40122905+GeckoEidechse@users.noreply.github.com> Date: Mon, 10 Apr 2023 21:17:00 +0200 Subject: feat: Show download progress for installing Northstar (#200) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: Bump libthermite to 0.5.3 This adds a change needed for making progressbar work on dowload * wip: First attempt at showing download progress Simply prints it to JavaScript console for now * feat: Emit download progress at most every 250ms If we spam emit too much we use a lot of extra resources, slowing down the actual download * feat: Initial messages for extracting * feat: Add install state enum * refactor: Change payload to current + total size downloaded * fix: Remove extra emit * fix: Remove extra emit * refactor: Rename struct * refactor: Move struct to top of file * feat: Add TypeScript bindings * feat: Add console logs for printing state for now * fix: Remove duplicate identifier * feat: Initial progressbar in frontend * fix: Remove event listener added for debugging * feat: Display status and downloaded bytes * feat: Set loading bar to indeterminate on extract * fix: Phrasing in comment * feat: Add i18n for progress state * refactor: Adjust control flow do not show downloaded size anymore during extraction * fix: Manually specify progressbar size * fix: Update download progress every 100ms instead of 250ms Gives impression of faster / more fluent download. * feat: layout does not move when progress bar is hidden * feat: fix progress bar width to 200px * refactor: put services container in a flex container, for it not to overlap play button * refactor: export progress bar to dedicated component file * refactor: Update status first outside of branch * fix: Proper typing of event payload * fix: Do not assign to unused variable --------- Co-authored-by: Rémy Raes --- src-tauri/bindings/InstallProgress.ts | 4 + src-tauri/bindings/InstallState.ts | 3 + src-tauri/src/lib.rs | 74 ++++++++++++++++++- src-tauri/src/main.rs | 6 +- src-vue/src/components/InstallProgressBar.vue | 102 ++++++++++++++++++++++++++ src-vue/src/components/PlayButton.vue | 48 ++++++------ src-vue/src/i18n/lang/en.json | 4 +- src-vue/src/views/PlayView.vue | 17 +++-- src-vue/src/views/RepairView.vue | 11 +++ 9 files changed, 231 insertions(+), 38 deletions(-) create mode 100644 src-tauri/bindings/InstallProgress.ts create mode 100644 src-tauri/bindings/InstallState.ts create mode 100644 src-vue/src/components/InstallProgressBar.vue diff --git a/src-tauri/bindings/InstallProgress.ts b/src-tauri/bindings/InstallProgress.ts new file mode 100644 index 00000000..7bea9bb8 --- /dev/null +++ b/src-tauri/bindings/InstallProgress.ts @@ -0,0 +1,4 @@ +// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually. +import type { InstallState } from "./InstallState"; + +export interface InstallProgress { current_downloaded: bigint, total_size: bigint, state: InstallState, } \ No newline at end of file diff --git a/src-tauri/bindings/InstallState.ts b/src-tauri/bindings/InstallState.ts new file mode 100644 index 00000000..21dbc0c7 --- /dev/null +++ b/src-tauri/bindings/InstallState.ts @@ -0,0 +1,3 @@ +// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually. + +export type InstallState = "DOWNLOADING" | "EXTRACTING" | "DONE"; \ No newline at end of file diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index a3553448..56bc590c 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -1,4 +1,4 @@ -use std::{env, fs, path::Path, time::Duration}; +use std::{cell::RefCell, env, fs, path::Path, time::Duration, time::Instant}; use anyhow::{anyhow, Context, Result}; @@ -52,6 +52,22 @@ pub struct NorthstarServer { pub player_count: i32, } +#[derive(Serialize, Deserialize, Debug, Clone, TS)] +#[ts(export)] +pub enum InstallState { + DOWNLOADING, + EXTRACTING, + DONE, +} + +#[derive(Serialize, Deserialize, Debug, Clone, TS)] +#[ts(export)] +struct InstallProgress { + current_downloaded: u64, + total_size: u64, + state: InstallState, +} + /// Check version number of a mod pub fn check_mod_version_number(path_to_mod_folder: String) -> Result { // println!("{}", format!("{}/mod.json", path_to_mod_folder)); @@ -187,7 +203,11 @@ fn extract(zip_file: std::fs::File, target: &std::path::Path) -> Result<()> { ///Install N* from the provided mod /// ///Checks cache, else downloads the latest version -async fn do_install(nmod: &thermite::model::ModVersion, game_path: &std::path::Path) -> Result<()> { +async fn do_install( + window: tauri::Window, + nmod: &thermite::model::ModVersion, + game_path: &std::path::Path, +) -> Result<()> { let filename = format!("northstar-{}.zip", nmod.version); let download_directory = format!("{}/___flightcore-temp-download-dir/", game_path.display()); @@ -196,7 +216,43 @@ async fn do_install(nmod: &thermite::model::ModVersion, game_path: &std::path::P let download_path = format!("{}/{}", download_directory, filename); log::info!("Download path: {download_path}"); - let nfile = thermite::core::manage::download_file(&nmod.url, download_path).unwrap(); + let last_emit = RefCell::new(Instant::now()); // Keep track of the last time a signal was emitted + let nfile = thermite::core::manage::download_file_with_progress( + &nmod.url, + download_path, + |delta, current, total| { + if delta != 0 { + // Only emit a signal once every 100ms + // This way we don't bombard the frontend with events on fast download speeds + let time_since_last_emit = Instant::now().duration_since(*last_emit.borrow()); + if time_since_last_emit >= Duration::from_millis(100) { + window + .emit( + "northstar-install-download-progress", + InstallProgress { + current_downloaded: current, + total_size: total, + state: InstallState::DOWNLOADING, + }, + ) + .unwrap(); + *last_emit.borrow_mut() = Instant::now(); + } + } + }, + ) + .unwrap(); + + window + .emit( + "northstar-install-download-progress", + InstallProgress { + current_downloaded: 0, + total_size: 0, + state: InstallState::EXTRACTING, + }, + ) + .unwrap(); log::info!("Extracting Northstar..."); extract(nfile, game_path)?; @@ -206,11 +262,22 @@ async fn do_install(nmod: &thermite::model::ModVersion, game_path: &std::path::P std::fs::remove_dir_all(download_directory).unwrap(); log::info!("Done installing Northstar!"); + window + .emit( + "northstar-install-download-progress", + InstallProgress { + current_downloaded: 0, + total_size: 0, + state: InstallState::DONE, + }, + ) + .unwrap(); Ok(()) } pub async fn install_northstar( + window: tauri::Window, game_path: &str, northstar_package_name: Option, ) -> Result { @@ -235,6 +302,7 @@ pub async fn install_northstar( log::info!("Install path \"{}\"", game_path); match do_install( + window, nmod.versions.get(&nmod.latest).unwrap(), std::path::Path::new(game_path), ) diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 16b951ec..76e8833e 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -284,11 +284,12 @@ async fn get_host_os_caller() -> String { #[tauri::command] /// Installs Northstar to the given path async fn install_northstar_caller( + window: tauri::Window, game_path: String, northstar_package_name: Option, ) -> Result { log::info!("Running"); - match install_northstar(&game_path, northstar_package_name).await { + match install_northstar(window, &game_path, northstar_package_name).await { Ok(_) => Ok(true), Err(err) => { log::error!("{}", err); @@ -300,13 +301,14 @@ async fn install_northstar_caller( #[tauri::command] /// Update Northstar install in the given path async fn update_northstar_caller( + window: tauri::Window, game_path: String, northstar_package_name: Option, ) -> Result { log::info!("Updating Northstar"); // Simply re-run install with up-to-date version for upate - match install_northstar(&game_path, northstar_package_name).await { + match install_northstar(window, &game_path, northstar_package_name).await { Ok(_) => Ok(true), Err(err) => { log::error!("{}", err); diff --git a/src-vue/src/components/InstallProgressBar.vue b/src-vue/src/components/InstallProgressBar.vue new file mode 100644 index 00000000..d0c2047c --- /dev/null +++ b/src-vue/src/components/InstallProgressBar.vue @@ -0,0 +1,102 @@ + + + + + diff --git a/src-vue/src/components/PlayButton.vue b/src-vue/src/components/PlayButton.vue index 3efcc9f5..208b4703 100644 --- a/src-vue/src/components/PlayButton.vue +++ b/src-vue/src/components/PlayButton.vue @@ -83,10 +83,10 @@ export default defineComponent({ return this.showReleaseSwitch ? 'border-radius: 2px 0 0 2px;' : 'border-radius: 2px'; - } + }, }, methods: { - launchGame() { + async launchGame() { this.$store.commit('launchGame'); } } @@ -94,30 +94,31 @@ export default defineComponent({