Add devtool message sequence

apps/background/src/app/app.component.ts

@@ -13,6 +13,7 @@ import { merge, Observable, Subscription } from 'rxjs';
       <plopdown-tracks-requested></plopdown-tracks-requested>
       <plopdown-video-refs-requested></plopdown-video-refs-requested>
       <plopdown-sync-databases></plopdown-sync-databases>
+      <plopdown-devtool-content-script></plopdown-devtool-content-script>
     </ng-container>
   `,
   selector: 'plopdown-background',

apps/background/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { GetStatusComponent } from './get-status/get-status.component';
 import { PouchDBModule } from '@plopdown/pouchdb';
 import { RemotesModule } from '@plopdown/remotes';
 import { SyncDatabasesComponent } from './sync-databases/sync-databases.component';
+import { DevtoolContentScriptComponent } from './devtool-content-script/devtool-content-script.component';
 
 @NgModule({
   declarations: [
@@ -30,6 +31,7 @@ import { SyncDatabasesComponent } from './sync-databases/sync-databases.componen
     VideoRefsRequestedComponent,
     GetStatusComponent,
     SyncDatabasesComponent,
+    DevtoolContentScriptComponent,
   ],
   imports: [
     BrowserModule,

apps/background/src/app/devtool-content-script/devtool-content-script.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DevtoolContentScriptComponent } from './devtool-content-script.component';
+
+describe('DevtoolContentScriptComponent', () => {
+  let component: DevtoolContentScriptComponent;
+  let fixture: ComponentFixture<DevtoolContentScriptComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DevtoolContentScriptComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DevtoolContentScriptComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/background/src/app/devtool-content-script/devtool-content-script.component.ts

@@ -0,0 +1,51 @@
+import { Component, ErrorHandler, OnInit, OnDestroy } from '@angular/core';
+import {
+  BackgroundPubService,
+  ContentScriptSubService,
+  DevtoolGetDevRefs,
+  DevtoolSubService,
+} from '@plopdown/messages';
+import { UnsavedVideoRef } from '@plopdown/video-refs';
+import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'plopdown-devtool-content-script',
+  template: '',
+})
+export class DevtoolContentScriptComponent implements OnInit, OnDestroy {
+  private subs: Subscription = new Subscription();
+  private onGetDevRefs$: Observable<DevtoolGetDevRefs>;
+  private onDevRefs$: Observable<UnsavedVideoRef[]>;
+
+  constructor(
+    private errorHandler: ErrorHandler,
+    private bgPub: BackgroundPubService,
+    dtSub: DevtoolSubService,
+    csSub: ContentScriptSubService
+  ) {
+    this.onDevRefs$ = csSub.onDevRefs().pipe(
+      map((command) => {
+        return command.args[0];
+      })
+    );
+
+    this.onGetDevRefs$ = dtSub.onGetDevRefs();
+  }
+
+  ngOnInit(): void {
+    const getDevRefsSub = this.onGetDevRefs$.subscribe(() => {
+      this.bgPub.getDevRefs();
+    });
+    this.subs.add(getDevRefsSub);
+
+    const devRefsFoundSub = this.onDevRefs$.subscribe((devRefs) => {
+      this.bgPub.devRefsFound(devRefs);
+    });
+    this.subs.add(devRefsFoundSub);
+  }
+
+  ngOnDestroy(): void {
+    this.subs.unsubscribe();
+  }
+}

apps/content-script/src/app/app.component.ts

@@ -1,5 +1,9 @@
 import { Track, TracksService } from '@plopdown/tracks';
-import { VideoRef, VideoRefsService } from '@plopdown/video-refs';
+import {
+  VideoRef,
+  VideoRefsService,
+  UnsavedVideoRef,
+} from '@plopdown/video-refs';
 import { LoggerService } from '@plopdown/logger';
 import {
   Component,
@@ -8,31 +12,43 @@ import {
   AfterViewInit,
   OnInit,
   OnDestroy,
+  ErrorHandler,
 } from '@angular/core';
-import { shareReplay, tap } from 'rxjs/operators';
-import { Observable, Subscription } from 'rxjs';
+import { shareReplay, tap, switchMap, scan } from 'rxjs/operators';
+import { Observable, Subscription, Subject } from 'rxjs';
 import { VideoScanService } from '@plopdown/window-ref';
+import {
+  BackgroundSubService,
+  ContentScriptPubService,
+} from '@plopdown/messages';
 
 @Component({
   selector: 'plopdown-cs',
   template: `
     <plopdown-video-attachments
+      #videoAttachments
       [videoElems]="videoElems$ | async"
