From ad58ab069e144af48cc062bf8acf247243ecfd79 Mon Sep 17 00:00:00 2001
From: Namyts <35004248+Namyts@users.noreply.github.com>
Date: Tue, 23 Jul 2024 09:49:58 +0100
Subject: [PATCH] suggested style changes. infohash menu item is now magnetic
 link item

---
 .../MetaDetails/StreamsList/Stream/Stream.js  | 12 ++---
 .../StreamsList/Stream/styles.less            | 53 +++++++++----------
 .../MetaDetails/StreamsList/StreamsList.js    |  1 -
 3 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/Stream/Stream.js b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
index 5cb31b251..484e5e08a 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/Stream.js
+++ b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
@@ -29,7 +29,6 @@ const Stream = ({
     thumbnail,
     progress,
     deepLinks,
-    infoHash,
     ...props
 }) => {
     const profile = useProfile();
@@ -123,10 +122,10 @@ const Stream = ({
         [props.onClick, profile.settings, markVideoAsWatched]
     );
 
-    const copyInfoHashToClipboard = React.useCallback((event) => {
+    const copyMagneticLinkToClipboard = React.useCallback((event) => {
         event.preventDefault();
-        if (infoHash && navigator?.clipboard) {
-            navigator?.clipboard?.writeText(infoHash);
+        if (deepLinks?.externalPlayer?.download && navigator?.clipboard) {
+            navigator.clipboard.writeText(deepLinks.externalPlayer.download);
             toast.show({
                 type: 'success',
                 title: t('PLAYER_COPY_DOWNLOAD_LINK_SUCCESS'),
@@ -207,8 +206,8 @@ const Stream = ({
                 <Button className={styles['context-menu-option-container']} title={'Play'} onClick={onClick}>
                     <div className={styles['context-menu-option-label']}>{t('CTX_PLAY')}</div>
                 </Button>
-                {infoHash && <Button className={styles['context-menu-option-container']} title={'infoHash'} onClick={copyInfoHashToClipboard}>
-                    <div className={styles['context-menu-option-label']}>{t('CTX_COPY_INFOHASH')}</div>
+                {deepLinks?.externalPlayer?.download && <Button className={styles['context-menu-option-container']} title={'Magnetic Link'} onClick={copyMagneticLinkToClipboard}>
+                    <div className={styles['context-menu-option-label']}>{t('CTX_COPY_VIDEO_DOWNLOAD_LINK')}</div>
                 </Button>}
             </div>
         );
@@ -261,7 +260,6 @@ Stream.propTypes = {
         }),
     }),
     onClick: PropTypes.func,
-    infoHash: PropTypes.string,
 };
 
 module.exports = Stream;
diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less
index fa7509e3a..4e5151a88 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -111,30 +111,30 @@
         color: var(--primary-foreground-color);
         background-color: var(--secondary-accent-color);
     }
-}
 
-.context-menu-container {
-	max-width: calc(90% - 1.5rem);
-	z-index: 2;
-
-	.context-menu-content {
-		--spatial-navigation-contain: contain;
-
-		.context-menu-option-container {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			padding: 1rem 1.5rem;
-
-			&:hover,
-			&:focus {
-				background-color: var(--overlay-color);
-			}
-
-			.context-menu-option-label {
-				font-size: 1rem;
-				font-weight: 500;
-				color:var(--primary-foreground-color);
+	.context-menu-container {
+		max-width: calc(90% - 1.5rem);
+		z-index: 2;
+	
+		.context-menu-content {
+			--spatial-navigation-contain: contain;
+	
+			.context-menu-option-container {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				padding: 1rem 1.5rem;
+	
+				&:hover,
+				&:focus {
+					background-color: var(--overlay-color);
+				}
+	
+				.context-menu-option-label {
+					font-size: 1rem;
+					font-weight: 500;
+					color:var(--primary-foreground-color);
+				}
 			}
 		}
 	}
@@ -161,12 +161,7 @@
                 font-weight: 500;
             }
         }
-    }
-}
-
-@media only screen and (max-width: @minimum) {
-    .video-container {
-        .context-menu-container {
+		.context-menu-container {
             &.menu-direction-top-left,
             &.menu-direction-bottom-left {
                 right: 1.5rem;
diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index da7b657ab..9c8cd1c43 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -151,7 +151,6 @@ const StreamsList = ({ className, video, ...props }) => {
                                 progress={stream.progress}
                                 deepLinks={stream.deepLinks}
                                 onClick={stream.onClick}
-                                infoHash={stream.infoHash}
                             />
                         ))}
                     </div>