diff --git a/Mediatheke-Client/src/app/app.component.html b/Mediatheke-Client/src/app/app.component.html index 5749b21..998be04 100644 --- a/Mediatheke-Client/src/app/app.component.html +++ b/Mediatheke-Client/src/app/app.component.html @@ -1,5 +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..5f6ca3f 100644 --- a/Mediatheke-Client/src/app/app.component.ts +++ b/Mediatheke-Client/src/app/app.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BackendService } from './services/backend'; +import { Router } from '@angular/router'; @Component({ selector: 'app-root', @@ -8,7 +8,9 @@ import { BackendService } from './services/backend'; }) export class AppComponent { - constructor(private backendService: BackendService) { } + constructor( + public router: Router + ) { } ngOnInit() { } } diff --git a/Mediatheke-Client/src/app/app.module.ts b/Mediatheke-Client/src/app/app.module.ts index 2ae7536..10b5141 100644 --- a/Mediatheke-Client/src/app/app.module.ts +++ b/Mediatheke-Client/src/app/app.module.ts @@ -32,6 +32,9 @@ 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'; +import { VideoSmallListComponent } from './video-small-list/video-small-list.component'; +import { VideoTopicRowComponent } from './video-topic-row/video-topic-row.component'; @NgModule({ declarations: [ @@ -55,6 +58,9 @@ import { TabsModule } from 'ngx-bootstrap/tabs'; VideoResultListComponent, SincePipe, VideoSeriesNavComponent, + HeroComponent, + VideoSmallListComponent, + VideoTopicRowComponent, ], imports: [ BrowserModule, diff --git a/Mediatheke-Client/src/app/footer/footer.component.html b/Mediatheke-Client/src/app/footer/footer.component.html index fd659f4..0deafd6 100644 --- a/Mediatheke-Client/src/app/footer/footer.component.html +++ b/Mediatheke-Client/src/app/footer/footer.component.html @@ -1,39 +1,27 @@ - \ 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..14002db 100644 --- a/Mediatheke-Client/src/app/footer/footer.component.scss +++ b/Mediatheke-Client/src/app/footer/footer.component.scss @@ -1,25 +1,72 @@ -.footer { - margin-top: 100px; +.container-fluid { + /* Other styles remain unchanged */ + background: url("/assets/footer/bg.svg") no-repeat bottom left; + background-color: black; + padding: 20px; + position: relative; bottom: 0; - width: 100%; - background-color: var(--color-contrast-background); - color: var(--color-highlight); + display: flex; + justify-content: flex-start; // Ensures content starts from the left + align-items: center; + height: 300px; a { - color: var(--color-primary); + color: grey; + font-size: 0.9rem; + + &:hover { + color: white; + } + } + + /* unset url when smaller than 768px */ + @media (max-width: 768px) { + background: unset; + background-color: black; + } +} + +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; + } +} + +.link-item { + text-decoration: none; + color: white; + + &:hover { + text-decoration: underline; } } -img { - /*invert the logo */ - height: 50px; +.logo { + height: 100px; + position: absolute; + right: 20px; + bottom: 20px; } -.container { - max-width: 1600px; - margin: auto; - padding-left: 30px; - padding-right: 30px; - padding-top: 30px; - padding-bottom: 30px; -} \ No newline at end of file +.links { + align-self: end; + width: fit-content; + display: flex; + + @media (max-width: 768px) { + align-self: start; + } +} + +ul.list-unstyled.left { + margin-right: 30px; // Space between the two lists +} + +ul.list-unstyled.right { + margin-right: 333px; // Adjust based on the logo's size and desired spacing +} diff --git a/Mediatheke-Client/src/app/header/header.component.scss b/Mediatheke-Client/src/app/header/header.component.scss index da3ef4a..e3df2a5 100644 --- a/Mediatheke-Client/src/app/header/header.component.scss +++ b/Mediatheke-Client/src/app/header/header.component.scss @@ -47,9 +47,10 @@ nav { } .grid-nav { + height: 90px; display: grid; grid-template-columns: min-content 2fr 1fr; - align-items: center; + align-items: initial; @media screen and (max-width: 768px) { grid-template-columns: 1fr; @@ -79,25 +80,3 @@ nav { align-items: flex-end; } - -/*************************************************** - * Generated by SVG Artista on 9/7/2023, 10:19:58 AM - * MIT license (https://opensource.org/licenses/MIT) - * W. https://svgartista.net - **************************************************/ - - -svg .svg-elem-4 { - stroke-dashoffset: 341.7839660644531px; - stroke-dasharray: 341.7839660644531px; - fill: transparent; - -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, - fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s; - transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, - fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s; -} - -svg.active .svg-elem-4 { - stroke-dashoffset: 0; - fill: rgb(255, 198, 235); -} \ 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..8585609 --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.html @@ -0,0 +1,10 @@ +
+
+ Alle Medias + +
+
+ in einer   Theke. + +
+
\ No newline at end of file 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..832be3f --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.scss @@ -0,0 +1,88 @@ +/* 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; + border-bottom: 3px solid var(--color-key-black); + 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..ec474d6 --- /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 './HeroComponent'; + +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..5ef9afe --- /dev/null +++ b/Mediatheke-Client/src/app/hero/hero.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-hero', + templateUrl: './hero.component.html', + 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 ba35b54..e4cc9e1 100644 --- a/Mediatheke-Client/src/app/home/home.component.html +++ b/Mediatheke-Client/src/app/home/home.component.html @@ -1,4 +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/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; 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..e49d31f 100644 --- a/Mediatheke-Client/src/app/video-card/video-card.component.scss +++ b/Mediatheke-Client/src/app/video-card/video-card.component.scss @@ -15,7 +15,7 @@ right: 0; bottom: 0; left: 0; - background: linear-gradient(to bottom, transparent, #00ffea31); + /* background: linear-gradient(to bottom, transparent, #00ffea31); */ z-index: 1; /* Ensure the gradient is below the title and duration */ } 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..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,73 +1,76 @@ -
- -
-

Loading video...

+
+
+ +
+

Loading video...

+
-
-
-
-
- -
+
+
+
+ +
-
- - - - - -
- + +
+ Debug + 
{{video | json}}
+
- -
- - -
+ + - -
-
-
- {{ video.topic }} + +
+
+
+ {{ 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 }}

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

{{ video.description }}

-
-
-
Hier geht's zur - {{video.channel}}-Website
-
-
-
-
- -
- -
-

Loading recommended videos...

+
+
+
+ Ähnlich: + +
+ +
+

Loading recommended videos...

+
diff --git a/Mediatheke-Client/src/app/video-detail/video-detail.component.scss b/Mediatheke-Client/src/app/video-detail/video-detail.component.scss index 5fdea41..882a27f 100644 --- a/Mediatheke-Client/src/app/video-detail/video-detail.component.scss +++ b/Mediatheke-Client/src/app/video-detail/video-detail.component.scss @@ -76,28 +76,40 @@ .loading-spinner { margin-top: 20px; } + +} + +.similar { + font-size: 2rem; + color: var(--color-key-black); } .container { background-color: #fff; border: 3px solid #000; - - } .details { - padding: 20px; - background-color: #fff; - border-top: 3px solid #333; + background: unset; + border: unset; + + @media (max-width: 768px) { + padding: 0px; + width: 100%; + } .video-header { h2 { - font-size: 24px; + font-size: 2.3rem; margin-bottom: 10px; color: #333; } } + a { + color: #E07CBE; + } + .row { display: flex; justify-content: space-between; @@ -108,27 +120,28 @@ .date, .topic, .duration { - font-size: 14px; + font-size: 1.3rem; color: #666; } .channel-name { margin-bottom: 20px; + color: #E07CBE; + + a { + text-decoration: underline; + font-weight: 500; + } } .description { margin-bottom: 10px; - font-size: 16px; + font-size: 1.4rem; color: #555; } - a { - color: #007bff; - } - .website-link { - font-size: 14px; - font-style: italic; + font-size: 1rem; } } @@ -139,7 +152,7 @@ justify-content: center; align-items: center; max-width: 336px; - padding: 15px; + } .spinner-border { @@ -180,4 +193,21 @@ 100% { transform: rotate(360deg); } +} + +app-video-card { + background: rgba(255, 67, 183, 0.534); + filter: grayscale(100%) sepia(20%) brightness(110%) hue-rotate(272deg) contrast(100%) opacity(70%) saturate(500%); + mix-blend-mode: multiply; + transition: all 0.2s ease-in-out; + scale: 0.95; + transform-origin: center left; + + &:hover { + filter: grayscale(0%) sepia(0%) brightness(100%) hue-rotate(360deg) contrast(100%) opacity(100%); + mix-blend-mode: normal; + scale: 1; + /* animate */ + transition: all 0.2s ease-in-out; + } } \ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-detail/video-detail.component.ts b/Mediatheke-Client/src/app/video-detail/video-detail.component.ts index a9a30fe..8afadfb 100644 --- a/Mediatheke-Client/src/app/video-detail/video-detail.component.ts +++ b/Mediatheke-Client/src/app/video-detail/video-detail.component.ts @@ -3,10 +3,11 @@ import { ActivatedRoute, Router } from '@angular/router'; import { BackendService } from '../services/backend'; import { IVideo } from '../interfaces'; import { Subscription } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; +import { switchMap, catchError } from 'rxjs/operators'; import { UserService } from '../services/userService'; import { StorageService } from '../services/storage.service'; import { MediaService } from '../services/media.service'; +import { environment } from 'src/environments/environment'; @Component({ selector: 'app-video-detail', @@ -23,6 +24,7 @@ export class VideoDetailComponent implements OnInit, OnDestroy { urlTime: number = 0; isSeries: boolean = false; isSeriesLoading: boolean = false; + env = environment; constructor( private route: ActivatedRoute, @@ -39,7 +41,14 @@ export class VideoDetailComponent implements OnInit, OnDestroy { const routeSub = this.route.params.pipe( switchMap(params => { this.videoId = params['id']; - return this.backendService.getVideo(this.videoId); + return this.backendService.getVideo(this.videoId).pipe( + catchError(err => { + if (err.status === 404) { + this.router.navigate(['/']); + } + throw err; + }) + ); }) ).subscribe(video => { this.resetComponentState(); diff --git a/Mediatheke-Client/src/app/video-row/video-row.component.html b/Mediatheke-Client/src/app/video-row/video-row.component.html index 0246269..be2ae6a 100644 --- a/Mediatheke-Client/src/app/video-row/video-row.component.html +++ b/Mediatheke-Client/src/app/video-row/video-row.component.html @@ -1,7 +1,7 @@ -
{{ title }} +
{{ title }}
- +
@@ -10,4 +10,5 @@
{{ title }}
+
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-row/video-row.component.scss b/Mediatheke-Client/src/app/video-row/video-row.component.scss index a0a2571..87cf684 100644 --- a/Mediatheke-Client/src/app/video-row/video-row.component.scss +++ b/Mediatheke-Client/src/app/video-row/video-row.component.scss @@ -1,3 +1,12 @@ +.video-row{ + background-color: var(--color-key-yellow); + /* when under 1600px, make the scroll bar appear */ + @media (max-width: 1600px) { + margin-left: -30px; + margin-right: -30px; + } +} + h5 { font-family: var(--font-family-head); margin-top: 2rem; @@ -8,7 +17,7 @@ h5 { display: flex; align-items: center; gap: 10px; - text-transform: uppercase; + text-transform: lowercase; color: var(--color-text); } @@ -45,11 +54,6 @@ h5 { padding-bottom: 12px; margin-bottom: 5rem; - /* when under 1600px, make the scroll bar appear */ - @media (max-width: 1600px) { - margin-left: -30px; - margin-right: -30px; - } } .video-card-wrapper { diff --git a/Mediatheke-Client/src/app/video-search-results/video-search-results.component.html b/Mediatheke-Client/src/app/video-search-results/video-search-results.component.html index 470a29e..989a3fc 100644 --- a/Mediatheke-Client/src/app/video-search-results/video-search-results.component.html +++ b/Mediatheke-Client/src/app/video-search-results/video-search-results.component.html @@ -1,7 +1,8 @@
-
-

Suchergebnisse

- +
+ +

Keine Ergebnisse

+
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-search-results/video-search-results.component.ts b/Mediatheke-Client/src/app/video-search-results/video-search-results.component.ts index 02fa46f..684a6a4 100644 --- a/Mediatheke-Client/src/app/video-search-results/video-search-results.component.ts +++ b/Mediatheke-Client/src/app/video-search-results/video-search-results.component.ts @@ -1,5 +1,7 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Output } from '@angular/core'; import { SearchService } from '../services/search.service'; +import { Observable } from 'rxjs'; +import { IVideo } from '../interfaces'; @Component({ selector: 'app-video-search-results', 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 be7bd82..fb0bfc7 100644 --- a/Mediatheke-Client/src/app/video-search/video-search.component.html +++ b/Mediatheke-Client/src/app/video-search/video-search.component.html @@ -1,10 +1,12 @@ -
- - - - +
+ + +
+
+
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-search/video-search.component.scss b/Mediatheke-Client/src/app/video-search/video-search.component.scss index f994c8c..2e57e60 100644 --- a/Mediatheke-Client/src/app/video-search/video-search.component.scss +++ b/Mediatheke-Client/src/app/video-search/video-search.component.scss @@ -7,33 +7,51 @@ .search-bar { display: flex; align-items: center; - width: 100%; - height: 100%; + width: 90%; + height: calc(68px * 1); - padding-left: 10px; + padding-left: 50px; padding-right: 10px; + /* should be centered in all directions */ + margin-left: auto; + margin-right: 0; + margin-top: 10px; + margin-bottom: 10px; + + font-size: 2rem; cursor: text; + + border-radius: 34px; + border: 3px solid black; + } -i-bs { +img { margin-right: 10px; } +.invert { + filter: invert(1); +} + + .form-control { border: none; /* Feel free to change the color */ outline: none; font-size: 2rem; text-transform: lowercase; + background-color: transparent; + text-align: center; &::placeholder { - color: white; + color: grey; + margin-left: 10px; } &:focus { - background-color: black; color: white; border: none; outline: none; @@ -42,6 +60,12 @@ i-bs { &::placeholder { color: grey; } + + /* invert image element */ + img { + filter: invert(1); + background-color: white; + } } } @@ -60,4 +84,24 @@ i-bs { right: 10px; top: 50%; transform: translateY(-50%); -} \ No newline at end of file +} + +.remove-bottom-corners{ + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.results { + background-color: #000; + color: white; + margin-top: -10px; + width: 90%; + margin-left: auto; + + max-height: 60vh; + overflow: scroll; + + border-bottom-left-radius: 34px; + border-bottom-right-radius: 34px; +} + 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..a112665 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,9 +33,16 @@ 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 { 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, 200); // delay in milliseconds + } } diff --git a/Mediatheke-Client/src/app/video-series-nav/video-series-nav.component.html b/Mediatheke-Client/src/app/video-series-nav/video-series-nav.component.html index c5d012d..8eac027 100644 --- a/Mediatheke-Client/src/app/video-series-nav/video-series-nav.component.html +++ b/Mediatheke-Client/src/app/video-series-nav/video-series-nav.component.html @@ -3,25 +3,7 @@ -
- -
+ diff --git a/Mediatheke-Client/src/app/video-small-list/video-small-list.component.html b/Mediatheke-Client/src/app/video-small-list/video-small-list.component.html new file mode 100644 index 0000000..0f15ced --- /dev/null +++ b/Mediatheke-Client/src/app/video-small-list/video-small-list.component.html @@ -0,0 +1,18 @@ +
+ +
\ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-small-list/video-small-list.component.scss b/Mediatheke-Client/src/app/video-small-list/video-small-list.component.scss new file mode 100644 index 0000000..8364ddc --- /dev/null +++ b/Mediatheke-Client/src/app/video-small-list/video-small-list.component.scss @@ -0,0 +1,91 @@ + +ul.video-list { + list-style-type: none; + margin: 0; + padding: 0; + + color: white; +} + +.video-list__item { + display: flex; + align-items: start; + /* Align at the top */ + margin-bottom: 15px; + + height: 120px; + + overflow: hidden; + &:hover { + background-color: var(--color-key-magenta-transparent); + } +} + +.video-list__link { + display: flex; +} + +.thumbnail { + position: relative; + width: 120px; + height: 80px; + margin-right: 20px; + border: 3px solid var(--color-key-yellow); + + @media (max-width: 1000px) { + width: 100px; + height: 60px; + } + + @media (max-width: 400px) { + display: none; + + } +} + +.thumbnail img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.duration { + position: absolute; + color: var(--color-contrast-text); + border-radius: 0; + top: 10px; + right: 10px; + padding: 4px 6px; + background: black; + font-size: 0.8rem; + font-weight: bold; + line-height: 1.2; + z-index: 2; +} + +.video-info { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1; + /* Ensures this block takes up remaining space */ +} + +.title { + margin: 0; + font-weight: bold; +} + +.description { + margin-top: 5px; + + @media (max-width: 400px) { + display: none; + + } +} + +a { + color: white; + text-decoration: none; +} \ No newline at end of file diff --git a/Mediatheke-Client/src/app/video-small-list/video-small-list.component.spec.ts b/Mediatheke-Client/src/app/video-small-list/video-small-list.component.spec.ts new file mode 100644 index 0000000..7104fd7 --- /dev/null +++ b/Mediatheke-Client/src/app/video-small-list/video-small-list.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { VideoSmallListComponent } from './video-small-list.component'; + +describe('VideoSmallListComponent', () => { + let component: VideoSmallListComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [VideoSmallListComponent] + }); + fixture = TestBed.createComponent(VideoSmallListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mediatheke-Client/src/app/video-small-list/video-small-list.component.ts b/Mediatheke-Client/src/app/video-small-list/video-small-list.component.ts new file mode 100644 index 0000000..00d91ba --- /dev/null +++ b/Mediatheke-Client/src/app/video-small-list/video-small-list.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core'; +import { IVideo } from '../interfaces'; + +@Component({ + selector: 'app-video-small-list', + templateUrl: './video-small-list.component.html', + styleUrls: ['./video-small-list.component.scss'] +}) +export class VideoSmallListComponent { + @Input() videos!: IVideo[]; +} 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-Client/src/assets/fonts/Jost-VariableFont_wght.ttf b/Mediatheke-Client/src/assets/fonts/Jost-VariableFont_wght.ttf new file mode 100644 index 0000000..59b1908 Binary files /dev/null and b/Mediatheke-Client/src/assets/fonts/Jost-VariableFont_wght.ttf differ diff --git a/Mediatheke-Client/src/assets/footer/bg.svg b/Mediatheke-Client/src/assets/footer/bg.svg new file mode 100644 index 0000000..d5e2189 --- /dev/null +++ b/Mediatheke-Client/src/assets/footer/bg.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Mediatheke-Client/src/assets/footer/logo.svg b/Mediatheke-Client/src/assets/footer/logo.svg new file mode 100644 index 0000000..42d6b2d --- /dev/null +++ b/Mediatheke-Client/src/assets/footer/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/Mediatheke-Client/src/assets/hero/media.svg b/Mediatheke-Client/src/assets/hero/media.svg new file mode 100644 index 0000000..e95d728 --- /dev/null +++ b/Mediatheke-Client/src/assets/hero/media.svg @@ -0,0 +1,3 @@ + + + diff --git a/Mediatheke-Client/src/assets/hero/theke.svg b/Mediatheke-Client/src/assets/hero/theke.svg new file mode 100644 index 0000000..b96249d --- /dev/null +++ b/Mediatheke-Client/src/assets/hero/theke.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Mediatheke-Client/src/assets/hero/tile.svg b/Mediatheke-Client/src/assets/hero/tile.svg new file mode 100644 index 0000000..872f7b6 --- /dev/null +++ b/Mediatheke-Client/src/assets/hero/tile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Mediatheke-Client/src/assets/logo-old.svg b/Mediatheke-Client/src/assets/logo-old.svg new file mode 100644 index 0000000..2f78d37 --- /dev/null +++ b/Mediatheke-Client/src/assets/logo-old.svg @@ -0,0 +1,11 @@ + + + + Layer 1 + + + + + + + \ No newline at end of file diff --git a/Mediatheke-Client/src/assets/logo.svg b/Mediatheke-Client/src/assets/logo.svg index 2f78d37..ebb4cab 100644 --- a/Mediatheke-Client/src/assets/logo.svg +++ b/Mediatheke-Client/src/assets/logo.svg @@ -1,11 +1,7 @@ - - - - Layer 1 - - - - - - - \ No newline at end of file + + + + + + + diff --git a/Mediatheke-Client/src/assets/ui/search01.svg b/Mediatheke-Client/src/assets/ui/search01.svg new file mode 100644 index 0000000..8eeb7cb --- /dev/null +++ b/Mediatheke-Client/src/assets/ui/search01.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Mediatheke-Client/src/index.html b/Mediatheke-Client/src/index.html index 44f527c..5b9cef5 100644 --- a/Mediatheke-Client/src/index.html +++ b/Mediatheke-Client/src/index.html @@ -7,7 +7,7 @@ - + diff --git a/Mediatheke-Client/src/main.ts b/Mediatheke-Client/src/main.ts index c7b673c..cf74a14 100644 --- a/Mediatheke-Client/src/main.ts +++ b/Mediatheke-Client/src/main.ts @@ -1,4 +1,4 @@ -import { enableProdMode } from '@angular/core'; +import { LOCALE_ID, enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; @@ -8,5 +8,7 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) +platformBrowserDynamic().bootstrapModule(AppModule, { + providers: [{provide: LOCALE_ID, useValue: 'de'}] +}) .catch(err => console.error(err)); diff --git a/Mediatheke-Client/src/styles.scss b/Mediatheke-Client/src/styles.scss index ce08bcc..9d6bfd7 100644 --- a/Mediatheke-Client/src/styles.scss +++ b/Mediatheke-Client/src/styles.scss @@ -9,6 +9,13 @@ /* Importing Datepicker SCSS file. */ @import "node_modules/ngx-bootstrap/datepicker/bs-datepicker"; +@font-face { + font-family: 'Jost'; + src: url('./assets/fonts/Jost-VariableFont_wght.ttf') format('truetype'); + font-weight: 100 900; + font-display: swap; +} + :root { /* define root colors */ @@ -35,6 +42,10 @@ --color-badge-background: #000000b7; } +body { + font-family: 'Jost', sans-serif; +} + /* night mode */ body[data-theme="dark"] { --color-background: #000000; 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/crud.py b/Mediatheke/app/src/mediaitem/crud.py index a321bcf..c411b3c 100644 --- a/Mediatheke/app/src/mediaitem/crud.py +++ b/Mediatheke/app/src/mediaitem/crud.py @@ -52,12 +52,17 @@ def get_or_create_media_item(db: Session, media_item: dict) -> MediaItem: 'time': media_item['time'] }, **media_item_data_to_insert) -def _filter_query_by_params(query, **kwargs) -> 'Query': +def _filter_query_by_params(query: Query, **kwargs) -> Query: """ Helper function to filter the query based on provided kwargs. """ - #always oder by date and time + # Always filter out mediaitems which have ignore = true, but keep all with ignore=null + query = query.filter(MediaItem.ignore == None) + + # Always order by date and time query = query.order_by(MediaItem.date.desc(), MediaItem.time.desc()) + + # Apply additional filters based on kwargs if kwargs.get('random_order'): query = query.order_by(func.random()) if kwargs.get('with_thumbnail'): @@ -66,6 +71,7 @@ def _filter_query_by_params(query, **kwargs) -> 'Query': query = query.filter(MediaItem.duration > kwargs['longer_than']) if kwargs.get('newer_than'): query = query.filter(MediaItem.date > kwargs['newer_than']) + return query def _handle_existing_item_check(db: Session, item: dict) -> Union[None, MediaItem]: diff --git a/Mediatheke/app/src/mediaitem/model.py b/Mediatheke/app/src/mediaitem/model.py index 0560580..c13907f 100644 --- a/Mediatheke/app/src/mediaitem/model.py +++ b/Mediatheke/app/src/mediaitem/model.py @@ -1,5 +1,5 @@ """Media Item model.""" -from sqlalchemy import Column, Integer, String, Date, Time, Float, UniqueConstraint +from sqlalchemy import Column, Integer, String, Date, Time, Float, UniqueConstraint, Boolean from ...core.db.database import Base @@ -39,6 +39,9 @@ class MediaItem(Base): channel = Column(String) topic = Column(String) + # we add "ignore" because we want tot old data, but exclude on results + ignore = Column(Boolean) + # make website and the timestamp unique __table_args__ = (UniqueConstraint('url_website', 'timestamp', name='website_timestamp_unique'),) @@ -75,5 +78,6 @@ def to_dict(self): 'is_new': self.is_new, 'channel': self.channel, 'topic': self.topic, - 'thumbnail': self.thumbnail + 'thumbnail': self.thumbnail, + 'ignore': self.ignore } \ No newline at end of file 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/mediaitem/scripts/make_series.py b/Mediatheke/app/src/mediaitem/scripts/make_series.py index ba2bbc2..949cf31 100644 --- a/Mediatheke/app/src/mediaitem/scripts/make_series.py +++ b/Mediatheke/app/src/mediaitem/scripts/make_series.py @@ -1,136 +1,90 @@ -""" -we have a csv like this. this csv defines patterns how we can filter items in our db and find series elements - -example, regex, series_identifier, with_season, channel -(Staffel 1, Folge 56), \(Staffel (\d+), Folge (\d+)\), topic, true, ard -(S01/E05), \(S(\d+)\/E(\d+)\), topic,true, ard -Staffel 2, F -Folge 1, Folge (\d+), title, false, hr -Episode 1, Episode (\d+), title, false, all -""" - -from typing import List, Tuple, Optional +from typing import List import re import csv -import json -from datetime import datetime -from time import time from ....core.db.database import get_new_db_session from ...mediaitem.model import MediaItem -db = get_new_db_session() -series_file = open('series-formats.csv', 'r') -series_reader = csv.reader(series_file, delimiter=';') -series = [] -# Skip header -next(series_reader) -for row in series_reader: - series.append(row) -series_file.close() +# Function to load series patterns from CSV +def load_series_patterns(file_path: str) -> List[List[str]]: + with open(file_path, 'r') as file: + reader = csv.reader(file, delimiter=';') + next(reader) # Skip header + return [row for row in reader] -# Fetch all media items -mediaitems = db.query(MediaItem).all() - -update_data = [] -update_titles = [] -items_to_remove = [] -dry_run = False -# Iterate through each media item to update its data -for mediaitem in mediaitems: - for series_pattern in series: - if series_pattern: - regex = series_pattern[1] +# Function to find series data using patterns +def find_series_data(mediaitem, patterns): + for pattern in patterns: + if pattern: + regex, series_identifier, with_season, channel = pattern[1], pattern[2], pattern[3] == 'true', pattern[4] match = re.search(regex, mediaitem.title) if match: - with_season = series_pattern[3] == 'true' - - season_digit = int(series_pattern[5]) - episode_digit = int(series_pattern[6]) - - if season_digit == 0: - season_number = None - episode_number = match.group(episode_digit) - else: - season_number = match.group(season_digit) - episode_number = match.group(episode_digit) - - # Debug: Print the season and episode numbers - - series_identifier = series_pattern[2] + season_number = match.group(1) if with_season else None + episode_number = match.group(2) if with_season else match.group(1) series_name = mediaitem.topic if series_identifier == 'topic' else re.sub(regex, '', mediaitem.title) - - channel = series_pattern[4] - - # Store the data to be updated - update_data.append({ + return { 'id': mediaitem.id, 'season_number': season_number, 'episode_number': episode_number, 'series_name': series_name, - }) - - break - if "audiodes" in mediaitem.title.lower(): - # this has nothing to do with series, but we want to remove this mediaitem but add its urls to another mediaitem with the same title (but without "(Audiodes(c/k)ription) or " - Audiodes(c/k)ription" in the title) - # remove the Audiodes(c/k)ription from the title could be written with c or k - title = re.sub(r'(Audiodes(c|k)ription)|(\s-\sAudiodes(c|k)ription)', '', mediaitem.title) - # add the title to the list of titles to update - if title == None: - print(f'Error: title is None for mediaitem {mediaitem.title}') - - update_title = { - 'title': title, - 'urls_to_update': { - 'url_video_descriptive_audio': mediaitem.url_video, - 'url_video_hd_descriptive_audio': mediaitem.url_video_hd, - 'url_video_low_descriptive_audio': mediaitem.url_video_low, - } - } - update_titles.append(update_title) - items_to_remove.append(mediaitem.id) - -# Create a mapping of titles to URLs to update -title_to_urls_map = {item['title']: item['urls_to_update'] for item in update_data if 'urls_to_update' in item} + } + return None -# Initialize empty list for URL update data -url_update_data = [] - -# Create a mapping of cleaned titles to URLs to update -title_to_urls_map = {item['title']: item['urls_to_update'] for item in update_titles} - -# Initialize empty list for URL update data -url_update_data = [] - -# Iterate over media items to collect the URL update data -for mediaitem in mediaitems: - urls_to_update = title_to_urls_map.get(mediaitem.title) - if urls_to_update: - url_update_data.append({ - 'id': mediaitem.id, - **urls_to_update - }) +# Function to update media item URLs for audiodescription +def update_audiodescription(mediaitem, title_to_urls_map): + title = re.sub(r'(Audiodes(c|k)ription)|(\s-\sAudiodes(c|k)ription)', '', mediaitem.title) + if title: + title_to_urls_map[title] = { + 'url_video_descriptive_audio': mediaitem.url_video, + 'url_video_hd_descriptive_audio': mediaitem.url_video_hd, + 'url_video_low_descriptive_audio': mediaitem.url_video_low, + 'ignore': True # Set flag to ignore + } -# Do the bulk update for URLs if there is any data to update and if it's not a dry run. -if url_update_data and not dry_run: - print(f'Updating {len(url_update_data)} URLs') - db.bulk_update_mappings(MediaItem, url_update_data) +def main(dry_run=False): + db = get_new_db_session() + series_patterns = load_series_patterns('series-formats.csv') -# If you have data for series and other attributes, do that bulk update as well. -if update_data and not dry_run: - print(f'Updating {len(update_data)} series attributes') - db.bulk_update_mappings(MediaItem, update_data) + mediaitems = db.query(MediaItem).all() -if items_to_remove and not dry_run: - print(f'Removing {len(items_to_remove)} mediaitems') - db.query(MediaItem).filter(MediaItem.id.in_(items_to_remove)).delete(synchronize_session=False) + update_data = [] + title_to_urls_map = {} + + for mediaitem in mediaitems: + # Check for series pattern matches and prepare update data + series_data = find_series_data(mediaitem, series_patterns) + if series_data: + update_data.append(series_data) + + # Handle audiodescription media items + if "audiodes" in mediaitem.title.lower(): + update_audiodescription(mediaitem, title_to_urls_map) + + # Prepare URL update data + url_update_data = [ + {'id': mediaitem.id, **urls_to_update} + for mediaitem in mediaitems + if (urls_to_update := title_to_urls_map.get(mediaitem.title)) + ] -# Commit all changes. -if not dry_run: - print('Committing changes') - db.commit() + # Perform bulk updates if not a dry run + if not dry_run: + if url_update_data: + print(f'Updating {len(url_update_data)} URLs') + db.bulk_update_mappings(MediaItem, url_update_data) + + if update_data: + print(f'Updating {len(update_data)} series attributes') + db.bulk_update_mappings(MediaItem, update_data) + + print('Committing changes') + db.commit() + + # Handle the dry-run scenario + else: + for data in update_data: + print(f"Would update {data}") + for data in url_update_data: + print(f"Would update {data}") -# Handle the dry-run scenario -elif dry_run: - for data in update_titles: - print(f"would update {data}") - #print(f"would update {data['id']} with season {data['season_number']} and episode {data['episode_number']} and series name {data['series_name']} and channel {data['channel']}") \ No newline at end of file +if __name__ == "__main__": + main(dry_run=False) diff --git a/Mediatheke/app/src/search/scripts.py b/Mediatheke/app/src/search/scripts.py new file mode 100644 index 0000000..dd9f450 --- /dev/null +++ b/Mediatheke/app/src/search/scripts.py @@ -0,0 +1,4 @@ +from .tasks import init_typesense + + +init_typesense(True).delay() \ No newline at end of file diff --git a/Mediatheke/app/src/search/service.py b/Mediatheke/app/src/search/service.py index 5def4e9..43f37d4 100644 --- a/Mediatheke/app/src/search/service.py +++ b/Mediatheke/app/src/search/service.py @@ -4,6 +4,7 @@ from ..mediaitem.crud import get_unlimited_media_items from ...core.db.database import SessionLocal from typing import List, Optional +from datetime import datetime import typesense class SearchEngine: @@ -36,8 +37,8 @@ def media_items_to_jsonl(self, media_items: List[MediaItem]) -> str: 'channel': media_item.channel, 'topic': media_item.topic, 'title': media_item.title, - 'date': media_item.date.strftime("%Y-%m-%d") if media_item.date else "", - 'time': media_item.time.strftime("%H:%M:%S") if media_item.time else "", + 'date': media_item.date.strftime("%Y-%m-%d") if media_item.date else datetime(1970, 1, 1).strftime("%Y-%m-%d"), + 'time': media_item.time.strftime("%H:%M:%S") if media_item.time else datetime(1970, 1, 1).strftime("%H:%M:%S"), 'duration': media_item.duration, 'size_MB': media_item.size_MB, 'description': media_item.description or "", @@ -75,8 +76,10 @@ def get_size(self): def index_media_items(self): # Get all media items from the database + print("Getting media items for search engine") db = SessionLocal() media_items = get_unlimited_media_items(db) + print("Found %s media items" % len(media_items)) db.close() # Index the media items 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/Mediatheke/app/src/services/recommendations.py b/Mediatheke/app/src/services/recommendations.py index 8ae6a78..24eccfe 100644 --- a/Mediatheke/app/src/services/recommendations.py +++ b/Mediatheke/app/src/services/recommendations.py @@ -11,7 +11,6 @@ nltk.download('stopwords') german_stop_words = stopwords.words('german') - # Global variable to hold the singleton instance _rec_engine_instance = None @@ -102,4 +101,4 @@ def get_recommendation_engine(): if _rec_engine_instance is None: _rec_engine_instance = RecommendationEngine() - return _rec_engine_instance \ No newline at end of file + return _rec_engine_instance 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) diff --git a/Mediatheke/series-formats.csv b/Mediatheke/series-formats.csv index e0de956..0fbc18b 100644 --- a/Mediatheke/series-formats.csv +++ b/Mediatheke/series-formats.csv @@ -7,6 +7,7 @@ Saison 1 (5/6) * Untertitel);Saison (\d+) \((\d+)\/(\d+)\).*Untertitel\);title;t Saison 2 (3/8);Saison (\d+) \((\d+)\/(\d+)\);title;true;all;1;2 saison 1(13/22);saison (\d+)\((\d+)\/(\d+)\);title;true;all;1;2 (528);\((\d+)\);topic;false;ard;0;1 +(1);\((\d+)\);title;false;zdf;0;1 Staffel 1, Folge 31-35;Staffel (\d+), Folge (\d+)-(\d+);topic;true;hr;1;3 Staffel 2, Folge 1;Staffel (\d+), Folge (\d+);title;true;hr;1;2 (S01/E05);\(S(\d+)\/E(\d+)\);topic;true;ard;1;2 diff --git a/build_compose.yaml b/build_compose.yaml new file mode 100644 index 0000000..f85194a --- /dev/null +++ b/build_compose.yaml @@ -0,0 +1,77 @@ +services: + database: + image: 'postgres:latest' + ports: + - 5432:5432 + env_file: + - .env + healthcheck: + test: ["CMD", "pg_isready", "-U", "postgres"] + interval: 10s + timeout: 5s + retries: 5 + + redis: + image: 'redis:latest' + ports: + - 6379:6379 + env_file: + - .env + + server: + build: + context: ./Mediatheke + dockerfile: Dockerfile + env_file: + - .env + depends_on: + - database + - redis + - typesense + volumes: + - ./Mediatheke:/Mediatheke + restart: always + + client: + build: + context: ./Mediatheke-Client + dockerfile: Dockerfile + env_file: + - .env + volumes: + - ./Mediatheke-Client/src:/app/src + - ./Mediatheke-Client/angular.json:/app/angular.json + - ./Mediatheke-Client/tsconfig.json:/app/tsconfig.json + depends_on: + - server + + nginx: + image: nginx:latest + ports: + - 80:80 + - 443:443 + volumes: + - ./Configuration/nginx.conf:/etc/nginx/conf.d/default.conf + - ./Configuration/certs:/etc/nginx/ssl + depends_on: + - server + + typesense: + image: typesense/typesense:0.25.0 + restart: on-failure + ports: + - "8108:8108" + volumes: + - ./typesense-data:/data + healthcheck: + test: ["CMD", "curl", "-f", "http://localhost:8108/health"] + interval: 10s + timeout: 5s + retries: 5 + command: '--data-dir /data --api-key=xyz --enable-cors' + +volumes: + db-data: + driver: local + event-data: + driver: local \ No newline at end of file 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? 🤝