Preliminary changes for an Android Cordova release

Better detection of Android Tablets, for necessary style substitutions.
Had to move isAndroid() into a file that does not include other js files, to avoid circular dependencies.

There are still a handfull of showstopper issues, that prevent release.  On to iOS for now.
https://docs.google.com/document/d/1pl0qsci2kcqGMY1UsQdn72NyMjsmqxuWussbrq41hs0/edit?usp=sharing

src/App.jsx

@@ -12,11 +12,11 @@ import VoterSessionActions from './js/actions/VoterSessionActions';
 import muiTheme from './js/common/components/Style/muiTheme';
 import LoadingWheelComp from './js/common/components/Widgets/LoadingWheelComp';
 import AppObservableStore, { messageService } from './js/common/stores/AppObservableStore';
-import { getAndroidSize, getIOSSizeString, hasDynamicIsland, isAndroid, isIOS } from './js/common/utils/cordovaUtils';
+import { getAndroidSize, getIOSSizeString, hasDynamicIsland, isIOS } from './js/common/utils/cordovaUtils';
 import historyPush from './js/common/utils/historyPush';
 import { isWeVoteMarketingSite, normalizedHref } from './js/common/utils/hrefUtils';
 import initializejQuery from './js/common/utils/initializejQuery';
-import { isCordova, isWebApp } from './js/common/utils/isCordovaOrWebApp';
+import { isAndroid, isCordova, isWebApp } from './js/common/utils/isCordovaOrWebApp';
 import { renderLog } from './js/common/utils/logging';
 import Header from './js/components/Navigation/Header';
 import HeaderBarSuspense from './js/components/Navigation/HeaderBarSuspense';

src/index.jsx

@@ -5,7 +5,7 @@ import { CompatRouter } from 'react-router-dom-v5-compat';
 import App from './App';
 import ErrorBoundary from './js/common/components/Widgets/ErrorBoundary';
 import WeVoteRouter from './js/common/components/Widgets/WeVoteRouter';
-import { isAndroid } from './js/common/utils/cordovaUtils';
+import { isAndroid } from './js/common/utils/isCordovaOrWebApp';
 // importStartCordovaToken -- Do not remove this line!
 
 // The following line is rewritten to true by the buildSrcCordova.js node script

src/js/common/components/CampaignShare/ShareByEmailButton.jsx

@@ -5,8 +5,7 @@ import { EmailShareButton } from 'react-share';
 import styled from 'styled-components';
 import CampaignSupporterActions from '../../actions/CampaignSupporterActions';
 import CampaignStore from '../../stores/CampaignStore';
-import { isAndroid } from '../../utils/cordovaUtils';
-import { isCordova } from '../../utils/isCordovaOrWebApp';
+import { isAndroid, isCordova } from '../../utils/isCordovaOrWebApp';
 import { renderLog } from '../../utils/logging';
 import politicianListToSentenceString from '../../utils/politicianListToSentenceString';
 import { cordovaSocialSharingByEmail, generateQuoteForSharing, generateSharingLink } from './shareButtonCommon';

src/js/common/components/CampaignShare/ShareByFacebookDirectMessageButton.jsx

@@ -1,15 +1,14 @@
-import styled from 'styled-components';
 import withStyles from '@mui/styles/withStyles';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { FacebookMessengerShareButton } from 'react-share';
+import styled from 'styled-components';
+import webAppConfig from '../../../config';
 import CampaignSupporterActions from '../../actions/CampaignSupporterActions';
-import { isAndroid } from '../../utils/cordovaUtils';
-import { isCordova } from '../../utils/isCordovaOrWebApp';
+import CampaignStore from '../../stores/CampaignStore';
+import { isAndroid, isCordova } from '../../utils/isCordovaOrWebApp';
 import { renderLog } from '../../utils/logging';
 import politicianListToSentenceString from '../../utils/politicianListToSentenceString';
