@homecode/ui 5.20.8 → 5.20.10

package/dist/esm/src/components/Gallery/Gallery.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Component, createRef, useState, useRef, useLayoutEffect, useEffect } from 'react';
+import { Component, createRef, useState, useRef, useLayoutEffect } from 'react';
 import { createStore } from 'justorm/react';
 import Time from 'timen';
 import compare from 'compareq';
@@ -39,13 +39,7 @@ function Arr({ className, size, icon, ...rest }) {
     return (jsx(Button, { className: cn(S.arr, className), size: size, variant: "clear", ...rest, children: jsx(Icon, { type: icon, size: size }) }));
 }
 function VideoItem({ src, size, isActive, }) {
-    const wrapRef = useRef(null);
-    useEffect(() => {
-        if (isActive)
-            return;
-        wrapRef.current?.querySelector('video')?.pause();
-    }, [isActive, src]);
-    return (jsx("div", { ref: wrapRef, className: cn(S.item, S.videoItem), children: jsx(VideoPlayer, { src: src, size: size, storageKey: `Gallery:${src}`, className: S.video }) }));
+    return (jsx("div", { className: cn(S.item, S.videoItem), children: jsx(VideoPlayer, { src: src, size: size, storageKey: `Gallery:${src}`, isActive: isActive, className: S.video }) }));
 }
 function Item({ src, kind, size, isActive, }) {
     const [loaded, setLoaded] = useState(false);
@@ -167,6 +161,9 @@ class Gallery extends Component {
         }
     };
     onPointerDown = e => {
+        // Pointer on a video belongs to the player (seek, play, volume), not swipe.
+        if (e.target.closest?.(`.${S.video}`))
+            return;
         this.startX = e.pageX;
     };
     onPointerMove = e => {
@@ -225,6 +222,7 @@ class Gallery extends Component {
         const { items, movingDirection, isDragging } = this.store;
         const dirName = DIR_NAME[movingDirection];
         const isSingle = this.isSingle();
+        const isVideoActive = items[isSingle ? 0 : 1]?.kind === 'video';
         const props = omit(rest, ['items', 'onChange', 'animation', 'startIndex']);
         const classes = cn(S.root, isSingle && S.single, cover && S.cover, className);
         const innerClasses = cn(S.inner, initialBounce && S.initialBounce, S[dirName]);
@@ -236,7 +234,7 @@ class Gallery extends Component {
                 props.onPointerLeave = this.onPointerUp;
             }
         }
-        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((item, i) => (jsx(Item, { src: item.src, kind: item.kind, size: size, isActive: isSingle ? i === 0 : i === 1 }, `${i}_${item.src}_${item.kind}`))) }), !isSingle && showArrows && !isDragging && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, loader: () => import('./Dots/Dots.js'), 
+        return (jsxs("div", { className: classes, ...props, children: [jsx("div", { className: innerClasses, ref: this.innerRef, children: items.map((item, i) => (jsx(Item, { src: item.src, kind: item.kind, size: size, isActive: isSingle ? i === 0 : i === 1 }, `${i}_${item.src}_${item.kind}`))) }), !isSingle && showArrows && !isDragging && !isVideoActive && (jsxs(Fragment, { children: [jsx(Arr, { className: S.left, size: size, icon: "chevronLeft", onClick: () => this.move(1) }), jsx(Arr, { className: S.right, size: size, icon: "chevronRight", onClick: () => this.move(-1) })] })), showDots && (jsx(Lazy, { hideSpinner: true, loader: () => import('./Dots/Dots.js'), 
                     // @ts-ignore
                     index: this.index % this.props.items.length, count: this.props.items.length }))] }));
     }

package/dist/esm/src/components/Popup/Popup.js

@@ -343,9 +343,9 @@ class Popup extends Component {
             }
             return;
         }
-        // if scrolling outside this popup - close it
-        if (!this.isPointerOver(e.target, S.content) &&
-            !childs[this.id]?.length) {
+        // if scrolling outside this popup - close it. A scroll inside the trigger
+        // (a search input scrolling its text while the user types) doesn't move it.
+        if (!this.isHoverInside(e.target) && !childs[this.id]?.length) {
             this.close();
         }
     }, 200);

