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

…ents
IEduStu · Jul 31, 2024 · b791e7e · b791e7e
2 parents 85544ca + 2b60b3a
commit b791e7e
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 84 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -29,7 +29,7 @@ jobs:
         run: npm run lint
       # Create recursivelly the destiantion dir with
       # "--parrents where no error if existing, make parent directories as needed."
-      - run: mkdir -p ./build/${{ github.ref_name }}
+      - run: mkdir -p ./build/${{ github.head_ref || github.ref_name }}
       - name: Deploy to GitHub Pages (multi-branch)
         if: github.event_name == 'push' && github.actor != 'dependabot[bot]' && env.GITHUB_PAGES_MULTI_BRANCH == 'true'
         uses: peaceiris/actions-gh-pages@v4
@@ -38,7 +38,7 @@ jobs:
           publish_dir: ./build
           # in stremio, we use `feat/features-name` or `fix/this-bug`
           # so we need a recursive creation of the destination dir
-          destination_dir: ${{ github.ref_name }}
+          destination_dir: ${{ github.head_ref || github.ref_name }}
           allow_empty_commit: true
       - name: Upload build to GitHub Pages
         if: github.event_name == 'push' && env.GITHUB_PAGES_MULTI_BRANCH != 'true'

diff --git a/src/routes/MetaDetails/StreamsList/Stream/Stream.js b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
@@ -4,11 +4,11 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
+const { t } = require('i18next');
 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 }) => {
@@ -19,12 +19,6 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
 
     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) {
@@ -89,6 +83,10 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
             null;
     }, [href, deepLinks]);
 
+    const streamLink = React.useMemo(() => {
+        return deepLinks?.externalPlayer?.download;
+    }, [deepLinks]);
+
     const markVideoAsWatched = React.useCallback(() => {
         if (typeof videoId === 'string') {
             core.transport.dispatch({
@@ -116,14 +114,11 @@ 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)
+        closeMenu();
+        if (streamLink) {
+            navigator.clipboard.writeText(streamLink)
                 .then(() => {
                     toast.show({
                         type: 'success',
@@ -138,87 +133,74 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
                         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}>
+    const renderLabel = React.useMemo(() => function renderLabel({ className, children, ...props }) {
+        return (
+            <Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} target={target} download={download} 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>
+        );
+    }, [thumbnail, progress, addonName, name, description, href, target, download, 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]
-    );
+                        </Button>
+                }
+            </div>
+        );
+    }, [copyStreamLink, onClick]);
+
+    React.useEffect(() => {
+        if (!routeFocused) {
+            closeMenu();
+        }
+    }, [routeFocused]);
 
     return (
         <Popup
             className={className}
-            thumbnail={thumbnail}
-            progress={progress}
-            addonName={addonName}
-            name={name}
-            description={description}
-            href={href}
-            {...props}
             onMouseUp={popupLabelOnMouseUp}
             onLongPress={popupLabelOnLongPress}
             onContextMenu={popupLabelOnContextMenu}

diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -181,6 +181,7 @@
                 font-weight: 500;
             }
         }
+
 		.context-menu-container {
             &.menu-direction-top-left,
             &.menu-direction-bottom-left {