Smoother interaction on chrome

whiletrue-industries · Dec 24, 2023 · 21f5395 · 21f5395
1 parent 7f6132d
commit 21f5395
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 19 deletions.
diff --git a/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.html b/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.html
@@ -23,7 +23,7 @@
             </div>
         </div>
         <div class='header' [style.border-color]='chronomap()?.secondaryColor()'>
-            <a href='/'>
+            <a [routerLink]='["/"]'>
                 <img class='logo layout-mobile' [src]='chronomap()?.logo()'>
                 <img class='logo layout-desktop' [src]='chronomap()?.logo()'>
             </a>

diff --git a/projects/chronomaps/src/app/chronomap/chronomap.component.html b/projects/chronomaps/src/app/chronomap/chronomap.component.html
@@ -83,12 +83,12 @@
                         </div>
                     </div>    
 
-                    <div class='arrow' *ngIf='currentItem.prev' (click)='itemSelected(currentItem.prev)'></div>
-                    <div class='arrow rev' *ngIf='currentItem.next' (click)='itemSelected(currentItem.next)'></div>
-                    <div class='arrow-icon' *ngIf='currentItem.prev' (click)='itemSelected(currentItem.prev)'>
+                    <div class='arrow' *ngIf='currentItem.prev' (click)='state.selectedItemId = currentItem.prev.id'></div>
+                    <div class='arrow rev' *ngIf='currentItem.next' (click)='state.selectedItemId = currentItem.next.id'></div>
+                    <div class='arrow-icon' *ngIf='currentItem.prev' (click)='state.selectedItemId = currentItem.prev.id'>
                         <app-media-icon [type]='currentItem.prev.type' [color]='chronomap.primaryColor()'></app-media-icon>
                     </div>
-                    <div class='arrow-icon rev' *ngIf='currentItem.next' (click)='itemSelected(currentItem.next)'>
+                    <div class='arrow-icon rev' *ngIf='currentItem.next' (click)='state.selectedItemId = currentItem.next.id'>
                         <app-media-icon [type]='currentItem.next.type' [color]='chronomap.primaryColor()'></app-media-icon>
                     </div>
                 }

