Added description to player component and simplified the database by un-splitting videos and playlists by type

src/app/components/see-more/see-more.component.html

@@ -0,0 +1,11 @@
+<span class="text" [ngStyle]="{'-webkit-line-clamp': !see_more_active ? line_limit : null}" [innerHTML]="text | linkify"></span>
+<span>
+    <a [routerLink]="" (click)="toggleSeeMore()">
+        <ng-container *ngIf="!see_more_active" i18n="See more">
+            See more.
+        </ng-container>
+        <ng-container *ngIf="see_more_active" i18n="See less">
+            See less.
+        </ng-container>
+    </a>
+</span>

src/app/components/see-more/see-more.component.scss

@@ -0,0 +1,7 @@
+.text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+ }

src/app/components/see-more/see-more.component.spec.ts

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

src/app/components/see-more/see-more.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, OnInit, Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'linkify' })
+export class LinkifyPipe implements PipeTransform {
+
+  constructor(private _domSanitizer: DomSanitizer) {}
+
+  transform(value: any, args?: any): any {
+    return this._domSanitizer.bypassSecurityTrustHtml(this.stylize(value));
+  }
+
+  // Modify this method according to your custom logic
+  private stylize(text: string): string {
+    let stylizedText: string = '';
+    if (text && text.length > 0) {
+      for (let line of text.split("\n")) {
+        for (let t of line.split(" ")) {
+          if (t.startsWith("http") && t.length>7) {  
+            stylizedText += `<a target="_blank" href="${t}">${t}</a> `;
+          }
+          else
+            stylizedText += t + " ";
+        }
+        stylizedText += '<br>';
+      }
+      return stylizedText;
+    }
+    else return text;
+  }
+
+}
+
+@Component({
+  selector: 'app-see-more',
+  templateUrl: './see-more.component.html',
+  providers: [LinkifyPipe],
+  styleUrls: ['./see-more.component.scss']
+})
+export class SeeMoreComponent implements OnInit {
+
+  see_more_active = false;
+
+  @Input() text = '';
+  @Input() line_limit = 2;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  toggleSeeMore() {
+    this.see_more_active = !this.see_more_active;
+  }
+
+  parseText() {
+    return this.text.replace(/(http.*?\s)/, "<a href=\"$1\">$1</a>")
+  }
+
+}