Merge branch 'master' of https://github.com/hkbus/hk-independent-bus-eta

hkbus · Jan 22, 2024 · a5ef0d0 · a5ef0d0
2 parents 149ed1c + 77371eb
commit a5ef0d0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/components/route-eta/StopAccordion.tsx b/src/components/route-eta/StopAccordion.tsx
@@ -22,6 +22,7 @@ import { useTranslation } from "react-i18next";
 import { toProperCase } from "../../utils";
 import TimeReport from "./TimeReport";
 import ShareIcon from "@mui/icons-material/Share";
+import WatchIcon from "@mui/icons-material/Watch";
 import { SharingModalProps } from "./SharingModal";
 import ReactNativeContext from "../../ReactNativeContext";
 
@@ -54,6 +55,7 @@ const StopAccordion = React.forwardRef<HTMLDivElement, StopAccordionProps>(
     } = useContext(AppContext);
     const { alarmStopId, toggleStopAlarm } = useContext(ReactNativeContext);
     const { isStopAlarm } = useContext(ReactNativeContext);
+    const { os } = useContext(ReactNativeContext);
     const { t, i18n } = useTranslation();
     const { fares, faresHoliday } = routeList[routeId];
     const stop = stopList[stopId];
@@ -80,6 +82,17 @@ const StopAccordion = React.forwardRef<HTMLDivElement, StopAccordionProps>(
       [onShareClick, routeId, idx, stopId]
     );
 
+    const handleWatchClick = useCallback(
+      (e) => {
+        const isApple =
+          os === "ios" || /iPad|iPhone|iPod|Mac/.test(navigator.userAgent);
+        const subdomain = isApple ? "watch" : "wear";
+        const url = `https://${subdomain}.hkbus.app/route/${routeId.toLowerCase()}/${stopId}%2C${idx}`;
+        window.open(url, "_blank");
+      },
+      [routeId, idx, stopId, os]
+    );
+
     const handleChangeInner = useCallback(
       (_: unknown, expand: boolean) => {
         onSummaryClick(idx, expand);
@@ -154,6 +167,14 @@ const StopAccordion = React.forwardRef<HTMLDivElement, StopAccordionProps>(
               </IconButton>
             </Box>
             <Box>
+              <IconButton
+                aria-label="open-on-watch"
+                onClick={handleWatchClick}
+                style={{ backgroundColor: "transparent" }}
+                size="large"
+              >
+                <WatchIcon />
+              </IconButton>
               <IconButton
                 aria-label="share"
                 onClick={handleShareClick}

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
@@ -51,7 +51,6 @@ import Donations from "../Donations";
 import PersonalizeDialog from "../components/settings/PersonalizeDialog";
 import { useNavigate } from "react-router-dom";
 import ReactNativeContext from "../ReactNativeContext";
-import { isSafari } from "react-world-compass";
 
 const Settings = () => {
   const {
@@ -67,6 +66,7 @@ const Settings = () => {
     analytics,
   } = useContext(AppContext);
   const { debug, toggleDebug } = useContext(ReactNativeContext);
+  const { os } = useContext(ReactNativeContext);
   const [updating, setUpdating] = useState(false);
   const [showGeoPermissionDenied, setShowGeoPermissionDenied] = useState(false);
   const [isCopied, setIsCopied] = useState(false);
@@ -78,6 +78,8 @@ const Settings = () => {
     () => Math.floor(Math.random() * Donations.length),
     []
   );
+  const isApple =
+    os === "ios" || /iPad|iPhone|iPod|Mac/.test(navigator.userAgent);
 
   const navigate = useNavigate();
 
@@ -289,9 +291,7 @@ const Settings = () => {
         <ListItemButton
           component={"a"}
           href={
-            isSafari
-              ? `https://hkbus.app/watch.html`
-              : `https://hkbus.app/wear.html`
+            isApple ? `https://watch.hkbus.app/` : `https://wear.hkbus.app/`
           }
           target="_blank"
           onClick={() => {