interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Client: beautiful watch page

This commit is contained in:
Chocobozzz 2017-04-21 18:26:09 +02:00
parent ea9f487b40
commit 897ec54d76
21 changed files with 471 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
client/src/app/+admin/friends/friend-add/friend-add.component.html
View File

@ -1,30 +1,35 @@
<h3>Make friends</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Make friends</h3>
<form (ngSubmit)="makeFriends()" [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div class="form-group" *ngFor="let host of hosts; let id = index; trackBy:customTrackBy">
<label for="username">Host</label>
<div class="input-group"> <form (ngSubmit)="makeFriends()" [formGroup]="form">
<input <div class="form-group" *ngFor="let host of hosts; let id = index; trackBy:customTrackBy">
type="text" class="form-control" placeholder="domain.tld" <label for="username">Host</label>
[id]="'host-' + id" [formControlName]="'host-' + id"
/>
<span class="input-group-btn">
<button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
<button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
</span>
</div>
<div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning"> <div class="input-group">
It should be a valid host. <input
</div> type="text" class="form-control" placeholder="domain.tld"
[id]="'host-' + id" [formControlName]="'host-' + id"
/>
<span class="input-group-btn">
<button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
<button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
</span>
</div>
<div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning">
It should be a valid host.
</div>
</div>
<div *ngIf="canMakeFriends() === false" class="alert alert-warning">
It seems that you are not on a HTTPS pod. Your webserver need to have TLS activated in order to make friends.
</div>
<input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()">
</form>
</div> </div>
</div>
<div *ngIf="canMakeFriends() === false" class="alert alert-warning">
It seems that you are not on a HTTPS pod. Your webserver need to have TLS activated in order to make friends.
</div>
<input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()">
</form>

20
client/src/app/+admin/friends/friend-list/friend-list.component.html
View File

@ -1,11 +1,15 @@
<h3>Friends list</h3> <div class="row">
<div class="content-padding">
<h3>Friends list</h3>
<ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table> <ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table>
<a *ngIf="hasFriends()" class="btn btn-danger pull-left" (click)="quitFriends()"> <a *ngIf="hasFriends()" class="btn btn-danger pull-left" (click)="quitFriends()">
Quit friends Quit friends
</a> </a>
<a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']"> <a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
Make friends Make friends
</a> </a>
</div>
</div>

59
client/src/app/+admin/requests/request-stats/request-stats.component.html
View File

@ -1,36 +1,41 @@
<h3>Requests stats</h3> <div class="row">
<div class="content-padding">
<div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12"> <h3>Requests stats</h3>
<div class="panel panel-default" *ngIf="stats[requestSchedulerName] !== null">
<div class="panel-heading">{{ statsTitles[requestSchedulerName] }}</div>
<div class="panel-body"> <div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12">
<div class="requests-general"> <div class="panel panel-default" *ngIf="stats[requestSchedulerName] !== null">
<div> <div class="panel-heading">{{ statsTitles[requestSchedulerName] }}</div>
<span class="label-description">Remaining requests:</span>
{{ stats[requestSchedulerName].totalRequests }}
</div>
<div> <div class="panel-body">
<span class="label-description">Interval seconds between requests:</span> <div class="requests-general">
{{ stats[requestSchedulerName].secondsInterval }} <div>
</div> <span class="label-description">Remaining requests:</span>
{{ stats[requestSchedulerName].totalRequests }}
</div>
<div> <div>
<span class="label-description">Remaining time before the scheduled request:</span> <span class="label-description">Interval seconds between requests:</span>
{{ stats[requestSchedulerName].remainingSeconds }} {{ stats[requestSchedulerName].secondsInterval }}
</div> </div>
</div>
<div class="requests-limit"> <div>
<div> <span class="label-description">Remaining time before the scheduled request:</span>
<span class="label-description">Maximum number of different pods for a scheduled request:</span> {{ stats[requestSchedulerName].remainingSeconds }}
{{ stats[requestSchedulerName].requestsLimitPods }} </div>
</div> </div>
<div> <div class="requests-limit">
<span class="label-description">Maximum number of requests per pod for a scheduled request:</span> <div>
{{ stats[requestSchedulerName].requestsLimitPerPod }} <span class="label-description">Maximum number of different pods for a scheduled request:</span>
{{ stats[requestSchedulerName].requestsLimitPods }}
</div>
<div>
<span class="label-description">Maximum number of requests per pod for a scheduled request:</span>
{{ stats[requestSchedulerName].requestsLimitPerPod }}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

79
client/src/app/+admin/users/user-add/user-add.component.html
View File

@ -1,40 +1,45 @@
<h3>Add user</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Add user</h3>
<form role="form" (ngSubmit)="addUser()" [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div class="form-group">
<label for="username">Username</label> <form role="form" (ngSubmit)="addUser()" [formGroup]="form">
<input <div class="form-group">
type="text" class="form-control" id="username" placeholder="Username" <label for="username">Username</label>
formControlName="username" <input
> type="text" class="form-control" id="username" placeholder="Username"
<div *ngIf="formErrors.username" class="alert alert-danger"> formControlName="username"
{{ formErrors.username }} >
</div> <div *ngIf="formErrors.username" class="alert alert-danger">
{{ formErrors.username }}
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="text" class="form-control" id="email" placeholder="Email"
formControlName="email"
>
<div *ngIf="formErrors.email" class="alert alert-danger">
{{ formErrors.email }}
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password" class="form-control" id="password" placeholder="Password"
formControlName="password"
>
<div *ngIf="formErrors.password" class="alert alert-danger">
{{ formErrors.password }}
</div>
</div>
<input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid">
</form>
</div> </div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="text" class="form-control" id="email" placeholder="Email"
formControlName="email"
>
<div *ngIf="formErrors.email" class="alert alert-danger">
{{ formErrors.email }}
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password" class="form-control" id="password" placeholder="Password"
formControlName="password"
>
<div *ngIf="formErrors.password" class="alert alert-danger">
{{ formErrors.password }}
</div>
</div>
<input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid">
</form>

23
client/src/app/+admin/users/user-list/user-list.component.html
View File

@ -1,11 +1,16 @@
<h3>Users list</h3> <div class="row">
<div class="content-padding">
<ng2-smart-table <h3>Users list</h3>
[settings]="tableSettings" [source]="usersSource"
(delete)="removeUser($event)"
></ng2-smart-table>
<a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']"> <ng2-smart-table
<span class="glyphicon glyphicon-plus"></span> [settings]="tableSettings" [source]="usersSource"
Add user (delete)="removeUser($event)"
</a> ></ng2-smart-table>
<a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']">
<span class="glyphicon glyphicon-plus"></span>
Add user
</a>
</div>
</div>

14
client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
View File

@ -1,5 +1,11 @@
<h3>Video abuses list</h3> <div class="row">
<div class="content-padding">
<ng2-smart-table <h3>Video abuses list</h3>
[settings]="tableSettings" [source]="videoAbusesSource"
></ng2-smart-table> <ng2-smart-table
[settings]="tableSettings" [source]="videoAbusesSource"
></ng2-smart-table>
</div>
</div>

38
client/src/app/account/account.component.html
View File

@ -1,21 +1,25 @@
<h3>Account</h3> <div class="row">
<div class="content-padding">
<h3>Account</h3>
<div class="col-md-6 col-sm-12"> <div class="col-md-6 col-sm-12">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Change password</div> <div class="panel-heading">Change password</div>
<div class="panel-body"> <div class="panel-body">
<my-account-change-password></my-account-change-password> <my-account-change-password></my-account-change-password>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Update my informations</div>
<div class="panel-body">
<my-account-details [user]="user"></my-account-details>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div>
<div class="col-md-6 col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Update my informations</div>
<div class="panel-body">
<my-account-details [user]="user"></my-account-details>
</div>
</div>
</div>

7
client/src/app/app.component.html
View File

@ -16,15 +16,16 @@
</div> </div>
<div class="col-md-10 col-sm-9 col-xs-9 main-col"> <div class="col-md-10 col-sm-9 col-xs-9 main-col">
<div class="header"> <div class="row header">
<my-search></my-search> <!-- We need to reset col-md-* because my-search is in fixed position -->
<my-search class="col-md-10 col-sm-9 col-xs-9"></my-search>
</div> </div>
<div class="main-row"> <div class="main-row">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
<footer> <footer class="row">
PeerTube, CopyLeft 2015-2017 PeerTube, CopyLeft 2015-2017
</footer> </footer>
</div> </div>

17
client/src/app/app.component.scss
View File

@ -30,10 +30,15 @@
} }
} }
footer { my-search {
border-top: 1px solid rgba(0, 0, 0, 0.2); // Fix col-md-* padding
padding: 10px; padding: 0;
text-align: center; }
font-size: small;
margin: 30px 10px 0 10px; footer {
border-top: 1px solid $footer-border-color;
padding: 10px 0;
text-align: center;
font-size: 11px;
margin-top: 30px;
} }

