Merge remote-tracking branch 'origin/development' into mobileImprovem…

…ents

.github/workflows/build.yml

@@ -31,7 +31,7 @@ jobs:
       # "--parrents where no error if existing, make parent directories as needed."
       - run: mkdir -p ./build/${{ github.ref_name }}
       - name: Deploy to GitHub Pages (multi-branch)
-        if: github.actor != 'dependabot[bot]' && env.GITHUB_PAGES_MULTI_BRANCH == 'true'
+        if: github.event_name == 'push' && github.actor != 'dependabot[bot]' && env.GITHUB_PAGES_MULTI_BRANCH == 'true'
         uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
@@ -41,13 +41,13 @@ jobs:
           destination_dir: ${{ github.ref_name }}
           allow_empty_commit: true
       - name: Upload build to GitHub Pages
-        if: env.GITHUB_PAGES_MULTI_BRANCH != 'true'
+        if: github.event_name == 'push' && env.GITHUB_PAGES_MULTI_BRANCH != 'true'
         uses: actions/upload-pages-artifact@v3
         with:
           name: stremio-web
           path: build
       - name: Deploy build to GitHub Pages (single branch)
-        if: env.GITHUB_PAGES_MULTI_BRANCH != 'true'
+        if: github.event_name == 'push' && env.GITHUB_PAGES_MULTI_BRANCH != 'true'
         uses: actions/deploy-pages@v4
         with:
           artifact_name: stremio-web

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'} />
     ), []);
 
-    return (
-        <Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick}>
-            <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>
+    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>
-                }
-                {
-                    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>
+                        <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 (
+        <Popup
+            className={className}
+            thumbnail={thumbnail}
+            progress={progress}
+            addonName={addonName}
+            name={name}
+            description={description}
+            href={href}
+            {...props}
+            onMouseUp={popupLabelOnMouseUp}
+            onLongPress={popupLabelOnLongPress}
+            onContextMenu={popupLabelOnContextMenu}
+            open={menuOpen}
+            onCloseRequest={closeMenu}
+            renderLabel={renderLabel}
+            renderMenu={renderMenu}
+        />
     );
 };
 

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;
@@ -123,6 +131,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) {
@@ -145,6 +180,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%;
+            }
         }
     }
 }

src/routes/MetaDetails/StreamsList/styles.less

@@ -204,6 +204,7 @@
 
         .streams-container {
             margin-top: 0;
+            overflow: visible;
 
             @supports not selector(::-webkit-scrollbar-thumb) {
                 scrollbar-color: @color-surface-light5-20 transparent;

src/routes/MetaDetails/VideosList/styles.less

@@ -74,5 +74,9 @@
 @media only screen and (max-width: @minimum) {
     .videos-list-container {
         overflow: visible;
+
+        .videos-container {
+            overflow: auto;
+        }
     }
 }