fix: LSDV-5256: Stop automatically scrolling if current Paragraph is not on the screen

e2e/tests/sync/audio-paragraphs.test.js

@@ -352,5 +352,56 @@ FFlagMatrix(['fflag_feat_front_lsdv_e_278_contextual_scrolling_short'], function
 
       await assert.equal(scrollPosition.scrollTop, 0);
     });
+
+    FFlagScenario('Paragraph shouldnt automatically scroll if user manually scroll and the current paragraph is not in the screen', async function({ I, LabelStudio, AtAudioView }) {
+      LabelStudio.setFeatureFlags({
+        ff_front_dev_2715_audio_3_280722_short: true,
+        ff_front_1170_outliner_030222_short: true,
+        ...flags,
+      });
+
+      params.config = configWithScroll;
+
+      I.amOnPage('/');
+
+      LabelStudio.init(params);
+
+      await AtAudioView.waitForAudio();
+      await AtAudioView.lookForStage();
+
+      const [{ currentTime: startingAudioTime }, { currentTime: startingParagraphAudioTime }] = await AtAudioView.getCurrentAudio();
+
+      assert.equal(startingAudioTime, startingParagraphAudioTime);
+      assert.equal(startingParagraphAudioTime, 0);
+
+      AtAudioView.clickPlayButton();
+
+      I.wait(2);
+
+      I.executeScript( () => {
+        document.querySelector('[data-testid="phrases-wrapper"]').scrollTo(0, 1000);
+
+        const wheelEvt = document.createEvent('MouseEvents');
+
+        wheelEvt.initEvent('wheel', true, true);
+
+        wheelEvt.deltaY = 1200;
+
+        document.querySelector('[data-testid="phrases-wrapper"]').dispatchEvent(wheelEvt);
+      });
+
+      I.wait(5);
+
+      const scrollPosition = await I.executeScript(function(selector) {
+        const element = document.querySelector(selector);
+
+        return {
+          scrollTop: element.scrollTop,
+          scrollLeft: element.scrollLeft,
+        };
+      }, '[data-testid="phrases-wrapper"]');
+
+      await assert(scrollPosition.scrollTop > 400, 'Scroll position should be greater than 200');
+    });
   }
 });

src/tags/object/Paragraphs/AuthorFilter.js

@@ -21,7 +21,7 @@ const renderMultipleSelected = (selected) => {
   );
 };
 
