Chneemann/videoflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

only the videos that have been uploaded in the resolution are playable

Browse source
This commit is contained in:
Chneemann 2024-08-20 19:51:46 +02:00
parent a93e225872
commit fd7cb3a8dc
3 changed files with 23 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/app/components/home/browse/browse.component.html
View file

@ -23,9 +23,10 @@
<button <button
[ngClass]="{ [ngClass]="{
'resolution-btn': true, 'resolution-btn': true,
active: currentResolution === '480p' active: currentResolution === '480p',
'not-available': !movieIsUploaded['480']
}" }"
[disabled]="currentResolution === '480p'" [disabled]="!movieIsUploaded['480'] || currentResolution === '480p'"
(click)="changeResolution('480p')" (click)="changeResolution('480p')"
> >
480p 480p
@ -33,9 +34,10 @@
<button <button
[ngClass]="{ [ngClass]="{
'resolution-btn': true, 'resolution-btn': true,
active: currentResolution === '720p' active: currentResolution === '720p',
'not-available': !movieIsUploaded['720']
}" }"
[disabled]="currentResolution === '720p'" [disabled]="!movieIsUploaded['720'] || currentResolution === '720p'"
(click)="changeResolution('720p')" (click)="changeResolution('720p')"
> >
720p 720p
@ -43,14 +45,16 @@
<button <button
[ngClass]="{ [ngClass]="{
'resolution-btn': true, 'resolution-btn': true,
active: currentResolution === '1080p' active: currentResolution === '1080p',
'not-available': !movieIsUploaded['1080']
}" }"
[disabled]="currentResolution === '1080p'" [disabled]="!movieIsUploaded['1080'] || currentResolution === '1080p'"
(click)="changeResolution('1080p')" (click)="changeResolution('1080p')"
> >
1080p 1080p
</button> </button>
</div> </div>
<div class="logo"> <div class="logo">
<img src="./../../../../assets/img/logo_ci.svg" alt="Logo" /> <img src="./../../../../assets/img/logo_ci.svg" alt="Logo" />
</div> </div>

11
frontend/src/app/components/home/browse/browse.component.scss
View file

@ -107,6 +107,7 @@ section {
.resolution-btn.active { .resolution-btn.active {
background-color: $blue; background-color: $blue;
cursor: default;
} }
.resolution-btn:disabled { .resolution-btn:disabled {
@ -122,3 +123,13 @@ section {
outline: none; outline: none;
box-shadow: 0 0 0 3px rgba(38, 143, 255, 0.5); box-shadow: 0 0 0 3px rgba(38, 143, 255, 0.5);
} }
.not-available {
opacity: 0.5;
background-color: $gray;
}
.not-available:not(.active):hover {
background-color: $gray;
transform: scale(1);
}

3
frontend/src/app/components/home/browse/browse.component.ts
View file

@ -60,7 +60,7 @@ export class BrowseComponent implements OnInit {
} }
changeResolution(resolution: '480p' | '720p' | '1080p') { changeResolution(resolution: '480p' | '720p' | '1080p') {
if (this.videoPlayer) { if (this.videoPlayer && this.movieIsUploaded[resolution.replace('p', '')]) {
this.videoPlayer.switchResolution(resolution); this.videoPlayer.switchResolution(resolution);
this.currentResolution = resolution; this.currentResolution = resolution;
} }
@ -75,6 +75,7 @@ export class BrowseComponent implements OnInit {
} }
playVideo(videoPath: string) { playVideo(videoPath: string) {
this.currentResolution = '720p';
this.playMovie = videoPath; this.playMovie = videoPath;
} }