Align video source with other sources (#212)

* Update changelog comment location. * Fix directive code * Fix unwanted code change
maplibre · Nov 7, 2024 · 4d4ff12 · 4d4ff12
1 parent b48fa56
commit 4d4ff12
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/projects/ngx-maplibre-gl/src/lib/source/canvas-source.component.ts b/projects/ngx-maplibre-gl/src/lib/source/canvas-source.component.ts
@@ -7,7 +7,7 @@ import {
   input,
 } from '@angular/core';
 import type { CanvasSource, CanvasSourceSpecification } from 'maplibre-gl';
-import { SourceDirective as SourceDirective } from './source.directive';
+import { SourceDirective } from './source.directive';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { tap } from 'rxjs';
 

diff --git a/projects/ngx-maplibre-gl/src/lib/source/source.directive.ts b/projects/ngx-maplibre-gl/src/lib/source/source.directive.ts
@@ -14,15 +14,15 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Source, SourceSpecification } from 'maplibre-gl';
 
 /**
- *
- * @category Source Components
+ * @internal
+ * A composition object for the source components
  */
 @Directive({
   standalone: true,
 })
 export class SourceDirective implements OnInit, OnDestroy {
   /** Init injection */
-  readonly mapService = inject(MapService);
+  private readonly mapService = inject(MapService);
   private readonly destroyRef = inject(DestroyRef);
 
   /**  Init input */

diff --git a/projects/ngx-maplibre-gl/src/lib/source/video-source.component.ts b/projects/ngx-maplibre-gl/src/lib/source/video-source.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   OnChanges,
   SimpleChanges,
+  inject,
   input,
 } from '@angular/core';
 import type { VideoSource, VideoSourceSpecification } from 'maplibre-gl';
@@ -21,11 +22,13 @@ import { tap } from 'rxjs';
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  hostDirectives: [{ directive: SourceDirective, inputs: ['id'] }],
 })
 export class VideoSourceComponent
-  extends SourceDirective
   implements OnChanges
 {
+  private readonly sourceDirective = inject(SourceDirective);
+
   /** Dynamic input */
   readonly urls = input.required<VideoSourceSpecification['urls']>();
 
@@ -34,23 +37,22 @@ export class VideoSourceComponent
     input.required<VideoSourceSpecification['coordinates']>();
 
   constructor() {
-    super();
 
-    this.loadSource$.pipe(
+    this.sourceDirective.loadSource$.pipe(
       tap(() => this.addSource()),
       takeUntilDestroyed()
     ).subscribe();
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (!this.sourceId()) {
+    if (!this.sourceDirective.sourceId()) {
       return;
     }
 
     if (changes.urls && !changes.urls.isFirstChange()) {
-      this.refresh();
+      this.sourceDirective.refresh();
     } else if (changes.coordinates && !changes.coordinates.isFirstChange()) {
-      const source = this.mapService.getSource<VideoSource>(this.id());
+      const source = this.sourceDirective.getSource<VideoSource>();
       if (source === undefined) {
         return;
       }
@@ -64,7 +66,6 @@ export class VideoSourceComponent
       urls: this.urls(),
       coordinates: this.coordinates(),
     };
-    this.mapService.addSource(this.id(), source);
-    this.sourceId.set(this.id());
+    this.sourceDirective.addSource(source);
   }
 }