added dismiss button in preloading toaster + variabilized un bunch of i18n labels

Author: fcamblor

mobile/src/i18n/en/index.ts

@@ -22,6 +22,7 @@ const en = {
 	Add_to_my_pinned_events: `Add to my pinned events`,
 	Visit_website: `Visit website`,
 	Cancel: `Cancel`,
+	Dismiss: `Dismiss`,
 	Schedule: `Schedule`,
 	Banner_Event: `Banner event`,
 	Cancel_Back_To_Schedule: `Cancel and back to schedule page`,
@@ -117,6 +118,8 @@ const en = {
   User_uid: "User uid",
   Profile: "Profile",
   Logout: "Logout",
+  Preloading_event_assets_for_offline_usage: `Preloading event assets for offline usage`,
+  This_can_slow_down_the_app_a_little_bit_during_pre_loading: `This can slow down the app a little bit during pre-loading`,
   Anonymous_private_user_id: "Anonymous (private) user token",
   Public_user_id: "Public user token",
   How_and_where_can_I_contact_the_team: "How and where can I contact the team ?",

mobile/src/i18n/i18n-types.ts

@@ -98,6 +98,10 @@ type RootTranslation = {
 	 * C​a​n​c​e​l
 	 */
 	Cancel: string
+	/**
+	 * D​i​s​m​i​s​s
+	 */
+	Dismiss: string
 	/**
 	 * S​c​h​e​d​u​l​e
 	 */
@@ -482,6 +486,14 @@ type RootTranslation = {
 	 * L​o​g​o​u​t
 	 */
 	Logout: string
+	/**
+	 * P​r​e​l​o​a​d​i​n​g​ ​e​v​e​n​t​ ​a​s​s​e​t​s​ ​f​o​r​ ​o​f​f​l​i​n​e​ ​u​s​a​g​e
+	 */
+	Preloading_event_assets_for_offline_usage: string
+	/**
+	 * T​h​i​s​ ​c​a​n​ ​s​l​o​w​ ​d​o​w​n​ ​t​h​e​ ​a​p​p​ ​a​ ​l​i​t​t​l​e​ ​b​i​t​ ​d​u​r​i​n​g​ ​p​r​e​-​l​o​a​d​i​n​g
+	 */
+	This_can_slow_down_the_app_a_little_bit_during_pre_loading: string
 	/**
 	 * A​n​o​n​y​m​o​u​s​ ​(​p​r​i​v​a​t​e​)​ ​u​s​e​r​ ​t​o​k​e​n
 	 */
@@ -634,6 +646,10 @@ export type TranslationFunctions = {
 	 * Cancel
 	 */
 	Cancel: () => LocalizedString
+	/**
+	 * Dismiss
+	 */
+	Dismiss: () => LocalizedString
 	/**
 	 * Schedule
 	 */
@@ -1014,6 +1030,14 @@ export type TranslationFunctions = {
 	 * Logout
 	 */
 	Logout: () => LocalizedString
+	/**
+	 * Preloading event assets for offline usage
+	 */
+	Preloading_event_assets_for_offline_usage: () => LocalizedString
+	/**
+	 * This can slow down the app a little bit during pre-loading
+	 */
+	This_can_slow_down_the_app_a_little_bit_during_pre_loading: () => LocalizedString
 	/**
 	 * Anonymous (private) user token
 	 */

mobile/src/state/useConferenceDescriptor.ts

@@ -19,6 +19,7 @@ import {checkCache, preloadPicture} from "@/services/Cachings";
 import {Temporal} from "temporal-polyfill";
 import {CompletablePromiseQueue} from "@/models/utils";
 import {prepareSchedules} from "@/state/useSchedule";
+import {typesafeI18n} from "@/i18n/i18n-vue";
 
 function getConferenceDescriptorDoc(eventId: EventId|undefined) {
     if(!eventId || !eventId.value) {
@@ -103,6 +104,7 @@ export function useOfflineEventPreparation(
   preparingOfflineScheduleToastIsOpenRef: Ref<boolean>,
 ) {
 
+  const {LL} = typesafeI18n()
   return new Promise(resolve => {
     const LOGGER = Logger.named("useOfflineEventPreparation");
 
@@ -127,7 +129,7 @@ export function useOfflineEventPreparation(
               const promisesQueue = new CompletablePromiseQueue({ concurrency: 20 })
 
               const progressInterval = setInterval(() => {
-                preparingOfflineScheduleToastMessageRef.value = `Preloading event assets for offline usage <u>${promisesQueue.completed} / ${promisesQueue.total}</u>...<br/><em>This can slow down the app a little bit during pre-loading...</em>`
+                preparingOfflineScheduleToastMessageRef.value = `${LL.value.Preloading_event_assets_for_offline_usage()}: <u>${promisesQueue.completed} / ${promisesQueue.total}</u>...<br/><em>${LL.value.This_can_slow_down_the_app_a_little_bit_during_pre_loading()}...</em>`
               }, 500)
 
               preparingOfflineScheduleToastIsOpenRef.value = true

mobile/src/views/event/SchedulePage.vue

@@ -2,9 +2,12 @@
   <ion-page>
     <ion-content :fullscreen="true" v-if="confDescriptor">
       <current-event-header v-if="!hideHeader" :conf-descriptor="confDescriptor"/>
-      <ion-toast position="top" style="--max-width: 70%"
+      <ion-toast position="top" style="--max-width: 70%; --button-color: var(--color)"
            :message="preparingOfflineScheduleToastMessageRef"
            :is-open="preparingOfflineScheduleToastIsOpenRef"
+           :buttons="[{text: 'Dismiss', role: LL.Cancel() }]"
+           layout="stacked"
+           @didDismiss="preparingOfflineScheduleToastIsOpenRef = false"
       ></ion-toast>
       <ion-header class="toolbarHeader">
         <ion-toolbar>