Open links with the external browser (#374)

stephanebisson · Stephane Bisson · web-flow · commit 5f4b2b5e92d9 · 2021-08-10T08:13:53.000-04:00
Co-authored-by: Stephane Bisson &lt;sbisson@wikimedia.org&gt;
diff --git a/src/components/AboutApp.js b/src/components/AboutApp.js
@@ -1,13 +1,13 @@
 import { h } from 'preact'
 import { useI18n, useSoftkey } from 'hooks'
-import { appVersion, appInstallId } from 'utils'
+import { appVersion, appInstallId, openExternal } from 'utils'
 
 export const AboutApp = ({ close }) => {
   const i18n = useI18n()
 
   useSoftkey('AboutApp', {
     right: i18n('softkey-read-more'),
-    onKeyRight: () => window.open('https://wikimediafoundation.org/'),
+    onKeyRight: () => openExternal('https://wikimediafoundation.org/'),
     left: i18n('softkey-close'),
     onKeyLeft: close,
     onKeyBackspace: close
diff --git a/src/components/Feedback.js b/src/components/Feedback.js
@@ -1,7 +1,7 @@
 import { h } from 'preact'
 import { useState, useRef, useEffect } from 'preact/hooks'
 import { useI18n, useSoftkey, useNavigation, usePopup, useOnlineStatus } from 'hooks'
-import { sendFeedback, confirmDialog } from 'utils'
+import { sendFeedback, confirmDialog, openExternal } from 'utils'
 import { OfflinePanel } from 'components'
 
 export const Feedback = ({ close }) => {
@@ -50,7 +50,7 @@ export const Feedback = ({ close }) => {
     const { index } = getCurrent()
     if (index > 0) {
       const item = items[index - 1]
-      window.open(item.link)
+      openExternal(item.link)
     }
   }
 
diff --git a/src/components/Gallery.js b/src/components/Gallery.js
@@ -1,6 +1,7 @@
 import { h } from 'preact'
 import { useRef, useLayoutEffect } from 'preact/hooks'
 import { useI18n, useSoftkey, usePopup, useRange, useArticleMediaInfo } from 'hooks'
+import { openExternal } from 'utils'
 
 const MAX_DESCRIPTION_HEIGHT = 45
 
@@ -15,7 +16,7 @@ const AboutContainer = ({ mediaInfo, dir, title, caption, close }) => {
     right: mediaInfo && mediaInfo.filePage ? i18n('softkey-more-info') : '',
     onKeyRight: () => {
       if (mediaInfo && mediaInfo.filePage) {
-        window.open(mediaInfo.filePage)
+        openExternal(mediaInfo.filePage)
       }
     }
   }, [mediaInfo])
diff --git a/src/components/Settings.js b/src/components/Settings.js
@@ -3,7 +3,7 @@ import { route } from 'preact-router'
 import { useRef, useEffect } from 'preact/hooks'
 import { useNavigation, useI18n, useSoftkey, usePopup } from 'hooks'
 import { ListView, AboutApp, AboutWikipedia, PrivacyTerms, Feedback } from 'components'
-import { goto } from 'utils'
+import { goto, openExternal } from 'utils'
 
 export const Settings = () => {
   const containerRef = useRef()
@@ -20,7 +20,7 @@ export const Settings = () => {
 
     // open link
     if (item.link) {
-      window.open(item.link)
+      openExternal(item.link)
     } else if (item.path) {
       route(item.path)
     } else if (item.action) {
diff --git a/src/hooks/useArticleLinksNavigation.js b/src/hooks/useArticleLinksNavigation.js
@@ -1,7 +1,10 @@
 import { useState, useEffect } from 'preact/hooks'
 import { useSoftkey, usePopup, useI18n } from 'hooks'
-import { viewport, INTERWIKI_KEYS, normalizeTitle, getDirection } from 'utils'
 import { ArticlePreview } from 'components'
+import {
+  viewport, INTERWIKI_KEYS, normalizeTitle, getDirection,
+  openExternal
+} from 'utils'
 
 const SELECTED_ATTRIBUTE = 'data-selected'
 
@@ -65,7 +68,7 @@ export const useArticleLinksNavigation = (
       showArticlePreview({ title, lang, dir, source })
     },
     external: ({ href }) => {
-      window.open(href)
+      openExternal(href)
     }
   }
 
diff --git a/src/utils/goto.js b/src/utils/goto.js
@@ -1,5 +1,5 @@
 import { route } from 'preact-router'
-import { canonicalizeTitle, getAppLanguage } from 'utils'
+import { canonicalizeTitle, getAppLanguage, openExternal } from 'utils'
 
 const article = (lang, title, replace = false) => {
   if (!Array.isArray(title)) {
@@ -17,11 +17,11 @@ const tips = () => route('/tips')
 
 const termsOfUse = () => {
   const lang = getAppLanguage()
-  window.open(`https://foundation.m.wikimedia.org/wiki/Terms_of_Use/${lang}`)
+  openExternal(`https://foundation.m.wikimedia.org/wiki/Terms_of_Use/${lang}`)
 }
 
 const privacyPolicy = () => {
-  window.open('https://foundation.m.wikimedia.org/wiki/Privacy_policy')
+  openExternal('https://foundation.m.wikimedia.org/wiki/Privacy_policy')
 }
 
 const back = () => window.history.back()
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -17,6 +17,7 @@ export * from './mode'
 export * from './mwApi'
 export * from './normalizeTitle'
 export * from './onboarding'
+export * from './openExternal'
 export * from './sendErrorLog'
 export * from './sendEvent'
 export * from './sendFeedback'
diff --git a/src/utils/openExternal.js b/src/utils/openExternal.js
@@ -0,0 +1,14 @@
+export const openExternal = url => {
+  if (window.MozActivity) {
+    // eslint-disable-next-line no-new
+    new window.MozActivity({
+      name: 'view',
+      data: {
+        type: 'url',
+        url
+      }
+    })
+  } else {
+    window.open(url)
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import { h } from 'preact'`
`2`	`2`	`import { useRef, useLayoutEffect } from 'preact/hooks'`
`3`	`3`	`import { useI18n, useSoftkey, usePopup, useRange, useArticleMediaInfo } from 'hooks'`
	`4`	`+import { openExternal } from 'utils'`
`4`	`5`
`5`	`6`	`const MAX_DESCRIPTION_HEIGHT = 45`
`6`	`7`
`@@ -15,7 +16,7 @@ const AboutContainer = ({ mediaInfo, dir, title, caption, close }) => {`
`15`	`16`	`right: mediaInfo && mediaInfo.filePage ? i18n('softkey-more-info') : '',`
`16`	`17`	`onKeyRight: () => {`
`17`	`18`	`if (mediaInfo && mediaInfo.filePage) {`
`18`		`- window.open(mediaInfo.filePage)`
	`19`	`+ openExternal(mediaInfo.filePage)`
`19`	`20`	`}`
`20`	`21`	`}`
`21`	`22`	`}, [mediaInfo])`