diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 62c729c422..2b1b93ebec 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -81,6 +81,7 @@ import ThreepidInviteStore, { IThreepidInvite, IThreepidInviteWireFormat } from import {UIFeature} from "../../settings/UIFeature"; import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore"; import DialPadModal from "../views/voip/DialPadModal"; +import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast'; /** constants for MatrixChat.state.view */ export enum Views { @@ -1186,6 +1187,11 @@ export default class MatrixChat extends React.PureComponent { ) { showAnalyticsToast(this.props.config.piwik?.policyUrl); } + if (SdkConfig.get().mobileGuideToast) { + // The toast contains further logic to detect mobile platforms, + // check if it has been dismissed before, etc. + showMobileGuideToast(); + } } private showScreenAfterLogin() { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 8d047ea3f1..8f9884c27b 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -726,6 +726,9 @@ "Notifications": "Notifications", "Enable desktop notifications": "Enable desktop notifications", "Enable": "Enable", + "Mobile experience": "Mobile experience", + "Element Web is currently experimental on mobile. The native apps are recommended for most people.": "Element Web is currently experimental on mobile. The native apps are recommended for most people.", + "Learn more": "Learn more", "Your homeserver has exceeded its user limit.": "Your homeserver has exceeded its user limit.", "Your homeserver has exceeded one of its resource limits.": "Your homeserver has exceeded one of its resource limits.", "Contact your server admin.": "Contact your server admin.", @@ -2190,7 +2193,6 @@ "We call the places where you can host your account ‘homeservers’.": "We call the places where you can host your account ‘homeservers’.", "Other homeserver": "Other homeserver", "Use your preferred Matrix homeserver if you have one, or host your own.": "Use your preferred Matrix homeserver if you have one, or host your own.", - "Learn more": "Learn more", "About homeservers": "About homeservers", "Sign out and remove encryption keys?": "Sign out and remove encryption keys?", "Clear Storage and Sign Out": "Clear Storage and Sign Out", diff --git a/src/toasts/MobileGuideToast.ts b/src/toasts/MobileGuideToast.ts new file mode 100644 index 0000000000..310f261c15 --- /dev/null +++ b/src/toasts/MobileGuideToast.ts @@ -0,0 +1,61 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { _t } from "../languageHandler"; +import GenericToast from "../components/views/toasts/GenericToast"; +import ToastStore from "../stores/ToastStore"; + +const onAccept = () => { + window.location.href = "mobile_guide/"; +}; + +const onReject = () => { + document.cookie = "element_mobile_redirect_to_guide=false;path=/;max-age=14400"; + hideToast(); +}; + +const TOAST_KEY = "mobileguide"; + +export const showToast = () => { + const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; + const isAndroid = /Android/.test(navigator.userAgent); + if (!isIos && !isAndroid) { + return; + } + if (document.cookie.includes("element_mobile_redirect_to_guide=false")) { + return; + } + ToastStore.sharedInstance().addOrReplaceToast({ + key: TOAST_KEY, + title: _t("Mobile experience"), + props: { + description: _t( + "Element Web is currently experimental on mobile. " + + "The native apps are recommended for most people.", + ), + acceptLabel: _t("Learn more"), + onAccept, + rejectLabel: _t("Dismiss"), + onReject, + }, + component: GenericToast, + priority: 99, + }); +}; + +export const hideToast = () => { + ToastStore.sharedInstance().dismissToast(TOAST_KEY); +};