refactor: rename remaining movie variables to video
This commit is contained in:
Chneemann
parent
3cd3f44dea
commit
ffb6ba4a5b
13 changed files with 190 additions and 190 deletions
|
|
@ -4,7 +4,7 @@
|
|||
}"
|
||||
>
|
||||
<div
|
||||
class="movie-banner"
|
||||
class="video-banner"
|
||||
[ngClass]="{
|
||||
fullVhBanner: !isWideScreen
|
||||
}"
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<img *ngIf="!isVideoLoaded" [src]="thumbnailUrl" class="fallback-image" />
|
||||
<video
|
||||
#videoElement
|
||||
*ngIf="currentMovie[0].id"
|
||||
*ngIf="currentVideo[0].id"
|
||||
[src]="videoUrl"
|
||||
poster="{{ thumbnailUrl }}"
|
||||
autoplay
|
||||
|
|
@ -26,21 +26,21 @@
|
|||
></video>
|
||||
</div>
|
||||
|
||||
@if (currentMovie.length > 0) {
|
||||
@if (currentVideo.length > 0) {
|
||||
<div
|
||||
class="content"
|
||||
[ngClass]="{
|
||||
fullVhContent: !isWideScreen
|
||||
}"
|
||||
>
|
||||
<div class="title">{{ currentMovie[0].title }}</div>
|
||||
<div class="title">{{ currentVideo[0].title }}</div>
|
||||
<div
|
||||
class="description hide-scrollbar"
|
||||
[ngClass]="{
|
||||
fullVhDescription: !isWideScreen
|
||||
}"
|
||||
>
|
||||
{{ currentMovie[0].description }}
|
||||
{{ currentVideo[0].description }}
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<app-btn-small
|
||||
|
|
@ -54,10 +54,10 @@
|
|||
[imgPath]="'play'"
|
||||
[imgReverse]="true"
|
||||
[disabled]="!isAnyResolutionAvailable()"
|
||||
(click)="playMovieId(playUrl, currentMovie[0].id)"
|
||||
(click)="playVideoId(playUrl, currentVideo[0].id)"
|
||||
></app-btn-large>
|
||||
<div class="favorite-img" (click)="toggleLikeMovie(currentMovie[0].id)">
|
||||
@if(checkLikeMovies(currentMovie[0].id)) {
|
||||
<div class="favorite-img" (click)="toggleLikeVideo(currentVideo[0].id)">
|
||||
@if(checkLikeVideos(currentVideo[0].id)) {
|
||||
<img
|
||||
class="filled"
|
||||
src="./../../../../assets/img/favorite-filled.svg"
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
@if (!isAnyResolutionAvailable()) {
|
||||
<p>
|
||||
(The video is being converted)
|
||||
<a (click)="refreshPage(currentMovie)">Refresh</a>
|
||||
<a (click)="refreshPage(currentVideo)">Refresh</a>
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ section {
|
|||
height: 400px;
|
||||
}
|
||||
|
||||
.movie-banner {
|
||||
.video-banner {
|
||||
height: 400px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -134,7 +134,7 @@ section {
|
|||
hue-rotate(342deg) brightness(94%) contrast(119%);
|
||||
}
|
||||
|
||||
.movie-banner {
|
||||
.video-banner {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -25,17 +25,17 @@ import { ResolutionService } from '../../../services/resolution.service';
|
|||
})
|
||||
export class HeroBannerComponent implements OnChanges {
|
||||
@ViewChild('videoElement') videoElementRef!: ElementRef<HTMLVideoElement>;
|
||||
@Input() currentMovie: any[] = [];
|
||||
@Input() currentVideo: any[] = [];
|
||||
@Input() isWideScreen: boolean = false;
|
||||
@Input() favoriteMovies: any[] = [];
|
||||
@Input() watchedMovies: any[] = [];
|
||||
@Output() playMovie = new EventEmitter<string>();
|
||||
@Output() movieIsUploadedChange = new EventEmitter<{
|
||||
@Input() favoriteVideos: any[] = [];
|
||||
@Input() watchedVideos: any[] = [];
|
||||
@Output() playVideo = new EventEmitter<string>();
|
||||
@Output() videoIsUploadedChange = new EventEmitter<{
|
||||
[resolution: string]: boolean;
|
||||
}>();
|
||||
@Output() refreshChange = new EventEmitter<any[]>();
|
||||
@Output() moviesChange = new EventEmitter<any[]>();
|
||||
@Output() favoriteMovieChange = new EventEmitter<any[]>();
|
||||
@Output() videosChange = new EventEmitter<any[]>();
|
||||
@Output() favoriteVideoChange = new EventEmitter<any[]>();
|
||||
|
||||
isVideoLoaded: boolean = false;
|
||||
videoUrl: string = '';
|
||||
|
|
@ -44,7 +44,7 @@ export class HeroBannerComponent implements OnChanges {
|
|||
environmentBaseUrl: string = environment.baseUrl;
|
||||
|
||||
availableResolutions: string[];
|
||||
movieIsUploaded: { [resolution: string]: boolean };
|
||||
videoIsUploaded: { [resolution: string]: boolean };
|
||||
|
||||
constructor(
|
||||
private videoService: VideoService,
|
||||
|
|
@ -53,7 +53,7 @@ export class HeroBannerComponent implements OnChanges {
|
|||
) {
|
||||
this.availableResolutions =
|
||||
this.resolutionService.getAvailableResolutions();
|
||||
this.movieIsUploaded = this.resolutionService.initMovieIsUploaded();
|
||||
this.videoIsUploaded = this.resolutionService.initVideoIsUploaded();
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
|
|
@ -69,20 +69,20 @@ export class HeroBannerComponent implements OnChanges {
|
|||
}
|
||||
|
||||
getVideoUrls() {
|
||||
this.playUrl = `${this.environmentBaseUrl}/media/videos/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}`;
|
||||
this.thumbnailUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_1080p.jpg`;
|
||||
this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentMovie[0]?.id}/${this.currentMovie[0]?.file_name}_video-thumbnail.mp4`;
|
||||
this.playUrl = `${this.environmentBaseUrl}/media/videos/${this.currentVideo[0]?.id}/${this.currentVideo[0]?.file_name}`;
|
||||
this.thumbnailUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentVideo[0]?.id}/${this.currentVideo[0]?.file_name}_1080p.jpg`;
|
||||
this.videoUrl = `${this.environmentBaseUrl}/media/thumbnails/${this.currentVideo[0]?.id}/${this.currentVideo[0]?.file_name}_video-thumbnail.mp4`;
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes['currentMovie'] && this.currentMovie.length > 0) {
|
||||
const movieId = this.currentMovie[0]?.id;
|
||||
if (movieId) {
|
||||
if (changes['currentVideo'] && this.currentVideo.length > 0) {
|
||||
const videoId = this.currentVideo[0]?.id;
|
||||
if (videoId) {
|
||||
this.videoService
|
||||
.isVideoResolutionUploaded(movieId)
|
||||
.isVideoResolutionUploaded(videoId)
|
||||
.subscribe((resolutions) => {
|
||||
this.movieIsUploaded = resolutions;
|
||||
this.movieIsUploadedChange.emit(this.movieIsUploaded);
|
||||
this.videoIsUploaded = resolutions;
|
||||
this.videoIsUploadedChange.emit(this.videoIsUploaded);
|
||||
});
|
||||
setTimeout(() => this.videoSpeed(), 0);
|
||||
this.getVideoUrls();
|
||||
|
|
@ -97,49 +97,49 @@ export class HeroBannerComponent implements OnChanges {
|
|||
}
|
||||
}
|
||||
|
||||
toggleLikeMovie(movieId: number): void {
|
||||
if (this.favoriteMovies.includes(movieId)) {
|
||||
this.favoriteMovies = this.favoriteMovies.filter((id) => id !== movieId);
|
||||
toggleLikeVideo(videoId: number): void {
|
||||
if (this.favoriteVideos.includes(videoId)) {
|
||||
this.favoriteVideos = this.favoriteVideos.filter((id) => id !== videoId);
|
||||
} else {
|
||||
this.favoriteMovies.push(movieId);
|
||||
this.favoriteVideos.push(videoId);
|
||||
}
|
||||
this.favoriteMovieChange.emit(this.favoriteMovies);
|
||||
this.favoriteVideoChange.emit(this.favoriteVideos);
|
||||
}
|
||||
|
||||
toggleWatchedMovie(movieId: number): void {
|
||||
if (this.watchedMovies.includes(movieId)) {
|
||||
this.watchedMovies = this.watchedMovies.filter((id) => id !== movieId);
|
||||
toggleWatchedVideo(videoId: number): void {
|
||||
if (this.watchedVideos.includes(videoId)) {
|
||||
this.watchedVideos = this.watchedVideos.filter((id) => id !== videoId);
|
||||
} else {
|
||||
this.watchedMovies.push(movieId);
|
||||
this.watchedVideos.push(videoId);
|
||||
}
|
||||
this.updateWatchedMovies();
|
||||
this.updateWatchedVideos();
|
||||
}
|
||||
|
||||
updateWatchedMovies() {
|
||||
updateWatchedVideos() {
|
||||
const body = {
|
||||
watched_videos: this.watchedMovies,
|
||||
watched_videos: this.watchedVideos,
|
||||
};
|
||||
this.userService.updateWatchedMovies(body);
|
||||
this.userService.updateWatchedVideos(body);
|
||||
}
|
||||
|
||||
checkLikeMovies(videoId: number) {
|
||||
return this.favoriteMovies.includes(videoId);
|
||||
checkLikeVideos(videoId: number) {
|
||||
return this.favoriteVideos.includes(videoId);
|
||||
}
|
||||
|
||||
isAnyResolutionAvailable(): boolean {
|
||||
return Object.values(this.movieIsUploaded).some((available) => available);
|
||||
return Object.values(this.videoIsUploaded).some((available) => available);
|
||||
}
|
||||
|
||||
refreshPage(newMovies: any[]) {
|
||||
this.refreshChange.emit(newMovies);
|
||||
refreshPage(newVideos: any[]) {
|
||||
this.refreshChange.emit(newVideos);
|
||||
}
|
||||
|
||||
backToCategory(newMovies: any[]) {
|
||||
this.moviesChange.emit(newMovies);
|
||||
backToCategory(newVideos: any[]) {
|
||||
this.videosChange.emit(newVideos);
|
||||
}
|
||||
|
||||
playMovieId(videoPath: string, videoId: number) {
|
||||
this.playMovie.emit(videoPath);
|
||||
this.toggleWatchedMovie(videoId);
|
||||
playVideoId(videoPath: string, videoId: number) {
|
||||
this.playVideo.emit(videoPath);
|
||||
this.toggleWatchedVideo(videoId);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,40 @@
|
|||
<section>
|
||||
<div *ngIf="isLoading"></div>
|
||||
@if (!isLoading && movies.length > 0) {
|
||||
@if (!isLoading && videos.length > 0) {
|
||||
<!-- If at least one film has been uploaded -->
|
||||
@if (playMovie === "") {
|
||||
@if (playVideo === "") {
|
||||
<app-header
|
||||
(moviesChange)="onMoviesChange($event)"
|
||||
(videosChange)="onVideosChange($event)"
|
||||
[showFullLogo]="false"
|
||||
></app-header>
|
||||
<!-- Hero Banner -->
|
||||
<app-hero-banner
|
||||
*ngIf="
|
||||
currentMovie.length === 1 ||
|
||||
(this.isWideScreen() && currentMovie.length > 1)
|
||||
currentVideo.length === 1 ||
|
||||
(this.isWideScreen() && currentVideo.length > 1)
|
||||
"
|
||||
[isWideScreen]="isWideScreen()"
|
||||
[currentMovie]="currentMovie"
|
||||
[favoriteMovies]="favoriteMovies"
|
||||
[watchedMovies]="watchedMovies"
|
||||
(playMovie)="playVideo($event)"
|
||||
(movieIsUploadedChange)="onMovieIsUploadedChange($event)"
|
||||
(moviesChange)="onMoviesChange($event)"
|
||||
[currentVideo]="currentVideo"
|
||||
[favoriteVideos]="favoriteVideos"
|
||||
[watchedVideos]="watchedVideos"
|
||||
(playVideo)="playVideoPath($event)"
|
||||
(videoIsUploadedChange)="onVideoIsUploadedChange($event)"
|
||||
(videosChange)="onVideosChange($event)"
|
||||
(refreshChange)="onRefreshPage($event)"
|
||||
(favoriteMovieChange)="onFavoriteMovieChange($event)"
|
||||
(favoriteVideoChange)="onFavoriteVideoChange($event)"
|
||||
></app-hero-banner>
|
||||
<!-- Spacer -->
|
||||
<div *ngIf="!this.isWideScreen()" class="spacer"></div>
|
||||
<!-- Movie Categories -->
|
||||
<!-- Video Categories -->
|
||||
<app-categories
|
||||
*ngIf="
|
||||
this.isWideScreen() || (!this.isWideScreen() && currentMovie.length === 0)
|
||||
this.isWideScreen() || (!this.isWideScreen() && currentVideo.length === 0)
|
||||
"
|
||||
[videos]="movies"
|
||||
[currentVideo]="currentMovie[0]?.id"
|
||||
[favoriteVideos]="favoriteMovies"
|
||||
[watchedVideos]="watchedMovies"
|
||||
(currentVideoId)="currentMovieId($event)"
|
||||
[videos]="videos"
|
||||
[currentVideo]="currentVideo[0]?.id"
|
||||
[favoriteVideos]="favoriteVideos"
|
||||
[watchedVideos]="watchedVideos"
|
||||
(currentVideoId)="currentVideoId($event)"
|
||||
></app-categories>
|
||||
} @else {
|
||||
<div class="video-overlay">
|
||||
|
|
@ -50,10 +50,10 @@
|
|||
[ngClass]="{
|
||||
'resolution-btn': true,
|
||||
active: currentResolution === resolution,
|
||||
'not-available': !movieIsUploaded[resolution]
|
||||
'not-available': !videoIsUploaded[resolution]
|
||||
}"
|
||||
[disabled]="
|
||||
!movieIsUploaded[resolution] || currentResolution === resolution
|
||||
!videoIsUploaded[resolution] || currentResolution === resolution
|
||||
"
|
||||
(click)="changeResolution(resolution)"
|
||||
>
|
||||
|
|
@ -73,9 +73,9 @@
|
|||
<img src="./../../../../assets/img/logo_ci.svg" alt="Logo" />
|
||||
</div>
|
||||
</div>
|
||||
<app-video-player [playMovie]="playMovie"></app-video-player>
|
||||
<app-video-player [playVideo]="playVideo"></app-video-player>
|
||||
</div>
|
||||
} } @if (!isLoading && movies.length === 0) {
|
||||
} } @if (!isLoading && videos.length === 0) {
|
||||
<!-- If the database is empty -->
|
||||
<app-header [showFullLogo]="false"></app-header>
|
||||
<div class="error">
|
||||
|
|
@ -85,12 +85,12 @@
|
|||
<div class="add-button">
|
||||
<app-btn-small
|
||||
[imgPath]="'add'"
|
||||
(click)="toggleUploadMovieOverview(true)"
|
||||
(click)="toggleUploadVideoOverview(true)"
|
||||
></app-btn-small>
|
||||
</div>
|
||||
</section>
|
||||
@if (uploadMovieOverview) {
|
||||
<app-upload-movie
|
||||
(toggleUploadMovieOverview)="toggleUploadMovieOverview($event)"
|
||||
></app-upload-movie>
|
||||
@if (uploadVideoOverview) {
|
||||
<app-upload-video
|
||||
(toggleUploadVideoOverview)="toggleUploadVideoOverview($event)"
|
||||
></app-upload-video>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { VideoService } from '../../services/video.service';
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { VideoPlayerComponent } from './video-player/video-player.component';
|
||||
import { BtnSmallComponent } from '../../shared/components/buttons/btn-small/btn-small.component';
|
||||
import { UploadMovieComponent } from './upload-movie/upload-movie.component';
|
||||
import { UploadVideoComponent } from './upload-video/upload-video.component';
|
||||
import { UserService } from '../../services/user.service';
|
||||
import { ResolutionService } from '../../services/resolution.service';
|
||||
|
||||
|
|
@ -20,24 +20,24 @@ import { ResolutionService } from '../../services/resolution.service';
|
|||
CategoriesComponent,
|
||||
VideoPlayerComponent,
|
||||
BtnSmallComponent,
|
||||
UploadMovieComponent,
|
||||
UploadVideoComponent,
|
||||
],
|
||||
templateUrl: './home.component.html',
|
||||
styleUrl: './home.component.scss',
|
||||
})
|
||||
export class HomeComponent implements OnInit {
|
||||
@ViewChild(VideoPlayerComponent) videoPlayer!: VideoPlayerComponent;
|
||||
movies: any[] = [];
|
||||
favoriteMovies: number[] = [];
|
||||
watchedMovies: number[] = [];
|
||||
currentMovie: any[] = [];
|
||||
playMovie: string = '';
|
||||
videos: any[] = [];
|
||||
favoriteVideos: number[] = [];
|
||||
watchedVideos: number[] = [];
|
||||
currentVideo: any[] = [];
|
||||
playVideo: string = '';
|
||||
isLoading: boolean = true;
|
||||
uploadMovieOverview: boolean = false;
|
||||
uploadVideoOverview: boolean = false;
|
||||
|
||||
availableResolutions: string[];
|
||||
currentResolution: string;
|
||||
movieIsUploaded: { [resolution: string]: boolean };
|
||||
videoIsUploaded: { [resolution: string]: boolean };
|
||||
|
||||
constructor(
|
||||
private videoService: VideoService,
|
||||
|
|
@ -47,46 +47,46 @@ export class HomeComponent implements OnInit {
|
|||
this.availableResolutions =
|
||||
this.resolutionService.getAvailableResolutions();
|
||||
this.currentResolution = this.resolutionService.getDefaultResolution();
|
||||
this.movieIsUploaded = this.resolutionService.initMovieIsUploaded();
|
||||
this.videoIsUploaded = this.resolutionService.initVideoIsUploaded();
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this.loadLikedAndWatchedMovies();
|
||||
await this.loadAllMovies();
|
||||
this.loadLikedAndWatchedVideos();
|
||||
await this.loadAllVideos();
|
||||
if (this.isWideScreen()) {
|
||||
this.currentMovie.length === 0 ? this.loadRandomMovie() : null;
|
||||
this.currentVideo.length === 0 ? this.loadRandomVideo() : null;
|
||||
}
|
||||
}
|
||||
|
||||
async loadLikedAndWatchedMovies() {
|
||||
async loadLikedAndWatchedVideos() {
|
||||
try {
|
||||
const userData = await this.userService.getLikedAndWatchedMovies();
|
||||
this.favoriteMovies = userData.liked_videos;
|
||||
this.watchedMovies = userData.watched_videos;
|
||||
const userData = await this.userService.getLikedAndWatchedVideos();
|
||||
this.favoriteVideos = userData.liked_videos;
|
||||
this.watchedVideos = userData.watched_videos;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
updateLikeMovies() {
|
||||
updateLikeVideos() {
|
||||
const body = {
|
||||
liked_videos: this.favoriteMovies,
|
||||
liked_videos: this.favoriteVideos,
|
||||
};
|
||||
this.userService.updateLikedMovies(body);
|
||||
this.userService.updateLikedVideos(body);
|
||||
}
|
||||
|
||||
onRefreshPage(updatedMovies: any[]) {
|
||||
this.currentMovie = [];
|
||||
onRefreshPage(updatedVideos: any[]) {
|
||||
this.currentVideo = [];
|
||||
setTimeout(() => {
|
||||
this.currentMovie = updatedMovies;
|
||||
this.currentVideo = updatedVideos;
|
||||
}, 1);
|
||||
}
|
||||
|
||||
onMoviesChange(updatedMovies: any[]) {
|
||||
onVideosChange(updatedVideos: any[]) {
|
||||
if (this.isWideScreen()) {
|
||||
this.loadRandomMovie();
|
||||
this.loadRandomVideo();
|
||||
} else {
|
||||
this.currentMovie = updatedMovies;
|
||||
this.currentVideo = updatedVideos;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,60 +94,60 @@ export class HomeComponent implements OnInit {
|
|||
return window.innerWidth > 600;
|
||||
}
|
||||
|
||||
onMovieIsUploadedChange(newStatus: { [resolution: string]: boolean }) {
|
||||
this.movieIsUploaded = newStatus;
|
||||
onVideoIsUploadedChange(newStatus: { [resolution: string]: boolean }) {
|
||||
this.videoIsUploaded = newStatus;
|
||||
}
|
||||
|
||||
onFavoriteMovieChange(favoriteMovies: any) {
|
||||
this.favoriteMovies = favoriteMovies;
|
||||
this.updateLikeMovies();
|
||||
onFavoriteVideoChange(favoriteVideos: any) {
|
||||
this.favoriteVideos = favoriteVideos;
|
||||
this.updateLikeVideos();
|
||||
}
|
||||
|
||||
changeResolution(resolution: string) {
|
||||
if (this.videoPlayer && this.movieIsUploaded[resolution]) {
|
||||
if (this.videoPlayer && this.videoIsUploaded[resolution]) {
|
||||
this.videoPlayer.switchResolution(resolution);
|
||||
this.currentResolution = resolution;
|
||||
}
|
||||
}
|
||||
|
||||
async loadAllMovies() {
|
||||
async loadAllVideos() {
|
||||
this.isLoading = true;
|
||||
try {
|
||||
this.movies = await this.videoService.getAllVideos();
|
||||
this.videos = await this.videoService.getAllVideos();
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
closeVideo(): void {
|
||||
this.playMovie = '';
|
||||
this.playVideo = '';
|
||||
}
|
||||
|
||||
playVideo(videoPath: string) {
|
||||
playVideoPath(videoPath: string) {
|
||||
this.currentResolution = '720p';
|
||||
this.playMovie = videoPath;
|
||||
this.playVideo = videoPath;
|
||||
}
|
||||
|
||||
loadRandomMovie(): void {
|
||||
const randomIndex = Math.floor(Math.random() * this.movies.length);
|
||||
this.currentMovie = [this.movies[randomIndex]];
|
||||
loadRandomVideo(): void {
|
||||
const randomIndex = Math.floor(Math.random() * this.videos.length);
|
||||
this.currentVideo = [this.videos[randomIndex]];
|
||||
}
|
||||
|
||||
currentMovieId(movieId: number) {
|
||||
let index = this.movies.findIndex((movie) => movie.id === movieId);
|
||||
currentVideoId(videoId: number) {
|
||||
let index = this.videos.findIndex((video) => video.id === videoId);
|
||||
if (index !== -1) {
|
||||
this.currentMovie = [];
|
||||
this.currentMovie.push(this.movies[index]);
|
||||
this.currentVideo = [];
|
||||
this.currentVideo.push(this.videos[index]);
|
||||
}
|
||||
}
|
||||
|
||||
isAnyResolutionUnavailable(): boolean {
|
||||
return this.availableResolutions.some(
|
||||
(resolution) => !this.movieIsUploaded[resolution]
|
||||
(resolution) => !this.videoIsUploaded[resolution]
|
||||
);
|
||||
}
|
||||
|
||||
toggleUploadMovieOverview(value: any) {
|
||||
this.uploadMovieOverview = value;
|
||||
toggleUploadVideoOverview(value: any) {
|
||||
this.uploadVideoOverview = value;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="overlay" (click)="closeMovieUploadOverview()">
|
||||
<div class="overlay" (click)="closeVideoUploadOverview()">
|
||||
<div class="center" (click)="stopPropagation($event)">
|
||||
<div class="content">
|
||||
<div class="headline">Upload Movie</div>
|
||||
<div class="headline">Upload Video</div>
|
||||
<form
|
||||
#movieForm="ngForm"
|
||||
(ngSubmit)="onSubmit(movieForm)"
|
||||
#videoForm="ngForm"
|
||||
(ngSubmit)="onSubmit(videoForm)"
|
||||
onsubmit="return false"
|
||||
(input)="this.errorService.clearError()"
|
||||
>
|
||||
|
|
@ -14,13 +14,13 @@
|
|||
name="title"
|
||||
#title="ngModel"
|
||||
placeholder="Title"
|
||||
[(ngModel)]="movieData.title"
|
||||
[(ngModel)]="videoData.title"
|
||||
[class.error-border]="!title.valid && title.touched"
|
||||
required
|
||||
/>
|
||||
<div class="error-msg">
|
||||
@if (!title.valid && title.touched) {
|
||||
<p>Please enter a movie title</p>
|
||||
<p>Please enter a video title</p>
|
||||
}
|
||||
</div>
|
||||
<textarea
|
||||
|
|
@ -28,21 +28,21 @@
|
|||
name="description"
|
||||
#description="ngModel"
|
||||
placeholder="Description"
|
||||
[(ngModel)]="movieData.description"
|
||||
[(ngModel)]="videoData.description"
|
||||
[class.error-border]="!description.valid && description.touched"
|
||||
rows="4"
|
||||
required
|
||||
></textarea>
|
||||
<div class="error-msg">
|
||||
@if (!description.valid && description.touched) {
|
||||
<p>Please enter a movie description</p>
|
||||
<p>Please enter a video description</p>
|
||||
}
|
||||
</div>
|
||||
<select
|
||||
id="filmGenre"
|
||||
name="filmGenre"
|
||||
#filmGenre="ngModel"
|
||||
[(ngModel)]="movieData.filmGenre"
|
||||
[(ngModel)]="videoData.filmGenre"
|
||||
[class.error-border]="!filmGenre.valid && filmGenre.touched"
|
||||
required
|
||||
>
|
||||
|
|
@ -86,17 +86,17 @@
|
|||
<app-btn-large
|
||||
[type]="'button'"
|
||||
[value]="'Close'"
|
||||
(click)="closeMovieUploadOverview()"
|
||||
(click)="closeVideoUploadOverview()"
|
||||
></app-btn-large>
|
||||
<app-btn-large
|
||||
[type]="'submit'"
|
||||
[value]="'Upload Movie'"
|
||||
[value]="'Upload Video'"
|
||||
[disabled]="
|
||||
!movieData.title ||
|
||||
!movieData.description ||
|
||||
!movieData.filmGenre ||
|
||||
!movieData.videoFile ||
|
||||
movieData.send
|
||||
!videoData.title ||
|
||||
!videoData.description ||
|
||||
!videoData.filmGenre ||
|
||||
!videoData.videoFile ||
|
||||
videoData.send
|
||||
"
|
||||
></app-btn-large>
|
||||
</div>
|
||||
|
|
@ -104,8 +104,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if(movieData.send){
|
||||
@if(videoData.send){
|
||||
<app-loading-dialog
|
||||
loadingMsg="Movie is uploading, please be patient a moment."
|
||||
loadingMsg="Video is uploading, please be patient a moment."
|
||||
></app-loading-dialog>
|
||||
}
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { UploadMovieComponent } from './upload-movie.component';
|
||||
import { UploadVideoComponent } from './upload-video.component';
|
||||
|
||||
describe('UploadMovieComponent', () => {
|
||||
let component: UploadMovieComponent;
|
||||
let fixture: ComponentFixture<UploadMovieComponent>;
|
||||
describe('UploadVideoComponent', () => {
|
||||
let component: UploadVideoComponent;
|
||||
let fixture: ComponentFixture<UploadVideoComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UploadMovieComponent],
|
||||
imports: [UploadVideoComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(UploadMovieComponent);
|
||||
fixture = TestBed.createComponent(UploadVideoComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
|
@ -7,7 +7,7 @@ import { VideoService } from '../../../services/video.service';
|
|||
import { LoadingDialogComponent } from '../../../shared/components/loading-dialog/loading-dialog.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-upload-movie',
|
||||
selector: 'app-upload-video',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
|
@ -15,15 +15,15 @@ import { LoadingDialogComponent } from '../../../shared/components/loading-dialo
|
|||
BtnLargeComponent,
|
||||
LoadingDialogComponent,
|
||||
],
|
||||
templateUrl: './upload-movie.component.html',
|
||||
styleUrl: './upload-movie.component.scss',
|
||||
templateUrl: './upload-video.component.html',
|
||||
styleUrl: './upload-video.component.scss',
|
||||
})
|
||||
export class UploadMovieComponent {
|
||||
@Output() toggleUploadMovieOverview = new EventEmitter<boolean>();
|
||||
export class UploadVideoComponent {
|
||||
@Output() toggleUploadVideoOverview = new EventEmitter<boolean>();
|
||||
errorMsgFileSize: string | null = null;
|
||||
maxFileSizeMB = 20;
|
||||
|
||||
movieData = {
|
||||
videoData = {
|
||||
title: '',
|
||||
description: '',
|
||||
filmGenre: '',
|
||||
|
|
@ -40,8 +40,8 @@ export class UploadMovieComponent {
|
|||
event.stopPropagation();
|
||||
}
|
||||
|
||||
closeMovieUploadOverview() {
|
||||
this.toggleUploadMovieOverview.emit(false);
|
||||
closeVideoUploadOverview() {
|
||||
this.toggleUploadVideoOverview.emit(false);
|
||||
}
|
||||
|
||||
onFileChange(event: any) {
|
||||
|
|
@ -52,7 +52,7 @@ export class UploadMovieComponent {
|
|||
isOneFile(event: any) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
this.movieData.videoFile = file;
|
||||
this.videoData.videoFile = file;
|
||||
}
|
||||
}
|
||||
isFileSize(event: any) {
|
||||
|
|
@ -72,12 +72,12 @@ export class UploadMovieComponent {
|
|||
if (!ngForm.submitted || !ngForm.form.valid) return;
|
||||
|
||||
try {
|
||||
this.movieData.send = true;
|
||||
this.videoData.send = true;
|
||||
let formData = this.createFormData();
|
||||
await this.videoService.uploadVideo(formData);
|
||||
ngForm.resetForm();
|
||||
this.closeMovieUploadOverview();
|
||||
this.movieData.send = false;
|
||||
this.closeVideoUploadOverview();
|
||||
this.videoData.send = false;
|
||||
window.location.reload();
|
||||
this.errorService.clearError();
|
||||
} catch (error) {
|
||||
|
|
@ -87,11 +87,11 @@ export class UploadMovieComponent {
|
|||
|
||||
private createFormData(): FormData {
|
||||
const formData = new FormData();
|
||||
formData.append('title', this.movieData.title);
|
||||
formData.append('description', this.movieData.description);
|
||||
formData.append('film_genre', this.movieData.filmGenre);
|
||||
if (this.movieData.videoFile) {
|
||||
formData.append('video_file', this.movieData.videoFile);
|
||||
formData.append('title', this.videoData.title);
|
||||
formData.append('description', this.videoData.description);
|
||||
formData.append('film_genre', this.videoData.filmGenre);
|
||||
if (this.videoData.videoFile) {
|
||||
formData.append('video_file', this.videoData.videoFile);
|
||||
}
|
||||
return formData;
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ import Hls from 'hls.js';
|
|||
styleUrls: ['./video-player.component.scss'],
|
||||
})
|
||||
export class VideoPlayerComponent implements OnInit, OnDestroy {
|
||||
@Input() playMovie: string = '';
|
||||
@Input() playVideo: string = '';
|
||||
|
||||
private hls: Hls | null = null;
|
||||
private videoElement: HTMLVideoElement | null = null;
|
||||
|
|
@ -52,7 +52,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
|
|||
*/
|
||||
private initializePlayer(): void {
|
||||
this.videoElement = this.elementRef.nativeElement.querySelector('video');
|
||||
if (!this.playMovie || !this.videoElement) return;
|
||||
if (!this.playVideo || !this.videoElement) return;
|
||||
|
||||
this.resolutionUrls = this.getResolutionUrls();
|
||||
const defaultUrl = this.resolutionUrls[this.defaultResolution];
|
||||
|
|
@ -74,7 +74,7 @@ export class VideoPlayerComponent implements OnInit, OnDestroy {
|
|||
return Object.fromEntries(
|
||||
this.resolutionService
|
||||
.getAvailableResolutions()
|
||||
.map((res) => [res, `${this.playMovie}_${res}.m3u8`])
|
||||
.map((res) => [res, `${this.playVideo}_${res}.m3u8`])
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export class ResolutionService {
|
|||
/**
|
||||
* Initializes an object that sets all resolutions to `false`
|
||||
*/
|
||||
initMovieIsUploaded(): { [resolution: string]: boolean } {
|
||||
initVideoIsUploaded(): { [resolution: string]: boolean } {
|
||||
return Object.fromEntries(
|
||||
this.AVAILABLE_RESOLUTIONS.map((resolution) => [resolution, false])
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,45 +14,45 @@ export class UserService {
|
|||
constructor(private apiService: ApiService) {}
|
||||
|
||||
/**
|
||||
* Fetch the list of movies liked and watched by the current user
|
||||
* Fetch the list of videos liked and watched by the current user
|
||||
*
|
||||
* @returns a promise resolving to an object with two properties:
|
||||
* - `liked_movies`: a list of movie IDs liked by the current user
|
||||
* - `watched_movies`: a list of movie IDs watched by the current user
|
||||
* - `liked_videos`: a list of video IDs liked by the current user
|
||||
* - `watched_videos`: a list of video IDs watched by the current user
|
||||
*/
|
||||
getLikedAndWatchedMovies(): Promise<any> {
|
||||
getLikedAndWatchedVideos(): Promise<any> {
|
||||
return firstValueFrom(
|
||||
this.apiService.get(`/users/${this.currentUserId}/`, true)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the list of liked movies for the current user
|
||||
* Update the list of liked videos for the current user
|
||||
*
|
||||
* @param likedMovies a list of movie IDs liked by the current user
|
||||
* @param likedVideos a list of video IDs liked by the current user
|
||||
* @returns a promise resolved when the update is successful
|
||||
*/
|
||||
updateLikedMovies(likedMovies: any): Promise<any> {
|
||||
updateLikedVideos(likedVideos: any): Promise<any> {
|
||||
return firstValueFrom(
|
||||
this.apiService.put(
|
||||
`/users/liked/${this.currentUserId}/`,
|
||||
likedMovies,
|
||||
likedVideos,
|
||||
true
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the list of watched movies for the current user
|
||||
* Update the list of watched videos for the current user
|
||||
*
|
||||
* @param watchedMovies a list of movie IDs watched by the current user
|
||||
* @param watchedVideos a list of video IDs watched by the current user
|
||||
* @returns a promise resolved when the update is successful
|
||||
*/
|
||||
updateWatchedMovies(watchedMovies: any): Promise<any> {
|
||||
updateWatchedVideos(watchedVideos: any): Promise<any> {
|
||||
return firstValueFrom(
|
||||
this.apiService.put(
|
||||
`/users/watched/${this.currentUserId}/`,
|
||||
watchedMovies,
|
||||
watchedVideos,
|
||||
true
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { TokenService } from '../../../services/token.service';
|
|||
})
|
||||
export class HeaderComponent {
|
||||
@Input() showFullLogo: boolean = true;
|
||||
@Output() moviesChange = new EventEmitter<any[]>();
|
||||
@Output() videosChange = new EventEmitter<any[]>();
|
||||
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
|
|
@ -21,12 +21,12 @@ export class HeaderComponent {
|
|||
) {}
|
||||
|
||||
/**
|
||||
* Emits the moviesChange event with the newMovies array as the payload.
|
||||
* This is used to reset the movies displayed in the movie-list component.
|
||||
* @param newMovies The new array of movies to be displayed.
|
||||
* Emits the videosChange event with the newVideos array as the payload.
|
||||
* This is used to reset the videos displayed in the video-list component.
|
||||
* @param newVideos The new array of videos to be displayed.
|
||||
*/
|
||||
backToOverview(newMovies: any[]) {
|
||||
this.moviesChange.emit(newMovies);
|
||||
backToOverview(newVideos: any[]) {
|
||||
this.videosChange.emit(newVideos);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in a new issue