package/dist/esm/src/components/VideoPlayer/VideoPlayer.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import { useRef, useId, useState, useMemo, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/Icon.js';
@@ -12,7 +12,7 @@ import S from './VideoPlayer.styl.js';
 import { TIME_PERSIST_DEBOUNCE_MS, saveStorage, formatTime, VOLUME_POPUP_HIDE_MS, clamp, leadingDebounce, isEditableTarget, loadStorage, getBufferedPercent, DOUBLE_TAP_MS, getStorageKey, timeToProgressPct, KEYBOARD_DEBOUNCE_MS, getSeekDelta, VOLUME_STEP } from './VideoPlayer.helpers.js';
 
 let activePlayerId = null;
-function VideoPlayer({ src, poster, storageKey, size = 'm', autoPlay = false, muted = false, loop = false, className, onPlayChange, onTimeUpdate, }) {
+function VideoPlayer({ src, poster, storageKey, size = 'm', autoPlay = false, muted = false, loop = false, isActive = true, className, onPlayChange, onTimeUpdate, }) {
     const rootRef = useRef(null);
     const videoRef = useRef(null);
     const barRef = useRef(null);
@@ -25,7 +25,10 @@ function VideoPlayer({ src, poster, storageKey, size = 'm', autoPlay = false, mu
     const volumeHideTimerRef = useRef(0);
     const lastTapRef = useRef(0);
     const singleClickTimerRef = useRef(0);
-    const playerId = useMemo(() => storageKey ?? src ?? Math.random().toString(36).slice(2), [storageKey, src]);
+    const isActiveRef = useRef(isActive);
+    isActiveRef.current = isActive;
+    // Per-instance id: two players may share a src/storageKey (e.g. Gallery slots).
+    const playerId = useId();
     const lsKey = getStorageKey(src, storageKey);
     const [isReady, setIsReady] = useState(false);
     const [isPlaying, setIsPlaying] = useState(false);
@@ -56,8 +59,9 @@ function VideoPlayer({ src, poster, storageKey, size = 'm', autoPlay = false, mu
             label.textContent = formatTime(time);
     }, []);
     const claimKeyboard = useCallback(() => {
-        activePlayerId = playerId;
-    }, [playerId]);
+        if (isActive)
+            activePlayerId = playerId;
+    }, [playerId, isActive]);
     const clearVolumeHideTimer = useCallback(() => {
         window.clearTimeout(volumeHideTimerRef.current);
     }, []);
@@ -157,7 +161,7 @@ function VideoPlayer({ src, poster, storageKey, size = 'm', autoPlay = false, mu
     const debouncedVolumeUp = useMemo(() => leadingDebounce(() => applyVolume(volumeRef.current + VOLUME_STEP, { flashPopup: true }), KEYBOARD_DEBOUNCE_MS), [applyVolume]);
     const debouncedVolumeDown = useMemo(() => leadingDebounce(() => applyVolume(volumeRef.current - VOLUME_STEP, { flashPopup: true }), KEYBOARD_DEBOUNCE_MS), [applyVolume]);
     const onKeyDown = useCallback((e) => {
-        if (activePlayerId !== playerId)
+        if (!isActive || activePlayerId !== playerId)
             return;
         if (isEditableTarget(e.target))
             return;
@@ -184,6 +188,7 @@ function VideoPlayer({ src, poster, storageKey, size = 'm', autoPlay = false, mu
                 break;
         }
     }, [
+        isActive,
         playerId,
         togglePlay,
         debouncedSeekLeft,
@@ -196,6 +201,15 @@ function VideoPlayer({ src, poster, storageKey, size = 'm', autoPlay = false, mu
         callback: onKeyDown,
         isActive: true,
     });
+    useEffect(() => {
+        if (isActive) {
+            activePlayerId = playerId;
+            return;
+        }
+        if (activePlayerId === playerId)
+            activePlayerId = null;
+        videoRef.current?.pause();
+    }, [isActive, playerId]);
     useEffect(() => {
         const onFullscreenChange = () => {
             setIsFullscreen(document.fullscreenElement === rootRef.current);
@@ -242,7 +256,8 @@ function VideoPlayer({ src, poster, storageKey, size = 'm', autoPlay = false, mu
         setLoadProgress(0);
         setDuration(0);
         durationRef.current = 0;
-        activePlayerId = playerId;
+        if (isActiveRef.current)
+            activePlayerId = playerId;
         syncProgressDom(0);
         const stored = loadStorage(lsKey);
         if (typeof stored.volume === 'number') {

package/dist/esm/types/src/components/VideoPlayer/VideoPlayer.d.ts

@@ -1,3 +1,3 @@
 import * as T from './VideoPlayer.types';
 export type VideoPlayerProps = T.Props;
-export declare function VideoPlayer({ src, poster, storageKey, size, autoPlay, muted, loop, className, onPlayChange, onTimeUpdate, }: T.Props): import("react").JSX.Element;
+export declare function VideoPlayer({ src, poster, storageKey, size, autoPlay, muted, loop, isActive, className, onPlayChange, onTimeUpdate, }: T.Props): import("react").JSX.Element;

package/dist/esm/types/src/components/VideoPlayer/VideoPlayer.types.d.ts

@@ -7,6 +7,7 @@ export type Props = ComponentType & {
     autoPlay?: boolean;
     muted?: boolean;
     loop?: boolean;
+    isActive?: boolean;
     onPlayChange?: (playing: boolean) => void;
     onTimeUpdate?: (currentTime: number, duration: number) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.20.8",
+  "version": "5.20.10",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",