From 21f5395b43465799512a50ada4c03c065c5c9cd1 Mon Sep 17 00:00:00 2001 From: Adam Kariv Date: Sun, 24 Dec 2023 17:07:52 +0200 Subject: [PATCH] Smoother interaction on chrome --- .../chronomap-page.component.html | 2 +- .../app/chronomap/chronomap.component.html | 8 ++--- .../src/app/chronomap/chronomap.component.ts | 13 ++++---- .../content-video/content-video.component.ts | 32 ++++++++++++++----- 4 files changed, 36 insertions(+), 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 index b15914c..5c69a74 100644 --- 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 @@
- + diff --git a/projects/chronomaps/src/app/chronomap/chronomap.component.html b/projects/chronomaps/src/app/chronomap/chronomap.component.html index 1a58d72..f20448c 100644 --- a/projects/chronomaps/src/app/chronomap/chronomap.component.html +++ b/projects/chronomaps/src/app/chronomap/chronomap.component.html @@ -83,12 +83,12 @@
-
-
-
+
+
+
-
+
} diff --git a/projects/chronomaps/src/app/chronomap/chronomap.component.ts b/projects/chronomaps/src/app/chronomap/chronomap.component.ts index c6d2937..75e6fe0 100644 --- 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 index d653c7f..b3fd5b4 100644 --- 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(1); + resizeObserver: ResizeObserver; - constructor(private sanitizer: DomSanitizer, private http: HttpClient) {} + constructor(private sanitizer: DomSanitizer, private http: HttpClient, private el: ElementRef) {} ngOnInit(): void { } @@ -31,14 +32,14 @@ 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(); } }); @@ -46,10 +47,24 @@ export class ContentVideoComponent implements OnInit, AfterViewInit, OnChanges { } 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="'); @@ -57,7 +72,8 @@ export class ContentVideoComponent implements OnInit, AfterViewInit, OnChanges { 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',