suggested style changes. infohash menu item is now magnetic link item

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;

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;

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>