Merge pull request 'video card and icon' (#1) from prod into master

Reviewed-on: #1

bin/script/build

@@ -0,0 +1,3 @@
+#!/bin/bash
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+$SCRIPT_DIR/exec build

bin/script/down

@@ -0,0 +1,3 @@
+#!/bin/bash
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+$SCRIPT_DIR/exec down

bin/script/exec

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+COMMAND="$@"
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+
+#LOAD ENV VARIABLES FROM .ENV
+#export $(grep -v '^#' "${SCRIPT_DIR}/../../.env" | xargs)
+
+#MAC
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    docker compose -f "${SCRIPT_DIR}/../../docker/docker-compose-mac.yml" $COMMAND
+
+#LINUX
+elif [[ "$OSTYPE" == "linux-gnu" ]]; then
+    docker compose -f "${SCRIPT_DIR}/../../docker/docker-compose.yml" $COMMAND
+
+else
+    echo "Dieses Skript wird auf deinem Gerät nicht unterstützt"
+    exit 1
+fi
+
+#UNSET ENV VARIABLES FROM .ENV
+#unset $(grep -v '^#' "${SCRIPT_DIR}/../../.env" | sed -E 's/(.*)=.*/\1/' | xargs)

bin/script/firstRun

@@ -1,18 +0,0 @@
-#!/bin/bash
-
-SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
-PROJECT_DIR=$(realpath $SCRIPT_DIR/../../)
-ENV_DIR=$(realpath $PROJECT_DIR/../../../)
-
-source $ENV_DIR/bin/messages
-source $ENV_DIR/bin/drun
-
-# Install node Packages
-infomsg "[frontend]: NPM install"
-drun frontend npm install
-successmsg "[frontend]: NPM install done"
-
-# Initial build of website
-infomsg "[frontend]: NPM run build"
-drun frontend npm run build
-successmsg "[frontend]: NPM run build done"

bin/script/init

@@ -2,13 +2,18 @@
 
 SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 PROJECT_DIR=$(realpath $SCRIPT_DIR/../../)
-ENV_DIR=$(realpath $PROJECT_DIR/../../../)
+ENV_DIR=$(realpath $PROJECT_DIR/../../)
 
-source $ENV_DIR/bin/messages
+# Build and start docker containers
+$SCRIPT_DIR/exec build
+$SCRIPT_DIR/exec up -d
 
-# Check docker-compose.yml file
+# Source drun
-if [ ! -f "$PROJECT_DIR/docker/docker-compose.yml" ] ; then
+source $ENV_DIR/bin/script/drun
-    infomsg "[frontend] Creating docker-compose.yml"
+
-    cp "$PROJECT_DIR/docker/docker-compose.yml.dist" "$PROJECT_DIR/docker/docker-compose.yml"
+# Install node Packages
-    successmsg "[frontend] Created docker-compose.yml"
+drun mytube-frontend npm install
-fi
+drun mytube-frontend npm install -g @angular/cli
+
+# Initial build of website
+drun mytube-frontend npm run build

bin/script/stop

@@ -0,0 +1,3 @@
+#!/bin/bash
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+$SCRIPT_DIR/exec stop

bin/script/up

@@ -0,0 +1,3 @@
+#!/bin/bash
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+$SCRIPT_DIR/exec up -d

bin/script/update

@@ -1,29 +0,0 @@
-#!/bin/bash
-
-SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
-PROJECT_DIR=$(realpath $SCRIPT_DIR/../../)
-ENV_DIR=$(realpath $PROJECT_DIR/../../../)
-CWD=$(pwd)
-
-source $ENV_DIR/bin/messages
-source $ENV_DIR/bin/drun
-
-
-# Pull branch in project directory
-infomsg "[frontend]: Git pull"
-cd "$PROJECT_DIR"
-git pull
-successmsg "[frontend]: Git pull done"
-
-# Install node Packages
-infomsg "[frontend]: NPM install"
-drun frontend npm install
-successmsg "[frontend]: NPM install done"
-
-# Initial build of website
-infomsg "[frontend]: NPM run build"
-drun frontend npm run build
-successmsg "[frontend]: NPM run build done"
-
-# Switch back to current working directory
-cd "$CWD"

docker/docker-compose-mac.yml

@@ -0,0 +1,31 @@
+version: '3'
+
+networks:
+  mytube:
+    external: true
+
+services:
+  mytube-frontend-app:
+    image: mytube-frontend-app
+    networks:
+      - mytube
+    volumes:
+      - /Users/flo/dev/frontend/mytube/:/var/www/
+    build:
+      context: ./../
+      dockerfile: ./docker/npm/dockerfile
+    tty: true
+
+  mytube-frontend-nginx:
+    image: mytube-frontend-nginx
+    networks:
+      - mytube
+    volumes:
+      - /Users/flo/dev/frontend/mytube/:/var/www/html:z
+    build:
+      context: ./../
+      dockerfile: ./docker/nginx/dockerfile
+    ports:
+      - 80:80
+    depends_on:
+      - mytube-frontend-app

docker/docker-compose.yml

@@ -1,3 +1,5 @@
+version: '3'
+
 networks:
   mytube:
     external: true
@@ -23,9 +25,7 @@ services:
     build:
       context: ./../
       dockerfile: ./docker/nginx/dockerfile
-    labels:
+    ports:
-      - "traefik.http.routers.frontend.rule=Host(`mytube.srv`) || Host(`192.168.152.60`)"
+      - 80:80
-      - "traefik.http.routers.frontend.entrypoints=websecure"
-      - "traefik.http.routers.frontend.tls.certresolver=le"
     depends_on:
       - mytube-frontend-app

src/app/component/home/home.component.html

@@ -1,7 +1,3 @@
-<div class="m-5 flex flex-nowrap overflow-x-auto gap-2">
-  <shared-tag-card *ngFor="let tag of tags" [tag]="tag" />
-</div>
-
 <shared-video-list
   (onReadList)="readList($event)"
   [total]="total"

src/app/component/home/home.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { TagListEntry } from 'src/app/model/TagListEntry';
 import { VideoListEntry } from 'src/app/model/VideoListEntry';
 import { RequestService } from 'src/app/request.service';
 import { OnReadListModel } from 'src/app/shared/components/video-list/video-list.component';
@@ -12,11 +11,8 @@ import { OnReadListModel } from 'src/app/shared/components/video-list/video-list
 export class HomeComponent {
   total: number = 0;
   videos: VideoListEntry[] = [];
-  tags: TagListEntry[] = [];
 
-  constructor(public requestService: RequestService) {
+  constructor(public requestService: RequestService) {}
-    this.readTagList();
-  }
 
   readList(model: OnReadListModel): void {
     this.requestService.post(
@@ -32,10 +28,4 @@ export class HomeComponent {
       }
     );
   }
-
-  readTagList(): void {
-    this.requestService.post('tag-list/read-list', {}, (response: any) => {
-      this.tags = response.items;
-    });
-  }
 }

src/app/feature/tag/tag.component.html

@@ -28,15 +28,6 @@
             />
           </div>
         </div>
-
-        <div id="thumbnail" class="basis-full">
-          <img
-            [src]="'/api/tag/thumbnail/' + tagId"
-            alt="Thumbnail"
-            class="m-auto h-80 w-full"
-          />
-        </div>
-
         <div id="tags" class="flex flex-row gap-2">
           <div class="basis-auto w-24">Alias:</div>
           <div class="basis-full" *ngIf="tagDetails !== null">

src/app/feature/video/list/list.component.html

@@ -11,15 +11,6 @@
       (change)="readList()"
       [(ngModel)]="onlyTagless"
     />
-    <div class="basis-auto">
-      <button (click)="analyze()">
-        <div
-          class="block px-3 py-1.5 rounded rounded-lg bg-zinc-700 hover:bg-zinc-900 font-bold text-black dark:text-white"
-        >
-          Analyze
-        </div>
-      </button>
-    </div>
   </div>
 
   <shared-table [items]="videos" [columns]="videoListColumns" />

src/app/feature/video/list/list.component.ts

@@ -12,7 +12,7 @@ import { ColumnDefinition } from 'src/app/shared/components/table/table.componen
 export class ListComponent {
   query$ = new Subject<string>();
   query: string = '';
-  onlyTagless: boolean = true;
+  onlyTagless: boolean = false;
   videos: VideoListEntry[] = [];
   total: number = 0;
   page: number = 1;
@@ -57,18 +57,9 @@ export class ListComponent {
     this.readList();
   }
 
-  analyze(): void {
-    this.requestService.post('analyze/analyze-videos', {}, (response: any) => {
-      if (response.length > 0) {
-        alert(response.length + ' videos were updated');
-        this.readList();
-      }
-    });
-  }
-
   readList(): void {
     this.requestService.post(
-      'analyze/read-video-list',
+      'video-list/read-list',
       {
         query: this.query,
         page: this.page,

src/app/shared/components/tag-card/tag-card.component.html

@@ -1,40 +0,0 @@
-<div
-  *ngIf="tag !== null"
-  id="card"
-  class="grow py-2 px-3 rounded-xl shadow-lg border border-gray-100 dark:bg-zinc-800 dark:border-zinc-900 text-black dark:text-white"
-  [routerLink]="['/tag', tag.id]"
->
-  <div id="header" class="mb-2">
-    <div class="flex flex-row">
-      <div class="my-auto text-xl font-medium truncate">
-        {{ tag.description }}
-      </div>
-    </div>
-  </div>
-
-  <div id="content" class="mb-2">
-    <img
-      [src]="'/api/tag/thumbnail/' + tag.id"
-      alt="Thumbnail"
-      class="max-w-none h-40 w-80 m-auto"
-      (click)="onClick()"
-    />
-  </div>
-
-  <div id="footer">
-    <div class="flex flex-row">
-      <!--
-      <div class="basis-full h-8">
-        <span
-          *ngFor="let alias of tag.aliases"
-          class="text-sm font-medium me-2 px-2.5 py-0.5 rounded bg-zinc-700 hover:bg-zinc-900"
-          >{{ tag.description }}</span
-        >
-      </div>
-      -->
-      <div class="basis-auto text-slate-500 dark:text-slate-400">
-        {{ tag.videoCount }}
-      </div>
-    </div>
-  </div>
-</div>

src/app/shared/components/tag-card/tag-card.component.ts

@@ -1,19 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { TagListEntry } from 'src/app/model/TagListEntry';
-import { VideoListEntry } from 'src/app/model/VideoListEntry';
-
-@Component({
-  selector: 'shared-tag-card',
-  templateUrl: './tag-card.component.html',
-  styleUrls: ['./tag-card.component.scss'],
-})
-export class TagCardComponent {
-  @Input() tag: TagListEntry | null = null;
-  @Output() clicked = new EventEmitter<TagListEntry>();
-
-  onClick(): void {
-    if (this.tag === null) return;
-
-    this.clicked.emit(this.tag);
-  }
-}

src/app/shared/components/video-card/video-card.component.html

@@ -1,7 +1,7 @@
 <div
   *ngIf="video !== null"
   id="card"
-  class="grow py-2 px-3 rounded-xl shadow-lg border border-gray-100 dark:bg-zinc-800 dark:border-zinc-900 text-black dark:text-white"
+  class="grow py-2 px-3 my-2 rounded-xl shadow-lg border border-gray-100 dark:bg-zinc-800 dark:border-zinc-900 text-black dark:text-white"
 >
   <div id="header" class="mb-2">
     <div class="flex flex-row">

src/app/shared/components/video-list/video-list.component.html

@@ -8,7 +8,7 @@
 
 <div
   id="card-container"
-  class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 px-5"
+  class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 px-5"
 >
   <shared-video-card
     *ngFor="let video of videos; index as currentIndex"
@@ -17,11 +17,10 @@
     (clicked)="selectVideo(video)"
   />
 </div>
-<div class="px-5 py-2">
+<shared-paginator
-  <shared-paginator
   (pageChange)="onPageChanged($event)"
   [page]="page"
   [perPage]="perPage"
   [total]="total"
-  />
+>
-</div>
+</shared-paginator>

src/app/shared/shared.module.ts

@@ -32,7 +32,6 @@ import { MatTableModule } from '@angular/material/table';
 import { MatChipsModule } from '@angular/material/chips';
 import { VideoListComponent } from './components/video-list/video-list.component';
 import { VideoCardComponent } from './components/video-card/video-card.component';
-import { TagCardComponent } from './components/tag-card/tag-card.component';
 import { TagSelectorComponent } from './components/tag-selector/tag-selector.component';
 
 @NgModule({
@@ -46,7 +45,6 @@ import { TagSelectorComponent } from './components/tag-selector/tag-selector.com
     TableComponent,
     VideoListComponent,
     VideoCardComponent,
-    TagCardComponent,
     TagSelectorComponent,
   ],
   exports: [
@@ -60,7 +58,6 @@ import { TagSelectorComponent } from './components/tag-selector/tag-selector.com
     VideoListComponent,
     VideoCardComponent,
     TagSelectorComponent,
-    TagCardComponent,
 
     MatSlideToggleModule,
     MatCardModule,