+      (attached)="attached($event)"
     ></plopdown-video-attachments>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements AfterViewInit, OnInit, OnDestroy {
   public videoElems$: Observable<HTMLVideoElement[]>;
   private subs: Subscription = new Subscription();
+  private newAttachment$: Subject<UnsavedVideoRef> = new Subject();
+  private attachments$: Observable<UnsavedVideoRef[]>;
   public tracks$: Observable<Track[]>;
   public videoRefs$: Observable<VideoRef[]>;
 
   constructor(
     private logger: LoggerService,
     private videoScanner: VideoScanService,
     private tracksService: TracksService,
+    private csPub: ContentScriptPubService,
+    private bgSub: BackgroundSubService,
     private videoRefsService: VideoRefsService,
+    private errorHandler: ErrorHandler,
     cd: ChangeDetectorRef
   ) {
     this.tracks$ = this.tracksService.getTracks();
@@ -43,17 +59,60 @@ export class AppComponent implements AfterViewInit, OnInit, OnDestroy {
       }),
       shareReplay(1)
     );
+
+    this.attachments$ = this.newAttachment$.pipe(
+      scan((acc, videoRef) => {
+        const existing =
+          acc.find((elem) => {
+            return elem.xpath === videoRef.xpath;
+          }) != null;
+
+        if (existing === false) {
+          acc.push(videoRef);
+        }
+
+        return acc;
+      }, [] as UnsavedVideoRef[]),
+      shareReplay(1)
+    );
   }
 
   ngOnInit(): void {
     this.videoScanner.refresh();
+
+    const attachmentsSub = this.attachments$.subscribe(
+      (attachments) => {
+        this.logger.debug('Attachments Made', attachments);
+      },
+      (err) => {
+        this.errorHandler.handleError(err);
+      }
+    );
+    this.subs.add(attachmentsSub);
+
+    const devRefsSub = this.bgSub
+      .getDevRefs()
+      .pipe(switchMap(() => this.attachments$))
+      .subscribe(
+        (videoRefs) => {
+          this.csPub.plopdownsAttached(videoRefs);
+        },
+        (err) => {
+          this.errorHandler.handleError(err);
+        }
+      );
+    this.subs.add(devRefsSub);
   }
 
   ngOnDestroy(): void {
     this.subs.unsubscribe();
   }
 
   ngAfterViewInit(): void {
-    this.logger.debug('Content script ready');
+    this.logger.debug('Content Script Initialized');
+  }
+
+  public attached(videoRef: UnsavedVideoRef): void {
+    this.newAttachment$.next(videoRef);
   }
 }

