Merge pull request #12 from zekefarwell/strava-update-fix

Fixes for compatibility with Strava UI update
zekefarwell · Jan 25, 2024 · 6e35157 · 6e35157
2 parents fb48162 + 3d75582
commit 6e35157
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 16 deletions.
diff --git a/background.js b/background.js
@@ -2,8 +2,46 @@
 const url_prefix = "https://heatmap-external-{switch:a,b,c}.strava.com/tiles-auth/";
 const url_suffix = "/{zoom}/{x}/{y}.png"
 
-async function getHeatmapUrl(map_color, map_type, tab_url, store_id)
+async function getHeatmapUrl(tab_url, store_id)
 {
+    // Strava url format:  https://www.strava.com/maps/global-heatmap?style=dark&terrain=false&sport=Ride&gColor=blue    
+    let strava_url = new URL(tab_url);
+
+    // Attempt to set map type based on sport url parameter.
+    // Walk and hike are the same as run. Default to 'all'.
+    let sport = strava_url.searchParams.get('sport').toLowerCase();
+    if  (sport == 'walk' || sport == 'hike') {
+        sport = 'run';
+    }
+    let map_type;
+    switch (sport) {
+        case 'all':
+        case 'ride':
+        case 'run':
+        case 'water':
+        case 'winter':
+            map_type = sport;
+            break;
+        default:
+            map_type = 'all';
+    }
+
+    // Attempt to set map color based on gColor url parameter. Default to  'hot'.
+    let gColor = strava_url.searchParams.get('gColor');
+    let map_color;
+    switch (gColor) {
+        case 'hot':
+        case 'blue':
+        case 'purple':
+        case 'gray':
+        case 'bluered':
+        case 'mobileblue':
+            map_color = gColor;
+            break;
+        default:
+            map_color = 'hot';
+    }
+
     let pair = await getCookieValue('CloudFront-Key-Pair-Id', tab_url, store_id);
     let policy = await getCookieValue('CloudFront-Policy', tab_url, store_id);
     let signature = await getCookieValue('CloudFront-Signature', tab_url, store_id);
@@ -12,7 +50,7 @@ async function getHeatmapUrl(map_color, map_type, tab_url, store_id)
     let heatmap_url = url_prefix + map_type + '/' + map_color + url_suffix + query_string
 
     let error = (pair && policy && signature) ? false : true
-    return { error, heatmap_url }
+    return { error, heatmap_url, map_color, map_type }
 }
 
 async function getCookieValue(name, url, store_id)
@@ -27,8 +65,6 @@ async function getCookieValue(name, url, store_id)
 
 browser.runtime.onMessage.addListener(async function (message, sender, sendResponse) {
     return getHeatmapUrl(
-        message.map_color,
-        message.map_type,
         sender.tab.url,
         sender.tab.cookieStoreId
     )

diff --git a/content.css b/content.css
@@ -3,7 +3,7 @@ button.jsh-modal-toggle {
     border-radius: 3px;
     width: 40px;
     height: 40px;
-    margin: 10px;
+    margin: 80px 10px 10px;
     padding: 0;
     background-color: white;
     /* background-image: url('icons/icon.svg'); */
@@ -29,6 +29,7 @@ button.jsh-modal-toggle {
     box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
     max-width: 600px;
     margin: 200px auto;
+    padding: 20px;
 }
 .jsh-modal-dialog code {
     background-color: lightgray;
@@ -50,9 +51,27 @@ button.jsh-modal-toggle {
     top: 8px;
     background-color: transparent;
 }
-.jsh-modal-dialog > .modal-header, .jsh-modal-dialog > .modal-body {
-    background-color: transparent;
+.jsh-modal-dialog > .modal-header {
+    margin-top: 0px;
+}
+
+.jsh-modal-dialog a.btn {
+    margin-right: 4px;
+    padding: 10px 20px;
+    line-height: 2;
+    border: 1px solid #E7E7E7;
+    border-radius: 5px;
+    color: #000;
+    font-weight: bold;
+}
+.jsh-modal-dialog a.btn:visited {
+    color: #000;
 }
+.jsh-modal-dialog a.btn:hover {
+    background-color: #F0F0F0;
+    text-decoration: none;
+}
+
 .jsh-modal-dialog .btn.active {
     background-color: #f0f0f5;
-}
+}
diff --git a/content.js b/content.js
@@ -58,23 +58,22 @@ async function insertButtonHtml()
  */
 async function openModalDialog(e)
 {
-    let map_color = document.querySelector(".map-color.active").getAttribute("data-color");
-    let map_type = document.querySelector(".map-type.active").getAttribute("data-type");
-
     // Attempt to build the heatmap url from key pair, policy, and signature cookies
     try {
         let response = await browser.runtime.sendMessage({
             "name": "getHeatmapUrl",
-            "map_color": map_color ?? "hot",
-            "map_type": map_type ?? "all"
         });
         if (response.error) {
             setModalHtmlError(
                 "Error: missing cookies", 
                 "One or more cookies not found - 'CloudFront-Key-Pair-Id', 'CloudFront-Policy', 'CloudFront-Signature'"
             );
         } else {
-            setModalHtmlSuccess(response.heatmap_url, map_color, map_type);
+            setModalHtmlSuccess(
+                response.heatmap_url,
+                response.map_color,
+                response.map_type,
+            );
         }
     } catch(err) {
         console.log(err);

diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "JOSM Strava Heatmap",
   "description": "A browser extension that simplifies getting the TMS imagery url for using the Strava Heatmap in JOSM",
-  "version": "4.1",
+  "version": "5",
   "icons": {
     "48": "icons/icon.png"
   },
@@ -12,7 +12,10 @@
     "clipboardWrite"
   ],
   "content_scripts": [{
-    "matches": ["*://*.strava.com/heatmap*"],
+    "matches": [
+      "*://*.strava.com/heatmap*",
+      "*://*.strava.com/maps*"
+    ],
     "js": [
       "browser-polyfill.min.js",
       "content.js"