diff options
Diffstat (limited to 'src-vue/src')
| -rw-r--r-- | src-vue/src/components/InstallProgressBar.vue | 102 | ||||
| -rw-r--r-- | src-vue/src/components/PlayButton.vue | 48 | ||||
| -rw-r--r-- | src-vue/src/i18n/lang/en.json | 4 | ||||
| -rw-r--r-- | src-vue/src/views/PlayView.vue | 17 | ||||
| -rw-r--r-- | src-vue/src/views/RepairView.vue | 11 |
5 files changed, 149 insertions, 33 deletions
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 @@ +<script lang="ts"> +import { defineComponent } from 'vue'; +import { appWindow } from '@tauri-apps/api/window'; +import { InstallProgress } from '../../../src-tauri/bindings/InstallProgress'; + +export default defineComponent({ + name: 'InstallProgressBar', + computed: { + progressBarStyle(): string { + return !this.install_or_update ? 'hide-progress' : ''; + } + }, + data() { + return { + percentage: 0, + color: '#409EFF', + install_or_update: false, + status: "unknown", + current_downloaded: -1, + total_size: -1, + }; + }, + methods: { + formatBytes(bytes: number, decimals = 2) { + if (bytes === 0) return '0 Bytes'; + const k = 1000; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; + }, + formatText() { + if (this.status == "DOWNLOADING") { + const current_downloaded_string = this.formatBytes(this.current_downloaded); + const total_size_string = this.formatBytes(this.total_size); + const status = this.$t("generic.downloading"); + return `${status}: ${current_downloaded_string}/${total_size_string}`; + } + if (this.status == "EXTRACTING") { + return this.$t("generic.extracting"); + } + return "Inactive"; // Needed to keep same size format when progress bar is hidden + } + }, + mounted() { + appWindow.listen<InstallProgress>( + 'northstar-install-download-progress', + ({ event, payload }) => { + this.install_or_update = true; + let progress = payload; + this.status = progress.state; + if (progress.state == "DOWNLOADING") { + this.percentage = ((Number(progress.current_downloaded) / Number(progress.total_size)) * 100); + this.color = '#409EFF'; + this.current_downloaded = Number(progress.current_downloaded); + this.total_size = Number(progress.total_size); + } + if (progress.state == "EXTRACTING") { + this.percentage = 100; + this.color = '#67C23A'; + } + if (progress.state == "DONE") { + // Clear state again + this.install_or_update = false + } + } + ); + } +}); +</script> + +<template> + <el-progress + :class="progressBarStyle" + :format="formatText" + :percentage="percentage" + :color="color" + :indeterminate="status === 'EXTRACTING'" + :duration="1" + > + </el-progress> +</template> + +<style scoped> +.el-progress { + margin-top: 10px; +} + +/* Set progress bar width */ +.el-progress:deep(.el-progress-bar) { + width: 200px; + flex-grow: initial; +} + +.el-progress:deep(.el-progress__text) { + line-height: 1.2; +} + +.hide-progress { + opacity: 0; +} +</style> 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({ </script> <template> - <el-button :disabled="northstarIsRunning" - type="primary" size="large" @click="launchGame" - class="fc_launch__button" :style="buttonRadiusStyle"> - {{ playButtonLabel }} - </el-button> - <el-select v-if="showReleaseSwitch" :disabled="northstarIsRunning" - v-model="currentCanal" placeholder="Select"> - <el-option-group - v-for="group in selectOptions" - :key="group.label" - :label="group.label" - > - <el-option - v-for="item in group.options" - :key="item.value" - :label="item.label" - :value="item.value" - /> - </el-option-group> - </el-select> + <nav> + <el-button :disabled="northstarIsRunning" + type="primary" size="large" @click="launchGame" + class="fc_launch__button" :style="buttonRadiusStyle"> + {{ playButtonLabel }} + </el-button> + <el-select v-if="showReleaseSwitch" :disabled="northstarIsRunning" + v-model="currentCanal" placeholder="Select"> + <el-option-group + v-for="group in selectOptions" + :key="group.label" + :label="group.label" + > + <el-option + v-for="item in group.options" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-option-group> + </el-select> + </nav> </template> <style scoped> - button { text-transform: uppercase; padding: 30px; @@ -130,7 +131,6 @@ button { } /* Release canal selector */ - .el-select { width: 0; margin-right: 50px; diff --git a/src-vue/src/i18n/lang/en.json b/src-vue/src/i18n/lang/en.json index 5e1974cc..3553d2a5 100644 --- a/src-vue/src/i18n/lang/en.json +++ b/src-vue/src/i18n/lang/en.json @@ -12,7 +12,9 @@ "no": "No", "error": "Error", "cancel": "Cancel", - "informationShort": "Info" + "informationShort": "Info", + "downloading": "Downloading", + "extracting": "Extracting" }, "play": { diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue index 2f3562ef..76f4f328 100644 --- a/src-vue/src/views/PlayView.vue +++ b/src-vue/src/views/PlayView.vue @@ -2,10 +2,12 @@ import { Tabs } from "../utils/Tabs"; import PlayButton from '../components/PlayButton.vue'; import { defineComponent } from "vue"; +import InstallProgressBar from "../components/InstallProgressBar.vue"; export default defineComponent({ components: { - PlayButton + PlayButton, + InstallProgressBar }, computed: { northstarIsRunning(): boolean { @@ -45,7 +47,9 @@ export default defineComponent({ {{ $t('play.unable_to_load_playercount') }} </div> </div> - <div> + + <!-- Align play button and services state container --> + <div style="display: flex"> <PlayButton /> <div v-if="$store.state.developer_mode" id="fc_services__status"> <div> @@ -58,12 +62,13 @@ export default defineComponent({ </div> </div> </div> + <InstallProgressBar /> </div> </template> <style scoped> .fc_launch__container { - margin: 50px; + margin: 50px 50px 30px 50px; position: fixed; bottom: 0; } @@ -101,13 +106,9 @@ export default defineComponent({ border-color: var(--el-color-primary); } - #fc_services__status { - display: inline-block; - position: fixed; - padding: 10px 20px; color: #e8edef; - bottom: 43px; + align-self: end; } .fc_version__line { diff --git a/src-vue/src/views/RepairView.vue b/src-vue/src/views/RepairView.vue index 9de9a7f3..3d449d70 100644 --- a/src-vue/src/views/RepairView.vue +++ b/src-vue/src/views/RepairView.vue @@ -33,6 +33,7 @@ <script lang="ts"> import { defineComponent } from "vue"; import { GameInstall } from "../utils/GameInstall"; +import { InstallProgress } from "../../../src-tauri/bindings/InstallProgress"; import { invoke } from "@tauri-apps/api"; import { ReleaseCanal } from "../utils/ReleaseCanal"; import { Store } from 'tauri-plugin-store-api'; @@ -76,6 +77,16 @@ export default defineComponent({ ); let install_northstar_result = invoke("install_northstar_caller", { gamePath: game_install.game_path, northstarPackageName: ReleaseCanal.RELEASE }); + + appWindow.listen<InstallProgress>( + 'northstar-install-download-progress', + ({ event, payload }) => { + let typed_payload = payload; + console.log("current_downloaded:", typed_payload.current_downloaded); + console.log("total_size: ", typed_payload.total_size); + console.log("state: ", typed_payload.state); + } + ); await install_northstar_result .then((message) => { // Send notification |