57
client/src/app/login/login.component.html
View File

@ -1,29 +1,34 @@
<h3>Login</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Login</h3>
<form role="form" (ngSubmit)="login()" [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div class="form-group">
<label for="username">Username</label> <form role="form" (ngSubmit)="login()" [formGroup]="form">
<input <div class="form-group">
type="text" class="form-control" id="username" placeholder="Username" required <label for="username">Username</label>
formControlName="username" <input
> type="text" class="form-control" id="username" placeholder="Username" required
<div *ngIf="formErrors.username" class="alert alert-danger"> formControlName="username"
{{ formErrors.username }} >
</div> <div *ngIf="formErrors.username" class="alert alert-danger">
{{ formErrors.username }}
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password" class="form-control" name="password" id="password" placeholder="Password" required
formControlName="password"
>
<div *ngIf="formErrors.password" class="alert alert-danger">
{{ formErrors.password }}
</div>
</div>
<input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid">
</form>
</div> </div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password" class="form-control" name="password" id="password" placeholder="Password" required
formControlName="password"
>
<div *ngIf="formErrors.password" class="alert alert-danger">
{{ formErrors.password }}
</div>
</div>
<input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid">
</form>

70
client/src/app/signup/signup.component.html
View File

@ -1,40 +1,46 @@
<h3>Signup</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Signup</h3>
<form role="form" (ngSubmit)="signup()" [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div class="form-group">
<label for="username">Username</label> <form role="form" (ngSubmit)="signup()" [formGroup]="form">
<input <div class="form-group">
type="text" class="form-control" id="username" placeholder="Username" <label for="username">Username</label>
formControlName="username" <input
> type="text" class="form-control" id="username" placeholder="Username"
<div *ngIf="formErrors.username" class="alert alert-danger"> formControlName="username"
{{ formErrors.username }} >
<div *ngIf="formErrors.username" class="alert alert-danger">
{{ formErrors.username }}
</div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="email">Email</label> <label for="email">Email</label>
<input <input
type="text" class="form-control" id="email" placeholder="Email" type="text" class="form-control" id="email" placeholder="Email"
formControlName="email" formControlName="email"
> >
<div *ngIf="formErrors.email" class="alert alert-danger"> <div *ngIf="formErrors.email" class="alert alert-danger">
{{ formErrors.email }} {{ formErrors.email }}
</div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="password">Password</label> <label for="password">Password</label>
<input <input
type="password" class="form-control" id="password" placeholder="Password" type="password" class="form-control" id="password" placeholder="Password"
formControlName="password" formControlName="password"
> >
<div *ngIf="formErrors.password" class="alert alert-danger"> <div *ngIf="formErrors.password" class="alert alert-danger">
{{ formErrors.password }} {{ formErrors.password }}
</div>
</div> </div>
</div>
<input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid"> <input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid">
</form> </form>
</div>
</div>

227
client/src/app/videos/video-edit/video-add.component.html
View File

@ -1,114 +1,119 @@
<h3>Upload a video</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Upload a video</h3>
<form novalidate [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div class="form-group">
<label for="name">Name</label> <form novalidate [formGroup]="form">
<input <div class="form-group">
type="text" class="form-control" id="name" <label for="name">Name</label>
formControlName="name" <input
> type="text" class="form-control" id="name"
<div *ngIf="formErrors.name" class="alert alert-danger"> formControlName="name"
{{ formErrors.name }} >
</div> <div *ngIf="formErrors.name" class="alert alert-danger">
{{ formErrors.name }}
</div>
</div>
<div class="form-group">
<label for="nsfw">NSFW</label>
<input
type="checkbox" id="nsfw"
formControlName="nsfw"
>
</div>
<div class="form-group">
<label for="category">Category</label>
<select class="form-control" id="category" formControlName="category">
<option></option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
<div *ngIf="formErrors.category" class="alert alert-danger">
{{ formErrors.category }}
</div>
</div>
<div class="form-group">
<label for="licence">Licence</label>
<select class="form-control" id="licence" formControlName="licence">
<option></option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select>
<div *ngIf="formErrors.licence" class="alert alert-danger">
{{ formErrors.licence }}
</div>
</div>
<div class="form-group">
<label for="language">Language</label>
<select class="form-control" id="language" formControlName="language">
<option></option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
</select>
<div *ngIf="formErrors.language" class="alert alert-danger">
{{ formErrors.language }}
</div>
</div>
<div class="form-group">
<label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
<tag-input
[ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
formControlName="tags" maxItems="3" modelAsStrings="true"
></tag-input>
</div>
<div class="form-group">
<label for="videofile">File</label>
<div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
<span>Select the video...</span>
<input
type="file" name="videofile" id="videofile"
ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
(change)="fileChanged()"
>
</div>
</div>
<div class="file-to-upload">
<div class="file" *ngIf="uploader.queue.length > 0">
<span class="filename">{{ filename }}</span>
<span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
</div>
</div>
<div *ngIf="fileError" class="alert alert-danger">
{{ fileError }}
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea
id="description" class="form-control" placeholder="Description..."
formControlName="description"
>
</textarea>
<div *ngIf="formErrors.description" class="alert alert-danger">
{{ formErrors.description }}
</div>
</div>
<div class="progress">
<progressbar [value]="uploader.progress" max="100"></progressbar>
</div>
<div class="form-group">
<input
type="button" value="Upload" class="btn btn-default form-control"
(click)="upload()"
>
</div>
</form>
</div> </div>
</div>
<div class="form-group">
<label for="nsfw">NSFW</label>
<input
type="checkbox" id="nsfw"
formControlName="nsfw"
>
</div>
<div class="form-group">
<label for="category">Category</label>
<select class="form-control" id="category" formControlName="category">
<option></option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
<div *ngIf="formErrors.category" class="alert alert-danger">
{{ formErrors.category }}
</div>
</div>
<div class="form-group">
<label for="licence">Licence</label>
<select class="form-control" id="licence" formControlName="licence">
<option></option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select>
<div *ngIf="formErrors.licence" class="alert alert-danger">
{{ formErrors.licence }}
</div>
</div>
<div class="form-group">
<label for="language">Language</label>
<select class="form-control" id="language" formControlName="language">
<option></option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
</select>
<div *ngIf="formErrors.language" class="alert alert-danger">
{{ formErrors.language }}
</div>
</div>
<div class="form-group">
<label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
<tag-input
[ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
formControlName="tags" maxItems="3" modelAsStrings="true"
></tag-input>
</div>
<div class="form-group">
<label for="videofile">File</label>
<div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
<span>Select the video...</span>
<input
type="file" name="videofile" id="videofile"
ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
(change)="fileChanged()"
>
</div>
</div>
<div class="file-to-upload">
<div class="file" *ngIf="uploader.queue.length > 0">
<span class="filename">{{ filename }}</span>
<span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
</div>
</div>
<div *ngIf="fileError" class="alert alert-danger">
{{ fileError }}
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea
id="description" class="form-control" placeholder="Description..."
formControlName="description"
>
</textarea>
<div *ngIf="formErrors.description" class="alert alert-danger">
{{ formErrors.description }}
</div>
</div>
<div class="progress">
<progressbar [value]="uploader.progress" max="100"></progressbar>
</div>
<div class="form-group">
<input
type="button" value="Upload" class="btn btn-default form-control"
(click)="upload()"
>
</div>
</form>

147
client/src/app/videos/video-edit/video-update.component.html
View File

@ -1,87 +1,92 @@
<h3>Update {{ video?.name }}</h3> <div class="row">
<div class="content-padding">
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <h3>Update {{ video?.name }}</h3>
<form novalidate [formGroup]="form"> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div class="form-group">
<label for="name">Name</label> <form novalidate [formGroup]="form">
<input <div class="form-group">
type="text" class="form-control" id="name" <label for="name">Name</label>
formControlName="name" <input
> type="text" class="form-control" id="name"
<div *ngIf="formErrors.name" class="alert alert-danger"> formControlName="name"
{{ formErrors.name }} >
<div *ngIf="formErrors.name" class="alert alert-danger">
{{ formErrors.name }}
</div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="nsfw">NSFW</label> <label for="nsfw">NSFW</label>
<input <input
type="checkbox" id="nsfw" type="checkbox" id="nsfw"
formControlName="nsfw" formControlName="nsfw"
> >
</div>
<div class="form-group">
<label for="category">Category</label>
<select class="form-control" id="category" formControlName="category">
<option></option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
<div *ngIf="formErrors.category" class="alert alert-danger">
{{ formErrors.category }}
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="licence">Licence</label> <label for="category">Category</label>
<select class="form-control" id="licence" formControlName="licence"> <select class="form-control" id="category" formControlName="category">
<option></option> <option></option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select> </select>
<div *ngIf="formErrors.licence" class="alert alert-danger"> <div *ngIf="formErrors.category" class="alert alert-danger">
{{ formErrors.licence }} {{ formErrors.category }}
</div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="language">Language</label> <label for="licence">Licence</label>
<select class="form-control" id="language" formControlName="language"> <select class="form-control" id="licence" formControlName="licence">
<option></option> <option></option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select> </select>
<div *ngIf="formErrors.language" class="alert alert-danger"> <div *ngIf="formErrors.licence" class="alert alert-danger">
{{ formErrors.language }} {{ formErrors.licence }}
</div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span> <label for="language">Language</label>
<tag-input <select class="form-control" id="language" formControlName="language">
[ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages" <option></option>
formControlName="tags" maxItems="3" modelAsStrings="true" <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
></tag-input> </select>
</div>
<div class="form-group"> <div *ngIf="formErrors.language" class="alert alert-danger">
<label for="description">Description</label> {{ formErrors.language }}
<textarea </div>
id="description" class="form-control" placeholder="Description..."
formControlName="description"
>
</textarea>
<div *ngIf="formErrors.description" class="alert alert-danger">
{{ formErrors.description }}
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<input <label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
type="button" value="Update" class="btn btn-default form-control" <tag-input
(click)="update()" [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
> formControlName="tags" maxItems="3" modelAsStrings="true"
></tag-input>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea
id="description" class="form-control" placeholder="Description..."
formControlName="description"
>
</textarea>
<div *ngIf="formErrors.description" class="alert alert-danger">
{{ formErrors.description }}
</div>
</div>
<div class="form-group">
<input
type="button" value="Update" class="btn btn-default form-control"
(click)="update()"
>
</div>
</form>
</div> </div>
</form> </div>

21
client/src/app/videos/video-list/video-list.component.html
View File

@ -1,16 +1,19 @@
<div class="row col-md-12 videos-info"> <div class="row">
<div class="col-md-9 col-xs-5 videos-total-results"> <div class="content-padding">
<span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span> <div class="videos-info">
<div class="col-md-9 col-xs-5 videos-total-results">
<span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
<my-loader [loading]="loading | async"></my-loader> <my-loader [loading]="loading | async"></my-loader>
</div>
<my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
</div>
</div> </div>
<my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
</div> </div>
<div class="videos-miniatures"> <div class="content-padding videos-miniatures">
<div class="col-md-12 no-video" *ngIf="isThereNoVideo()">There is no video.</div> <div class="no-video" *ngIf="isThereNoVideo()">There is no video.</div>
<my-video-miniature <my-video-miniature
class="ng-animate" class="ng-animate"

7
client/src/app/videos/video-list/video-list.component.scss
View File

@ -3,18 +3,12 @@
margin-left: 0; margin-left: 0;
} }
margin-bottom: 20px;
border-bottom: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
my-video-sort {
padding-right: 0;
}
.videos-total-results { .videos-total-results {
font-size: 13px; font-size: 13px;
padding-left: 0;
} }
my-loader { my-loader {
@ -26,6 +20,7 @@
.videos-miniatures { .videos-miniatures {
min-height: 720px; min-height: 720px;
text-align: center; text-align: center;
padding-top: 0;
my-video-miniature { my-video-miniature {
text-align: left; text-align: left;

5
client/src/app/videos/video-list/video-miniature.component.html
View File

@ -25,9 +25,6 @@
</span> </span>
<a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a> <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
<span class="video-miniature-views-created-at"> <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
<span class="video-miniature-views">{{ video.views }} views</span>
<span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
</span>
</div> </div>
</div> </div>

8
client/src/app/videos/video-list/video-miniature.component.scss
View File

@ -64,7 +64,6 @@
font-weight: bold; font-weight: bold;
transition: color 0.2s; transition: color 0.2s;
font-size: 15px; font-size: 15px;
color: $video-miniature-title-color;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -88,17 +87,12 @@
} }
} }
.video-miniature-author, .video-miniature-views-created-at { .video-miniature-author, .video-miniature-created-at {
display: block; display: block;
margin-left: 1px; margin-left: 1px;
font-size: 11px; font-size: 11px;
color: $video-miniature-other-infos; color: $video-miniature-other-infos;
opacity: 0.9; opacity: 0.9;
.video-miniature-created-at::before {
content: '\002022';
margin: 0 2px 0 1px;
}
} }
.video-miniature-author { .video-miniature-author {

14
client/src/app/videos/video-watch/video-watch.component.html
View File

@ -14,14 +14,12 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <!-- We need the video container for videojs so we just hide it -->
<!-- We need the video container for videojs so we just hide it --> <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
<div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9"> <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
<video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
</div>
<div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
</div> </div>
<div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
</div> </div>
<div id="torrent-info" class="row"> <div id="torrent-info" class="row">
@ -32,7 +30,7 @@
<div *ngIf="video !== null" id="video-info"> <div *ngIf="video !== null" id="video-info">
<div class="row video-name-views"> <div class="row video-name-views">
<div id="video-name" class="col-md-8"> <div class="col-md-8 video-name">
{{ video.name }} {{ video.name }}
</div> </div>

11
client/src/app/videos/video-watch/video-watch.component.scss
View File

@ -37,10 +37,15 @@
font-size: 18px; font-size: 18px;
height: $video-watch-title-height; height: $video-watch-title-height;
line-height: $video-watch-title-height; line-height: $video-watch-title-height;
padding: 0 30px;
.video-name {
padding-left: $video-watch-info-padding-left;
}
.video-views { .video-views {
text-align: right; text-align: right;
// Keep a symmetry with the video name
padding-right: $video-watch-info-padding-left
} }
} }
@ -94,6 +99,8 @@
.video-small-block-author { .video-small-block-author {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
text-align: left;
padding-left: $video-watch-info-padding-left;
} }
.video-small-block-share, .video-small-block-more { .video-small-block-share, .video-small-block-more {
@ -144,7 +151,7 @@
margin-top: 30px; margin-top: 30px;
.video-details-date-description { .video-details-date-description {
padding-left: 30px; padding-left: $video-watch-info-padding-left;
.video-details-date { .video-details-date {
font-weight: bold; font-weight: bold;

4
client/src/sass/_variables.scss
View File

@ -9,10 +9,12 @@ $menu-color-block: #686f77;
$header-height: 65px; $header-height: 65px;
$header-border-color: #e9eff6; $header-border-color: #e9eff6;
$video-miniature-title-color: #16a2b7; $footer-border-color: $header-border-color;
$video-miniature-other-infos: #686767; $video-miniature-other-infos: #686767;
$video-watch-border-color: #eceef4; $video-watch-border-color: #eceef4;
$video-watch-title-height: 90px; $video-watch-title-height: 90px;
$video-watch-info-color: #8e909b; $video-watch-info-color: #8e909b;
$video-watch-info-height: 120px; $video-watch-info-height: 120px;
$video-watch-info-padding-left: 40px;

3
client/src/sass/application.scss
View File

@ -41,9 +41,8 @@ input.readonly {
} }
.main-col { .main-col {
padding: 0;
.main-row { .content-padding {
padding: 15px 30px; padding: 15px 30px;
@media screen and (min-width: 1400px) { @media screen and (min-width: 1400px) {