Merge pull request #658 from Namyts/feat/right-click-infohash

feat: copy stream link from streams list

src/routes/MetaDetails/StreamsList/Stream/Stream.js

@@ -4,15 +4,57 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const { Button, Image, useProfile, platform, useToast } = require('stremio/common');
+const { Button, Image, useProfile, platform, useToast, Popup, useBinaryState } = require('stremio/common');
 const { useServices } = require('stremio/services');
+const { useRouteFocused } = require('stremio-router');
 const StreamPlaceholder = require('./StreamPlaceholder');
+const { t } = require('i18next');
 const styles = require('./styles');
 
 const Stream = ({ className, videoId, videoReleased, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
     const profile = useProfile();
     const toast = useToast();
     const { core } = useServices();
+    const routeFocused = useRouteFocused();
+
+    const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
+
+    React.useEffect(() => {
+        if (!routeFocused) {
+            closeMenu();
+        }
+    }, [routeFocused]);
+
+    const popupLabelOnMouseUp = React.useCallback((event) => {
+        if (!event.nativeEvent.togglePopupPrevented) {
+            if (event.nativeEvent.ctrlKey || event.nativeEvent.button === 2) {
+                event.preventDefault();
+                toggleMenu();
+            }
+        }
+    }, []);
+    const popupLabelOnContextMenu = React.useCallback((event) => {
+        if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) {
+            event.preventDefault();
+        }
+    }, [toggleMenu]);
+    const popupLabelOnLongPress = React.useCallback((event) => {
+        if (event.nativeEvent.pointerType !== 'mouse' && !event.nativeEvent.togglePopupPrevented) {
+            toggleMenu();
+        }
+    }, [toggleMenu]);
+    const popupMenuOnPointerDown = React.useCallback((event) => {
+        event.nativeEvent.togglePopupPrevented = true;
+    }, []);
+    const popupMenuOnContextMenu = React.useCallback((event) => {
+        event.nativeEvent.togglePopupPrevented = true;
+    }, []);
+    const popupMenuOnClick = React.useCallback((event) => {
+        event.nativeEvent.togglePopupPrevented = true;
+    }, []);
+    const popupMenuOnKeyDown = React.useCallback((event) => {
+        event.nativeEvent.buttonClickPrevented = true;
+    }, []);
 
     const href = React.useMemo(() => {
         return deepLinks ?
@@ -74,41 +116,117 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
         }
     }, [props.onClick, profile.settings, markVideoAsWatched]);
 
+    const streamLink = React.useMemo(() => {
+        return deepLinks?.externalPlayer?.download;
+    }, [deepLinks]);
+
+    const copyStreamLink = React.useCallback((event) => {
+        event.preventDefault();
+        if (streamLink && navigator?.clipboard) {
+            navigator.clipboard.writeText(deepLinks.externalPlayer.download)
+                .then(() => {
+                    toast.show({
+                        type: 'success',
+                        title: t('PLAYER_COPY_STREAM_SUCCESS'),
+                        timeout: 4000
+                    });
+                })
+                .catch(() => {
+                    toast.show({
+                        type: 'error',
+                        title: t('PLAYER_COPY_STREAM_ERROR'),
+                        timeout: 4000,
+                    });
+                });
+
+        } else {
+            toast.show({
+                type: 'error',
+                title: t('PLAYER_COPY_STREAM_ERROR'),
+                timeout: 4000,
+            });
+        }
+        closeMenu();
+    }, [streamLink]);
+
     const renderThumbnailFallback = React.useCallback(() => (
         <Icon className={styles['placeholder-icon']} name={'ic_broken_link'} />
     ), []);
 
