feat(package): optimized the UI

Author: AnthonyNahas

src/module/components/mat-link-preview-container/mat-link-preview-container.component.html

@@ -1,3 +1,14 @@
-<ng-container *ngFor="let link of linkPreviewService.links; trackBy: trackLinks">
-  <mat-link-preview [link]="link"></mat-link-preview>
-</ng-container>
+<ng-container *ngIf="!multiple && linkPreviewService.links.length > 0; then first else list"></ng-container>
+
+<ng-template #first>
+  <mat-link-preview [link]="linkPreviewService?.links[0]"
+                    [showLoadingsProgress]="showLoadingsProgress">
+  </mat-link-preview>
+</ng-template>
+<ng-template #list>
+  <div *ngFor="let link of linkPreviewService.links; trackBy: trackLinks">
+    <mat-link-preview [link]="link"
+                      [showLoadingsProgress]="showLoadingsProgress">
+    </mat-link-preview>
+  </div>
+</ng-template>

src/module/components/mat-link-preview-container/mat-link-preview-container.component.spec.ts

@@ -2,18 +2,21 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {EventEmitter} from '@angular/core';
 import {Link} from 'ngx-linkifyjs';
 import {MatLinkPreviewContainerComponent} from './mat-link-preview-container.component';
-import {MatLinkPreviewComponent, MatLinkPreviewModule, MatLinkPreviewService} from '../../..';
+import {MatLinkPreviewComponent, MatLinkPreviewService} from '../../..';
+import {MatButtonModule, MatCardModule, MatProgressSpinnerModule} from '@angular/material';
+import {FormsModule} from '@angular/forms';
 
 describe('MatLinkPreviewContainerComponent', () => {
   let component: MatLinkPreviewContainerComponent;
   let fixture: ComponentFixture<MatLinkPreviewContainerComponent>;
   const linkPreviewServicePartial: Partial<MatLinkPreviewService> = {
-    onLinkFound: new EventEmitter<Array<Link>>()
+    onLinkFound: new EventEmitter<Array<Link>>(),
+    links: []
   };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MatLinkPreviewModule],
+      imports: [MatCardModule, MatProgressSpinnerModule, MatButtonModule, FormsModule],
       declarations: [MatLinkPreviewContainerComponent, MatLinkPreviewComponent],
       providers: [{provide: MatLinkPreviewService, useValue: linkPreviewServicePartial}]
     })

src/module/components/mat-link-preview-container/mat-link-preview-container.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {Link} from 'ngx-linkifyjs';
 import {MatLinkPreviewService} from '../../service/mat-link-preview.service';
 
@@ -7,13 +7,14 @@ import {MatLinkPreviewService} from '../../service/mat-link-preview.service';
   templateUrl: './mat-link-preview-container.component.html',
   styleUrls: ['./mat-link-preview-container.component.scss']
 })
