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

src/app/app.module.ts

@@ -81,6 +81,7 @@ import { EditSubscriptionDialogComponent } from './dialogs/edit-subscription-dia
 import { CustomPlaylistsComponent } from './components/custom-playlists/custom-playlists.component';
 import { EditCategoryDialogComponent } from './dialogs/edit-category-dialog/edit-category-dialog.component';
 import { TwitchChatComponent } from './components/twitch-chat/twitch-chat.component';
+import { LinkifyPipe, SeeMoreComponent } from './components/see-more/see-more.component';
 
 registerLocaleData(es, 'es');
 
@@ -107,6 +108,7 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     VideoInfoDialogComponent,
     ArgModifierDialogComponent,
     HighlightPipe,
+    LinkifyPipe,
     UpdaterComponent,
     UpdateProgressDialogComponent,
     ShareMediaDialogComponent,
@@ -127,7 +129,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     EditSubscriptionDialogComponent,
     CustomPlaylistsComponent,
     EditCategoryDialogComponent,
-    TwitchChatComponent
+    TwitchChatComponent,
+    SeeMoreComponent
   ],
   imports: [
     CommonModule,
@@ -188,7 +191,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     PostsService
   ],
   exports: [
-    HighlightPipe
+    HighlightPipe,
+    LinkifyPipe
   ],
   bootstrap: [AppComponent]
 })

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>")
+  }
+
+}

src/app/player/player.component.html

@@ -8,14 +8,28 @@
                             </video>
                         </vg-player>
                     </div>
-                    <div *ngIf="file_obj" style="height: fit-content; width: 100%; margin-top: 10px;">
+                    <div *ngIf="db_file" style="height: fit-content; width: 100%; margin-top: 10px;">
                         <div class="container">
                             <div class="row">
-                                <div class="col">
-                                    <ng-container *ngIf="file_obj">{{file_obj['local_play_count'] ? file_obj['local_play_count'] : 0}}&nbsp;<ng-container i18n="View count label">views</ng-container></ng-container>
+                                <div class="col-2 col-lg-1">
+                                    <ng-container *ngIf="db_file">{{db_file['local_view_count'] ? db_file['local_view_count'] : 0}}&nbsp;<ng-container i18n="View count label">views</ng-container></ng-container>
                                 </div>
-                                <div class="col">
-                                    
+                                <div style="white-space: pre-line;" class="col-9 col-lg-10">
+                                    <ng-container *ngIf="db_file && db_file['description']">
+                                        <p>
+                                            <app-see-more [text]="db_file['description']"></app-see-more>
+                                        </p>
+                                    </ng-container>
+                                    <ng-container *ngIf="!db_file || !db_file['description']">
+                                        <p style="text-align: center;">
+                                            No description available.
+                                        </p>
+                                    </ng-container>
+                                </div>
+                                <div class="col-1">
+                                    <div *ngIf="db_file && db_file.url.includes('twitch.tv/videos/') && postsService['config']['API']['use_twitch_API']">
+                                        <button (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -25,15 +39,11 @@
                             <mat-button-toggle cdkDrag *ngFor="let playlist_item of playlist; let i = index" [checked]="currentItem.title === playlist_item.title" (click)="onClickPlaylistItem(playlist_item, i)" class="toggle-button" [value]="playlist_item.title">{{playlist_item.label}}</mat-button-toggle>
                         </mat-button-toggle-group>
                     </div>
-                    <mat-drawer #drawer class="example-sidenav" mode="side" position="end" [opened]="db_file && db_file['chat_exists']">
+                    <mat-drawer #drawer class="example-sidenav" mode="side" position="end" [opened]="db_file && db_file['chat_exists'] && postsService['config']['API']['use_twitch_API']">
                         <ng-container *ngIf="api_ready && db_file && db_file.url.includes('twitch.tv/videos/')">
                             <app-twitch-chat #twitchchat [db_file]="db_file" [current_timestamp]="api.currentTime"></app-twitch-chat>
                         </ng-container>
                     </mat-drawer>
-                    
-                    <div *ngIf="db_file && db_file.url.includes('twitch.tv/videos/') && postsService['config']['API']['use_twitch_API']" style="position: absolute; right: 0px">
-                        <button style="right: 0px; top: -46px;" (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button>
-                    </div>
 
                     <div class="update-playlist-button-div" *ngIf="id && playlistChanged()">
                         <div class="spinner-div">