From ccb33d8aebb72ac885e9a3789ca6c58d0d04da25 Mon Sep 17 00:00:00 2001 From: MiharyR Date: Sun, 21 Nov 2021 01:30:53 +0100 Subject: [PATCH] commencement de la page watching --- .../popup-visualize-user.component.html | 2 +- src/app/app-routing.module.ts | 5 + src/app/app.module.ts | 8 +- .../page-history-user.component.html | 11 +- .../page-history-user.component.scss | 24 ++ .../page-history-user.component.ts | 13 +- .../playlist-list/playlist-list.component.ts | 3 +- .../video-list/video-list.component.html | 2 +- .../video-list/video-list.component.ts | 11 +- .../page-search/page-search.component.html | 2 +- .../page-search/page-search.component.scss | 5 +- .../video-grid/video-grid.component.html | 4 +- .../search/video-grid/video-grid.component.ts | 11 +- .../components/advert/advert.component.html | 24 +- .../components/advert/advert.component.scss | 30 ++- .../components/advert/advert.component.ts | 3 + .../add-video-to-playlists.service.ts | 8 +- .../services/videoUrl/video-url.service.ts | 11 + .../page-watching-video.component.html | 219 ++++++++++++++++++ .../page-watching-video.component.scss | 98 ++++++++ .../page-watching-video.component.spec.ts | 25 ++ .../page-watching-video.component.ts | 112 +++++++++ .../rectangle-watching-video.component.html | 1 + .../rectangle-watching-video.component.scss | 0 ...rectangle-watching-video.component.spec.ts | 25 ++ .../rectangle-watching-video.component.ts | 15 ++ .../fictitious-videos.service.ts | 78 +++++-- 27 files changed, 691 insertions(+), 59 deletions(-) create mode 100644 src/app/user/watching/page-watching-video/page-watching-video.component.html create mode 100644 src/app/user/watching/page-watching-video/page-watching-video.component.scss create mode 100644 src/app/user/watching/page-watching-video/page-watching-video.component.spec.ts create mode 100644 src/app/user/watching/page-watching-video/page-watching-video.component.ts create mode 100644 src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.html create mode 100644 src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.scss create mode 100644 src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.spec.ts create mode 100644 src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.ts diff --git a/src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.html b/src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.html index 9950d4b..89124e7 100644 --- a/src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.html +++ b/src/app/admin/userList/popup-visualize-user/popup-visualize-user.component.html @@ -15,7 +15,7 @@
Mail:
-
{{user.mail}}
+
{{user.email}}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index ee385e4..db7db74 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -11,6 +11,7 @@ import {PageProfilAdvertiserComponent} from "./advertiser/myProfil/page-profil-a import {PageProfilAdminComponent} from "./admin/myProfil/page-profil-admin/page-profil-admin.component"; import {PageAdListAdminComponent} from "./admin/adList/page-ad-list-admin/page-ad-list-admin.component"; import {PageUserListComponent} from "./admin/userList/page-user-list/page-user-list.component"; +import {PageWatchingVideoComponent} from "./user/watching/page-watching-video/page-watching-video.component"; const routes: Routes = [ @@ -27,6 +28,10 @@ const routes: Routes = [ { path: 'user/history', component: PageHistoryUserComponent }, { path: 'user/myProfil', component: PageProfilUserComponent }, + { path: 'user/watching/fromSearch/:videoId/:source/:search', component: PageWatchingVideoComponent }, + { path: 'user/watching/fromMyPlaylists/:videoId/:_idPlaylist', component: PageWatchingVideoComponent }, + { path: 'user/watching/fromHistory/:videoId/:source', component: PageWatchingVideoComponent }, + // Advertiser { path: 'advertiser', component: PageAdListAdvertiserComponent }, { path: 'advertiser/adList', component: PageAdListAdvertiserComponent }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 530dfb4..faa3c78 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -68,6 +68,9 @@ import { PopupVisualizeUserComponent } from './admin/userList/popup-visualize-us import { PopupDeleteUserComponent } from './admin/userList/popup-delete-user/popup-delete-user.component'; import { PopupCreateUserComponent } from './admin/userList/popup-create-user/popup-create-user.component'; import { InputInterestsAdminComponent } from './admin/userList/input-interests-admin/input-interests-admin.component'; +import { PageWatchingVideoComponent } from './user/watching/page-watching-video/page-watching-video.component'; +import { RectangleWatchingVideoComponent } from './user/watching/rectangle-watching-video/rectangle-watching-video.component'; +import {MatExpansionModule} from "@angular/material/expansion"; @NgModule({ @@ -116,6 +119,8 @@ import { InputInterestsAdminComponent } from './admin/userList/input-interests-a PopupDeleteUserComponent, PopupCreateUserComponent, InputInterestsAdminComponent, + PageWatchingVideoComponent, + RectangleWatchingVideoComponent, ], imports: [ BrowserModule, @@ -143,7 +148,8 @@ import { InputInterestsAdminComponent } from './admin/userList/input-interests-a IvyCarouselModule, MatRadioModule, MatStepperModule, - MatPaginatorModule + MatPaginatorModule, + MatExpansionModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/user/history/page-history-user/page-history-user.component.html b/src/app/user/history/page-history-user/page-history-user.component.html index f026a90..9de05f6 100644 --- a/src/app/user/history/page-history-user/page-history-user.component.html +++ b/src/app/user/history/page-history-user/page-history-user.component.html @@ -18,13 +18,10 @@ Aperçu - - +
+ + +
diff --git a/src/app/user/history/page-history-user/page-history-user.component.scss b/src/app/user/history/page-history-user/page-history-user.component.scss index 777893a..2ab71d2 100644 --- a/src/app/user/history/page-history-user/page-history-user.component.scss +++ b/src/app/user/history/page-history-user/page-history-user.component.scss @@ -19,3 +19,27 @@ input { width: 35%; font-size: large; } + +// ------------------------------------------------------- + +.imgsContainer { + position: relative; + width: 20vw; + height: 15vh; +} + +.imgPlay { + position: absolute; + margin-left: 9vw; + width: 3vw; + margin-top: 5vh; + height: 6vh; + padding: 0px 0px 0px 0px; +} + +.imgVideo { + border: solid 1px black; + width: 20vw; + height: 15vh; + padding: 0px 0px 0px 0px; +} diff --git a/src/app/user/history/page-history-user/page-history-user.component.ts b/src/app/user/history/page-history-user/page-history-user.component.ts index 16418ae..1164254 100644 --- a/src/app/user/history/page-history-user/page-history-user.component.ts +++ b/src/app/user/history/page-history-user/page-history-user.component.ts @@ -8,6 +8,7 @@ import {UserHistoryService} from "../../utils/services/userHistory/userHistory.s import {MatPaginator} from "@angular/material/paginator"; import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service"; import {VideoAll} from "../../../utils/interfaces/video"; +import {Router} from "@angular/router"; @@ -28,7 +29,8 @@ export class PageHistoryUserComponent implements AfterViewInit private messageService: MessageService, private fictitiousVideosService: FictitiousVideosService, public videoUrlService: VideoUrlService, - private userHistoryService: UserHistoryService ) { } + private userHistoryService: UserHistoryService, + private router: Router ) { } // charge la page @@ -102,12 +104,11 @@ export class PageHistoryUserComponent implements AfterViewInit */ } - - // Ajoute la date actuelle dans watchedDates.video - onIframeClick(video: VideoAll): void + + onVideo(video: VideoAll): void { - console.log("onIframeClick: " + video.title); - //this.userHistoryService.addVideoToHistoque(video); + const url = '/user/watching/fromHistory/'+video.videoId+'/'+video.source ; + this.router.navigateByUrl(url); } } diff --git a/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts b/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts index fccb68a..ad82e78 100644 --- a/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts +++ b/src/app/user/myPlaylists/playlist-list/playlist-list.component.ts @@ -30,7 +30,8 @@ export class PlaylistListComponent implements OnInit ngOnInit(): void { - this.allPlaylists = this.fictitiousVideosService.getTabPlaylistDB(10, 10); + //this.allPlaylists = this.fictitiousVideosService.getRandomTabPlaylistDB(10, 10); + this.allPlaylists = this.fictitiousVideosService.getNoRandomTabPlaylistDB(10); this.tabPlaylist = [].concat(this.allPlaylists); } diff --git a/src/app/user/myPlaylists/video-list/video-list.component.html b/src/app/user/myPlaylists/video-list/video-list.component.html index 26a00b6..e6ee4f5 100644 --- a/src/app/user/myPlaylists/video-list/video-list.component.html +++ b/src/app/user/myPlaylists/video-list/video-list.component.html @@ -47,7 +47,7 @@
-
+
diff --git a/src/app/user/myPlaylists/video-list/video-list.component.ts b/src/app/user/myPlaylists/video-list/video-list.component.ts index afe0acd..dce50ad 100644 --- a/src/app/user/myPlaylists/video-list/video-list.component.ts +++ b/src/app/user/myPlaylists/video-list/video-list.component.ts @@ -8,6 +8,7 @@ import {MatSnackBar} from "@angular/material/snack-bar"; import {UserHistoryService} from "../../utils/services/userHistory/userHistory.service"; import {FictitiousUtilsService} from "../../../utils/services/fictitiousDatas/fictitiousUtils/fictitious-utils.service"; import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service"; +import {Router} from "@angular/router"; @@ -29,7 +30,8 @@ export class VideoListComponent implements OnChanges private addVideoToPlaylistService: AddVideoToPlaylistsService, private snackBar: MatSnackBar, public fictitiousVideosService: FictitiousVideosService, - private historiqueService: UserHistoryService ) { } + private historiqueService: UserHistoryService, + private router: Router ) { } ngOnChanges(changes: SimpleChanges): void @@ -83,4 +85,11 @@ export class VideoListComponent implements OnChanges // Mais en vrai, ça serai plus facile pour moi si on mettait plutot un attribut "videoIds" dans "Playlists" } + + onVideo(video: VideoDB): void + { + const url = "user/watching/fromMyPlaylists/" + video.videoId + '/' + this.playlist._id; + this.router.navigateByUrl(url); + } + } diff --git a/src/app/user/search/page-search/page-search.component.html b/src/app/user/search/page-search/page-search.component.html index 0fefb07..d61e844 100644 --- a/src/app/user/search/page-search/page-search.component.html +++ b/src/app/user/search/page-search/page-search.component.html @@ -57,7 +57,7 @@
- +
diff --git a/src/app/user/search/page-search/page-search.component.scss b/src/app/user/search/page-search/page-search.component.scss index 524f35d..dec9f62 100644 --- a/src/app/user/search/page-search/page-search.component.scss +++ b/src/app/user/search/page-search/page-search.component.scss @@ -14,6 +14,7 @@ overflow-y: scroll; } +//-------------------------------------------------------------------------------------------- .inputSearchBar { width: 50%; @@ -25,6 +26,7 @@ font-size: large; } +//-------------------------------------------------------------------------------------------- .celluleGrilleVideo { border: solid 2px; @@ -40,12 +42,13 @@ background-color: #646464; } - .conteneurVideosGrid { height: 75vh; width: 100%; } +//-------------------------------------------------------------------------------------------- + .cellulePub { padding: 0px 10px 0px 10px; width: 100%; diff --git a/src/app/user/search/video-grid/video-grid.component.html b/src/app/user/search/video-grid/video-grid.component.html index 698a244..8dc071a 100644 --- a/src/app/user/search/video-grid/video-grid.component.html +++ b/src/app/user/search/video-grid/video-grid.component.html @@ -10,8 +10,8 @@
- - + +
diff --git a/src/app/user/search/video-grid/video-grid.component.ts b/src/app/user/search/video-grid/video-grid.component.ts index e948f3b..0d35424 100644 --- a/src/app/user/search/video-grid/video-grid.component.ts +++ b/src/app/user/search/video-grid/video-grid.component.ts @@ -2,7 +2,8 @@ import {Component, Input, OnChanges } from '@angular/core'; import {VideoAll} from "../../../utils/interfaces/video"; import {UserHistoryService} from "../../utils/services/userHistory/userHistory.service"; import {AddVideoToPlaylistsService} from "../../utils/services/addVideoToPlaylists/add-video-to-playlists.service"; -import {VideoUrlService} from "../../utils/services/videoUrl/video-url.service"; +import {Router} from "@angular/router"; + @Component({ @@ -13,11 +14,12 @@ import {VideoUrlService} from "../../utils/services/videoUrl/video-url.service"; export class VideoGridComponent implements OnChanges { @Input() tabVideo: VideoAll[] = []; + @Input() search: string = ''; indexPage: number = 0; constructor( private historiqueService: UserHistoryService, private addVideoToPlaylistsService: AddVideoToPlaylistsService, - private videoUrlService: VideoUrlService ) {} + private router: Router) {} ngOnChanges(): void @@ -36,4 +38,9 @@ export class VideoGridComponent implements OnChanges else return str.substring(0, 37) + "..." ; } + onVideo(video: VideoAll): void + { + const url = '/user/watching/fromSearch/'+video.videoId+'/'+video.source+'/'+this.search; + this.router.navigateByUrl(url); + } } diff --git a/src/app/user/utils/components/advert/advert.component.html b/src/app/user/utils/components/advert/advert.component.html index 65e9e36..3bcedd5 100644 --- a/src/app/user/utils/components/advert/advert.component.html +++ b/src/app/user/utils/components/advert/advert.component.html @@ -1,6 +1,20 @@ -
-
- - -
+
+ +
+ + + + + + + + diff --git a/src/app/user/utils/components/advert/advert.component.scss b/src/app/user/utils/components/advert/advert.component.scss index 73a6e3b..f675374 100644 --- a/src/app/user/utils/components/advert/advert.component.scss +++ b/src/app/user/utils/components/advert/advert.component.scss @@ -6,23 +6,33 @@ transform: translateY(-50%); } - -img { +#imgFromSearchOrMyPlaylists { max-width: 100%; max-height: 100%; - border: solid 3px; + border: solid 3px black; vertical-align: middle; } -.lightTheme img { - border-color: black; -} -.darkTheme img { - border-color: white; -} - .helper { display: inline-block; height: 100%; vertical-align: middle; } + +// ------------------------------------------------------------------------------ + +#imgFromWatchingLeft { + width: 14vw; + height: 70vh; + border: solid 3px black; + position: fixed; + left: 1vw; +} + +#imgFromWatchingRight { + width: 15vw; + height: 70vh; + border: solid 3px black; + position: fixed; + right: 1vw; +} diff --git a/src/app/user/utils/components/advert/advert.component.ts b/src/app/user/utils/components/advert/advert.component.ts index 322c49b..d8effca 100644 --- a/src/app/user/utils/components/advert/advert.component.ts +++ b/src/app/user/utils/components/advert/advert.component.ts @@ -12,6 +12,7 @@ import {ThemeService} from "../../../../utils/services/theme/theme.service"; export class AdvertComponent implements OnInit { @Input() ad: Advert; + @Input() from: string = "search"; idxImage: number = 0; @@ -22,6 +23,8 @@ export class AdvertComponent implements OnInit { const nbImages = this.ad.images.length; this.idxImage = Math.floor(Math.random() * nbImages); + + } } diff --git a/src/app/user/utils/services/addVideoToPlaylists/add-video-to-playlists.service.ts b/src/app/user/utils/services/addVideoToPlaylists/add-video-to-playlists.service.ts index a4f8fff..fa45fb1 100644 --- a/src/app/user/utils/services/addVideoToPlaylists/add-video-to-playlists.service.ts +++ b/src/app/user/utils/services/addVideoToPlaylists/add-video-to-playlists.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import {MessageService} from "../../../../utils/services/message/message.service"; import {MatDialog} from "@angular/material/dialog"; import {PopupAddVideoToPlaylistsComponent} from "../../components/popup-add-video-to-playlists/popup-add-video-to-playlists.component"; -import {VideoDB} from "../../../../utils/interfaces/video"; +import {VideoAll, VideoDB} from "../../../../utils/interfaces/video"; import {MatSnackBar} from "@angular/material/snack-bar"; import {FictitiousVideosService} from "../../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service"; @@ -13,7 +13,7 @@ import {FictitiousVideosService} from "../../../../utils/services/fictitiousData }) export class AddVideoToPlaylistsService { - private _video: VideoDB; + private _video: VideoDB | VideoAll; constructor( private messageService: MessageService, @@ -23,12 +23,12 @@ export class AddVideoToPlaylistsService // --- FAUX CODE --- - run(video0: VideoDB): void + run(video0: VideoDB | VideoAll): void { this._video = video0; const retour = { status: "success", - data: this.fictitiousVideosService.getTabPlaylistDB(4, 5), + data: this.fictitiousVideosService.getRandomTabPlaylistDB(4, 5), } this.afterReceivingPlaylists(retour) } diff --git a/src/app/user/utils/services/videoUrl/video-url.service.ts b/src/app/user/utils/services/videoUrl/video-url.service.ts index 8a6caeb..4f7c2be 100644 --- a/src/app/user/utils/services/videoUrl/video-url.service.ts +++ b/src/app/user/utils/services/videoUrl/video-url.service.ts @@ -10,6 +10,15 @@ export class VideoUrlService constructor(private _sanitizer: DomSanitizer) { } + safeUrl(videoId: string, source: string): SafeResourceUrl + { + let videoUrl = "" ; + if(source === 'youtube') videoUrl = "https://www.youtube.com/embed/" + videoId; + else if(source === 'dailymotion') videoUrl = "https://www.dailymotion.com/embed/video/" + videoId; + return this._sanitizer.bypassSecurityTrustResourceUrl(videoUrl); + } + + /* safeUrl(videoUrl: string): SafeResourceUrl { if(videoUrl.includes("youtu")) videoUrl = this.youtubeSafeUrl(videoUrl); @@ -42,4 +51,6 @@ export class VideoUrlService const n = "https://www.dailymotion.com/".length; return videoUrl.slice(0, n) + "embed/" + videoUrl.slice(n); } + */ + } diff --git a/src/app/user/watching/page-watching-video/page-watching-video.component.html b/src/app/user/watching/page-watching-video/page-watching-video.component.html new file mode 100644 index 0000000..2135644 --- /dev/null +++ b/src/app/user/watching/page-watching-video/page-watching-video.component.html @@ -0,0 +1,219 @@ + + + +
+
+ + +
+ +
+ + + + +
+
+
+ + +
+
+   + +
+
+ + +
+
+ +   + + image + +   + +
+
+ +
+
+
+ + + + +
+ + +
+ + + +

+ +
+
+ + + + + + + +
+ + +
+ +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + + + + +
+ + +
+ +
+ + +
+
+
+ + +
+
+
+ +
+ + + + + + + + + + +
+ + +
+ +
+ + +
+ +
+ +
+ + + +
+ + +
+ ytb + dlm +
  {{video.title}}
+
+ + +
+ +
+ + +
+ Vues: + {{video.views | number: '1.0-0'}} +
+ + +
+ Date de publication: + {{ video.publishedAt | date:'dd/LL/YYYY à HH:mm:ss' }} +
+ + +
+
+ Description + expand_more + expand_less +
+
+ {{video.description}} +
+
+ +
+ + + + + + + + + +
+ + +
+ {{playlist.name}} +
+ + + +
+
+
+
+ + +
+
+ {{video0.title}} +
+
+
+
+ + + +
+
a
+
+ +
+ diff --git a/src/app/user/watching/page-watching-video/page-watching-video.component.scss b/src/app/user/watching/page-watching-video/page-watching-video.component.scss new file mode 100644 index 0000000..823e9cb --- /dev/null +++ b/src/app/user/watching/page-watching-video/page-watching-video.component.scss @@ -0,0 +1,98 @@ +.lightTheme { + color: black; + border-color: black; +} +.darkTheme { + color: white; + border-color: white; +} +.myContainer { + text-align: center; + max-width: 100vw; + height: 100vh; + overflow-x: hidden; + overflow-y: scroll; +} + +//-------------------------------------------------------------------------------------------- + +.inputSearchBar { + width: 50%; + font-size: large; +} +.btnRechercher { + border: solid black 1px; + border-radius: 5px; + font-size: large; +} + +//-------------------------------------------------------------------------------------------- +// --- Playlist --- + +.playlistContainer { + border: solid 1px black; + width: 98%; +} + +.topBorder { + margin: 0px 0px 0px 0px; + background-color: #dcdcdc; + text-align: left; + padding: 5px 0px 5px 5px; + border-bottom: solid 1px black; +} + +.listVideoContainer { + height: 70vh; + background-color: white; + overflow-y: scroll; +} + +.videoCell { + margin: 0px 0px 0px 0px; + padding: 10px 0px 10px 10px; + border-bottom: solid 1px black; +} + +// ---- + +.imgsContainer { + position: relative; + width: 13vw; + height: 10vh; + float: left; +} + +.imgVideo { + border: solid 1px black; + width: 13vw; + height: 10vh; + padding: 0px 0px 0px 0px; +} + +.imgPlay { + position: absolute; + margin-left: 6vw; + width: 2vw; + margin-top: 3vh; + height: 4vh; + padding: 0px 0px 0px 0px; +} + +.titleContainer { + display: table-cell; + margin-left: 13vw; + height: 10vh; + padding-left: 2px; + vertical-align: middle; +} + +// ---- + +.bottomBorder { + margin: 0px 0px 0px 0px; + background-color: #dcdcdc; + border-top: solid 1px black; + border-bottom: solid 1px black; + font-size: large; +} diff --git a/src/app/user/watching/page-watching-video/page-watching-video.component.spec.ts b/src/app/user/watching/page-watching-video/page-watching-video.component.spec.ts new file mode 100644 index 0000000..6790456 --- /dev/null +++ b/src/app/user/watching/page-watching-video/page-watching-video.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageWatchingVideoComponent } from './page-watching-video.component'; + +describe('PageWatchingVideoComponent', () => { + let component: PageWatchingVideoComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PageWatchingVideoComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PageWatchingVideoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/user/watching/page-watching-video/page-watching-video.component.ts b/src/app/user/watching/page-watching-video/page-watching-video.component.ts new file mode 100644 index 0000000..7dd6b24 --- /dev/null +++ b/src/app/user/watching/page-watching-video/page-watching-video.component.ts @@ -0,0 +1,112 @@ +import { Component, OnInit } from '@angular/core'; +import {VideoAll} from "../../../utils/interfaces/video"; +import {Advert} from "../../../utils/interfaces/advert"; +import {MessageService} from "../../../utils/services/message/message.service"; +import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service"; +import {FictitiousAdvertsService} from "../../../utils/services/fictitiousDatas/fictitiousAdverts/fictitious-adverts.service"; +import {ThemeService} from "../../../utils/services/theme/theme.service"; +import {ActivatedRoute, Router} from "@angular/router"; +import {VideoUrlService} from "../../utils/services/videoUrl/video-url.service"; +import {AddVideoToPlaylistsService} from "../../utils/services/addVideoToPlaylists/add-video-to-playlists.service"; +import {PlaylistDB} from "../../../utils/interfaces/playlist"; + + + +let TAB_PLATEFORM = [ + { name: "youtube", isSelected: false }, + { name: "dailymotion", isSelected: false } +]; + + + +@Component({ + selector: 'app-page-watching-video', + templateUrl: './page-watching-video.component.html', + styleUrls: ['./page-watching-video.component.scss'] +}) +export class PageWatchingVideoComponent implements OnInit +{ + tabPlateform = TAB_PLATEFORM; + video: VideoAll; + search: string = ""; + ad1: Advert; + ad2: Advert; + from: string = ""; + + playlist: PlaylistDB; + videosInPlaylist: VideoAll[] = []; + + hiddenDescription: boolean = true; + iframeStyle: string = ""; + containerStyle: string = ""; + + + constructor( private messageService: MessageService, + private fictitiousVideosService: FictitiousVideosService, + private fictitiousAdvertsService: FictitiousAdvertsService, + public themeService: ThemeService, + private activatedRoute: ActivatedRoute, + private router: Router, + public videoUrlService: VideoUrlService, + private addVideoToPlaylistsService: AddVideoToPlaylistsService ) { } + + + ngOnInit(): void + { + // --- FAUX CODE --- + const videoId = this.activatedRoute.snapshot.paramMap.get('videoId'); + this.video = this.fictitiousVideosService.getVideoByVideoId(videoId); + this.ad1 = this.fictitiousAdvertsService.getAdvert(); + this.ad2 = this.fictitiousAdvertsService.getAdvert(); + + if(this.router.url.includes("fromSearch")) this.from = "search" ; + else if(this.router.url.includes("fromHistory")) this.from = "history"; + else if(this.router.url.includes("fromMyPlaylists")) + { + this.from = "myPlaylists"; + const _idPlaylist = this.activatedRoute.snapshot.paramMap.get('_idPlaylist'); + this.playlist = this.fictitiousVideosService.getPlaylistBy_id(_idPlaylist); + const allVideo = this.fictitiousVideosService.getAllVideoAll(); + this.videosInPlaylist = []; + for(let _idVideo of this.playlist.videoIds) + { + const video = allVideo.find(video => video._id === _idVideo); + this.videosInPlaylist.push(video); + } + } + + if(this.from === 'search' || this.from === 'history') + { + this.containerStyle = "margin: 0 auto; width: 64vw;" + this.iframeStyle = "width: 64vw; height: 60vh;" ; + } + else { + this.containerStyle = "margin: 0 auto; width: 48vw;" + this.iframeStyle = "width: 48vw; height: 45vh;" ; + } + + // --- VRAI CODE --- + // ... + } + + + onSearch() + { + + } + + + onAdd(): void + { + this.addVideoToPlaylistsService.run(this.video); + } + + + onRetour(): void + { + if(this.from === 'search') this.router.navigateByUrl("/user/search"); + else if(this.from === 'myPlaylists') this.router.navigateByUrl("/user/myPlaylists"); + else if(this.from === 'history') this.router.navigateByUrl("/user/history"); + } + +} diff --git a/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.html b/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.html new file mode 100644 index 0000000..21ef2f1 --- /dev/null +++ b/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.html @@ -0,0 +1 @@ +

rectangle-watching-video works!

diff --git a/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.scss b/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.spec.ts b/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.spec.ts new file mode 100644 index 0000000..ce50bfb --- /dev/null +++ b/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RectangleWatchingVideoComponent } from './rectangle-watching-video.component'; + +describe('RectangleWatchingVideoComponent', () => { + let component: RectangleWatchingVideoComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RectangleWatchingVideoComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RectangleWatchingVideoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.ts b/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.ts new file mode 100644 index 0000000..dae9dab --- /dev/null +++ b/src/app/user/watching/rectangle-watching-video/rectangle-watching-video.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-rectangle-watching-video', + templateUrl: './rectangle-watching-video.component.html', + styleUrls: ['./rectangle-watching-video.component.scss'] +}) +export class RectangleWatchingVideoComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts b/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts index c783fb3..119e358 100644 --- a/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts +++ b/src/app/utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service.ts @@ -8,7 +8,8 @@ import {FictitiousUtilsService} from "../fictitiousUtils/fictitious-utils.servic const TAB_VIDEO: VideoAll[] = [ { _id: "Mowgli", - videoId: "https://www.youtube.com/watch?v=medPORJ8KO0", + //videoId: "https://www.youtube.com/watch?v=medPORJ8KO0", + videoId: "medPORJ8KO0", userId: "userId", source: "youtube", tags: [ "rap", "musique" ], @@ -24,7 +25,8 @@ const TAB_VIDEO: VideoAll[] = [ }, { _id: "Mexico", - videoId: "https://www.youtube.com/watch?v=LZx6oeNeoWM", + //videoId: "https://www.youtube.com/watch?v=LZx6oeNeoWM", + videoId: "LZx6oeNeoWM", userId: "userId", source: "youtube", tags: [ "rap", "musique" ], @@ -40,7 +42,8 @@ const TAB_VIDEO: VideoAll[] = [ }, { _id: "Luz de luna", - videoId: "https://www.youtube.com/watch?v=fGoPhSV2Jic", + //videoId: "https://www.youtube.com/watch?v=fGoPhSV2Jic", + videoId: "fGoPhSV2Jic", userId: "userId", source: "youtube", tags: [ "rap", "musique" ], @@ -56,7 +59,8 @@ const TAB_VIDEO: VideoAll[] = [ }, { _id: "Blanka", - videoId: "https://www.youtube.com/watch?v=u8bHjdljyLw", + //videoId: "https://www.youtube.com/watch?v=u8bHjdljyLw", + videoId: "u8bHjdljyLw", userId: "userId", source: "youtube", tags: [ "rap", "musique" ], @@ -72,7 +76,8 @@ const TAB_VIDEO: VideoAll[] = [ }, { _id: "Mowgli 2", - videoId: "https://www.dailymotion.com/video/x7ahxdn", + //videoId: "https://www.dailymotion.com/video/x7ahxdn", + videoId: "x7ahxdn", userId: "userId", source: "dailymotion", tags: [ "rap", "musique" ], @@ -88,7 +93,8 @@ const TAB_VIDEO: VideoAll[] = [ }, { _id: "Etre humain", - videoId: "https://www.youtube.com/watch?v=gfVo39B92Ow", + //videoId: "https://www.youtube.com/watch?v=gfVo39B92Ow", + videoId: "gfVo39B92Ow", userId: "userId", source: "youtube", tags: [ "rap", "musique" ], @@ -104,7 +110,8 @@ const TAB_VIDEO: VideoAll[] = [ }, { _id: "Humanoide", - videoId: "https://www.youtube.com/watch?v=MiyIg__WNOw", + //videoId: "https://www.youtube.com/watch?v=MiyIg__WNOw", + videoId: "MiyIg__WNOw", userId: "userId", source: "youtube", tags: [ "rap", "musique" ], @@ -120,7 +127,8 @@ const TAB_VIDEO: VideoAll[] = [ }, { _id: "Dernier soupir", - videoId: "https://youtu.be/0GqjIF-4QQM?list=PLqeKQSn3LuAmpF-uIu39RIQRQkUzVol5l", + //videoId: "https://youtu.be/0GqjIF-4QQM?list=PLqeKQSn3LuAmpF-uIu39RIQRQkUzVol5l", + videoId: "0GqjIF-4QQM", userId: "userId", source: "youtube", tags: [ "rap", "musique" ], @@ -136,9 +144,10 @@ const TAB_VIDEO: VideoAll[] = [ }, { _id: "Les prélis", - videoId: "https://www.dailymotion.com/video/x4trtkd", + //videoId: "https://www.dailymotion.com/video/x4trtkd", + videoId: "x4trtkd", userId: "userId", - source: "youtube", + source: "dailymotion", tags: [ "rap", "musique" ], watchedDates: [new Date()], createdAt: new Date(), @@ -147,12 +156,13 @@ const TAB_VIDEO: VideoAll[] = [ title: "Columbine - Les prélis", views: 999999, publishedAt: new Date(), - imageUrl: "https://i.ytimg.com/an_webp/LfFI3bzMLU0/mqdefault_6s.webp?du=3000&sqp=CKq33owG&rs=AOn4CLDZmaPGWwcuo9yUWJ-xOzA69r2Qrw", + imageUrl: "https://s2.dmcdn.net/v/HPPjj1NtysAaAttYk/x240", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. ", }, { _id: "Pierre feuille ciseau", - videoId: "https://www.dailymotion.com/video/x6agl6i", + //videoId: "https://www.dailymotion.com/video/x6agl6i", + videoId: "x6agl6i", userId: "userId", source: "dailymotion", tags: [ "rap", "musique" ], @@ -183,7 +193,12 @@ export class FictitiousVideosService { const index = Math.floor(Math.random() * TAB_VIDEO.length); return TAB_VIDEO[index]; - //return Object.assign({}, TAB_VIDEO[index]); + } + + + getVideoByVideoId(videoId: string): VideoAll + { + return TAB_VIDEO.find(video => video.videoId === videoId); } @@ -195,7 +210,14 @@ export class FictitiousVideosService } - getTabPlaylistDB(nbPlaylist: number, nbVideoMax: number): PlaylistDB[] + getAllVideoAll(): VideoAll[] + { + return TAB_VIDEO; + } + + //---------------------------------------------------------------------------------------------------------------- + + getRandomTabPlaylistDB(nbPlaylist: number, nbVideoMax: number): PlaylistDB[] { let tabPlaylist: PlaylistDB[] = []; @@ -218,9 +240,33 @@ export class FictitiousVideosService } - getAllVideoAll(): VideoAll[] + getNoRandomTabPlaylistDB(nbPlaylist: number): PlaylistDB[] { - return TAB_VIDEO; + let tabPlaylist: PlaylistDB[] = []; + + for(let i = 0; i < nbPlaylist; i++) + { + const videoIds = []; + for(let j=0 ; j