fix: row long press

src/app/list-composition/list-composition.component.html

@@ -191,6 +191,7 @@
       columns: displayedColumnsComposition
     "
     [appRowAction]="element"
+    [isMobile]="!isDesktop"
     class="example-element-row"
     [ngClass]="{
       deleted: element.deleted === 1,

src/app/list-fichier/list-fichier.component.html

@@ -195,6 +195,7 @@
             <mat-row
               *matRowDef="let compoRow; columns: displayedColumnsComposition"
               [appRowAction]="compoRow"
+              [isMobile]="!isDesktop"
               [ngClass]="{deleted: compoRow.deleted === 1}"
             >
             </mat-row>

src/app/list/list.component.ts

@@ -15,6 +15,7 @@ export abstract class ListDirective<T> implements OnInit {
   sort?: Sort;
   compositionColumns!: string[];
   displayedColumnsComposition!: string[];
+  isDesktop = false;
 
   readonly types = [
     new Dropdown('Chanson', 'SONG'),
@@ -36,6 +37,7 @@ export abstract class ListDirective<T> implements OnInit {
   ngOnInit(): void {
     this.page = this.initPagination();
     this.utilsService.isDesktop().subscribe(isDesktop => {
+      this.isDesktop = isDesktop;
       if (isDesktop) {
         this.displayedColumnsComposition = [...this.compositionColumns, 'menu'];
       } else {

src/app/row-action/row-action.directive.ts

@@ -1,5 +1,5 @@
 import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
-import {fromEvent, debounceTime, filter, tap, combineLatestWith} from 'rxjs';
+import {fromEvent, filter, merge, map, tap, debounceTime} from 'rxjs';
 import {Composition} from '../utils/model';
 import {UtilsService} from '@services/utils.service';
 
@@ -10,24 +10,42 @@ export class RowActionDirective implements AfterViewInit {
   @Input()
   appRowAction!: Composition;
 
-  constructor(private el: ElementRef, private utilsService: UtilsService) {}
+  @Input()
+  isMobile = false;
+
+  private readonly threshold = 1000;
+
+  constructor(
+    private elementRef: ElementRef,
+    private utilsService: UtilsService
+  ) {}
 
   ngAfterViewInit(): void {
-    let out = false;
-    fromEvent(this.el.nativeElement as HTMLElement, 'mouseout').subscribe(
-      () => (out = true)
+    let out = true;
+    const touchStart$ = fromEvent<TouchEvent>(
+      this.elementRef.nativeElement,
+      'touchstart'
+    ).pipe(
+      tap(() => (out = true)),
+      debounceTime(this.threshold),
+      map(() => true)
     );
-    fromEvent(this.el.nativeElement as HTMLElement, 'mouseover')
+    const touchEnd$ = fromEvent<TouchEvent>(
+      this.elementRef.nativeElement,
+      'touchend'
+    ).pipe(map(() => false));
+    const touchLeave$ = fromEvent<TouchEvent>(
+      this.elementRef.nativeElement,
+      'touchleave'
+    ).pipe(map(() => false));
+
+    merge(touchStart$, touchLeave$, touchEnd$)
       .pipe(
-        tap(() => (out = false)),
-        debounceTime(1000),
-        filter(() => !out),
-        combineLatestWith(
-          this.utilsService.isDesktop().pipe(filter(isDesktop => !isDesktop))
-        )
+        tap(v => (out = out && v)),
+        filter(() => out && this.isMobile)
       )
-      .subscribe(() =>
-        this.utilsService.compositionInClipBoard(this.appRowAction)
-      );
+      .subscribe(() => {
+        this.utilsService.compositionInClipBoard(this.appRowAction);
+      });
   }
 }

src/app/services/utils.service.ts

@@ -1,4 +1,11 @@
-import {Observable, catchError, of, map} from 'rxjs';
+import {
+  Observable,
+  catchError,
+  of,
+  map,
+  distinctUntilChanged,
+  debounceTime,
+} from 'rxjs';
 import {Injectable} from '@angular/core';
 import {
   HttpHeaders,
@@ -80,7 +87,11 @@ export class UtilsService {
   isDesktop(): Observable<boolean> {
     return this.breakpointObserver
       .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
-      .pipe(map(b => b.matches));
+      .pipe(
+        debounceTime(200),
+        map(b => b.matches),
+        distinctUntilChanged()
+      );
   }
 
   wikisearch(term: string): Observable<string> {