Implement URL output

ui/package-lock.json

@@ -8765,6 +8765,14 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
       "dev": true
     },
+    "toppy": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/toppy/-/toppy-2.3.3.tgz",
+      "integrity": "sha512-y2YXC/VsFUuT8zSqfCaOeGpB3KEI6EwB+7B/6UeNNtv97EIZ4pDHGdbhP118TkfjtnMRZSoazpPm1p9DvgDwVQ==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "tough-cookie": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",

ui/package.json

@@ -21,6 +21,7 @@
     "@angular/router": "~8.0.0",
     "font-awesome": "^4.7.0",
     "rxjs": "~6.4.0",
+    "toppy": "^2.3.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"
   },

ui/src/app/app.module.ts

@@ -7,12 +7,14 @@ import { IndexComponent } from './index/index.component';
 import { InputComponent } from './input/input.component';
 import {FormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
+import { OutputComponent } from './output/output.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     IndexComponent,
-    InputComponent
+    InputComponent,
+    OutputComponent
   ],
   imports: [
     BrowserModule,

ui/src/app/index/index.component.html

@@ -21,7 +21,7 @@
           </a>
         </ng-container>
         <ng-container *ngIf="loggedIn">
-          <a>Hey, <i class="fa fa-user-o" aria-hidden="true"></i> {{ fullName }}</a>
+          <a>Hey, <i class="fa fa-user-o" aria-hidden="true"></i> {{ user?.full_name }}</a>
           <a href="/user/logout"><i class="fa fa-power-off" aria-hidden="true"></i></a>
         </ng-container>
 
@@ -29,7 +29,9 @@
     </div>
   </div>
 
-  <app-input></app-input>
+  <app-input [featureLevel]="user?.feature_level"
+             [locked]="!loggedIn">
+  </app-input>
 
   <div class="man"></div>
 

ui/src/app/index/index.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {APIService, UserResponse} from '../api.service';
 
 @Component({
   selector: 'app-index',
@@ -6,13 +7,15 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./index.component.scss']
 })
 export class IndexComponent implements OnInit {
-  loggedIn: boolean;
-  fullName: string;
+  loggedIn = false;
+  user: UserResponse;
 
-  constructor() { }
+  constructor(private apiService: APIService) { }
 
   ngOnInit() {
-    this.loggedIn = true;
-    this.fullName = 'Full name here';
+    this.apiService.getUser().subscribe(resp => {
+      this.loggedIn = true;
+      this.user = resp;
+    });
   }
 }

ui/src/app/input/input.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {GlobalPosition, InsidePlacement, Toppy, ToppyControl} from 'toppy';
+import {APIService} from '../api.service';
+import {OutputComponent} from '../output/output.component';
 
 @Component({
   selector: 'app-input',
@@ -6,21 +9,56 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./input.component.scss']
 })
 export class InputComponent implements OnInit {
-  featureLevel = 0;
+  @Input() featureLevel = 0;
+  @Input() locked = true;
+
+  popup: ToppyControl;
   popupOpened: boolean;
-  locked = false;
   format = 'video';
   quality = 'high';
   pageSize = 50;
   link = '';
 
-  constructor() { }
+  constructor(private toppy: Toppy,
+              private api: APIService) { }
 
   ngOnInit() {
+    this.popup = this.toppy
+      .position(new GlobalPosition({
+        placement: InsidePlacement.TOP,
+        width: 'auto',
+        height: 'auto',
+        offset: 150
+      }))
+      .config({
+        backdrop: true,
+        closeOnEsc: true,
+      })
+      .content(OutputComponent)
+      .create();
+
+    this.popup.listen('t_close').subscribe(() => {
+      this.popupOpened = false;
+      this.link = '';
+    });
   }
 
   submit() {
-    console.log('input submit');
+    this.api.createFeed({
+      url: this.link,
+      format: this.format,
+      quality: this.quality,
+      page_size: this.pageSize,
+    }).subscribe(
+      (resp) => {
+        this.popup.content.props.address = resp.id;
+        this.popup.open();
+        this.popupOpened = true;
+      },
+      err => {
+        alert(err);
+      }
+    );
   }
 
   allow600() {

ui/src/app/output/output.component.html

@@ -0,0 +1,31 @@
+<div class="frame">
+  <input type="url"
+         readonly
+         [value]="address"
+         [size]="address.length"
+         #input />
+
+  <div class="links">
+    <span>
+      <a href="#" (click)="copyToClipboard(input)" *ngIf="canCopy">
+        <i class="fa fa-clone" aria-hidden="true"></i>
+        Copy
+      </a>
+    </span>
+
+    <span>
+      <a [href]="address" target="_blank">
+        <i aria-hidden="true" class="fa fa-external-link"></i>
+        Open
+      </a>
+    </span>
+
+    <span>
+      <a href="#" (click)="close()">
+        <i aria-hidden="true" class="fa fa-thumbs-up"></i>
+        Close
+      </a>
+    </span>
+  </div>
+
+</div>

ui/src/app/output/output.component.scss

@@ -0,0 +1,28 @@
+.frame {
+  background: #56524b;
+  text-align: center;
+  z-index: 10;
+  outline: 9999px solid rgba(0,0,0,0.8);
+  padding: 5px;
+
+  input {
+    width: auto;
+    font-size: 3em;
+    border: none;
+    background: none;
+    border-bottom: 1px dotted black;
+  }
+}
+
+.links {
+  padding-top: 5px;
+
+  span {
+    padding-right: 15px;
+  }
+
+  a:hover {
+    color: #EB8C11;
+    background: rgb(68, 65, 60);
+  }
+}

ui/src/app/output/output.component.spec.ts

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

ui/src/app/output/output.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import {ToppyControl} from 'toppy';
+
+@Component({
+  selector: 'app-output',
+  templateUrl: './output.component.html',
+  styleUrls: ['./output.component.scss']
+})
+export class OutputComponent implements OnInit {
+  address: string;
+  canCopy: boolean;
+
+  constructor(private overlay: ToppyControl) {
+    this.address = overlay.content.props.address;
+  }
+
+  ngOnInit() {
+    this.canCopy = document.queryCommandSupported('copy');
+  }
+
+  copyToClipboard(input) {
+    input.select();
+    document.execCommand('copy');
+    input.setSelectionRange(0, 0);
+  }
+
+  close() {
+    this.overlay.close();
+  }
+}