From 325406ab9e26728ea9ab5185c74e838452b4a908 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20G=C3=BCnther?= Date: Sun, 29 Oct 2023 15:18:15 +0100 Subject: [PATCH 01/33] new ui update --- Mediatheke-Client/src/app/app.component.html | 1 + Mediatheke-Client/src/app/app.module.ts | 2 + .../src/app/footer/footer.component.html | 66 +++++++------- .../src/app/footer/footer.component.scss | 51 +++++++---- .../src/app/hero/hero.component.html | 10 +++ .../src/app/hero/hero.component.scss | 82 ++++++++++++++++++ .../src/app/hero/hero.component.spec.ts | 21 +++++ .../src/app/hero/hero.component.ts | 10 +++ .../src/app/home/home.component.html | 1 - .../app/video-card/video-card.component.scss | 2 +- .../video-detail/video-detail.component.html | 21 ++--- .../video-detail/video-detail.component.scss | 46 ++++++---- .../video-search/video-search.component.html | 9 +- .../video-search/video-search.component.scss | 36 ++++++-- .../assets/fonts/Jost-VariableFont_wght.ttf | Bin 0 -> 135548 bytes Mediatheke-Client/src/assets/footer/bg.svg | 5 ++ Mediatheke-Client/src/assets/footer/logo.svg | 7 ++ Mediatheke-Client/src/assets/hero/media.svg | 3 + Mediatheke-Client/src/assets/hero/theke.svg | 6 ++ Mediatheke-Client/src/assets/hero/tile.svg | 4 + Mediatheke-Client/src/assets/ui/search01.svg | 4 + Mediatheke-Client/src/styles.scss | 11 +++ 22 files changed, 311 insertions(+), 87 deletions(-) create mode 100644 Mediatheke-Client/src/app/hero/hero.component.html create mode 100644 Mediatheke-Client/src/app/hero/hero.component.scss create mode 100644 Mediatheke-Client/src/app/hero/hero.component.spec.ts create mode 100644 Mediatheke-Client/src/app/hero/hero.component.ts create mode 100644 Mediatheke-Client/src/assets/fonts/Jost-VariableFont_wght.ttf create mode 100644 Mediatheke-Client/src/assets/footer/bg.svg create mode 100644 Mediatheke-Client/src/assets/footer/logo.svg create mode 100644 Mediatheke-Client/src/assets/hero/media.svg create mode 100644 Mediatheke-Client/src/assets/hero/theke.svg create mode 100644 Mediatheke-Client/src/assets/hero/tile.svg create mode 100644 Mediatheke-Client/src/assets/ui/search01.svg diff --git a/Mediatheke-Client/src/app/app.component.html b/Mediatheke-Client/src/app/app.component.html index 5749b21..3cfad34 100644 --- a/Mediatheke-Client/src/app/app.component.html +++ b/Mediatheke-Client/src/app/app.component.html @@ -1,4 +1,5 @@ +
diff --git a/Mediatheke-Client/src/app/app.module.ts b/Mediatheke-Client/src/app/app.module.ts index 2ae7536..1a4fa81 100644 --- a/Mediatheke-Client/src/app/app.module.ts +++ b/Mediatheke-Client/src/app/app.module.ts @@ -32,6 +32,7 @@ import { SincePipe } from './shared/since.pipe'; import { ServiceWorkerModule } from '@angular/service-worker'; import { VideoSeriesNavComponent } from './video-series-nav/video-series-nav.component'; import { TabsModule } from 'ngx-bootstrap/tabs'; +import { HeroComponent } from './hero/hero.component'; @NgModule({ declarations: [ @@ -55,6 +56,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs'; VideoResultListComponent, SincePipe, VideoSeriesNavComponent, + HeroComponent, ], imports: [ BrowserModule, diff --git a/Mediatheke-Client/src/app/footer/footer.component.html b/Mediatheke-Client/src/app/footer/footer.component.html index fd659f4..ee8b163 100644 --- a/Mediatheke-Client/src/app/footer/footer.component.html +++ b/Mediatheke-Client/src/app/footer/footer.component.html @@ -1,39 +1,39 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/Mediatheke-Client/src/app/footer/footer.component.scss b/Mediatheke-Client/src/app/footer/footer.component.scss index 062f1c1..c01e131 100644 --- a/Mediatheke-Client/src/app/footer/footer.component.scss +++ b/Mediatheke-Client/src/app/footer/footer.component.scss @@ -1,25 +1,42 @@ -.footer { - margin-top: 100px; - bottom: 0; - width: 100%; - background-color: var(--color-contrast-background); - color: var(--color-highlight); +.container-fluid { + background-color: #0f0f0f; + padding: 20px; a { - color: var(--color-primary); + color: grey; + font-size: 0.9rem; + + &:hover { + color: white; + } + + } + + height: 270px; +} + +h1 { + color: white; + font-size: 2.5em; + position: relative; + left: 180px; + top: 100px; +} + +.link-item { + text-decoration: none; + color: white; + &:hover { + text-decoration: underline; } } -img { - /*invert the logo */ - height: 50px; +.img-fluid { + max-width: 100%; + margin-left: -20px; + margin-bottom: -20px; } -.container { - max-width: 1600px; - margin: auto; - padding-left: 30px; - padding-right: 30px; - padding-top: 30px; - padding-bottom: 30px; +.end { + align-self: end; } \ No newline at end of file diff --git a/Mediatheke-Client/src/app/hero/hero.component.html b/Mediatheke-Client/src/app/hero/hero.component.html new file mode 100644 index 0000000..3119d10 --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.html @@ -0,0 +1,10 @@ +
+
+ Alle Medias + +
+
+ in einer   Theke. + +
+
diff --git a/Mediatheke-Client/src/app/hero/hero.component.scss b/Mediatheke-Client/src/app/hero/hero.component.scss new file mode 100644 index 0000000..3a419cb --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.scss @@ -0,0 +1,82 @@ +/* tiled background repeat */ +.hero { + --max-amplitude: 5px; // Maximum distance element will move during wobble + --degree: 5deg; // Maximum rotation element will move during wobble + width: 100%; + height: 400px; + margin-top: 40px; + padding-top: 50px; + background-image: url('/assets/hero/tile.svg'); + background-repeat: repeat; + + font-size: 2rem; + text-transform: lowercase; + + overflow: hidden; + display: flex; // To arrange child divs horizontally + + // Nested styles for the child divs + .float { + display: flex; // Use flex for inner positioning + font-size: 2em; // Larger font size for better visibility + position: relative; + // Adjust the spacing between the text and the SVG image + span { + margin-right: 0.5em; // Space between text and image + z-index: 100; + } + + img { + height: auto; // Keep aspect ratio of the images# + position: absolute; + } + } + + .media { + left: 9%; + top: 16%; + + img { + width: 330px; + left: 100px; + top: -110px; + } + } + + .theke { + left: 33%; + top: 41%; + + img { + width: 513px; + left: -190px; + top: -153px; + } + } +} + + +.media img, .theke img { + animation: wobble 30s infinite ease-in-out; + /* Using 'infinite' to make the animation loop forever. + 2s duration for a slow, subtle effect, and 'ease-in-out' for smooth timing. */ + } +/* Define a wobble animation to simulate the hovering effect */ +@keyframes wobble { + 0% { + transform: translate(0, 0) rotate(0); + } + 25% { + transform: translate(calc(var(--max-amplitude) * -1), var(--max-amplitude)) rotate(var(--degree)); + } + 50% { + transform: translate(var(--max-amplitude), calc(var(--max-amplitude) * -1)) rotate(calc(var(--degree) * -1)); + } + 75% { + transform: translate(calc(var(--max-amplitude) * -0.5), calc(var(--max-amplitude) * 0.5)) rotate(0); + } + 100% { + transform: translate(calc(var(--max-amplitude) * 0.5), calc(var(--max-amplitude) * -0.5)) rotate(0); + } + } + \ No newline at end of file diff --git a/Mediatheke-Client/src/app/hero/hero.component.spec.ts b/Mediatheke-Client/src/app/hero/hero.component.spec.ts new file mode 100644 index 0000000..d40e14d --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeroComponent } from './hero.component'; + +describe('HeroComponent', () => { + let component: HeroComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [HeroComponent] + }); + fixture = TestBed.createComponent(HeroComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mediatheke-Client/src/app/hero/hero.component.ts b/Mediatheke-Client/src/app/hero/hero.component.ts new file mode 100644 index 0000000..3c00249 --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-hero', + templateUrl: './hero.component.html', + styleUrls: ['./hero.component.scss'] +}) +export class HeroComponent { + +} diff --git a/Mediatheke-Client/src/app/home/home.component.html b/Mediatheke-Client/src/app/home/home.component.html index ba35b54..f2e787d 100644 --- a/Mediatheke-Client/src/app/home/home.component.html +++ b/Mediatheke-Client/src/app/home/home.component.html @@ -1,4 +1,3 @@ - \ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-card/video-card.component.scss b/Mediatheke-Client/src/app/video-card/video-card.component.scss index d32ef37..c4ea693 100644 --- a/Mediatheke-Client/src/app/video-card/video-card.component.scss +++ b/Mediatheke-Client/src/app/video-card/video-card.component.scss @@ -5,7 +5,7 @@ overflow: hidden; transition: transform 0.3s ease, z-index 0s 0.3s ease; cursor: pointer; - border: 3px solid var(--color-key-black); + border: 3px solid var(--color-key-magenta); } .videocard::before { diff --git a/Mediatheke-Client/src/app/video-detail/video-detail.component.html b/Mediatheke-Client/src/app/video-detail/video-detail.component.html index 3324e05..d5ff039 100644 --- a/Mediatheke-Client/src/app/video-detail/video-detail.component.html +++ b/Mediatheke-Client/src/app/video-detail/video-detail.component.html @@ -13,7 +13,7 @@ -
+ + -
+ --> -
+ -
+ --> -
+

{{ video.title }}

-
Erschienen auf {{ video.channel }} - am {{ video.date | date }}

{{ video.description }}

+
Erschienen auf {{ video.channel }} + + am {{ video.date | date:'longDate' }}
- -

{{ video.description }}

+

{{ video.description ? video.description : 'Keine Beschreibung vorhanden' }}

Erschienen auf {{ video.channel }} From 4187e05918719d14883accc331b426dcc0b7cdc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20G=C3=BCnther?= Date: Sun, 29 Oct 2023 15:18:15 +0100 Subject: [PATCH 14/33] new ui update --- Mediatheke-Client/src/app/app.component.html | 1 + Mediatheke-Client/src/app/app.module.ts | 2 + .../src/app/footer/footer.component.html | 66 +++++++------- .../src/app/footer/footer.component.scss | 51 +++++++---- .../src/app/hero/hero.component.html | 10 +++ .../src/app/hero/hero.component.scss | 82 ++++++++++++++++++ .../src/app/hero/hero.component.spec.ts | 21 +++++ .../src/app/hero/hero.component.ts | 10 +++ .../src/app/home/home.component.html | 1 - .../app/video-card/video-card.component.scss | 2 +- .../video-detail/video-detail.component.html | 21 ++--- .../video-detail/video-detail.component.scss | 46 ++++++---- .../video-search/video-search.component.html | 9 +- .../video-search/video-search.component.scss | 36 ++++++-- .../assets/fonts/Jost-VariableFont_wght.ttf | Bin 0 -> 135548 bytes Mediatheke-Client/src/assets/footer/bg.svg | 5 ++ Mediatheke-Client/src/assets/footer/logo.svg | 7 ++ Mediatheke-Client/src/assets/hero/media.svg | 3 + Mediatheke-Client/src/assets/hero/theke.svg | 6 ++ Mediatheke-Client/src/assets/hero/tile.svg | 4 + Mediatheke-Client/src/assets/ui/search01.svg | 4 + Mediatheke-Client/src/styles.scss | 11 +++ 22 files changed, 311 insertions(+), 87 deletions(-) create mode 100644 Mediatheke-Client/src/app/hero/hero.component.html create mode 100644 Mediatheke-Client/src/app/hero/hero.component.scss create mode 100644 Mediatheke-Client/src/app/hero/hero.component.spec.ts create mode 100644 Mediatheke-Client/src/app/hero/hero.component.ts create mode 100644 Mediatheke-Client/src/assets/fonts/Jost-VariableFont_wght.ttf create mode 100644 Mediatheke-Client/src/assets/footer/bg.svg create mode 100644 Mediatheke-Client/src/assets/footer/logo.svg create mode 100644 Mediatheke-Client/src/assets/hero/media.svg create mode 100644 Mediatheke-Client/src/assets/hero/theke.svg create mode 100644 Mediatheke-Client/src/assets/hero/tile.svg create mode 100644 Mediatheke-Client/src/assets/ui/search01.svg diff --git a/Mediatheke-Client/src/app/app.component.html b/Mediatheke-Client/src/app/app.component.html index 5749b21..3cfad34 100644 --- a/Mediatheke-Client/src/app/app.component.html +++ b/Mediatheke-Client/src/app/app.component.html @@ -1,4 +1,5 @@ +
diff --git a/Mediatheke-Client/src/app/app.module.ts b/Mediatheke-Client/src/app/app.module.ts index 2ae7536..1a4fa81 100644 --- a/Mediatheke-Client/src/app/app.module.ts +++ b/Mediatheke-Client/src/app/app.module.ts @@ -32,6 +32,7 @@ import { SincePipe } from './shared/since.pipe'; import { ServiceWorkerModule } from '@angular/service-worker'; import { VideoSeriesNavComponent } from './video-series-nav/video-series-nav.component'; import { TabsModule } from 'ngx-bootstrap/tabs'; +import { HeroComponent } from './hero/hero.component'; @NgModule({ declarations: [ @@ -55,6 +56,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs'; VideoResultListComponent, SincePipe, VideoSeriesNavComponent, + HeroComponent, ], imports: [ BrowserModule, diff --git a/Mediatheke-Client/src/app/footer/footer.component.html b/Mediatheke-Client/src/app/footer/footer.component.html index fd659f4..ee8b163 100644 --- a/Mediatheke-Client/src/app/footer/footer.component.html +++ b/Mediatheke-Client/src/app/footer/footer.component.html @@ -1,39 +1,39 @@ - \ No newline at end of file +
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/footer/footer.component.scss b/Mediatheke-Client/src/app/footer/footer.component.scss index 062f1c1..c01e131 100644 --- a/Mediatheke-Client/src/app/footer/footer.component.scss +++ b/Mediatheke-Client/src/app/footer/footer.component.scss @@ -1,25 +1,42 @@ -.footer { - margin-top: 100px; - bottom: 0; - width: 100%; - background-color: var(--color-contrast-background); - color: var(--color-highlight); +.container-fluid { + background-color: #0f0f0f; + padding: 20px; a { - color: var(--color-primary); + color: grey; + font-size: 0.9rem; + + &:hover { + color: white; + } + + } + + height: 270px; +} + +h1 { + color: white; + font-size: 2.5em; + position: relative; + left: 180px; + top: 100px; +} + +.link-item { + text-decoration: none; + color: white; + &:hover { + text-decoration: underline; } } -img { - /*invert the logo */ - height: 50px; +.img-fluid { + max-width: 100%; + margin-left: -20px; + margin-bottom: -20px; } -.container { - max-width: 1600px; - margin: auto; - padding-left: 30px; - padding-right: 30px; - padding-top: 30px; - padding-bottom: 30px; +.end { + align-self: end; } \ No newline at end of file diff --git a/Mediatheke-Client/src/app/hero/hero.component.html b/Mediatheke-Client/src/app/hero/hero.component.html new file mode 100644 index 0000000..3119d10 --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.html @@ -0,0 +1,10 @@ +
+
+ Alle Medias + +
+
+ in einer   Theke. + +
+
diff --git a/Mediatheke-Client/src/app/hero/hero.component.scss b/Mediatheke-Client/src/app/hero/hero.component.scss new file mode 100644 index 0000000..3a419cb --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.scss @@ -0,0 +1,82 @@ +/* tiled background repeat */ +.hero { + --max-amplitude: 5px; // Maximum distance element will move during wobble + --degree: 5deg; // Maximum rotation element will move during wobble + width: 100%; + height: 400px; + margin-top: 40px; + padding-top: 50px; + background-image: url('/assets/hero/tile.svg'); + background-repeat: repeat; + + font-size: 2rem; + text-transform: lowercase; + + overflow: hidden; + display: flex; // To arrange child divs horizontally + + // Nested styles for the child divs + .float { + display: flex; // Use flex for inner positioning + font-size: 2em; // Larger font size for better visibility + position: relative; + // Adjust the spacing between the text and the SVG image + span { + margin-right: 0.5em; // Space between text and image + z-index: 100; + } + + img { + height: auto; // Keep aspect ratio of the images# + position: absolute; + } + } + + .media { + left: 9%; + top: 16%; + + img { + width: 330px; + left: 100px; + top: -110px; + } + } + + .theke { + left: 33%; + top: 41%; + + img { + width: 513px; + left: -190px; + top: -153px; + } + } +} + + +.media img, .theke img { + animation: wobble 30s infinite ease-in-out; + /* Using 'infinite' to make the animation loop forever. + 2s duration for a slow, subtle effect, and 'ease-in-out' for smooth timing. */ + } +/* Define a wobble animation to simulate the hovering effect */ +@keyframes wobble { + 0% { + transform: translate(0, 0) rotate(0); + } + 25% { + transform: translate(calc(var(--max-amplitude) * -1), var(--max-amplitude)) rotate(var(--degree)); + } + 50% { + transform: translate(var(--max-amplitude), calc(var(--max-amplitude) * -1)) rotate(calc(var(--degree) * -1)); + } + 75% { + transform: translate(calc(var(--max-amplitude) * -0.5), calc(var(--max-amplitude) * 0.5)) rotate(0); + } + 100% { + transform: translate(calc(var(--max-amplitude) * 0.5), calc(var(--max-amplitude) * -0.5)) rotate(0); + } + } + \ No newline at end of file diff --git a/Mediatheke-Client/src/app/hero/hero.component.spec.ts b/Mediatheke-Client/src/app/hero/hero.component.spec.ts new file mode 100644 index 0000000..d40e14d --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeroComponent } from './hero.component'; + +describe('HeroComponent', () => { + let component: HeroComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [HeroComponent] + }); + fixture = TestBed.createComponent(HeroComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mediatheke-Client/src/app/hero/hero.component.ts b/Mediatheke-Client/src/app/hero/hero.component.ts new file mode 100644 index 0000000..3c00249 --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-hero', + templateUrl: './hero.component.html', + styleUrls: ['./hero.component.scss'] +}) +export class HeroComponent { + +} diff --git a/Mediatheke-Client/src/app/home/home.component.html b/Mediatheke-Client/src/app/home/home.component.html index ba35b54..f2e787d 100644 --- a/Mediatheke-Client/src/app/home/home.component.html +++ b/Mediatheke-Client/src/app/home/home.component.html @@ -1,4 +1,3 @@ - \ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-card/video-card.component.scss b/Mediatheke-Client/src/app/video-card/video-card.component.scss index d32ef37..c4ea693 100644 --- a/Mediatheke-Client/src/app/video-card/video-card.component.scss +++ b/Mediatheke-Client/src/app/video-card/video-card.component.scss @@ -5,7 +5,7 @@ overflow: hidden; transition: transform 0.3s ease, z-index 0s 0.3s ease; cursor: pointer; - border: 3px solid var(--color-key-black); + border: 3px solid var(--color-key-magenta); } .videocard::before { diff --git a/Mediatheke-Client/src/app/video-detail/video-detail.component.html b/Mediatheke-Client/src/app/video-detail/video-detail.component.html index 3324e05..d5ff039 100644 --- a/Mediatheke-Client/src/app/video-detail/video-detail.component.html +++ b/Mediatheke-Client/src/app/video-detail/video-detail.component.html @@ -13,7 +13,7 @@
-
+ + -
+ --> -
+ -
+ --> -
+

{{ video.title }}

-
Erschienen auf {{ video.channel }} - am {{ video.date | date }}

{{ video.description }}

+
Erschienen auf {{ video.channel }} + + am {{ video.date | date:'longDate' }}
- -

{{ video.description }}

+

{{ video.description ? video.description : 'Keine Beschreibung vorhanden' }}

Erschienen auf {{ video.channel }} From 5b3cbcf1decafe3548d52ded1908b6ef0dccb937 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20G=C3=BCnther?= Date: Thu, 2 Nov 2023 22:53:39 +0100 Subject: [PATCH 27/33] handle focus --- .../src/app/video-search/video-search.component.html | 5 +++-- .../src/app/video-search/video-search.component.ts | 6 ++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/Mediatheke-Client/src/app/video-search/video-search.component.html b/Mediatheke-Client/src/app/video-search/video-search.component.html index efbd829..e4757c0 100644 --- a/Mediatheke-Client/src/app/video-search/video-search.component.html +++ b/Mediatheke-Client/src/app/video-search/video-search.component.html @@ -1,6 +1,7 @@
-
+
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-search/video-search.component.ts b/Mediatheke-Client/src/app/video-search/video-search.component.ts index e286d83..5d31d90 100644 --- a/Mediatheke-Client/src/app/video-search/video-search.component.ts +++ b/Mediatheke-Client/src/app/video-search/video-search.component.ts @@ -35,4 +35,10 @@ export class VideoSearchComponent implements OnInit { focusInput(): void { this.searchInput.nativeElement.focus(); } + + handleInputBlur() { + // Delay setting inputFocused to false to allow time for click events on search results to be processed + // TODO: With Angular's HostListener, you can listen for clicks on the entire document and then decide whether to keep the results displayed or not. + setTimeout(() => this.inputFocused = false, 75); // delay in milliseconds + } } From 541b3b521da6c8ca9fb67f650f25cf4be7496a10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20G=C3=BCnther?= Date: Sat, 4 Nov 2023 19:02:55 +0100 Subject: [PATCH 28/33] subtitle tests --- Mediatheke/app/src/services/whisper.py | 53 ++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 Mediatheke/app/src/services/whisper.py diff --git a/Mediatheke/app/src/services/whisper.py b/Mediatheke/app/src/services/whisper.py new file mode 100644 index 0000000..c568663 --- /dev/null +++ b/Mediatheke/app/src/services/whisper.py @@ -0,0 +1,53 @@ +import requests +import json +from ...core.config import settings + +# Define the URL of the OpenAI API for transcriptions +TRANSCRIPTION_URL = 'https://api.openai.com/v1/audio/transcriptions' + +# Define the URL of the MP4 file to transcribe +AUDIO_FILE_URL = 'http://funk-02dd.akamaized.net/22679/files/21/03/05/2951778/4-LFQpzh6PdWbGCnJf7mDK.mp4' + +# Your OpenAI API key +OPENAI_API_KEY = settings.openai_key + +def transcribe_audio(audio_url, model='whisper-1', language=None, prompt=None, response_format='srt', temperature=0): + headers = { + 'Authorization': f'Bearer {OPENAI_API_KEY}' + } + + # We retrieve the audio file content from the URL + audio_file_content = requests.get(audio_url).content + + # Define the files for the multipart/form-data upload + files = { + 'file': ('audio.mp4', audio_file_content, 'audio/mp4'), + 'model': (None, model), + 'language': (None, language), + 'prompt': (None, prompt), + 'response_format': (None, response_format), + 'temperature': (None, temperature) + } + + # Make the POST request with the multipart/form-data + response = requests.post( + TRANSCRIPTION_URL, + headers=headers, + files=files + ) + + + # Check the response status and return the JSON if successful. + if response.ok: + return response + else: + # If the request failed, print the status code and response content for debugging. + print(f'Failed to transcribe audio: {response.status_code}') + print(response.content) + return None + +# Call the function and print the result +result = transcribe_audio(AUDIO_FILE_URL) +if result: + #print contents, its not json its srt + print(result.content) From 237f08adaa49db8f8776a8d027b0c6577d5a1726 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20G=C3=BCnther?= Date: Sat, 4 Nov 2023 19:03:34 +0100 Subject: [PATCH 29/33] set better schlafen text amrgin --- Mediatheke-Client/src/app/footer/footer.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/Mediatheke-Client/src/app/footer/footer.component.scss b/Mediatheke-Client/src/app/footer/footer.component.scss index 48c9d43..14002db 100644 --- a/Mediatheke-Client/src/app/footer/footer.component.scss +++ b/Mediatheke-Client/src/app/footer/footer.component.scss @@ -30,6 +30,7 @@ h1 { color: white; font-size: 2.5em; margin-right: auto; // Pushes the rest of the content to the right + margin-left: 180px; @media (max-width: 768px) { display: none; From a90b3171a9d9010a4ac4e65f3d9069a2edb38a8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20G=C3=BCnther?= Date: Sat, 4 Nov 2023 19:03:45 +0100 Subject: [PATCH 30/33] remove stub --- Mediatheke-Client/src/app/services/search.service.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/Mediatheke-Client/src/app/services/search.service.ts b/Mediatheke-Client/src/app/services/search.service.ts index d042f01..e7a3a1c 100644 --- a/Mediatheke-Client/src/app/services/search.service.ts +++ b/Mediatheke-Client/src/app/services/search.service.ts @@ -8,7 +8,6 @@ import { BackendService } from './backend'; providedIn: 'root' }) export class SearchService { - search?: string; suggestions$!: Observable; errorMessage?: string; inputFocused: boolean = false; From 339d8b04ebd6b57c31e96312e2e21b427a90c189 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20G=C3=BCnther?= Date: Thu, 26 Sep 2024 11:00:54 +0200 Subject: [PATCH 31/33] added details, ironed out some bugs, changed home page --- Mediatheke-Client/src/app/app.component.html | 4 +- Mediatheke-Client/src/app/app.component.scss | 6 +- Mediatheke-Client/src/app/app.component.ts | 6 +- Mediatheke-Client/src/app/app.module.ts | 2 + .../src/app/hero/hero.component.html | 18 ++--- .../src/app/hero/hero.component.spec.ts | 2 +- .../src/app/hero/hero.component.ts | 4 +- .../src/app/home/home.component.html | 8 +- .../src/app/home/home.component.scss | 3 + .../video-detail/video-detail.component.html | 4 +- .../video-detail/video-detail.component.scss | 6 ++ .../video-detail/video-detail.component.ts | 2 + .../app/video-row/video-row.component.html | 2 +- .../video-search-results.component.ts | 4 +- .../video-search/video-search.component.html | 12 +-- .../video-search/video-search.component.ts | 10 ++- .../video-topic-row.component.html | 18 +++++ .../video-topic-row.component.scss | 80 +++++++++++++++++++ .../video-topic-row.component.spec.ts | 21 +++++ .../video-topic-row.component.ts | 62 ++++++++++++++ Mediatheke/app/src/filmliste/tasks.py | 62 +++++++------- Mediatheke/app/src/mediaitem/router.py | 2 +- Mediatheke/app/src/services/openai.py | 12 +-- compose.yaml | 8 +- readme.md | 23 +++--- 25 files changed, 300 insertions(+), 81 deletions(-) create mode 100644 Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.html create mode 100644 Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.scss create mode 100644 Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.spec.ts create mode 100644 Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.ts diff --git a/Mediatheke-Client/src/app/app.component.html b/Mediatheke-Client/src/app/app.component.html index 3cfad34..998be04 100644 --- a/Mediatheke-Client/src/app/app.component.html +++ b/Mediatheke-Client/src/app/app.component.html @@ -1,6 +1,6 @@ - -
+ +
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/app.component.scss b/Mediatheke-Client/src/app/app.component.scss index f39f935..fc1fd07 100644 --- a/Mediatheke-Client/src/app/app.component.scss +++ b/Mediatheke-Client/src/app/app.component.scss @@ -1,7 +1,6 @@ .wrapper { padding: 30px; padding-top: 150px; - max-width: 1600px; margin: auto; @media screen and (max-width: 768px) { @@ -9,6 +8,11 @@ } } +.unset-padding { + padding: unset; + padding-top: 30px; +} + /* make input big poppy flat and rounded corners */ input { border: none; diff --git a/Mediatheke-Client/src/app/app.component.ts b/Mediatheke-Client/src/app/app.component.ts index ba7d12d..f7fe7d8 100644 --- a/Mediatheke-Client/src/app/app.component.ts +++ b/Mediatheke-Client/src/app/app.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { BackendService } from './services/backend'; +import { Router } from '@angular/router'; @Component({ selector: 'app-root', @@ -8,7 +9,10 @@ import { BackendService } from './services/backend'; }) export class AppComponent { - constructor(private backendService: BackendService) { } + constructor( + private backendService: BackendService, + public router: Router + ) { } ngOnInit() { } } diff --git a/Mediatheke-Client/src/app/app.module.ts b/Mediatheke-Client/src/app/app.module.ts index cb4abe9..10b5141 100644 --- a/Mediatheke-Client/src/app/app.module.ts +++ b/Mediatheke-Client/src/app/app.module.ts @@ -34,6 +34,7 @@ import { VideoSeriesNavComponent } from './video-series-nav/video-series-nav.com import { TabsModule } from 'ngx-bootstrap/tabs'; import { HeroComponent } from './hero/hero.component'; import { VideoSmallListComponent } from './video-small-list/video-small-list.component'; +import { VideoTopicRowComponent } from './video-topic-row/video-topic-row.component'; @NgModule({ declarations: [ @@ -59,6 +60,7 @@ import { VideoSmallListComponent } from './video-small-list/video-small-list.com VideoSeriesNavComponent, HeroComponent, VideoSmallListComponent, + VideoTopicRowComponent, ], imports: [ BrowserModule, diff --git a/Mediatheke-Client/src/app/hero/hero.component.html b/Mediatheke-Client/src/app/hero/hero.component.html index 3119d10..8585609 100644 --- a/Mediatheke-Client/src/app/hero/hero.component.html +++ b/Mediatheke-Client/src/app/hero/hero.component.html @@ -1,10 +1,10 @@
-
- Alle Medias - -
-
- in einer   Theke. - -
-
+
+ Alle Medias + +
+
+ in einer   Theke. + +
+
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/hero/hero.component.spec.ts b/Mediatheke-Client/src/app/hero/hero.component.spec.ts index d40e14d..ec474d6 100644 --- a/Mediatheke-Client/src/app/hero/hero.component.spec.ts +++ b/Mediatheke-Client/src/app/hero/hero.component.spec.ts @@ -1,6 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { HeroComponent } from './hero.component'; +import { HeroComponent } from './HeroComponent'; describe('HeroComponent', () => { let component: HeroComponent; diff --git a/Mediatheke-Client/src/app/hero/hero.component.ts b/Mediatheke-Client/src/app/hero/hero.component.ts index 3c00249..5ef9afe 100644 --- a/Mediatheke-Client/src/app/hero/hero.component.ts +++ b/Mediatheke-Client/src/app/hero/hero.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { Router } from '@angular/router'; @Component({ selector: 'app-hero', @@ -6,5 +7,6 @@ import { Component } from '@angular/core'; styleUrls: ['./hero.component.scss'] }) export class HeroComponent { - + constructor(public router: Router) { } } + diff --git a/Mediatheke-Client/src/app/home/home.component.html b/Mediatheke-Client/src/app/home/home.component.html index 7887cce..e4cc9e1 100644 --- a/Mediatheke-Client/src/app/home/home.component.html +++ b/Mediatheke-Client/src/app/home/home.component.html @@ -1,2 +1,6 @@ - \ No newline at end of file + +
+ +
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/home/home.component.scss b/Mediatheke-Client/src/app/home/home.component.scss index e69de29..98add96 100644 --- a/Mediatheke-Client/src/app/home/home.component.scss +++ b/Mediatheke-Client/src/app/home/home.component.scss @@ -0,0 +1,3 @@ +.video-row { + margin-bottom: 50px; +} \ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-detail/video-detail.component.html b/Mediatheke-Client/src/app/video-detail/video-detail.component.html index 9d6424d..512f970 100644 --- a/Mediatheke-Client/src/app/video-detail/video-detail.component.html +++ b/Mediatheke-Client/src/app/video-detail/video-detail.component.html @@ -28,10 +28,10 @@
--> - + +
-
+
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-search/video-search.component.ts b/Mediatheke-Client/src/app/video-search/video-search.component.ts index 5d31d90..a2b4b0c 100644 --- a/Mediatheke-Client/src/app/video-search/video-search.component.ts +++ b/Mediatheke-Client/src/app/video-search/video-search.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, ViewChild, OnInit } from '@angular/core'; +import { Component, ElementRef, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core'; import { SearchService } from '../services/search.service'; import { Subject } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; @@ -16,7 +16,10 @@ export class VideoSearchComponent implements OnInit { private searchSubject: Subject = new Subject(); - constructor(public searchService: SearchService) { + constructor( + public searchService: SearchService, + private cdRef: ChangeDetectorRef // Inject ChangeDetectorRef + ) { // Initialize debouncing this.searchSubject.pipe( debounceTime(300) // Set the debounce time (in milliseconds) @@ -30,6 +33,7 @@ export class VideoSearchComponent implements OnInit { searchVideo(query: string = ""): void { this.searchSubject.next(query); // Use next() to trigger the Subject + this.cdRef.detectChanges(); // Trigger change detection } focusInput(): void { @@ -39,6 +43,6 @@ export class VideoSearchComponent implements OnInit { handleInputBlur() { // Delay setting inputFocused to false to allow time for click events on search results to be processed // TODO: With Angular's HostListener, you can listen for clicks on the entire document and then decide whether to keep the results displayed or not. - setTimeout(() => this.inputFocused = false, 75); // delay in milliseconds + setTimeout(() => this.inputFocused = false, 100); // delay in milliseconds } } diff --git a/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.html b/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.html new file mode 100644 index 0000000..b4a52e2 --- /dev/null +++ b/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.html @@ -0,0 +1,18 @@ + +
+
+ {{ title }} +
+
+ +
+ +
+ +
+ +
+
+
+
+
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.scss b/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.scss new file mode 100644 index 0000000..6e3d528 --- /dev/null +++ b/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.scss @@ -0,0 +1,80 @@ +/* community-recommendation.component.scss */ +.recommendation-container { + background-color: var(--color-key-yellow); + display: flex; + align-items: center; + padding: 40px 70px; + box-sizing: border-box; + position: relative; + + .background { + + .heading { + font-weight: bold; + margin-right: 10px; + width: 300px; + text-transform: lowercase; + font-size: 2rem; + font-weight: 400; + overflow: hidden; + } + + .boxes { + display: flex; + flex-grow: 1; // Boxes container will grow as much as possible + } + + .box { + flex: 1; // Boxes will grow equally to fill the space + margin-right: 10px; // Spacing between boxes + + &:last-child { + // Styling for the last box with the arrow + position: relative; // for absolute positioning of the arrow + + app-video-card { + mix-blend-mode: multiply; + opacity: .5; + filter: grayscale(100%) sepia(20%) brightness(110%) hue-rotate(272deg) contrast(100%) opacity(70%) saturate(500%); + } + + .arrow { + // The arrow button styling + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%) translateX(-50%); // To center the arrow button vertically and horizontally + // make border round black, backround white + background-color: #fff; + border: 3px solid #000; + border-radius: 50%; + padding: 0.5em; + cursor: pointer; // to indicate it's clickable + z-index: 100; + + i-bs { + // Assuming i-bs is an icon, we set the icon size + height: 24px; + width: 24px; + } + } + } + } + + .next-button { + background-color: #ffcc00; // Adjust the color as needed + border: none; + border-radius: 50%; + width: 40px; // Adjust size as needed + height: 40px; // Adjust size as needed + display: flex; + align-items: center; + justify-content: center; + + span { + font-size: 24px; // Adjust the size of the arrow icon as needed + } + } + } + +} \ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.spec.ts b/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.spec.ts new file mode 100644 index 0000000..01f7d99 --- /dev/null +++ b/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { VideoTopicRowComponent } from './video-topic-row.component'; + +describe('VideoTopicRowComponent', () => { + let component: VideoTopicRowComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [VideoTopicRowComponent] + }); + fixture = TestBed.createComponent(VideoTopicRowComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.ts b/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.ts new file mode 100644 index 0000000..60a1be0 --- /dev/null +++ b/Mediatheke-Client/src/app/video-topic-row/video-topic-row.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { IVideoLocalStorage, IVideoOptions } from '../interfaces'; +import { BackendService } from '../services/backend'; +import { options_type } from '../topics'; +import { StorageService } from '../services/storage.service'; + +@Component({ + selector: 'app-video-topic-row', + templateUrl: './video-topic-row.component.html', + styleUrls: ['./video-topic-row.component.scss'] +}) + +export class VideoTopicRowComponent implements OnInit { + @Input() title!: string; + @Input() description!: string; + @Input() options!: IVideoOptions; + + videos: any[] = []; + /* now we need a sliding window to show only 4 videos at a time */ + /* so we need to know the current offset */ + offset = 0; + /* and the number of videos to show at a time */ + limit = 3; + + constructor( + private backendService: BackendService, + private storageService: StorageService + ) { } + + ngOnInit(): void { + switch (this.options.type) { + case options_type.recommended: + this.backendService.getAllRecommendations().subscribe(data => { + this.videos = data; + }); + break; + case options_type.topic: + this.backendService.getVideosByTopic(this.options.payload ?? "", this.options.limit ?? 10).subscribe(data => { + this.videos = data; + }); + break; + case options_type.series: + this.backendService.getAllSeries().subscribe(data => { + this.videos = data; + }); + break; + case options_type.last_seen: + const lastWatched: IVideoLocalStorage[] = this.storageService.getLastWatchedVideos(10) + const ids = lastWatched.map(video => video.id); + if (ids.length > 0) { + this.backendService.getVideosByIds(ids).subscribe(data => { + this.videos = data; + }); + } + break; + default: + break; + + } + + } +} diff --git a/Mediatheke/app/src/filmliste/tasks.py b/Mediatheke/app/src/filmliste/tasks.py index 346a2e5..f525448 100644 --- a/Mediatheke/app/src/filmliste/tasks.py +++ b/Mediatheke/app/src/filmliste/tasks.py @@ -12,37 +12,37 @@ @app.task() def import_filmliste(full: bool = True): - # get last import event - db = get_new_db_session() - last_import_event = get_last_import_event(db) - if last_import_event and (datetime.utcnow() - last_import_event.timestamp).total_seconds() < 14400: - # Import diff Filmliste if an import has happened in the last 4 hours - full = False - logging.info("Importing filmliste") - items, timestamp = parse_filmliste(full=full) - BATCH_SIZE = 2500 - db = get_new_db_session() - len_items = len(items) - #convert timestamp to datetime - timestamp = datetime.fromtimestamp(timestamp) - import_event: FilmlisteImportEvent = create_import_event(db=db, timestamp=timestamp, media_item_count=len_items) - if import_event is None: - print("Import event already exists", flush=True) - return - print(f"Created import event {import_event}", flush=True) - db.add(import_event) - added_items = 0 - time_start = time.time() - for i in range(0, len_items, BATCH_SIZE): - batch = items[i:i + BATCH_SIZE] - added_items = added_items + process_batch(db, batch, import_event) - time_spent = time.time() - time_start - time_spent_human_readable = time.strftime("%H:%M:%S", time.gmtime(time_spent)) - calculated_time_left = (len_items - i) * (time_spent / (i + 1)) - logging.info(f"Processed batch {i} of {len_items}, Will be done in {time.strftime('%H:%M:%S', time.gmtime(calculated_time_left))}, Time spent: {time_spent_human_readable}") - - import_event.media_item_count = added_items - db.commit() + # get last import event + db = get_new_db_session() + last_import_event = get_last_import_event(db) + if last_import_event and (datetime.utcnow() - last_import_event.timestamp).total_seconds() < 14400: + # Import diff Filmliste if an import has happened in the last 4 hours + full = False + logging.info("Importing filmliste") + items, timestamp = parse_filmliste(full=full) + BATCH_SIZE = 2500 + db = get_new_db_session() + len_items = len(items) + #convert timestamp to datetime + timestamp = datetime.fromtimestamp(timestamp) + import_event: FilmlisteImportEvent = create_import_event(db=db, timestamp=timestamp, media_item_count=len_items) + if import_event is None: + print("Import event already exists", flush=True) + return + print(f"Created import event {import_event}", flush=True) + db.add(import_event) + added_items = 0 + time_start = time.time() + for i in range(0, len_items, BATCH_SIZE): + batch = items[i:i + BATCH_SIZE] + added_items = added_items + process_batch(db, batch, import_event) + time_spent = time.time() - time_start + time_spent_human_readable = time.strftime("%H:%M:%S", time.gmtime(time_spent)) + calculated_time_left = (len_items - i) * (time_spent / (i + 1)) + logging.info(f"Processed batch {i} of {len_items}, Will be done in {time.strftime('%H:%M:%S', time.gmtime(calculated_time_left))}, Time spent: {time_spent_human_readable}") + + import_event.media_item_count = added_items + db.commit() @app.task() def check_for_updates(): diff --git a/Mediatheke/app/src/mediaitem/router.py b/Mediatheke/app/src/mediaitem/router.py index d7c1fd0..a887943 100644 --- a/Mediatheke/app/src/mediaitem/router.py +++ b/Mediatheke/app/src/mediaitem/router.py @@ -12,7 +12,7 @@ from ..mediaitem import schemas from ..user.model import User, Recommendation from ..services.recommendations import get_recommendation_engine, RecommendationEngine -from ..services.openai import run_conversation +#from ..services.openai import run_conversation class CommonQueryParams(BaseModel): skip: int = 0 diff --git a/Mediatheke/app/src/services/openai.py b/Mediatheke/app/src/services/openai.py index 5cf8e85..591d9dd 100644 --- a/Mediatheke/app/src/services/openai.py +++ b/Mediatheke/app/src/services/openai.py @@ -6,6 +6,8 @@ from ...core.config import settings import openai +client = openai.OpenAI(api_key=api_key) + logging.basicConfig(level=logging.INFO) SCHEMA = { @@ -69,12 +71,10 @@ def send_to_gpt(prompt: str, functions: list): messages = [{"role": "user", "content": prompt}] try: logging.info("Sending to GPT") - return openai.ChatCompletion.create( - model="gpt-3.5-turbo-16k", - messages=messages, - functions=functions, - function_call={"name": "parse_items"} - ) + return client.chat.completions.create(model="gpt-3.5-turbo-16k", + messages=messages, + functions=functions, + function_call={"name": "parse_items"}) except Exception as e: logging.error(f"Exception: {repr(e)}") return None diff --git a/compose.yaml b/compose.yaml index a523349..1dc8ec5 100644 --- a/compose.yaml +++ b/compose.yaml @@ -19,7 +19,9 @@ services: - .env server: - image: 'mvw-server:0.6' + build: + context: Mediatheke + dockerfile: Dockerfile env_file: - .env depends_on: @@ -31,7 +33,9 @@ services: restart: always client: - image: 'mvw-client:0.3' + build: + context: Mediatheke-Client + dockerfile: Dockerfile env_file: - .env volumes: diff --git a/readme.md b/readme.md index fbe30a8..f56fff0 100644 --- a/readme.md +++ b/readme.md @@ -50,7 +50,7 @@ cp .env.example .env 3. Fire Up the Containers ``` -docker-compose up -d +docker-compose up -d --build ``` 4. Trust the Certificates @@ -60,16 +60,21 @@ mkcert -cert-file Configuration/certs/mediatheke.local.pem -key-file Configurati ``` 5. Open `https://mediatheke.local` in your web browser. +6. You'll have to wait a while before the data got parsed. You can inspect the progress by running `docker-compose logs -f server`. There will be an output like this: +``` +[2024-09-26 08:21:52,951: INFO/ForkPoolWorker-8] Processed batch 227500 of 796547, Will be done in 00:36:15, Time spent: 00:14:29 +``` + ### Container Roles 🔍 -| Container | What It Does | -|------------|--------------------------| -| database | Holds the data in Postgres| -| redis | Manages Celery tasks and caching| -| server | Handles the backend with FastAPI| -| client | Manages the frontend via Angular| -| nginx | Merges everything under one port with a reverse proxy| -| typesense | Takes care of search| +| Container | What It Does | +| --------- | ----------------------------------------------------- | +| database | Holds the data in Postgres | +| redis | Manages Celery tasks and caching | +| server | Handles the backend with FastAPI | +| client | Manages the frontend via Angular | +| nginx | Merges everything under one port with a reverse proxy | +| typesense | Takes care of search | ## Want to Contribute? 🤝 From d51a7e6ec18eca77c56b9497f7f30158f9023b20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20G=C3=BCnther?= Date: Thu, 26 Sep 2024 12:28:21 +0200 Subject: [PATCH 32/33] set details at video level --- Mediatheke-Client/src/app/app.component.ts | 2 - .../video-detail/video-detail.component.html | 126 +++++++++--------- .../video-detail/video-detail.component.scss | 8 +- .../video-detail/video-detail.component.ts | 11 +- 4 files changed, 77 insertions(+), 70 deletions(-) diff --git a/Mediatheke-Client/src/app/app.component.ts b/Mediatheke-Client/src/app/app.component.ts index f7fe7d8..5f6ca3f 100644 --- a/Mediatheke-Client/src/app/app.component.ts +++ b/Mediatheke-Client/src/app/app.component.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { BackendService } from './services/backend'; import { Router } from '@angular/router'; @Component({ @@ -10,7 +9,6 @@ import { Router } from '@angular/router'; export class AppComponent { constructor( - private backendService: BackendService, public router: Router ) { } diff --git a/Mediatheke-Client/src/app/video-detail/video-detail.component.html b/Mediatheke-Client/src/app/video-detail/video-detail.component.html index 512f970..f334582 100644 --- a/Mediatheke-Client/src/app/video-detail/video-detail.component.html +++ b/Mediatheke-Client/src/app/video-detail/video-detail.component.html @@ -1,74 +1,76 @@ -
-
- Loading... -
-
-

Loading video...

+
+
+
+ Loading... +
+
+

Loading video...

+
-
-
-
-
- -
+
+
+
+ +
- -
- Debug -
{{video | json}}
-
+ +
+ Debug +
{{video | json}}
+
- - + + - -
-
-
- {{ video.topic }} + +
+
+ +

{{ video.title }}

+
+

{{ video.description ? video.description : 'Keine Beschreibung vorhanden' }}

+
+
+
Erschienen auf {{ video.channel }} + + am {{ video.date | date}} um {{ video.date | date:'shortTime' }} Uhr +   (Link zur + {{video.channel}}-Website)
-

{{ video.title }}

-
-

{{ video.description ? video.description : 'Keine Beschreibung vorhanden' }}

-
-
-
Erschienen auf {{ video.channel }} - - am {{ video.date | date}} um {{ video.date | date:'shortTime' }} Uhr -   (Link zur - {{video.channel}}-Website)
-
-
-