-import webAppConfig from '../../../config';
-import CampaignStore from '../../stores/CampaignStore';
 import { androidFacebookClickHandler, generateQuoteForSharing, generateSharingLink } from './shareButtonCommon';
 
 class ShareByFacebookDirectMessageButton extends Component {

src/js/common/components/CampaignShare/ShareOnFacebookButton.jsx

@@ -1,15 +1,14 @@
-import styled from 'styled-components';
 import withStyles from '@mui/styles/withStyles';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { FacebookShareButton } from 'react-share';
+import styled from 'styled-components';
 import CampaignSupporterActions from '../../actions/CampaignSupporterActions';
-import { isAndroid } from '../../utils/cordovaUtils';
-import { isCordova } from '../../utils/isCordovaOrWebApp';
-import { renderLog } from '../../utils/logging';
-import politicianListToSentenceString from '../../utils/politicianListToSentenceString';
 import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
 import CampaignStore from '../../stores/CampaignStore';
+import { isAndroid, isCordova } from '../../utils/isCordovaOrWebApp';
+import { renderLog } from '../../utils/logging';
+import politicianListToSentenceString from '../../utils/politicianListToSentenceString';
 import { androidFacebookClickHandler, generateQuoteForSharing, generateSharingLink } from './shareButtonCommon';
 
 class ShareOnFacebookButton extends Component {

src/js/common/components/CampaignShare/ShareOnTwitterButton.jsx

@@ -1,15 +1,14 @@
-import styled from 'styled-components';
 import withStyles from '@mui/styles/withStyles';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { TwitterShareButton } from 'react-share';
+import styled from 'styled-components';
 import CampaignSupporterActions from '../../actions/CampaignSupporterActions';
-import { isAndroid } from '../../utils/cordovaUtils';
-import { isCordova } from '../../utils/isCordovaOrWebApp';
-import { renderLog } from '../../utils/logging';
-import politicianListToSentenceString from '../../utils/politicianListToSentenceString';
 import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
 import CampaignStore from '../../stores/CampaignStore';
+import { isAndroid, isCordova } from '../../utils/isCordovaOrWebApp';
+import { renderLog } from '../../utils/logging';
+import politicianListToSentenceString from '../../utils/politicianListToSentenceString';
 import { androidTwitterClickHandler, generateQuoteForSharing, generateSharingLink } from './shareButtonCommon';
 
 class ShareOnTwitterButton extends Component {

src/js/common/components/CampaignShare/shareButtonCommon.jsx

@@ -1,4 +1,6 @@
-import { cordovaOpenSafariView, isAndroid } from '../../utils/cordovaUtils';
+import { cordovaOpenSafariView } from '../../utils/cordovaUtils';
+import { isAndroid } from '../../utils/isCordovaOrWebApp';
+
 import { openSnackbar } from '../Widgets/SnackNotifier';
 
 export function androidFacebookClickHandler (linkToBeShared, quoteForSharingEncoded) {

src/js/common/components/SignIn/SignInModal.jsx

@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
 import React, { Component, Suspense } from 'react';
 import styled from 'styled-components';
 import VoterActions from '../../../actions/VoterActions';
-import apiCalming from '../../utils/apiCalming';
-import { isAndroid, isAndroidSizeMD, isAndroidSizeWide } from '../../utils/cordovaUtils';
-import { isCordova, isWebApp } from '../../utils/isCordovaOrWebApp';
-import { renderLog } from '../../utils/logging';
 import VoterStore from '../../../stores/VoterStore';
 import initializeAppleSDK from '../../../utils/initializeAppleSDK';
 import initializeFacebookSDK from '../../../utils/initializeFacebookSDK';
+import apiCalming from '../../utils/apiCalming';
+import { isAndroidSizeMD, isAndroidSizeWide } from '../../utils/cordovaUtils';
+import { isAndroid, isCordova, isWebApp } from '../../utils/isCordovaOrWebApp';
+import { renderLog } from '../../utils/logging';
 
 const SignInOptionsPanel = React.lazy(() => import(/* webpackChunkName: 'SignInOptionsPanel' */ './SignInOptionsPanel'));
 

src/js/common/components/SignIn/SignInOptionsPanel.jsx

@@ -20,10 +20,10 @@ import VoterStore from '../../../stores/VoterStore';
 import initializeAppleSDK from '../../../utils/initializeAppleSDK';
 import initializeFacebookSDK from '../../../utils/initializeFacebookSDK';
 import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
-import { isAndroid, restoreStylesAfterCordovaKeyboard } from '../../utils/cordovaUtils';
+import { restoreStylesAfterCordovaKeyboard } from '../../utils/cordovaUtils';
 import historyPush from '../../utils/historyPush';
 import { normalizedHref } from '../../utils/hrefUtils';
-import { isCordova, isWebApp } from '../../utils/isCordovaOrWebApp';
+import { isAndroid, isCordova, isWebApp } from '../../utils/isCordovaOrWebApp';
 import Cookies from '../../utils/js-cookie/Cookies';
 import { oAuthLog, renderLog } from '../../utils/logging';
 import stringContains from '../../utils/stringContains';

src/js/common/components/Style/CampaignDetailsStyles.jsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { isAndroid, isAndroidSizeWide, isIPad, isIPadMini, isIPhoneMiniOrSmaller } from '../../utils/cordovaUtils';
-import { isCordova, isWebApp } from '../../utils/isCordovaOrWebApp';
+import { isAndroidSizeWide, isIPad, isIPadMini, isIPhoneMiniOrSmaller } from '../../utils/cordovaUtils';
+import { isAndroid, isCordova, isWebApp } from '../../utils/isCordovaOrWebApp';
 
 export const CampaignDescription = styled('div')`
   font-size: 16px;

src/js/common/components/Widgets/OpenExternalWebSite.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { cordovaOpenSafariView, isAndroid } from '../../utils/cordovaUtils';
-import { isWebApp } from '../../utils/isCordovaOrWebApp';
+import { cordovaOpenSafariView } from '../../utils/cordovaUtils';
+import { isAndroid, isWebApp } from '../../utils/isCordovaOrWebApp';
 import { renderLog } from '../../utils/logging';
 import stringContains from '../../utils/stringContains';
 

src/js/common/utils/cordovaUtils.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import webAppConfig from '../../config';
-import { isCordova, isWebApp } from './isCordovaOrWebApp';
+import { isAndroid, isAndroidTablet, isCordova, isWebApp } from './isCordovaOrWebApp';
 import { cordovaOffsetLog, oAuthLog } from './logging';
 
 /* global $  */
@@ -61,12 +61,6 @@ export function dumpScreenAndDeviceFields () {
   dumpObjProps('window.device', window.device);
 }
 
-export function isAndroid () {
-  if (isWebApp()) return false;
-  const { platform } = window.device || '';
-  return isCordova() && platform === 'Android';  // Ignore the "Condition is always false" warning.  This line works correctly.
-}
-
 // If history retention is not working, see TabWithPushHistory.jsx for an example of how to do it.
 // See v5: https://reactrouter.com/native/api/Hooks/usehistory
 // IMPORTANT:  The HTML5 window.history, is very different from the react-router V5 history, don't use window.history!
@@ -452,18 +446,16 @@ export function getAndroidSize () {
     return 'device not ready';
   }
   androidSizeString = 'default';
-  // const { width, height, diameter } = window.pbakondyScreenSize;
   const { visualViewport: { height, width, scale } } = window;
   const diameter = Math.sqrt(((width * scale) ** 2) + ((height * scale) ** 2));
   console.log('CALCULATED screen diameter: ', diameter);
 
-
   androidPixels = width * height;
-  // const screenSize = Math.sqrt(((width / xdpi) ** 2) + ((height / ydpi) ** 2));
-  const aspectRatio = height / width;
-  if (aspectRatio < 1 ||
-    (width === 1848 && height === 2960 && diameter === 14.54)   // Galaxy Tab S9 Ultra (2023)
-  ) {
+
+  const ua = navigator.userAgent;
+  console.log('Phone user agent: ', ua);
+
+  if (isAndroidTablet()) {
     androidSizeString = '--wide';
   } else if (diameter < 4.9) {
     androidSizeString = '--sm';

src/js/common/utils/isCordovaOrWebApp.js

@@ -6,3 +6,27 @@ export function isCordova () {
 export function isWebApp () {
   return !isCordova();
 }
+
+export function isAndroid () {
+  if (isWebApp()) return false;
+  const { platform } = window.device || '';
+  return isCordova() && platform === 'Android';  // Ignore the "Condition is always false" warning.  This line works correctly.
+}
+
+export function isAndroidTablet () {
+  if (isAndroid()) {
+    const { visualViewport: { height, width, scale } } = window;
+    const ua = navigator.userAgent;
+    const diameter = Math.sqrt(((width * scale) ** 2) + ((height * scale) ** 2));
+    const aspectRatio = height / width;
+    console.log('Phone user agent: ', ua);
+
+    return (aspectRatio < 1 ||
+      (width === 1848 && height === 2960 && diameter === 14.54) ||             // Galaxy Tab S9 Ultra (2023)
+      (width === 1232 && height === 1890 && Math.trunc(diameter) === 2256) ||  // Galaxy Tab S9 Ultra (2024)
+      (ua.includes('Samsung Galaxy Tab')) ||
+      (ua.includes('Pixel Tablet')) ||
+      (ua.includes('Lenovo TAB')));
+  }
+  return false;
+}

src/js/common/utils/isMobileScreenSize.js

@@ -1,4 +1,4 @@
-import { isWebApp } from './isCordovaOrWebApp';
+import { isAndroidTablet, isWebApp } from './isCordovaOrWebApp';
 
 function isCordova () {
   const { cordova } = window;
@@ -16,7 +16,7 @@ export default function isMobileScreenSize () {
 export function isTablet () {
   const { innerWidth, muiThemeGlobal: { breakpoints: { values: { tabMin, tabMax } } } } = window;
   // console.log('isTablet isCordova, innerWidth, tabMin, tabMax, return value:', isCordova(), innerWidth, tabMin, tabMax,  innerWidth > tabMin && innerWidth < tabMax);
-  return innerWidth > tabMin && innerWidth < tabMax;
+  return (innerWidth > tabMin && innerWidth < tabMax) || isAndroidTablet();
 }
 
 export function isLargerThanTablet () {
@@ -60,6 +60,9 @@ export function getTabletSize () {
   if (isLargeSizedTablet()) {
     return 'large tablet';
   }
+  if (isAndroidTablet()) {
+    return 'Android tablet';
+  }
   return 'not a tablet';
 }
 

src/js/components/Activity/ActivityPostModal.jsx

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import ActivityActions from '../../actions/ActivityActions';
-import { hasIPhoneNotch, isAndroid, isAndroidSizeLG, isAndroidSizeMD, isAndroidSizeWide, prepareForCordovaKeyboard, restoreStylesAfterCordovaKeyboard } from '../../common/utils/cordovaUtils';
+import { hasIPhoneNotch, isAndroidSizeLG, isAndroidSizeMD, isAndroidSizeWide, prepareForCordovaKeyboard, restoreStylesAfterCordovaKeyboard } from '../../common/utils/cordovaUtils';
+import { isAndroid } from '../../common/utils/isCordovaOrWebApp';
 import { renderLog } from '../../common/utils/logging';
 import ActivityStore from '../../stores/ActivityStore';
 import VoterStore from '../../stores/VoterStore';