diff --git a/src/components/Screens/PlanexWebview.tsx b/src/components/Screens/PlanexWebview.tsx index 6614156..67a1f7b 100644 --- a/src/components/Screens/PlanexWebview.tsx +++ b/src/components/Screens/PlanexWebview.tsx @@ -67,6 +67,14 @@ calendar.option({ } });`; +export const JS_LOADED_MESSAGE = '1'; + +const NOTIFY_JS_INJECTED = ` +function notifyJsInjected() { + window.ReactNativeWebView.postMessage('${JS_LOADED_MESSAGE}'); +} +`; + // Mobile friendly CSS const CUSTOM_CSS = 'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}'; @@ -93,7 +101,8 @@ const generateInjectedJS = ( let customInjectedJS = `$(document).ready(function() { ${OBSERVE_MUTATIONS_INJECTED} ${INJECT_STYLE} - ${FULL_CALENDAR_SETTINGS}`; + ${FULL_CALENDAR_SETTINGS} + ${NOTIFY_JS_INJECTED}`; if (group) { customInjectedJS += `displayAde(${group.id});`; } @@ -103,7 +112,7 @@ const generateInjectedJS = ( if (darkMode) { customInjectedJS += INJECT_STYLE_DARK; } - customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios + customInjectedJS += `notifyJsInjected();});true;`; // Prevents crash on ios return customInjectedJS; }; diff --git a/src/screens/Planex/PlanexScreen.tsx b/src/screens/Planex/PlanexScreen.tsx index b11163f..86e5819 100644 --- a/src/screens/Planex/PlanexScreen.tsx +++ b/src/screens/Planex/PlanexScreen.tsx @@ -31,7 +31,9 @@ import { MASCOT_STYLE } from '../../components/Mascot/Mascot'; import MascotPopup from '../../components/Mascot/MascotPopup'; import { getPrettierPlanexGroupName } from '../../utils/Utils'; import GENERAL_STYLES from '../../constants/Styles'; -import PlanexWebview from '../../components/Screens/PlanexWebview'; +import PlanexWebview, { + JS_LOADED_MESSAGE, +} from '../../components/Screens/PlanexWebview'; import PlanexBottomBar from '../../components/Animations/PlanexBottomBar'; import { getPreferenceString, @@ -39,6 +41,7 @@ import { PlanexPreferenceKeys, } from '../../utils/asyncStorage'; import { usePlanexPreferences } from '../../context/preferencesContext'; +import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen'; const styles = StyleSheet.create({ container: { @@ -65,6 +68,7 @@ function PlanexScreen() { } >(); const [injectJS, setInjectJS] = useState(''); + const [loading, setLoading] = useState(true); const getCurrentGroup: () => PlanexGroupType | undefined = useCallback(() => { let currentGroupString = getPreferenceString( @@ -132,22 +136,26 @@ function PlanexScreen() { * @param event */ const onMessage = (event: { nativeEvent: { data: string } }) => { - const data: { - start: string; - end: string; - title: string; - color: string; - } = JSON.parse(event.nativeEvent.data); - const startDate = dateToString(new Date(data.start), true); - const endDate = dateToString(new Date(data.end), true); - const startString = getTimeOnlyString(startDate); - const endString = getTimeOnlyString(endDate); + if (event.nativeEvent.data === JS_LOADED_MESSAGE) { + setLoading(false); + } else { + const data: { + start: string; + end: string; + title: string; + color: string; + } = JSON.parse(event.nativeEvent.data); + const startDate = dateToString(new Date(data.start), true); + const endDate = dateToString(new Date(data.end), true); + const startString = getTimeOnlyString(startDate); + const endString = getTimeOnlyString(endDate); - let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`; - if (startString != null && endString != null) { - msg += `${startString} - ${endString}`; + let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`; + if (startString != null && endString != null) { + msg += `${startString} - ${endString}`; + } + showDialog(data.title, msg, data.color); } - showDialog(data.title, msg, data.color); }; /** @@ -202,6 +210,11 @@ function PlanexScreen() { {getWebView()} )} + {loading ? ( + + + + ) : null} {showMascot ? (