AvatarURL persistance issues fix for Web3 Brave Talk (#1108)

* adding routine to clear local storage of avatar data

* first localStorage clear

* adding removal of session storage

* change storage clear timing

* localstorage and session storage clear at different times

* testing multiple deletes

* experiment: clear at the end of conference-page call

* experiment 2: clear only before jitsi load

* adding jwt avatar url access

* delete-me: commit for the sake of dev2 compat

* Revert "delete-me: commit for the sake of dev2 compat"

This reverts commit f2a389b.

* quick fix for 414 URI too big when avatar is deselected

* debug statements on selection

* more debuggin

* removing console logs for other feature

---------

Co-authored-by: David Suh <davidsuh@Davids-MacBook-Pro.local>
Co-authored-by: Marshall T. Rose <mrose17@gmail.com>

src/components/web3/OptionalSettings.tsx

@@ -57,7 +57,7 @@ export const OptionalSettings: React.FC<Props> = ({
   const onToggle = (idx: number) => {
     const imageUrl = nfts[idx].image_url;
     if (nft === imageUrl) {
-      setNft(noNftImage);
+      setNft("");
     } else {
       setNft(imageUrl);
     }

src/components/web3/core.ts

@@ -49,6 +49,7 @@ export function rememberAvatarUrl(url: string | undefined | null) {
  * Gets the currently set avatar url, if any
  * @returns {string|null} - The avatar url value or a null value
  */
-export function getAvatarUrl(): string | null {
-  return window.sessionStorage.getItem(AVATAR_URL_SESSION_KEY);
+export function getAvatarUrl(jwt: string): string | null {
+  const sessionAvatar = window.sessionStorage.getItem(AVATAR_URL_SESSION_KEY);
+  return sessionAvatar || jwt_decode(jwt).avatar_url || null;
 }

src/jitsi/conference-page.ts

@@ -17,6 +17,26 @@ import {
  * @param {JitsiOptions} options - Configuration options for the conference room
  * @returns {IJitsiMeetApi} The Jitsi API instance for the conference room
  */
+
+function clearAvatarInfoFromLocalStorage() {
+  const jitsiLocalStorageSettings =
+    window.localStorage.getItem("jitsiLocalStorage");
+  if (jitsiLocalStorageSettings) {
+    const jitsiLocalStorageSettingsObj = JSON.parse(jitsiLocalStorageSettings);
+    let baseSettings = jitsiLocalStorageSettingsObj["features/base/settings"];
+    if (baseSettings) {
+      baseSettings = JSON.parse(baseSettings);
+      baseSettings["avatarURL"] = "";
+      jitsiLocalStorageSettingsObj["features/base/settings"] =
+        JSON.stringify(baseSettings);
+    }
+    window.localStorage.setItem(
+      "jitsiLocalStorage",
+      JSON.stringify(jitsiLocalStorageSettingsObj)
+    );
+  }
+}
+
 export const renderConferencePage = async (
   jitsiEventHandlers: JitsiEventHandler[],
   options: JitsiOptions,
@@ -26,7 +46,7 @@ export const renderConferencePage = async (
   const { roomName, jwt } = options;
   reportMethod("renderConferencePage", { roomName, jwt });
   reportMethod("JitsiMeetExternalAPI", options);
-
+  clearAvatarInfoFromLocalStorage();
   const JitsiMeetJS = new JitsiMeetExternalAPI(config.webrtc_domain, options);
   reportAction("JitsiMeetExternalAPI", { status: "activated!" });
   updateSubject(JitsiMeetJS, options);
@@ -37,12 +57,11 @@ export const renderConferencePage = async (
       context.inactiveInterval
     );
   }
-
-  const avatarUrl = getAvatarUrl();
+  const avatarUrl = getAvatarUrl(jwt);
   if (avatarUrl) {
     JitsiMeetJS.executeCommand("avatarUrl", avatarUrl);
   }
-
+  window.sessionStorage.removeItem("avatar_url");
   jitsiEventHandlers.forEach(({ name, fn }: JitsiEventHandler) => {
     JitsiMeetJS.on(name, fn(JitsiMeetJS, context, options));
   });