From 3ffe3fcc863e17a4ba4bbd748e488dcb512c0d78 Mon Sep 17 00:00:00 2001
From: Gustavo Kuhl <gustavo-kuhl@hotmail.com>
Date: Wed, 11 Dec 2024 14:43:24 -0300
Subject: [PATCH] fix: add ref to control player url

---
 .../components/organisms/Navigation.tsx       |  2 --
 src/common/components/organisms/Player.tsx    | 33 ++++++++++---------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/common/components/organisms/Navigation.tsx b/src/common/components/organisms/Navigation.tsx
index c56692e3..efbc808c 100644
--- a/src/common/components/organisms/Navigation.tsx
+++ b/src/common/components/organisms/Navigation.tsx
@@ -62,8 +62,6 @@ const Navigation: React.FC<NavProps> = ({ isEditable, enterEditMode }) => {
     }),
   );
   const userTheme: UserTheme = useUserTheme();
-  console.log("Navigation.tsx: userTheme", userTheme);
-
   const logout = useLogout();
   const notificationBadgeText = useNotificationBadgeText();
   const pathname = usePathname();
diff --git a/src/common/components/organisms/Player.tsx b/src/common/components/organisms/Player.tsx
index 33a0d9ee..fcf4b950 100644
--- a/src/common/components/organisms/Player.tsx
+++ b/src/common/components/organisms/Player.tsx
@@ -1,27 +1,26 @@
+import { Button } from "@/common/components/atoms/button";
+import useHasWindow from "@/common/lib/hooks/useHasWindow";
+import { trackAnalyticsEvent } from "@/common/lib/utils/analyticsUtils";
+import { AnalyticsEvent } from "@/common/providers/AnalyticsProvider";
+import { AlchemyNetwork } from "@/fidgets/ui/gallery";
+import Image from "next/image";
 import React, {
-  useState,
-  useEffect,
+  ReactElement,
   useCallback,
+  useEffect,
   useRef,
-  ReactElement,
+  useState,
 } from "react";
-import { YouTubeConfig } from "react-player/youtube";
-import ReactPlayer from "react-player";
-import Image from "next/image";
-import useHasWindow from "@/common/lib/hooks/useHasWindow";
 import { IconType } from "react-icons";
 import {
-  LiaVolumeUpSolid,
-  LiaVolumeMuteSolid,
   LiaCircleNotchSolid,
+  LiaVolumeMuteSolid,
+  LiaVolumeUpSolid,
 } from "react-icons/lia";
-import { Button } from "@/common/components/atoms/button";
-import { trackAnalyticsEvent } from "@/common/lib/utils/analyticsUtils";
-import { AnalyticsEvent } from "@/common/providers/AnalyticsProvider";
-import { formatEthereumAddress } from "@/common/lib/utils/ethereum";
-import { Address, isAddress, zeroAddress } from "viem";
+import ReactPlayer from "react-player";
+import { YouTubeConfig } from "react-player/youtube";
+import { Address } from "viem";
 import ScanAddress from "../molecules/ScanAddress";
-import { AlchemyNetwork } from "@/fidgets/ui/gallery";
 
 type ContentMetadata = {
   title?: string | null;
@@ -55,8 +54,10 @@ export const Player: React.FC<PlayerProps> = ({ url }) => {
     started,
     ready,
   });
+  const latestUrlRef = useRef<string | string[]>(url);
 
   const getMetadata = async (_url: string | string[]) => {
+    latestUrlRef.current = _url;
     // Handle array of URLs by taking the first one
     const videoUrl = Array.isArray(_url) ? _url[0] : _url;
 
@@ -85,6 +86,8 @@ export const Player: React.FC<PlayerProps> = ({ url }) => {
 
     if (!snippet) return;
 
+    if (latestUrlRef.current !== _url) return;
+
     setMetadata({
       title: snippet.title,
       channel: snippet.channelTitle,