ui: spot related api fixes

frontend/app/Router.tsx

@@ -9,11 +9,12 @@ import PublicRoutes from 'App/PublicRoutes';
 import {
   GLOBAL_DESTINATION_PATH,
   IFRAME,
-  JWT_PARAM, SPOT_ONBOARDING
+  JWT_PARAM,
+  SPOT_ONBOARDING
 } from "App/constants/storageKeys";
 import Layout from 'App/layout/Layout';
 import { withStore } from "App/mstore";
-import { checkParam } from 'App/utils';
+import { checkParam, handleSpotJWT } from "App/utils";
 import { ModalProvider } from 'Components/Modal';
 import { ModalProvider as NewModalProvider } from 'Components/ModalContext';
 import { fetchListActive as fetchMetadata } from 'Duck/customField';
@@ -25,7 +26,6 @@ import { fetchTenants } from 'Duck/user';
 import { Loader } from 'UI';
 import { spotsList } from "./routes";
 import * as routes from './routes';
-import { toast } from 'react-toastify'
 
 interface RouterProps
   extends RouteComponentProps,
@@ -72,6 +72,7 @@ const Router: React.FC<RouterProps> = (props) => {
   const spotReqSent = React.useRef(false)
   const [isIframe, setIsIframe] = React.useState(false);
   const [isJwt, setIsJwt] = React.useState(false);
+
   const handleJwtFromUrl = () => {
     const params = new URLSearchParams(location.search)
     const urlJWT = params.get('jwt');
@@ -90,35 +91,7 @@ const Router: React.FC<RouterProps> = (props) => {
     } else {
       spotReqSent.current = true;
     }
-    let tries = 0;
-    if (!jwt) {
-      return;
-    }
-    let int: ReturnType<typeof setInterval>;
-
-    const onSpotMsg = (event: any) => {
-      if (event.data.type === 'orspot:logged') {
-        clearInterval(int);
-        window.removeEventListener('message', onSpotMsg);
-      }
-    };
-    window.addEventListener('message', onSpotMsg);
-
-    int = setInterval(() => {
-      if (tries > 20) {
-        clearInterval(int);
-        window.removeEventListener('message', onSpotMsg);
-        return;
-      }
-      window.postMessage(
-        {
-          type: 'orspot:token',
-          token: jwt,
-        },
-        '*'
-      );
-      tries += 1;
-    }, 250);
+    handleSpotJWT(jwt);
   };
 
   const handleDestinationPath = () => {

frontend/app/api_client.ts

@@ -151,7 +151,7 @@ export default class APIClient {
     let fetch = window.fetch;
     let edp = window.env.API_EDP || window.location.origin + '/api';
     const spotService = path.includes('/spot') && !path.includes('/login')
-    if (spotService) {
+    if (spotService && !edp.includes('api.openreplay.com')) {
       edp = edp.replace('/api', '')
     }
     if (
@@ -181,6 +181,8 @@ export default class APIClient {
       _path = _path.replace('PROJECT_ID', this.siteId + '');
     }
 
+    console.log(edp, _path, init)
+
     return fetch(edp + _path, init).then((response) => {
       if (response.ok) {
         return response;

frontend/app/api_middleware.js

@@ -1,6 +1,7 @@
 import logger from 'App/logger';
 import APIClient from './api_client';
 import { FETCH_ACCOUNT, UPDATE_JWT } from './duck/user';
+import { handleSpotJWT } from "App/utils";
 
 export default () => (next) => (action) => {
   const { types, call, ...rest } = action;
@@ -23,7 +24,7 @@ export default () => (next) => (action) => {
       return response.json();
     })
     .then((json) => json || {}) // TEMP  TODO on server: no empty responses
-    .then(({ jwt, errors, data }) => {
+    .then(({ jwt, spotJwt, errors, data }) => {
       if (errors) {
         next({ type: FAILURE, errors, data });
       } else {
@@ -32,6 +33,9 @@ export default () => (next) => (action) => {
       if (jwt) {
         next({ type: UPDATE_JWT, data: { jwt } });
       }
+      if (spotJwt) {
+        handleSpotJWT(spotJwt);
+      }
     })
     .catch(async (e) => {
       if (e.response?.status === 403) {

frontend/app/duck/user.js

@@ -168,7 +168,7 @@ export const downgradeScope = () => ({
 
 export const login = (params) => ({
   types: LOGIN.toArray(),
-  call: (client) => client.post('/login', params),
+  call: (client) => client.post('/login?spot=true', params),
 });
 
 export const loadingLogin = () => ({

frontend/app/utils/index.ts

@@ -501,3 +501,39 @@ export function truncateStringToFit(string: string, screenWidth: number, charWid
 
   return string.slice(0, frontLen) + ellipsis + string.slice(-backLen);
 }
+
+let sendingRequest = false;
+export const handleSpotJWT = (jwt: string) => {
+  console.log(jwt, sendingRequest)
+  let tries = 0;
+  if (!jwt || sendingRequest) {
+    return;
+  }
+  sendingRequest = true;
+  let int: ReturnType<typeof setInterval>;
+  const onSpotMsg = (event: any) => {
+    if (event.data.type === 'orspot:logged') {
+      clearInterval(int);
+      sendingRequest = false;
+      window.removeEventListener('message', onSpotMsg);
+    }
+  };
+  window.addEventListener('message', onSpotMsg);
+
+  int = setInterval(() => {
+    if (tries > 20) {
+      sendingRequest = false;
+      clearInterval(int);
+      window.removeEventListener('message', onSpotMsg);
+      return;
+    }
+    window.postMessage(
+      {
+        type: 'orspot:token',
+        token: jwt,
+      },
+      '*'
+    );
+    tries += 1;
+  }, 250)
+}

spot/entrypoints/background.ts

@@ -130,7 +130,7 @@ export default defineBackground(() => {
     openInNewTab: true,
     consoleLogs: true,
     networkLogs: true,
-    ingestPoint: "https://foss.openreplay.com",
+    ingestPoint: "https://app.openreplay.com",
   };
   let recordingState = {
     activeTabId: null,
@@ -161,7 +161,7 @@ export default defineBackground(() => {
       str = str.slice(0, -1);
     }
     if (str.includes("app.openreplay.com")) {
-      str = "https://api.openreplay.com";
+      str = str.replace("app.openreplay.com", "api.openreplay.com");
     }
     return str;
   }
@@ -747,7 +747,7 @@ export default defineBackground(() => {
         };
         const videoData = finalVideoBase64;
 
-        getPlatformData().then(({ platform }) => {
+        getPlatformData().then(async ({ platform }) => {
           const cropped =
             finalSpotObj.crop &&
             finalSpotObj.crop[0] + finalSpotObj.crop[1] > 0;
@@ -795,7 +795,14 @@ export default defineBackground(() => {
             },
           );
 
-          const ingestUrl = safeApiUrl(settings.ingestPoint);
+          const data = await browser.storage.local.get("settings");
+          if (!data.settings) {
+            return void sendToActiveTab({
+              type: messages.content.to.notification,
+              message: "Error saving Spot: can't retrieve spot ingest",
+            });
+          }
+          const ingestUrl = safeApiUrl(data.settings.ingestPoint);
 
           const dataUrl = `${ingestUrl}/spot/v1/spots`;
           refreshToken()

spot/entrypoints/content/SavingControls.tsx

@@ -506,7 +506,7 @@ function SavingControls({
                 <p class="text-xs">
                   Spots are saved to your{" "}
                   <a
-                    href="https://foss.openreplay.com/spots"
+                    href="https://app.openreplay.com/spots"
                     class="text-primary no-underline"
                     target="blank"
                   >