-export class MatLinkPreviewContainerComponent implements OnInit {
+export class MatLinkPreviewContainerComponent {
 
-  constructor(public linkPreviewService: MatLinkPreviewService) {
-  }
+  // to forward
+  @Input() color = 'primary'; // accent | warn
+  @Input() multiple: boolean;
+  @Input() showLoadingsProgress = true;
 
-
-  ngOnInit() {
+  constructor(public linkPreviewService: MatLinkPreviewService) {
   }
 
   trackLinks(index: number, link: Link) {

src/module/components/mat-link-preview/mat-link-preview.component.html

@@ -1,12 +1,15 @@
-<div *ngIf="this.linkPreview; then render else loading"></div>
-
-<ng-template #render>
-  <mat-card>
-    <img mat-card-image-xs [src]="linkPreview.image">
-    <mat-card-title>{{linkPreview.title}}</mat-card-title>
-    <mat-card-subtitle>{{linkPreview.description}}</mat-card-subtitle>
-  </mat-card>
-</ng-template>
-<ng-template #loading>
-  <mat-progress-bar *ngIf="false" mode="indeterminate"></mat-progress-bar>
-</ng-template>
+<div class="center-auto" *ngIf="!this.linkPreview && !this.loaded && this.showLoadingsProgress">
+  <mat-spinner></mat-spinner>
+</div>
+<mat-card>
+  <mat-card-content>
+    <div class="img-container">
+      <img mat-card-image [src]="linkPreview?.image">
+    </div>
+    <div>
+      <mat-card-title>{{linkPreview?.title}}</mat-card-title>
+      <mat-card-subtitle>{{linkPreview?.description}}</mat-card-subtitle>
+      <a [href]="linkPreview?.url" mat-button [color]="color">{{linkPreview?.url}}</a>
+    </div>
+  </mat-card-content>
+</mat-card>

src/module/components/mat-link-preview/mat-link-preview.component.scss

@@ -1,3 +1,31 @@
 :host {
   display: inline-block;
 }
+
+mat-card-content {
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+
+  a {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.img-container {
+  margin-right: 1rem;
+  place-content: center;
+  align-items: center;
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 100%;
+  max-width: 20%;
+  padding: 24px 16px;
+}
+
+.center-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}

src/module/components/mat-link-preview/mat-link-preview.component.spec.ts

@@ -1,9 +1,8 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {By} from '@angular/platform-browser';
 import {DebugElement, EventEmitter} from '@angular/core';
 
 import {MatLinkPreviewComponent} from './mat-link-preview.component';
-import {MatCardModule, MatProgressBarModule} from '@angular/material';
+import {MatButtonModule, MatCardModule, MatProgressSpinnerModule} from '@angular/material';
 import {FormsModule} from '@angular/forms';
 import {MatLinkPreviewService} from '../../../index';
 import {Link} from 'ngx-linkifyjs';
@@ -13,12 +12,13 @@ describe('LinkPreviewComponent', function () {
   let comp: MatLinkPreviewComponent;
   let fixture: ComponentFixture<MatLinkPreviewComponent>;
   const linkPreviewServicePartial: Partial<MatLinkPreviewService> = {
-    onLinkFound: new EventEmitter<Array<Link>>()
+    onLinkFound: new EventEmitter<Array<Link>>(),
+    links: []
   };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MatCardModule, MatProgressBarModule, FormsModule],
+      imports: [MatCardModule, MatProgressSpinnerModule, MatButtonModule, FormsModule],
       declarations: [MatLinkPreviewComponent],
       providers: [{provide: MatLinkPreviewService, useValue: linkPreviewServicePartial}]
     })

src/module/components/mat-link-preview/mat-link-preview.component.ts

@@ -13,6 +13,11 @@ export class MatLinkPreviewComponent implements OnInit, OnDestroy {
 
   @Input() link: Link;
   @Input() linkPreview: LinkPreview;
+
+  // forwarded from the container
+  @Input() color = 'primary'; // accent | warn
+  @Input() showLoadingsProgress = true;
+
   loaded: boolean;
   private _subscription: Subscription;
 

src/module/directives/mat-link-preview.directive.ts

@@ -27,6 +27,7 @@ export class MatLinkPreviewDirective implements OnInit {
           const links: Link[] = this.linkifyService.find(data);
           console.log('data: ', data);
           console.log('links: ', links);
+          // event.target['value'] = this.linkifyService.linkify(data);
           return links;
         })).subscribe((links) => {
       this.linkPreviewService.onLinkFound.emit(links);

src/module/mat-link-preview.module.ts

@@ -4,7 +4,7 @@ import {ModuleWithProviders, NgModule} from '@angular/core';
 import {MatLinkPreviewService} from './service/mat-link-preview.service';
 import {NgxLinkifyjsModule, NgxLinkifyjsService} from 'ngx-linkifyjs';
 import {HttpClientModule} from '@angular/common/http';
-import {MatCardModule, MatProgressBarModule} from '@angular/material';
+import {MatButtonModule, MatCardModule, MatProgressSpinnerModule} from '@angular/material';
 import {MatLinkPreviewDirective} from './directives/mat-link-preview.directive';
 import {MatLinkPreviewComponent} from './components/mat-link-preview/mat-link-preview.component';
 import {MatLinkPreviewContainerComponent} from './components/mat-link-preview-container/mat-link-preview-container.component';
@@ -22,7 +22,8 @@ export {MatLinkPreviewService} from './service/mat-link-preview.service';
     HttpClientModule,
     NgxLinkifyjsModule,
     MatCardModule,
-    MatProgressBarModule
+    MatButtonModule,
+    MatProgressSpinnerModule,
   ],
   exports: [MatLinkPreviewComponent, MatLinkPreviewContainerComponent, MatLinkPreviewDirective],
   declarations: [MatLinkPreviewComponent, MatLinkPreviewContainerComponent, MatLinkPreviewDirective]

src/module/service/mat-link-preview.service.ts

@@ -11,17 +11,20 @@ export class MatLinkPreviewService implements OnDestroy {
 
   private _accessKey = '5b54e80a65c77848ceaa4630331e8384950e09d392365';
   private _apiURL = 'http://api.linkpreview.net/';
+  private _subscription: Subscription;
 
-  subscription: Subscription;
   onLinkFound: EventEmitter<Array<Link>> = new EventEmitter<Array<Link>>();
 
   links: Link[] = [];
 
   constructor(private http: HttpClient) {
-    this.onLinkFound.subscribe((links: Array<Link>) => this.links = links);
+    this._subscription = this.onLinkFound.subscribe((links: Array<Link>) => this.links = links);
   }
 
   ngOnDestroy(): void {
+    if (this._subscription) {
+      this._subscription.unsubscribe();
+    }
   }
 
   fetchLink(url: string): Observable<LinkPreview> {