From 5275c56725f07f7f2d5b4e2628b942bca068b87d Mon Sep 17 00:00:00 2001
From: Vijay <74645268+vijaysingh2219@users.noreply.github.com>
Date: Wed, 10 Apr 2024 22:26:18 +0530
Subject: [PATCH 1/2] Implement functionality to open URL in new tab on middle
 click

Added handleClick function to check for middle mouse button (event.button === 1), opening the URL in a new tab using window.open.
Improves user experience by offering an alternative method to open URLs without leaving the current page.
---
 src/components/player/base/BackLink.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/player/base/BackLink.tsx b/src/components/player/base/BackLink.tsx
index a965751f..23bcb668 100644
--- a/src/components/player/base/BackLink.tsx
+++ b/src/components/player/base/BackLink.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -7,11 +8,23 @@ export function BackLink(props: { url: string }) {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    // Check if center mouse button is clicked
+    if (event.button === 1) {
+      // Open the URL in a new tab
+      window.open(props.url, "_blank");
+    } else {
+      // Navigate normally for other clicks
+      navigate(props.url);
+    }
+  };
   return (
     <div className="flex items-center">
       <button
         type="button"
-        onClick={() => navigate(props.url)}
+        onContextMenu={(e) => e.preventDefault()}
+        onMouseUp={handleClick}
         className="py-1 -my-1 px-2 -mx-2 tabbable rounded-lg flex items-center cursor-pointer text-type-secondary hover:text-white transition-colors duration-200 font-medium"
       >
         <Icon className="mr-2" icon={Icons.ARROW_LEFT} />

From 374fd57dbc7ac56fc06db19d676c7af2c73e9edd Mon Sep 17 00:00:00 2001
From: Vijay <74645268+vijaysingh2219@users.noreply.github.com>
Date: Thu, 11 Apr 2024 03:48:56 +0530
Subject: [PATCH 2/2] Replaced button with react-router-dom's Link component
 for better navigation.

---
 src/components/player/base/BackLink.tsx | 23 ++++-------------------
 1 file changed, 4 insertions(+), 19 deletions(-)

diff --git a/src/components/player/base/BackLink.tsx b/src/components/player/base/BackLink.tsx
index 23bcb668..251a673c 100644
--- a/src/components/player/base/BackLink.tsx
+++ b/src/components/player/base/BackLink.tsx
@@ -1,36 +1,21 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import { Icon, Icons } from "@/components/Icon";
 
 export function BackLink(props: { url: string }) {
   const { t } = useTranslation();
-  const navigate = useNavigate();
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    // Check if center mouse button is clicked
-    if (event.button === 1) {
-      // Open the URL in a new tab
-      window.open(props.url, "_blank");
-    } else {
-      // Navigate normally for other clicks
-      navigate(props.url);
-    }
-  };
   return (
     <div className="flex items-center">
-      <button
-        type="button"
-        onContextMenu={(e) => e.preventDefault()}
-        onMouseUp={handleClick}
+      <Link
+        to={props.url}
         className="py-1 -my-1 px-2 -mx-2 tabbable rounded-lg flex items-center cursor-pointer text-type-secondary hover:text-white transition-colors duration-200 font-medium"
       >
         <Icon className="mr-2" icon={Icons.ARROW_LEFT} />
         <span className="md:hidden">{t("player.back.short")}</span>
         <span className="hidden md:block">{t("player.back.default")}</span>
-      </button>
+      </Link>
     </div>
   );
 }