diff --git a/packages/gallery/src/components/helpers/videoScrollHelper.js b/packages/gallery/src/components/helpers/videoScrollHelper.js index 5883fea6b..e7022f033 100644 --- a/packages/gallery/src/components/helpers/videoScrollHelper.js +++ b/packages/gallery/src/components/helpers/videoScrollHelper.js @@ -94,6 +94,9 @@ class VideoScrollHelper { //case VIDEO_EVENTS.hovered: this.itemHovered(eventData); break; + case GALLERY_CONSTS.events.HOVER_UNSET: + this.itemHoveredUnset(eventData); + break; case GALLERY_CONSTS.events.VIDEO_ENDED: //case VIDEO_EVENTS.ended: this.videoEnded(eventData.idx); @@ -121,6 +124,15 @@ class VideoScrollHelper { } } + itemHoveredUnset(idx) { + if (this.videoPlay !== 'hover') return; + if (this.IdxExistsInVideoItems(idx)) { + if (this.currentPlayingIdx === idx) { + this.stop(idx); + } + } + } + itemClicked(idx) { if (this.videoPlay !== 'onClick') return; // if (this.itemClick !== 'nothing') return; diff --git a/packages/gallery/src/components/item/itemView.js b/packages/gallery/src/components/item/itemView.js index 4856c0ee8..357bbc0ac 100644 --- a/packages/gallery/src/components/item/itemView.js +++ b/packages/gallery/src/components/item/itemView.js @@ -106,6 +106,10 @@ class ItemView extends React.Component { onMouseLeave() { if (!utils.isMobile()) { this.props.actions.eventsListener(GALLERY_CONSTS.events.HOVER_SET, -1); + this.props.actions.eventsListener( + GALLERY_CONSTS.events.HOVER_UNSET, + this.props.idx + ); } } @@ -125,6 +129,10 @@ class ItemView extends React.Component { onBlur() { if (this.props.settings?.isAccessible) { this.props.actions.eventsListener(GALLERY_CONSTS.events.HOVER_SET, -1); + this.props.actions.eventsListener( + GALLERY_CONSTS.events.HOVER_UNSET, + this.props.idx + ); } this.props.actions.eventsListener( GALLERY_CONSTS.events.ITEM_LOST_FOCUS, diff --git a/packages/lib/src/common/constants/events.ts b/packages/lib/src/common/constants/events.ts index 120626020..5e5849bab 100644 --- a/packages/lib/src/common/constants/events.ts +++ b/packages/lib/src/common/constants/events.ts @@ -11,6 +11,7 @@ const EVENTS = { VIDEO_PAUSED: 'VIDEO_PAUSED', VIDEO_PLAYED: 'VIDEO_PLAYED', HOVER_SET: 'HOVER_SET', + HOVER_UNSET: 'HOVER_UNSET', LOAD_MORE_CLICKED: 'LOAD_MORE_CLICKED', ITEM_CLICKED: 'ITEM_CLICKED', THUMBNAIL_CLICKED: 'THUMBNAIL_CLICKED',