diff --git a/projects/chronomaps/src/app/chronomap/chronomap.component.ts b/projects/chronomaps/src/app/chronomap/chronomap.component.ts
@@ -72,8 +72,8 @@ export class ChronomapComponent implements OnInit, AfterViewInit, OnDestroy {
   marked = marked;
 
   constructor(
-    private titleSvc: Title, private sanitizer: DomSanitizer, public mapSelector: MapSelectorService, private state: StateService,
-    private layout: LayoutService
+    private titleSvc: Title, private sanitizer: DomSanitizer, public mapSelector: MapSelectorService, public state: StateService,
+    private layout: LayoutService, private el: ElementRef
   ) {
     this.resizeObserver = new ResizeObserver(() => {
       timer(0).subscribe(() => {
@@ -138,7 +138,7 @@ export class ChronomapComponent implements OnInit, AfterViewInit, OnDestroy {
         window.dispatchEvent(new Event('resize'));
       });
     });
-    this.resizeObserver.observe(this.baseMapEl.nativeElement);
+    this.resizeObserver.observe(this.el.nativeElement);
     timer(0).subscribe(() => {
       this.syncWidths();
       this.updateMarkers();
@@ -273,12 +273,13 @@ export class ChronomapComponent implements OnInit, AfterViewInit, OnDestroy {
         this.applyMapView(item, this.detailMap, options);
         this.updateMarkers();
       }),
-      delay(100),
+      delay(1000),
       tap(() => {
         const scrollLeft = (item.index + 0.5) * (this.detailWidth);
         const el = this.scrollerComponent.nativeElement as HTMLElement;
-        // console.log('SCROLL', scrollLeft, el.scrollLeft, this.detailWidth, item.index);
-        el.scrollLeft = scrollLeft;
+        el.querySelector('.current')?.scrollIntoView({behavior: 'smooth', inline: 'center'});
+        console.log('SCROLL', el.querySelector('.current'));
+        // el.scrollLeft = scrollLeft;
         // children[item.index].scrollIntoView({behavior: 'smooth'});
         timer(1000).subscribe(() => {
           this.changing -= 1;

diff --git a/projects/chronomaps/src/app/content/content-video/content-video.component.ts b/projects/chronomaps/src/app/content/content-video/content-video.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { forkJoin, ReplaySubject } from 'rxjs';
 import { first } from 'rxjs/operators';
@@ -10,7 +10,7 @@ import { HttpClient } from '@angular/common/http';
   templateUrl: './content-video.component.html',
   styleUrls: ['./content-video.component.less']
 })
-export class ContentVideoComponent implements OnInit, AfterViewInit, OnChanges {
+export class ContentVideoComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
 
   @Input() item: TimelineItem;
   @Input() activeItem: TimelineItem;
@@ -20,8 +20,9 @@ export class ContentVideoComponent implements OnInit, AfterViewInit, OnChanges {
   @ViewChild('frame', {static: true}) frame: ElementRef;
   player: YT.Player;
   playerReady = new ReplaySubject<void>(1);
+  resizeObserver: ResizeObserver;
 
-  constructor(private sanitizer: DomSanitizer, private http: HttpClient) {}
+  constructor(private sanitizer: DomSanitizer, private http: HttpClient, private el: ElementRef) {}
 
   ngOnInit(): void {
   }
@@ -31,33 +32,48 @@ export class ContentVideoComponent implements OnInit, AfterViewInit, OnChanges {
     if (active) {
       this.playerReady.pipe(first())
       .subscribe(() => {
-        if (active && this.player.getPlayerState() !== YT.PlayerState.PLAYING) {
+        if (active && this.player?.getPlayerState && this.player.getPlayerState() !== YT.PlayerState.PLAYING) {
           this.player.playVideo();
         }
       });  
     } else {
       this.playerReady.pipe(first())
       .subscribe(() => {
-        if (!active && this.player.getPlayerState() !== YT.PlayerState.PAUSED && this.player.getPlayerState() !== YT.PlayerState.ENDED) {
+        if (!active && this.player?.getPlayerState && this.player.getPlayerState() !== YT.PlayerState.PAUSED && this.player.getPlayerState() !== YT.PlayerState.ENDED) {
           this.player.pauseVideo();
         }
       });  
     }
   }
 
   ngAfterViewInit() {
-    // console.log('INIT YOUTUBE', this.frame.nativeElement, this.item.youtube_video_id);
-    const el = this.frame.nativeElement as HTMLElement;
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = new ResizeObserver((entries) => {
+      console.log('RESIZE', this.item.youtube_video_id, entries);
+      this.initialize();
+    });
+    this.resizeObserver.observe(this.el.nativeElement);
+  }
+
+  ngOnDestroy(): void {
+    this.resizeObserver?.disconnect();
+  }
+
+  initialize() {
+    const el = this.el.nativeElement as HTMLElement;
     const width = Math.min(el.offsetWidth, 640);
     const height = (width * 3) / 4;
+    console.log('INIT YOUTUBE', this.frame.nativeElement, this.item.youtube_video_id, width, this.el.nativeElement.offsetWidth);
+    this.frame.nativeElement.innerHTML = '';
     this.http.get('https://www.youtube.com/oembed', {params: {url: this.item.youtube_video_id, format: 'json'}}).subscribe((data: any) => {
       const embedCode = data.html || '';
       const srcPos = embedCode.indexOf('src="');
       if (srcPos !== -1) {
         const embedUrl = new URL(embedCode.slice(srcPos).split('"')[1]);
         const videoId = embedUrl.pathname.split('/').pop();
         const start = parseInt(embedUrl.searchParams.get('start') || '0', 10);
-        this.player = new YT.Player(el, {
+        const frame = this.frame.nativeElement as HTMLElement;
+        this.player = new YT.Player(frame.appendChild(document.createElement('div')), {
           videoId,
           height: height + 'px',
           width: width + 'px',