yvachot/PolyNotFound
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

amelioration du style de la partie user

Browse source
This commit is contained in:
MiharyR 2021-11-21 12:56:11 +01:00
parent 3dce1f6865
commit 7c24996e73
18 changed files with 137 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/app.module.ts
View file

@ -27,7 +27,7 @@ import {MatGridListModule} from "@angular/material/grid-list";
import { PageMyPlaylistsComponent } from './user/myPlaylists/page-my-playlists/page-my-playlists.component';
import { PlaylistListComponent } from './user/myPlaylists/playlist-list/playlist-list.component';
import {VideoListComponent} from "./user/myPlaylists/video-list/video-list.component";
import { PopupCreatePlaylistComponent } from './user/utils/components/popup-create-playlist/popup-create-playlist.component';
import { PopupCreatePlaylistComponent } from './user/myPlaylists/popup-create-playlist/popup-create-playlist.component';
import { PageHistoryUserComponent } from './user/history/page-history-user/page-history-user.component';
import {MatTableModule} from '@angular/material/table';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

2
src/app/user/history/page-history-user/page-history-user.component.html
View file

@ -7,7 +7,7 @@
<!-- ---------------------------------------------------------------------------------- -->
<div style="text-align: center">
<input (keyup)="applyFilter($event)" placeholder="Filtre">
<input (keyup)="applyFilter($event)" placeholder="filtre...">
</div>
<br>

2
src/app/user/history/page-history-user/page-history-user.component.ts
View file

@ -3,7 +3,6 @@ import {ThemeService} from "../../../utils/services/theme/theme.service";
import {MessageService} from "../../../utils/services/message/message.service";
import {MatTableDataSource} from "@angular/material/table";
import {MatSort} from "@angular/material/sort";
import {VideoUrlService} from "../../utils/services/videoUrl/video-url.service";
import {UserHistoryService} from "../../utils/services/userHistory/userHistory.service";
import {MatPaginator} from "@angular/material/paginator";
import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
@ -28,7 +27,6 @@ export class PageHistoryUserComponent implements AfterViewInit
constructor( public themeService: ThemeService,
private messageService: MessageService,
private fictitiousVideosService: FictitiousVideosService,
public videoUrlService: VideoUrlService,
private userHistoryService: UserHistoryService,
private router: Router ) { }

10
src/app/user/myPlaylists/playlist-list/playlist-list.component.scss
View file