apps/devtool/src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { MessagesModule } from '@plopdown/messages';
 import {
   LogConsoleService,
   LoggerModule,
@@ -32,9 +33,10 @@ const routes: Routes = [
   imports: [
     BrowserModule,
     DevtoolsRefModule,
+    MessagesModule,
     LoggerModule.forRoot({
-      appName: 'devtool',
-      color: 'black',
+      appName: 'Devtool',
+      color: 'green',
       providers: [LogConsoleService, LogStorageService],
     }),
     RouterModule.forRoot(routes, {

apps/devtool/src/app/panel-manager/panel-manager.component.ts

@@ -1,6 +1,8 @@
+import { DevtoolPubService } from './../../../../../libs/messages/src/lib/devtool/devtool-pub.service';
 import { Component, ErrorHandler, OnDestroy, OnInit } from '@angular/core';
 import { PanelsService } from '@plopdown/devtools-ref';
 import { Observable, Subscription } from 'rxjs';
+import { BackgroundSubService } from '@plopdown/messages';
 
 @Component({
   selector: 'plopdown-panel-manager',
@@ -14,7 +16,9 @@ export class PanelManagerComponent implements OnInit, OnDestroy {
 
   constructor(
     private panels: PanelsService,
-    private errorHandler: ErrorHandler
+    private errorHandler: ErrorHandler,
+    private dtPub: DevtoolPubService,
+    private bgSub: BackgroundSubService
   ) {
     this.panelHidden$ = this.panels.getHidden();
     this.panelShown$ = this.panels.getShown();
@@ -35,7 +39,7 @@ export class PanelManagerComponent implements OnInit, OnDestroy {
 
     const panelShownSub = this.panelShown$.subscribe({
       next: () => {
-        console.log('Panel Shown');
+        this.dtPub.getDevRefs();
       },
       error: (err) => {
         this.errorHandler.handleError(err);

apps/devtool/src/app/track-editor/track-editor.component.ts

@@ -10,7 +10,7 @@ import { Observable } from 'rxjs';
 export class TrackEditorComponent {
   tracks$: Observable<Track[]>;
 
-  constructor(private trackService: TracksService) {
+  constructor(trackService: TracksService) {
     this.tracks$ = trackService.getTracks();
   }
 }

libs/messages/mock/background-sub.service.mock.ts

@@ -4,7 +4,7 @@ import { BackgroundSubService } from '../src/lib/background';
 
 @Injectable()
 export class MockBackgroundSubService implements Partial<BackgroundSubService> {
-  public getCheckAlive = jest.fn().mockReturnValue(EMPTY);
+  public getDevRefs = jest.fn().mockReturnValue(EMPTY);
   public getFindVideos = jest.fn().mockReturnValue(EMPTY);
   public getContentFound = jest.fn().mockReturnValue(EMPTY);
   public getTrackFound = jest.fn().mockReturnValue(EMPTY);

libs/messages/src/index.ts

@@ -3,3 +3,4 @@ export * from './lib/messages.model';
 export * from './lib/background';
 export * from './lib/browser-action';
 export * from './lib/content-script';
+export * from './lib/devtool';

libs/messages/src/lib/background/background-pub.service.ts

@@ -7,7 +7,7 @@ import { LoggerService } from '@plopdown/logger';
 import { Source } from '../messages.model';
 import { PortPublisher } from '../publisher.abstract';
 import { MessagesModule } from '../messages.module';
-import { VideoRef } from '@plopdown/video-refs';
+import { UnsavedVideoRef, VideoRef } from '@plopdown/video-refs';
 
 @Injectable({
   providedIn: MessagesModule,
@@ -21,10 +21,6 @@ export class BackgroundPubService extends PortPublisher<BackgroundCommand> {
     super(Source.Background, messages, logger, tabs);
   }
 
-  public checkAlive() {
-    this.command$.next({ command: 'BG_CHECK_ALIVE', args: null });
-  }
-
   public publishStatus(status: BackgroundStatus) {
     this.command$.next({
       command: 'BG_STATUS',
@@ -52,4 +48,18 @@ export class BackgroundPubService extends PortPublisher<BackgroundCommand> {
       args: [videoRef],
     });
   }
+
+  public getDevRefs() {
+    this.command$.next({
+      command: 'BG_GET_DEV_REFS',
+      args: null,
+    });
+  }
+
+  public devRefsFound(devRefs: UnsavedVideoRef[]) {
+    this.command$.next({
+      command: 'BG_DEV_REFS_FOUND',
+      args: [devRefs],
+    });
+  }
 }

libs/messages/src/lib/background/background-sub.service.ts

@@ -3,11 +3,12 @@ import { MessagesService } from '../messages.service';
 import { Injectable } from '@angular/core';
 import {
   BackgroundCommand,
-  BackgroundCheckAlive,
+  BackgroundGetDevRefs,
   BackgroundPublishStatus,
   BackgroundTracksFound,
   BackgroundVideoRefsFound,
   BackgroundVideoRefAdded,
+  BackgroundDevRefsFound,
 } from './background.model';
 import { PortSubscriber } from '../subscriber.abstract';
 import { MessagesModule } from '../messages.module';
@@ -20,8 +21,11 @@ export class BackgroundSubService extends PortSubscriber<BackgroundCommand> {
   constructor(ports: MessagesService, logger: LoggerService) {
     super(Source.Background, ports, logger);
   }
-  public getCheckAlive() {
-    return super.filterCommand<BackgroundCheckAlive>('BG_CHECK_ALIVE');
+  public getDevRefs() {
+    return super.filterCommand<BackgroundGetDevRefs>('BG_GET_DEV_REFS');
+  }
+  public devRefsFound() {
+    return super.filterCommand<BackgroundDevRefsFound>('BG_DEV_REFS_FOUND');
   }
   public getTracksFound() {
     return super.filterCommand<BackgroundTracksFound>('BG_TRACKS_FOUND');

libs/messages/src/lib/background/background.model.ts

@@ -1,4 +1,4 @@
-import { VideoRef } from '@plopdown/video-refs';
+import { UnsavedVideoRef, VideoRef } from '@plopdown/video-refs';
 import { Track } from '@plopdown/tracks';
 import { Command } from '../messages.model';
 
@@ -7,18 +7,23 @@ export interface BackgroundStatus {
   active_origin: string | null;
 }
 
-export type BackgroundCheckAlive = Command<'BG_CHECK_ALIVE'>;
+export type BackgroundGetDevRefs = Command<'BG_GET_DEV_REFS'>;
 export type BackgroundPublishStatus = Command<'BG_STATUS', [BackgroundStatus]>;
 export type BackgroundTracksFound = Command<'BG_TRACKS_FOUND', [Track[]]>;
 export type BackgroundVideoRefsFound = Command<
   'BG_VIDEO_REFS_FOUND',
   [VideoRef[]]
 >;
 export type BackgroundVideoRefAdded = Command<'BG_VIDEO_REF_ADDED', [VideoRef]>;
+export type BackgroundDevRefsFound = Command<
+  'BG_DEV_REFS_FOUND',
+  [UnsavedVideoRef[]]
+>;
 
 export type BackgroundCommand =
-  | BackgroundCheckAlive
+  | BackgroundGetDevRefs
   | BackgroundTracksFound
   | BackgroundPublishStatus
   | BackgroundVideoRefsFound
-  | BackgroundVideoRefAdded;
+  | BackgroundVideoRefAdded
+  | BackgroundDevRefsFound;