-export const AuthorFilter = observer(({ item }) => {
+export const AuthorFilter = observer(({ item, onChange }) => {
   const placeholder = useMemo(() => (<span className={styles.authorFilter__placeholder}>Show all authors</span>), []);
   const value = item.filterByAuthor;
   const options = useMemo(() => item._value.reduce((all, v) => all.includes(v[item.namekey]) ? all : [...all, v[item.namekey]], []).sort(), [item._value, item.namekey]);
@@ -33,6 +33,8 @@ export const AuthorFilter = observer(({ item }) => {
     } else {
       item.setAuthorFilter(next);
     }
+
+    onChange?.();
   }, [item.setAuthorFilter]);
 
   return (

src/tags/object/Paragraphs/HtxParagraphs.js

@@ -28,6 +28,7 @@ class HtxParagraphsView extends Component {
     this.isPlaying = false;
     this.state = {
       canScroll: true,
+      inViewport: true,
     };
   }
 
@@ -417,42 +418,56 @@ class HtxParagraphsView extends Component {
 
 
     if (isFF(FF_LSDV_E_278) && this.props.item.contextscroll && item.playingId >= 0 && this.lastPlayingId !== item.playingId && this.state.canScroll) {
-      const _padding = 8; // 8 is the padding between the phrases, so it will keep aligned with the top of the phrase
+      const _padding = parseInt(window.getComputedStyle(this.myRef.current)?.getPropertyValue('padding-top')) || 0;
       const _playingItem = this.props.item._value[item.playingId];
       const _start = _playingItem.start;
       const _end = _playingItem.end;
       const _phaseHeight = this.activeRef.current?.offsetHeight || 0;
       const _duration = this.props.item._value[item.playingId].duration || _end - _start;
       const _wrapperHeight = root.offsetHeight;
       const _wrapperOffsetTop = this.activeRef.current?.offsetTop - _padding;
-      const _splittedText = 10; // it will be from 0 to 100% of the text height, going 10% by 10%
+      const _splittedText = Math.ceil(this.activeRef.current?.offsetHeight / this.myRef.current?.offsetHeight) + 1; // +1 to make sure the last line is scrolled to the top
 
       this._disposeTimeout();
 
       if (_phaseHeight > _wrapperHeight) {
         for (let i = 0; i < _splittedText; i++) {
           this.scrollTimeout.push(
             setTimeout(() => {
-              const _pos = (_wrapperOffsetTop) + ((_phaseHeight - (_wrapperHeight / 3)) * (i * .1)); // 1/3 of the wrapper height is the offset to keep the text aligned with the middle of the wrapper
+              const _pos = (_wrapperOffsetTop) + ((_phaseHeight) * (i * (1 / _splittedText)));
 
-              root.scrollTo({
-                top: _pos,
-                behavior: 'smooth',
-              });
+              if (this.state.inViewPort && this.state.canScroll) {
+                root.scrollTo({
+                  top: _pos,
+                  behavior: 'smooth',
+                });
+              }
             }, ((_duration / _splittedText) * i) * 1000),
           );
         }
       } else {
-        root.scrollTo({
-          top: _wrapperOffsetTop,
-          behavior: 'smooth',
-        });
+        if (this.state.inViewPort) {
+          root.scrollTo({
+            top: _wrapperOffsetTop,
+            behavior: 'smooth',
+          });
+        }
       }
 
       this.lastPlayingId = item.playingId;
     }
   }
 
+  _handleScrollToPhrase() {
+    const _padding = parseInt(window.getComputedStyle(this.myRef.current)?.getPropertyValue('padding-top')) || 0;
+    const _wrapperOffsetTop = this.activeRef.current?.offsetTop - _padding;
+
+    this.myRef.current.scrollTo({
+      top: _wrapperOffsetTop,
+      behavior: 'smooth',
+    });
+  }
+
   _handleScrollContainerHeight() {
     const container = this.myRef.current;
     const mainContentView = document.querySelector('.lsf-main-content');
@@ -470,10 +485,6 @@ class HtxParagraphsView extends Component {
 
   }
 
-  _handleScrollRoot() {
-    this._disposeTimeout();
-  }
-
   _resizeObserver = new ResizeObserver(() => this._handleScrollContainerHeight());
 
   componentDidUpdate() {
@@ -483,35 +494,45 @@ class HtxParagraphsView extends Component {
   componentDidMount() {
     if(isFF(FF_LSDV_E_278) && this.props.item.contextscroll) this._resizeObserver.observe(document.querySelector('.lsf-main-content'));
     this._handleUpdate();
-
-    if(isFF(FF_LSDV_E_278))
-      this.myRef.current.addEventListener('wheel', this._handleScrollRoot.bind(this));
   }
 
   componentWillUnmount() {
     const target = document.querySelector('.lsf-main-content');
 
-    if(isFF(FF_LSDV_E_278))
-      this.myRef.current.removeEventListener('wheel', this._handleScrollRoot);
-
     if (target) this._resizeObserver?.unobserve(target);
     this._resizeObserver?.disconnect();
   }
 
+  setIsInViewPort(isInViewPort) {
+    this.setState({ inViewPort: isInViewPort });
+  }
+
   renderWrapperHeader() {
     const { item } = this.props;
 
     return (
       <div className={styles.wrapper_header}>
         {isFF(FF_DEV_2669) && (
-          <AuthorFilter item={item} />
+          <AuthorFilter item={item} onChange={() => {
+            if (!this.activeRef.current) return;
+            const _timeoutDelay = parseFloat(window.getComputedStyle(this.activeRef.current).transitionDuration) * 1000;
+
+            setTimeout(() => {
+              this._handleScrollToPhrase();
+            }, _timeoutDelay);
+          }} />
         )}
         <div className={styles.wrapper_header__buttons}>
           <Toggle
             data-testid={'auto-scroll-toggle'}
             checked={this.state.canScroll}
             onChange={() => {
-              this.setState({ canScroll: !this.state.canScroll });
+              if (!this.state.canScroll)
+                this._handleScrollToPhrase();
+
+              this.setState({
+                canScroll: !this.state.canScroll,
+              });
             }}
             label={'Auto-scroll'}
           />
@@ -560,7 +581,7 @@ class HtxParagraphsView extends Component {
           className={contextScroll ? styles.scroll_container : styles.container}
           onMouseUp={this.onMouseUp.bind(this)}
         >
-          <Phrases item={item} playingId={item.playingId} {...(isFF(FF_LSDV_E_278) ? { activeRef: this.activeRef }: {})} />
+          <Phrases setIsInViewport={this.setIsInViewPort.bind(this)} item={item} playingId={item.playingId} {...(isFF(FF_LSDV_E_278) ? { activeRef: this.activeRef }: {})} />
         </div>
       </ObjectTag>
     );

src/tags/object/Paragraphs/Paragraphs.module.scss

@@ -257,4 +257,17 @@ $border-thin: 1px solid rgba(137, 128, 152, 0.16);
       color: #898098;
     }
   }
+
+  .wrapperText {
+    position: relative;
+
+    .readingLine {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 20px;
+      pointer-events: none;
+    }
+  }
 }