+    const renderLabel = React.useMemo(
+        () =>
+            function renderLabel({ className, thumbnail, progress, addonName, name, description, children, ...props }) {
+                return (
+                    <Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick} {...props}>
+                        <div className={styles['info-container']}>
+                            {
+                                typeof thumbnail === 'string' && thumbnail.length > 0 ?
+                                    <div className={styles['thumbnail-container']} title={name || addonName}>
+                                        <Image
+                                            className={styles['thumbnail']}
+                                            src={thumbnail}
+                                            alt={' '}
+                                            renderFallback={renderThumbnailFallback}
+                                        />
+                                    </div>
+                                    :
+                                    <div className={styles['addon-name-container']} title={name || addonName}>
+                                        <div className={styles['addon-name']}>{name || addonName}</div>
+                                    </div>
+                            }
+                            {
+                                progress !== null && !isNaN(progress) && progress > 0 ?
+                                    <div className={styles['progress-bar-container']}>
+                                        <div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
+                                        <div className={styles['progress-bar-background']} />
+                                    </div>
+                                    :
+                                    null
+                            }
+                        </div>
+                        <div className={styles['description-container']} title={description}>{description}</div>
+                        <Icon className={styles['icon']} name={'play'} />
+                        {children}
+                    </Button>
+                );
+            },
+        [onClick]
+    );
+
+    const renderMenu = React.useMemo(
+        () =>
+            function renderMenu() {
+                return (
+                    <div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}>
+                        <Button className={styles['context-menu-option-container']} title={t('CTX_PLAY')}>
+                            <div className={styles['context-menu-option-label']}>{t('CTX_PLAY')}</div>
+                        </Button>
+                        {streamLink && <Button className={styles['context-menu-option-container']} title={t('CTX_COPY_STREAM_LINK')} onClick={copyStreamLink}>
+                            <div className={styles['context-menu-option-label']}>{t('CTX_COPY_STREAM_LINK')}</div>
+                        </Button>}
+                    </div>
+                );
+            }, [copyStreamLink, onClick]
+    );
+
     return (
-        <Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick}>
+        <Popup
-            <div className={styles['info-container']}>
+            className={className}
-                {
+            thumbnail={thumbnail}
-                    typeof thumbnail === 'string' && thumbnail.length > 0 ?
+            progress={progress}
-                        <div className={styles['thumbnail-container']} title={name || addonName}>
+            addonName={addonName}
-                            <Image
+            name={name}
-                                className={styles['thumbnail']}
+            description={description}
-                                src={thumbnail}
+            href={href}
-                                alt={' '}
+            {...props}
-                                renderFallback={renderThumbnailFallback}
+            onMouseUp={popupLabelOnMouseUp}
-                            />
+            onLongPress={popupLabelOnLongPress}
-                        </div>
+            onContextMenu={popupLabelOnContextMenu}
-                        :
+            open={menuOpen}
-                        <div className={styles['addon-name-container']} title={name || addonName}>
+            onCloseRequest={closeMenu}
-                            <div className={styles['addon-name']}>{name || addonName}</div>
+            renderLabel={renderLabel}
-                        </div>
+            renderMenu={renderMenu}
-                }
+        />
-                {
-                    progress !== null && !isNaN(progress) && progress > 0 ?
-                        <div className={styles['progress-bar-container']}>
-                            <div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
-                            <div className={styles['progress-bar-background']} />
-                        </div>
-                        :
-                        null
-                }
-            </div>
-            <div className={styles['description-container']} title={description}>{description}</div>
-            <Icon className={styles['icon']} name={'play'} />
-        </Button>
     );
 };
 

src/routes/MetaDetails/StreamsList/Stream/styles.less

@@ -3,6 +3,14 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
 
+:import('~stremio/common/Popup/styles.less') {
+    context-menu-container: menu-container;
+    menu-direction-top-left: menu-direction-top-left;
+    menu-direction-bottom-left: menu-direction-bottom-left;
+    menu-direction-top-right: menu-direction-top-right;
+    menu-direction-bottom-right: menu-direction-bottom-right;
+}
+
 .stream-container {
     display: flex;
     flex-direction: row;
@@ -103,6 +111,33 @@
         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);
+				}
+			}
+		}
+	}
 }
 
 @media only screen and (max-width: @small) {
@@ -125,6 +160,27 @@
             .addon-name {
                 font-weight: 500;
             }
+        }
+		.context-menu-container {
+            &.menu-direction-top-left,
+            &.menu-direction-bottom-left {
+                right: 1.5rem;
+            }
+
+            &.menu-direction-top-right,
+            &.menu-direction-bottom-right {
+                left: 1.5rem;
+            }
+
+            &.menu-direction-top-left,
+            &.menu-direction-top-right {
+                bottom: 90%;
+            }
+
+            &.menu-direction-bottom-left,
+            &.menu-direction-bottom-right {
+                top: 90%;
+            }
         }
     }
 }