Fix rewind audio bug

Author: Mateus Medeiros

src/webapp/src/app/listen-and-write/listen-and-write.component.ts

@@ -274,8 +274,6 @@ export class ListenAndWriteComponent implements OnDestroy {
   pauseAudioWithTimerClear() {
     this.newsAudioComponent.pauseAudio();
     this.clearAutoPauseTimer();
-    // Refocus textarea when audio is manually paused
-    this.exerciseSectionComponent?.focusTextArea();
   }
 
   clearAutoPauseTimer() {
@@ -342,8 +340,6 @@ export class ListenAndWriteComponent implements OnDestroy {
           this.newsAudioComponent.pauseAudio();
         }
         this.clearAutoPauseTimer();
-        // Refocus textarea when audio is auto-paused
-        this.exerciseSectionComponent?.focusTextArea();
       }, duration * 1000);
     }
   }
@@ -392,6 +388,9 @@ export class ListenAndWriteComponent implements OnDestroy {
 
   onAudioPaused() {
     this.onSaveExerciseState();
+    if (this.exerciseState() !== 'exercise') return;
+    // When the user pauses via native controls, restore focus so shortcuts keep working.
+    this.exerciseSectionComponent?.focusTextArea();
   }
 
   onSaveExerciseState() {

src/webapp/src/app/listen-and-write/news-image/news-image.component.ts

@@ -1,8 +1,7 @@
 import { CommonModule, IMAGE_LOADER, NgOptimizedImage } from '@angular/common';
-import { Component, HostListener, computed, effect, input, signal } from '@angular/core';
+import { Component, computed, effect, input, signal } from '@angular/core';
 import { Proposition } from 'src/api/listen-and-write';
 import { minioVariantImageLoader } from '../../shared/image-loaders/minio-variant-image.loader';
-import { BrowserService } from '../../core/services/browser.service';
 
 @Component({
   selector: 'app-news-image',
@@ -19,29 +18,18 @@ import { BrowserService } from '../../core/services/browser.service';
 export class NewsImageComponent {
 
   proposition = input<Proposition | null>();
-  private readonly mobileMaxWidth = 600;
-  private readonly mobileSrcset = '320w, 512w, 640w';
-  private readonly desktopSrcset = '320w, 512w, 640w, 1024w';
+  private readonly unifiedSrcset = '320w, 512w, 640w, 1024w';
   readonly imageLoaderParams = { defaultWidth: 640 };
-  readonly isMobileLayout = signal(false);
-  readonly imageSrcset = computed(() => (
-    this.isMobileLayout() ? this.mobileSrcset : this.desktopSrcset
-  ));
+  readonly imageSrcset = computed(() => this.unifiedSrcset);
   imageLoadFailed = signal(false);
 
   imageBaseId = computed(() => this.getImageBaseId(this.proposition()?.imageFileId));
 
-  constructor(private browserService: BrowserService) {
+  constructor() {
     effect(() => {
       this.proposition();
       this.imageLoadFailed.set(false);
     });
-    this.updateMobileLayout();
-  }
-
-  @HostListener('window:resize')
-  onWindowResize(): void {
-    this.updateMobileLayout();
   }
 
   onOptimizedImageError(): void {
@@ -56,9 +44,4 @@ export class NewsImageComponent {
     const baseId = lastDot > 0 ? imageFileId.slice(0, lastDot) : imageFileId;
     return baseId.replace(/_w\d+$/, '');
   }
-
-  private updateMobileLayout(): void {
-    const width = this.browserService.getWindowWidth();
-    this.isMobileLayout.set(width > 0 && width <= this.mobileMaxWidth);
-  }
 }

src/webapp/src/index.html

@@ -15,16 +15,6 @@
     <link rel="icon" type="image/x-icon" href="assets/app-icon.svg">
     <link rel="apple-touch-icon" href="assets/app-icon.svg">
 
-    <!-- LCP poster preload -->
-    <link
-      rel="preload"
-      as="image"
-      href="assets/hero-listening-640.webp"
-      imagesrcset="assets/hero-listening-640.webp 640w, assets/hero-listening-1024.webp 1024w"
-      imagesizes="(max-width: 900px) 92vw, 600px"
-      type="image/webp"
-      fetchpriority="high">
-    
     <!-- Preconnect + DNS-prefetch for external font hosts -->
     <link rel="dns-prefetch" href="https://fonts.googleapis.com">
     <link rel="dns-prefetch" href="https://fonts.gstatic.com">