@ -5,6 +5,8 @@
margin: 1vh 0vh 3vh 0vh;
padding: 0px;
border: solid 2px black;
border-radius: 10px;
box-shadow: 10px 5px 5px black;
}
// SearchBar -----------------------------------------------------------
@ -16,16 +18,16 @@
background-color: #dcdcdc;
font-size: large;
border-bottom: solid 1px black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.inputSearchBar {
width: 70%;
}
.btnRechercher {
border: solid black 1px;
border-radius: 5px;
}
// Liste des playlists -------------------------------------------------
.playlistListContainer {
@ -62,6 +64,8 @@
background-color: #dcdcdc;
font-size: large;
border-top: solid 1px black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.btnCreerPlaylist {

6
src/app/user/myPlaylists/playlist-list/playlist-list.component.ts
View file

@ -4,7 +4,7 @@ import {PlaylistDB} from "../../../utils/interfaces/playlist";
import {MessageService} from "../../../utils/services/message/message.service";
import {MatDialog} from "@angular/material/dialog";
import {MatSnackBar} from "@angular/material/snack-bar";
import {PopupCreatePlaylistComponent} from "../../utils/components/popup-create-playlist/popup-create-playlist.component";
import {PopupCreatePlaylistComponent} from "../popup-create-playlist/popup-create-playlist.component";
import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
@ -49,7 +49,7 @@ export class PlaylistListComponent implements OnInit
onCreatePlaylist(): void
{
const config = { width: '30%', data: this.tabPlaylist };
const config = { data: this.tabPlaylist };
this.dialog
.open(PopupCreatePlaylistComponent, config )
.afterClosed()
@ -57,7 +57,7 @@ export class PlaylistListComponent implements OnInit
const config = { duration: 1000, panelClass: "custom-class" };
if((playlist === null) || (playlist === undefined)) {
this.snackBar.open("Opération annulée ❌", "", config);
this.snackBar.open("Opération annulée", "", config);
}
else {
this.allPlaylists.push(playlist);

0
src/app/user/utils/components/popup-create-playlist/popup-create-playlist.component.html → src/app/user/myPlaylists/popup-create-playlist/popup-create-playlist.component.html
View file

0
src/app/user/utils/components/popup-create-playlist/popup-create-playlist.component.scss → src/app/user/myPlaylists/popup-create-playlist/popup-create-playlist.component.scss
View file

0
src/app/user/utils/components/popup-create-playlist/popup-create-playlist.component.spec.ts → src/app/user/myPlaylists/popup-create-playlist/popup-create-playlist.component.spec.ts
View file

4
src/app/user/utils/components/popup-create-playlist/popup-create-playlist.component.ts → src/app/user/myPlaylists/popup-create-playlist/popup-create-playlist.component.ts
View file

@ -1,7 +1,7 @@
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {MessageService} from "../../../../utils/services/message/message.service";
import {PlaylistDB} from "../../../../utils/interfaces/playlist";
import {MessageService} from "../../../utils/services/message/message.service";
import {PlaylistDB} from "../../../utils/interfaces/playlist";

6
src/app/user/myPlaylists/video-list/video-list.component.scss
View file

@ -5,6 +5,8 @@
margin: 1vh 0vh 3vh 0vh;
padding: 0px;
border: solid 2px black;
border-radius: 10px;
box-shadow: 10px 5px 5px black;
}
// TopBorder --------------------------------------------------------
@ -15,6 +17,8 @@
text-align: left;
padding: 5px 0px 5px 5px;
border-bottom: solid 1px black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.spanPlayListTitle {
@ -67,4 +71,6 @@
border-top: solid 1px black;
border-bottom: solid 1px black;
font-size: large;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

55
src/app/user/search/page-search/page-search.component.html
View file

@ -10,34 +10,39 @@
<!-- --------------------------------------------------------------------- -->
<!-- [Search bar] + [Site de streaming] -->
<div class="row">
<div class="col-2"></div>
<div class="col-8" style="margin-bottom: 10px">
<!-- [Search bar] + [Sites de streaming] -->
<div style="width: 100%; margin: 0 auto;">
<!-- Search bar -->
<div class="row" style="margin-bottom: 10px">
<div>
<input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search"> &nbsp;
<button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
</div>
<!-- Search bar -->
<div class="input-group" style="width: 100%; margin: 0 auto;">
<div class="form-outline" style="width: 100%; margin: 0 auto;">
<input type="search" placeholder="recherche..." class="inputSearchBar"/>
<button mat-icon-button (click)="onSearch()">
<mat-icon>search</mat-icon>
</button>
</div>
<!-- Site de streaming -->
<div class="row" style="margin-bottom: 10px">
<div>
<span *ngFor="let plateforme of tabPlateform">
&nbsp;
<input type="checkbox" [id]="plateforme.name" [name]="plateforme.name" style="margin-left: 5px" [(ngModel)]="plateforme.isSelected">
<img [src]="'/assets/logo_plateforms/'+plateforme.name+'.png'" alt="image" width="25px" height="25px" style="margin-left: 5px">
<label [for]="plateforme.name" style="margin-left: 5px"> {{plateforme.name}}</label>
&nbsp;
</span>
</div>
</div>
</div>
<div class="col-2"></div>
<!-- Sites de streaming -->
<div style="margin-bottom: 20px">
<!-- youtube -->
<span>
&nbsp;
<mat-checkbox id="youtube" name="youtube" style="margin-left: 5px" [(ngModel)]="tabPlateform[0].isSelected"></mat-checkbox>
<img src="/assets/logo_plateforms/youtube.png" alt="logo" width="30px" height="25px" style="margin-left: 5px">
<label for="youtube" style="margin-left: 5px">youtube</label>
&nbsp;
</span>
<!-- dailymotion -->
<span>
&nbsp;
<mat-checkbox id="dailymotion" name="dailymotion" style="margin-left: 5px" [(ngModel)]="tabPlateform[1].isSelected"></mat-checkbox>
<img src="/assets/logo_plateforms/dailymotion.png" alt="logo" width="25px" height="25px" style="margin-left: 5px">
<label for="dailymotion" style="margin-left: 5px">dailymotion</label>
&nbsp;
</span>
</div>
</div>

28
src/app/user/search/page-search/page-search.component.scss
View file

@ -17,13 +17,10 @@
//--------------------------------------------------------------------------------------------
.inputSearchBar {
width: 50%;
width: 40%;
font-size: large;
}
.btnRechercher {
border: solid black 1px;
border-bottom: 10px;
border-radius: 5px;
font-size: large;
}
//--------------------------------------------------------------------------------------------
@ -70,3 +67,24 @@
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
// -------------------------------------------------------------------------
// aura
::ng-deep .mat-checkbox-ripple .mat-ripple-element {
background-color: grey !important;
}
// contenu coche
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: black !important;
}
// indeterminate
::ng-deep .mat-checkbox .mat-checkbox-frame {
border: solid 1px black !important;
background-color: white !important;
}

2
src/app/user/utils/services/addVideoToPlaylists/add-video-to-playlists.service.ts
View file

@ -77,7 +77,7 @@ export class AddVideoToPlaylistsService
case "annulation":
case null:
case undefined:
message = "Annulation de l'opération" ;
message = "Opération annulée" ;
break;
}
const config = { duration: 1000, panelClass: "custom-class" };

16
src/app/user/utils/services/videoUrl/video-url.service.spec.ts
View file

@ -1,16 +0,0 @@
import { TestBed } from '@angular/core/testing';
import { VideoUrlService } from './video-url.service';
describe('VideoUrlService', () => {
let service: VideoUrlService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(VideoUrlService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

56
src/app/user/utils/services/videoUrl/video-url.service.ts
View file

@ -1,56 +0,0 @@
import { Injectable } from '@angular/core';
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
@Injectable({
providedIn: 'root'
})
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);
if(videoUrl.includes("dailymotion")) videoUrl = this.daylimotionSafeUrl(videoUrl);
return this._sanitizer.bypassSecurityTrustResourceUrl(videoUrl);
}
youtubeSafeUrl(videoUrl: string): string
{
if(videoUrl.includes("youtu.be"))
{
//console.log("de la forme: https://youtu.be/blablabla");
const tab = videoUrl.split("youtu.be/");
videoUrl = tab[0] + "www.youtube.com/embed/" + tab[1];
}
else if(videoUrl.includes("youtube.com/watch?v="))
{
//console.log("de la forme: https://www.youtube.com/watch?v=blablabla");
const tab = videoUrl.split("youtube.com/watch?v=");
videoUrl = tab[0] + "youtube.com/embed/" + tab[1];
}
return videoUrl;
}
daylimotionSafeUrl(videoUrl: string): string
{
//console.log("de la forme: https://www.dailymotion.com/video/blablabla");
const n = "https://www.dailymotion.com/".length;
return videoUrl.slice(0, n) + "embed/" + videoUrl.slice(n);
}
*/
}

57
src/app/user/watching/page-watching-video/page-watching-video.component.html
View file

@ -11,34 +11,39 @@
<!-- --------------------------------------------------------------------- -->
<!-- [Search bar] + [Site de streaming] -->
<div class="row">
<div class="col-2"></div>
<div class="col-8" style="margin-bottom: 10px">
<!-- [Search bar] + [Sites de streaming] -->
<div style="width: 100%; margin: 0 auto;">
<!-- Search bar -->
<div class="row" style="margin-bottom: 10px">
<div>
<input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search"> &nbsp;
<button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
</div>
<!-- Search bar -->
<div class="input-group" style="width: 100%; margin: 0 auto;">
<div class="form-outline" style="width: 100%; margin: 0 auto;">
<input type="search" placeholder="recherche..." class="inputSearchBar"/>
<button mat-icon-button (click)="onSearch()">
<mat-icon>search</mat-icon>
</button>
</div>
<!-- Site de streaming -->
<div class="row" style="margin-bottom: 10px">
<div>
<span *ngFor="let plateforme of tabPlateform">
&nbsp;
<input type="checkbox" [id]="plateforme.name" [name]="plateforme.name" style="margin-left: 5px" [(ngModel)]="plateforme.isSelected">
<img [src]="'/assets/logo_plateforms/'+plateforme.name+'.png'" alt="image" width="25px" height="25px" style="margin-left: 5px">
<label [for]="plateforme.name" style="margin-left: 5px"> {{plateforme.name}}</label>
&nbsp;
</span>
</div>
</div>
</div>
<div class="col-2"></div>
<!-- Sites de streaming -->
<div style="margin-bottom: 20px">
<!-- youtube -->
<span>
&nbsp;
<mat-checkbox id="youtube" name="youtube" style="margin-left: 5px" [(ngModel)]="tabPlateform[0].isSelected"></mat-checkbox>
<img src="/assets/logo_plateforms/youtube.png" alt="logo" width="30px" height="25px" style="margin-left: 5px">
<label for="youtube" style="margin-left: 5px">youtube</label>
&nbsp;
</span>
<!-- dailymotion -->
<span>
&nbsp;
<mat-checkbox id="dailymotion" name="dailymotion" style="margin-left: 5px" [(ngModel)]="tabPlateform[1].isSelected"></mat-checkbox>
<img src="/assets/logo_plateforms/dailymotion.png" alt="logo" width="25px" height="25px" style="margin-left: 5px">
<label for="dailymotion" style="margin-left: 5px">dailymotion</label>
&nbsp;
</span>
</div>
</div>
<!-- --------------------------------------------------------------------- -->
@ -147,7 +152,7 @@
<!-- video -->
<div style="width: 100%">
<iframe [src]="videoUrlService.safeUrl(video.videoId,video.source)"
<iframe [src]="safeUrl(video.videoId,video.source)"
[style]="iframeStyle"
allowfullscreen></iframe>
</div>

27
src/app/user/watching/page-watching-video/page-watching-video.component.scss
View file

@ -17,13 +17,10 @@
//--------------------------------------------------------------------------------------------
.inputSearchBar {
width: 50%;
width: 40%;
font-size: large;
}
.btnRechercher {
border: solid black 1px;
border-bottom: 10px;
border-radius: 5px;
font-size: large;
}
//--------------------------------------------------------------------------------------------
@ -96,3 +93,23 @@
border-bottom: solid 1px black;
font-size: large;
}
// -------------------------------------------------------------------------
// aura
::ng-deep .mat-checkbox-ripple .mat-ripple-element {
background-color: grey !important;
}
// contenu coche
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: black !important;
}
// indeterminate
::ng-deep .mat-checkbox .mat-checkbox-frame {
border: solid 1px black !important;
background-color: white !important;
}

12
src/app/user/watching/page-watching-video/page-watching-video.component.ts
View file

@ -6,9 +6,9 @@ import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/f
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";
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
@ -47,7 +47,7 @@ export class PageWatchingVideoComponent implements OnInit
public themeService: ThemeService,
private activatedRoute: ActivatedRoute,
private router: Router,
public videoUrlService: VideoUrlService,
private _sanitizer: DomSanitizer,
private addVideoToPlaylistsService: AddVideoToPlaylistsService ) { }
@ -109,4 +109,12 @@ export class PageWatchingVideoComponent implements OnInit
else if(this.from === 'history') this.router.navigateByUrl("/user/history");
}
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);
}
}