Improve URL generation for audio media objects in GCS (#3434)

Author: yifanmai

helm-frontend/src/components/MediaObjectDisplay.tsx

@@ -27,7 +27,7 @@ export default function MediaObjectDisplay({ mediaObject }: Props) {
     }
     const url = getBenchmarkEndpoint(
       mediaObject.location
-        .replace("benchmark_output/", "")
+        .replace(/^.*benchmark_output\//, "")
         .replace("prod_env/", "../"),
     );
     return (

helm-frontend/src/utils/getBenchmarkEndpoint.ts

@@ -2,8 +2,9 @@ export default function getBenchmarkEndpoint(path: string): string {
   if (path.startsWith("http://") || path.startsWith("https://")) {
     return path;
   }
-  return `${window.BENCHMARK_OUTPUT_BASE_URL.replace(/\/$/, "")}/${path.replace(
-    /^\//,
-    "",
-  )}`;
+  return `${window.BENCHMARK_OUTPUT_BASE_URL.replace(/\/$/, "")}/${path
+    .replace(/^\//, "")
+    .split("/")
+    .map((component) => encodeURIComponent(component))
+    .join("/")}`;
 }