aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-04-21 18:26:09 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-04-26 21:23:19 +0200
commit897ec54d766902878d78abe04aa5b749f6b627f3 (patch)
tree821062ecb881286d45931c32c6b67b078ba47823
parentea9f487b40c7f1d7348d9f88703cb9d52c7e8603 (diff)
downloadPeerTube-897ec54d766902878d78abe04aa5b749f6b627f3.tar.gz
PeerTube-897ec54d766902878d78abe04aa5b749f6b627f3.tar.zst
PeerTube-897ec54d766902878d78abe04aa5b749f6b627f3.zip
Client: beautiful watch page
Diffstat
-rw-r--r--client/src/app/+admin/friends/friend-add/friend-add.component.html53
-rw-r--r--client/src/app/+admin/friends/friend-list/friend-list.component.html20
-rw-r--r--client/src/app/+admin/requests/request-stats/request-stats.component.html59
-rw-r--r--client/src/app/+admin/users/user-add/user-add.component.html75
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.html23
-rw-r--r--client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html14
-rw-r--r--client/src/app/account/account.component.html34
-rw-r--r--client/src/app/app.component.html7
-rw-r--r--client/src/app/app.component.scss13
-rw-r--r--client/src/app/login/login.component.html55
-rw-r--r--client/src/app/signup/signup.component.html70
-rw-r--r--client/src/app/videos/video-edit/video-add.component.html231
-rw-r--r--client/src/app/videos/video-edit/video-update.component.html143
-rw-r--r--client/src/app/videos/video-list/video-list.component.html21
-rw-r--r--client/src/app/videos/video-list/video-list.component.scss7
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.html5
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.scss8
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html14
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss11
-rw-r--r--client/src/sass/_variables.scss4
-rw-r--r--client/src/sass/application.scss3
21 files changed, 463 insertions, 407 deletions
diff --git a/client/src/app/+admin/friends/friend-add/friend-add.component.html b/client/src/app/+admin/friends/friend-add/friend-add.component.html
index eebe033f9..29c045414 100644
--- a/client/src/app/+admin/friends/friend-add/friend-add.component.html
+++ b/client/src/app/+admin/friends/friend-add/friend-add.component.html
@@ -1,30 +1,35 @@
1<h3>Make friends</h3> 1<div class="row">
2 <div class="content-padding">
2 3
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 4 <h3>Make friends</h3>
4 5
5<form (ngSubmit)="makeFriends()" [formGroup]="form"> 6 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
6 <div class="form-group" *ngFor="let host of hosts; let id = index; trackBy:customTrackBy">
7 <label for="username">Host</label>
8 7
9 <div class="input-group"> 8 <form (ngSubmit)="makeFriends()" [formGroup]="form">
10 <input 9 <div class="form-group" *ngFor="let host of hosts; let id = index; trackBy:customTrackBy">
11 type="text" class="form-control" placeholder="domain.tld" 10 <label for="username">Host</label>
12 [id]="'host-' + id" [formControlName]="'host-' + id"
13 />
14 <span class="input-group-btn">
15 <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
16 <button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
17 </span>
18 </div>
19 11
20 <div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning"> 12 <div class="input-group">
21 It should be a valid host. 13 <input
22 </div> 14 type="text" class="form-control" placeholder="domain.tld"
23 </div> 15 [id]="'host-' + id" [formControlName]="'host-' + id"
16 />
17 <span class="input-group-btn">
18 <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
19 <button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
20 </span>
21 </div>
24 22
25 <div *ngIf="canMakeFriends() === false" class="alert alert-warning"> 23 <div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning">
26 It seems that you are not on a HTTPS pod. Your webserver need to have TLS activated in order to make friends. 24 It should be a valid host.
27 </div> 25 </div>
26 </div>
28 27
29 <input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()"> 28 <div *ngIf="canMakeFriends() === false" class="alert alert-warning">
30</form> 29 It seems that you are not on a HTTPS pod. Your webserver need to have TLS activated in order to make friends.
30 </div>
31
32 <input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()">
33 </form>
34 </div>
35</div>
diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.html b/client/src/app/+admin/friends/friend-list/friend-list.component.html
index e15ecde14..45695f7c8 100644
--- a/client/src/app/+admin/friends/friend-list/friend-list.component.html
+++ b/client/src/app/+admin/friends/friend-list/friend-list.component.html
@@ -1,11 +1,15 @@
1<h3>Friends list</h3> 1<div class="row">
2 <div class="content-padding">
3 <h3>Friends list</h3>
2 4
3<ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table> 5 <ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table>
4 6
5<a *ngIf="hasFriends()" class="btn btn-danger pull-left" (click)="quitFriends()"> 7 <a *ngIf="hasFriends()" class="btn btn-danger pull-left" (click)="quitFriends()">
6 Quit friends 8 Quit friends
7</a> 9 </a>
8 10
9<a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']"> 11 <a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
10 Make friends 12 Make friends
11</a> 13 </a>
14 </div>
15</div>
diff --git a/client/src/app/+admin/requests/request-stats/request-stats.component.html b/client/src/app/+admin/requests/request-stats/request-stats.component.html
index f35da6535..29e7f7052 100644
--- a/client/src/app/+admin/requests/request-stats/request-stats.component.html
+++ b/client/src/app/+admin/requests/request-stats/request-stats.component.html
@@ -1,36 +1,41 @@
1<h3>Requests stats</h3> 1<div class="row">
2 <div class="content-padding">
2 3
3<div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12"> 4 <h3>Requests stats</h3>
4 <div class="panel panel-default" *ngIf="stats[requestSchedulerName] !== null">
5 <div class="panel-heading">{{ statsTitles[requestSchedulerName] }}</div>
6 5
7 <div class="panel-body"> 6 <div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12">
8 <div class="requests-general"> 7 <div class="panel panel-default" *ngIf="stats[requestSchedulerName] !== null">
9 <div> 8 <div class="panel-heading">{{ statsTitles[requestSchedulerName] }}</div>
10 <span class="label-description">Remaining requests:</span>
11 {{ stats[requestSchedulerName].totalRequests }}
12 </div>
13 9
14 <div> 10 <div class="panel-body">
15 <span class="label-description">Interval seconds between requests:</span> 11 <div class="requests-general">
16 {{ stats[requestSchedulerName].secondsInterval }} 12 <div>
17 </div> 13 <span class="label-description">Remaining requests:</span>
14 {{ stats[requestSchedulerName].totalRequests }}
15 </div>
18 16
19 <div> 17 <div>
20 <span class="label-description">Remaining time before the scheduled request:</span> 18 <span class="label-description">Interval seconds between requests:</span>
21 {{ stats[requestSchedulerName].remainingSeconds }} 19 {{ stats[requestSchedulerName].secondsInterval }}
22 </div> 20 </div>
23 </div>
24 21
25 <div class="requests-limit"> 22 <div>
26 <div> 23 <span class="label-description">Remaining time before the scheduled request:</span>
27 <span class="label-description">Maximum number of different pods for a scheduled request:</span> 24 {{ stats[requestSchedulerName].remainingSeconds }}
28 {{ stats[requestSchedulerName].requestsLimitPods }} 25 </div>
29 </div> 26 </div>
27
28 <div class="requests-limit">
29 <div>
30 <span class="label-description">Maximum number of different pods for a scheduled request:</span>
31 {{ stats[requestSchedulerName].requestsLimitPods }}
32 </div>
30 33
31 <div> 34 <div>
32 <span class="label-description">Maximum number of requests per pod for a scheduled request:</span> 35 <span class="label-description">Maximum number of requests per pod for a scheduled request:</span>
33 {{ stats[requestSchedulerName].requestsLimitPerPod }} 36 {{ stats[requestSchedulerName].requestsLimitPerPod }}
37 </div>
38 </div>
34 </div> 39 </div>
35 </div> 40 </div>
36 </div> 41 </div>
diff --git a/client/src/app/+admin/users/user-add/user-add.component.html b/client/src/app/+admin/users/user-add/user-add.component.html
index 105760f48..9b487aa75 100644
--- a/client/src/app/+admin/users/user-add/user-add.component.html
+++ b/client/src/app/+admin/users/user-add/user-add.component.html
@@ -1,40 +1,45 @@
1<h3>Add user</h3> 1<div class="row">
2 <div class="content-padding">
2 3
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 4 <h3>Add user</h3>
4 5
5<form role="form" (ngSubmit)="addUser()" [formGroup]="form"> 6 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
6 <div class="form-group">
7 <label for="username">Username</label>
8 <input
9 type="text" class="form-control" id="username" placeholder="Username"
10 formControlName="username"
11 >
12 <div *ngIf="formErrors.username" class="alert alert-danger">
13 {{ formErrors.username }}
14 </div>
15 </div>
16 7
17 <div class="form-group"> 8 <form role="form" (ngSubmit)="addUser()" [formGroup]="form">
18 <label for="email">Email</label> 9 <div class="form-group">
19 <input 10 <label for="username">Username</label>
20 type="text" class="form-control" id="email" placeholder="Email" 11 <input
21 formControlName="email" 12 type="text" class="form-control" id="username" placeholder="Username"
22 > 13 formControlName="username"
23 <div *ngIf="formErrors.email" class="alert alert-danger"> 14 >
24 {{ formErrors.email }} 15 <div *ngIf="formErrors.username" class="alert alert-danger">
25 </div> 16 {{ formErrors.username }}
26 </div> 17 </div>
18 </div>
27 19
28 <div class="form-group"> 20 <div class="form-group">
29 <label for="password">Password</label> 21 <label for="email">Email</label>
30 <input 22 <input
31 type="password" class="form-control" id="password" placeholder="Password" 23 type="text" class="form-control" id="email" placeholder="Email"
32 formControlName="password" 24 formControlName="email"
33 > 25 >
34 <div *ngIf="formErrors.password" class="alert alert-danger"> 26 <div *ngIf="formErrors.email" class="alert alert-danger">
35 {{ formErrors.password }} 27 {{ formErrors.email }}
36 </div> 28 </div>
37 </div> 29 </div>
38 30
39 <input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid"> 31 <div class="form-group">
40</form> 32 <label for="password">Password</label>
33 <input
34 type="password" class="form-control" id="password" placeholder="Password"
35 formControlName="password"
36 >
37 <div *ngIf="formErrors.password" class="alert alert-danger">
38 {{ formErrors.password }}
39 </div>
40 </div>
41
42 <input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid">
43 </form>
44 </div>
45</div>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 3d3d7e054..bb4c99a3f 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -1,11 +1,16 @@
1<h3>Users list</h3> 1<div class="row">
2 <div class="content-padding">
2 3
3<ng2-smart-table 4 <h3>Users list</h3>
4 [settings]="tableSettings" [source]="usersSource"
5 (delete)="removeUser($event)"
6></ng2-smart-table>
7 5
8<a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']"> 6 <ng2-smart-table
9 <span class="glyphicon glyphicon-plus"></span> 7 [settings]="tableSettings" [source]="usersSource"
10 Add user 8 (delete)="removeUser($event)"
11</a> 9 ></ng2-smart-table>
10
11 <a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']">
12 <span class="glyphicon glyphicon-plus"></span>
13 Add user
14 </a>
15 </div>
16</div>
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
index b2fd17bf0..c6723a734 100644
--- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
@@ -1,5 +1,11 @@
1<h3>Video abuses list</h3> 1<div class="row">
2 <div class="content-padding">
2 3
3<ng2-smart-table 4 <h3>Video abuses list</h3>
4 [settings]="tableSettings" [source]="videoAbusesSource" 5
5></ng2-smart-table> 6 <ng2-smart-table
7 [settings]="tableSettings" [source]="videoAbusesSource"
8 ></ng2-smart-table>
9
10 </div>
11</div>
diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html
index c0995dad0..177e54999 100644
--- a/client/src/app/account/account.component.html
+++ b/client/src/app/account/account.component.html
@@ -1,21 +1,25 @@
1<h3>Account</h3> 1<div class="row">
2 <div class="content-padding">
3 <h3>Account</h3>
2 4
3<div class="col-md-6 col-sm-12"> 5 <div class="col-md-6 col-sm-12">
4<div class="panel panel-default"> 6 <div class="panel panel-default">
5 <div class="panel-heading">Change password</div> 7 <div class="panel-heading">Change password</div>
6 8
7 <div class="panel-body"> 9 <div class="panel-body">
8 <my-account-change-password></my-account-change-password> 10 <my-account-change-password></my-account-change-password>
9 </div> 11 </div>
10</div> 12 </div>
11</div> 13 </div>
12 14
13<div class="col-md-6 col-sm-12"> 15 <div class="col-md-6 col-sm-12">
14<div class="panel panel-default"> 16 <div class="panel panel-default">
15 <div class="panel-heading">Update my informations</div> 17 <div class="panel-heading">Update my informations</div>
16 18
17 <div class="panel-body"> 19 <div class="panel-body">
18 <my-account-details [user]="user"></my-account-details> 20 <my-account-details [user]="user"></my-account-details>
21 </div>
22 </div>
23 </div>
19 </div> 24 </div>
20</div> 25</div>
21</div>
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 061ebe134..3f946d581 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -16,15 +16,16 @@
16 </div> 16 </div>
17 17
18 <div class="col-md-10 col-sm-9 col-xs-9 main-col"> 18 <div class="col-md-10 col-sm-9 col-xs-9 main-col">
19 <div class="header"> 19 <div class="row header">
20 <my-search></my-search> 20 <!-- We need to reset col-md-* because my-search is in fixed position -->
21 <my-search class="col-md-10 col-sm-9 col-xs-9"></my-search>
21 </div> 22 </div>
22 23
23 <div class="main-row"> 24 <div class="main-row">
24 <router-outlet></router-outlet> 25 <router-outlet></router-outlet>
25 </div> 26 </div>
26 27
27 <footer> 28 <footer class="row">
28 PeerTube, CopyLeft 2015-2017 29 PeerTube, CopyLeft 2015-2017
29 </footer> 30 </footer>
30 </div> 31 </div>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index dc4dcf28b..2d0487cd8 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -30,10 +30,15 @@
30 } 30 }
31} 31}
32 32
33my-search {
34 // Fix col-md-* padding
35 padding: 0;
36}
37
33footer { 38footer {
34 border-top: 1px solid rgba(0, 0, 0, 0.2); 39 border-top: 1px solid $footer-border-color;
35 padding: 10px; 40 padding: 10px 0;
36 text-align: center; 41 text-align: center;
37 font-size: small; 42 font-size: 11px;
38 margin: 30px 10px 0 10px; 43 margin-top: 30px;
39} 44}
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 94a405405..bcea0a27a 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -1,29 +1,34 @@
1<h3>Login</h3> 1<div class="row">
2 <div class="content-padding">
2 3
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 4 <h3>Login</h3>
4 5
5<form role="form" (ngSubmit)="login()" [formGroup]="form"> 6 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
6 <div class="form-group">
7 <label for="username">Username</label>
8 <input
9 type="text" class="form-control" id="username" placeholder="Username" required
10 formControlName="username"
11 >
12 <div *ngIf="formErrors.username" class="alert alert-danger">
13 {{ formErrors.username }}
14 </div>
15 </div>
16 7
17 <div class="form-group"> 8 <form role="form" (ngSubmit)="login()" [formGroup]="form">
18 <label for="password">Password</label> 9 <div class="form-group">
19 <input 10 <label for="username">Username</label>
20 type="password" class="form-control" name="password" id="password" placeholder="Password" required 11 <input
21 formControlName="password" 12 type="text" class="form-control" id="username" placeholder="Username" required
22 > 13 formControlName="username"
23 <div *ngIf="formErrors.password" class="alert alert-danger"> 14 >
24 {{ formErrors.password }} 15 <div *ngIf="formErrors.username" class="alert alert-danger">
25 </div> 16 {{ formErrors.username }}
26 </div> 17 </div>
18 </div>
27 19
28 <input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid"> 20 <div class="form-group">
29</form> 21 <label for="password">Password</label>
22 <input
23 type="password" class="form-control" name="password" id="password" placeholder="Password" required
24 formControlName="password"
25 >
26 <div *ngIf="formErrors.password" class="alert alert-danger">
27 {{ formErrors.password }}
28 </div>
29 </div>
30
31 <input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid">
32 </form>
33 </div>
34</div>
diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html
index 6c9c60e8b..b8b7826eb 100644
--- a/client/src/app/signup/signup.component.html
+++ b/client/src/app/signup/signup.component.html
@@ -1,40 +1,46 @@
1<h3>Signup</h3> 1<div class="row">
2 <div class="content-padding">
2 3
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 4 <h3>Signup</h3>
4 5
5<form role="form" (ngSubmit)="signup()" [formGroup]="form"> 6 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
6 <div class="form-group"> 7
7 <label for="username">Username</label> 8 <form role="form" (ngSubmit)="signup()" [formGroup]="form">
8 <input 9 <div class="form-group">
9 type="text" class="form-control" id="username" placeholder="Username" 10 <label for="username">Username</label>
10 formControlName="username" 11 <input
11 > 12 type="text" class="form-control" id="username" placeholder="Username"
12 <div *ngIf="formErrors.username" class="alert alert-danger"> 13 formControlName="username"
13 {{ formErrors.username }} 14 >
15 <div *ngIf="formErrors.username" class="alert alert-danger">
16 {{ formErrors.username }}
17 </div>
14 </div> 18 </div>
15 </div>
16 19
17 <div class="form-group"> 20 <div class="form-group">
18 <label for="email">Email</label> 21 <label for="email">Email</label>
19 <input 22 <input
20 type="text" class="form-control" id="email" placeholder="Email" 23 type="text" class="form-control" id="email" placeholder="Email"
21 formControlName="email" 24 formControlName="email"
22 > 25 >
23 <div *ngIf="formErrors.email" class="alert alert-danger"> 26 <div *ngIf="formErrors.email" class="alert alert-danger">
24 {{ formErrors.email }} 27 {{ formErrors.email }}
28 </div>
25 </div> 29 </div>
26 </div>
27 30
28 <div class="form-group"> 31 <div class="form-group">
29 <label for="password">Password</label> 32 <label for="password">Password</label>
30 <input 33 <input
31 type="password" class="form-control" id="password" placeholder="Password" 34 type="password" class="form-control" id="password" placeholder="Password"
32 formControlName="password" 35 formControlName="password"
33 > 36 >
34 <div *ngIf="formErrors.password" class="alert alert-danger"> 37 <div *ngIf="formErrors.password" class="alert alert-danger">
35 {{ formErrors.password }} 38 {{ formErrors.password }}
39 </div>
36 </div> 40 </div>
37 </div>
38 41
39 <input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid"> 42 <input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid">
40</form> 43 </form>
44
45 </div>
46</div>
diff --git a/client/src/app/videos/video-edit/video-add.component.html b/client/src/app/videos/video-edit/video-add.component.html
index 04f4f85b0..7ad671ae7 100644
--- a/client/src/app/videos/video-edit/video-add.component.html
+++ b/client/src/app/videos/video-edit/video-add.component.html
@@ -1,114 +1,119 @@
1<h3>Upload a video</h3> 1<div class="row">
2 2 <div class="content-padding">
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 3
4 4 <h3>Upload a video</h3>
5<form novalidate [formGroup]="form"> 5
6 <div class="form-group"> 6 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
7 <label for="name">Name</label> 7
8 <input 8 <form novalidate [formGroup]="form">
9 type="text" class="form-control" id="name" 9 <div class="form-group">
10 formControlName="name" 10 <label for="name">Name</label>
11 > 11 <input
12 <div *ngIf="formErrors.name" class="alert alert-danger"> 12 type="text" class="form-control" id="name"
13 {{ formErrors.name }} 13 formControlName="name"
14 </div> 14 >
15 <div *ngIf="formErrors.name" class="alert alert-danger">
16 {{ formErrors.name }}
17 </div>
18 </div>
19
20 <div class="form-group">
21 <label for="nsfw">NSFW</label>
22 <input
23 type="checkbox" id="nsfw"
24 formControlName="nsfw"
25 >
26 </div>
27
28 <div class="form-group">
29 <label for="category">Category</label>
30 <select class="form-control" id="category" formControlName="category">
31 <option></option>
32 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
33 </select>
34
35 <div *ngIf="formErrors.category" class="alert alert-danger">
36 {{ formErrors.category }}
37 </div>
38 </div>
39
40 <div class="form-group">
41 <label for="licence">Licence</label>
42 <select class="form-control" id="licence" formControlName="licence">
43 <option></option>
44 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
45 </select>
46
47 <div *ngIf="formErrors.licence" class="alert alert-danger">
48 {{ formErrors.licence }}
49 </div>
50 </div>
51
52 <div class="form-group">
53 <label for="language">Language</label>
54 <select class="form-control" id="language" formControlName="language">
55 <option></option>
56 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
57 </select>
58
59 <div *ngIf="formErrors.language" class="alert alert-danger">
60 {{ formErrors.language }}
61 </div>
62 </div>
63
64 <div class="form-group">
65 <label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
66 <tag-input
67 [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
68 formControlName="tags" maxItems="3" modelAsStrings="true"
69 ></tag-input>
70 </div>
71
72 <div class="form-group">
73 <label for="videofile">File</label>
74 <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
75 <span>Select the video...</span>
76 <input
77 type="file" name="videofile" id="videofile"
78 ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
79 (change)="fileChanged()"
80 >
81 </div>
82 </div>
83
84 <div class="file-to-upload">
85 <div class="file" *ngIf="uploader.queue.length > 0">
86 <span class="filename">{{ filename }}</span>
87 <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
88 </div>
89 </div>
90
91 <div *ngIf="fileError" class="alert alert-danger">
92 {{ fileError }}
93 </div>
94
95 <div class="form-group">
96 <label for="description">Description</label>
97 <textarea
98 id="description" class="form-control" placeholder="Description..."
99 formControlName="description"
100 >
101 </textarea>
102 <div *ngIf="formErrors.description" class="alert alert-danger">
103 {{ formErrors.description }}
104 </div>
105 </div>
106
107 <div class="progress">
108 <progressbar [value]="uploader.progress" max="100"></progressbar>
109 </div>
110
111 <div class="form-group">
112 <input
113 type="button" value="Upload" class="btn btn-default form-control"
114 (click)="upload()"
115 >
116 </div>
117 </form>
15 </div> 118 </div>
16 119</div>
17 <div class="form-group">
18 <label for="nsfw">NSFW</label>
19 <input
20 type="checkbox" id="nsfw"
21 formControlName="nsfw"
22 >
23 </div>
24
25 <div class="form-group">
26 <label for="category">Category</label>
27 <select class="form-control" id="category" formControlName="category">
28 <option></option>
29 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
30 </select>
31
32 <div *ngIf="formErrors.category" class="alert alert-danger">
33 {{ formErrors.category }}
34 </div>
35 </div>
36
37 <div class="form-group">
38 <label for="licence">Licence</label>
39 <select class="form-control" id="licence" formControlName="licence">
40 <option></option>
41 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
42 </select>
43
44 <div *ngIf="formErrors.licence" class="alert alert-danger">
45 {{ formErrors.licence }}
46 </div>
47 </div>
48
49 <div class="form-group">
50 <label for="language">Language</label>
51 <select class="form-control" id="language" formControlName="language">
52 <option></option>
53 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
54 </select>
55
56 <div *ngIf="formErrors.language" class="alert alert-danger">
57 {{ formErrors.language }}
58 </div>
59 </div>
60
61 <div class="form-group">
62 <label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
63 <tag-input
64 [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
65 formControlName="tags" maxItems="3" modelAsStrings="true"
66 ></tag-input>
67 </div>
68
69 <div class="form-group">
70 <label for="videofile">File</label>
71 <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
72 <span>Select the video...</span>
73 <input
74 type="file" name="videofile" id="videofile"
75 ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
76 (change)="fileChanged()"
77 >
78 </div>
79 </div>
80
81 <div class="file-to-upload">
82 <div class="file" *ngIf="uploader.queue.length > 0">
83 <span class="filename">{{ filename }}</span>
84 <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
85 </div>
86 </div>
87
88 <div *ngIf="fileError" class="alert alert-danger">
89 {{ fileError }}
90 </div>
91
92 <div class="form-group">
93 <label for="description">Description</label>
94 <textarea
95 id="description" class="form-control" placeholder="Description..."
96 formControlName="description"
97 >
98 </textarea>
99 <div *ngIf="formErrors.description" class="alert alert-danger">
100 {{ formErrors.description }}
101 </div>
102 </div>
103
104 <div class="progress">
105 <progressbar [value]="uploader.progress" max="100"></progressbar>
106 </div>
107
108 <div class="form-group">
109 <input
110 type="button" value="Upload" class="btn btn-default form-control"
111 (click)="upload()"
112 >
113 </div>
114</form>
diff --git a/client/src/app/videos/video-edit/video-update.component.html b/client/src/app/videos/video-edit/video-update.component.html
index bedbc91b8..7f4faf21b 100644
--- a/client/src/app/videos/video-edit/video-update.component.html
+++ b/client/src/app/videos/video-edit/video-update.component.html
@@ -1,87 +1,92 @@
1<h3>Update {{ video?.name }}</h3> 1<div class="row">
2 <div class="content-padding">
2 3
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 4 <h3>Update {{ video?.name }}</h3>
4 5
5<form novalidate [formGroup]="form"> 6 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
6 <div class="form-group"> 7
7 <label for="name">Name</label> 8 <form novalidate [formGroup]="form">
8 <input 9 <div class="form-group">
9 type="text" class="form-control" id="name" 10 <label for="name">Name</label>
10 formControlName="name" 11 <input
11 > 12 type="text" class="form-control" id="name"
12 <div *ngIf="formErrors.name" class="alert alert-danger"> 13 formControlName="name"
13 {{ formErrors.name }} 14 >
15 <div *ngIf="formErrors.name" class="alert alert-danger">
16 {{ formErrors.name }}
17 </div>
14 </div> 18 </div>
15 </div>
16 19
17 <div class="form-group"> 20 <div class="form-group">
18 <label for="nsfw">NSFW</label> 21 <label for="nsfw">NSFW</label>
19 <input 22 <input
20 type="checkbox" id="nsfw" 23 type="checkbox" id="nsfw"
21 formControlName="nsfw" 24 formControlName="nsfw"
22 > 25 >
23 </div> 26 </div>
24 27
25 <div class="form-group"> 28 <div class="form-group">
26 <label for="category">Category</label> 29 <label for="category">Category</label>
27 <select class="form-control" id="category" formControlName="category"> 30 <select class="form-control" id="category" formControlName="category">
28 <option></option> 31 <option></option>
29 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option> 32 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
30 </select> 33 </select>
31 34
32 <div *ngIf="formErrors.category" class="alert alert-danger"> 35 <div *ngIf="formErrors.category" class="alert alert-danger">
33 {{ formErrors.category }} 36 {{ formErrors.category }}
37 </div>
34 </div> 38 </div>
35 </div>
36 39
37 <div class="form-group"> 40 <div class="form-group">
38 <label for="licence">Licence</label> 41 <label for="licence">Licence</label>
39 <select class="form-control" id="licence" formControlName="licence"> 42 <select class="form-control" id="licence" formControlName="licence">
40 <option></option> 43 <option></option>
41 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> 44 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
42 </select> 45 </select>
43 46
44 <div *ngIf="formErrors.licence" class="alert alert-danger"> 47 <div *ngIf="formErrors.licence" class="alert alert-danger">
45 {{ formErrors.licence }} 48 {{ formErrors.licence }}
49 </div>
46 </div> 50 </div>
47 </div>
48 51
49 <div class="form-group"> 52 <div class="form-group">
50 <label for="language">Language</label> 53 <label for="language">Language</label>
51 <select class="form-control" id="language" formControlName="language"> 54 <select class="form-control" id="language" formControlName="language">
52 <option></option> 55 <option></option>
53 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> 56 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
54 </select> 57 </select>
55 58
56 <div *ngIf="formErrors.language" class="alert alert-danger"> 59 <div *ngIf="formErrors.language" class="alert alert-danger">
57 {{ formErrors.language }} 60 {{ formErrors.language }}
61 </div>
58 </div> 62 </div>
59 </div>
60 63
61 <div class="form-group"> 64 <div class="form-group">
62 <label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span> 65 <label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
63 <tag-input 66 <tag-input
64 [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages" 67 [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
65 formControlName="tags" maxItems="3" modelAsStrings="true" 68 formControlName="tags" maxItems="3" modelAsStrings="true"
66 ></tag-input> 69 ></tag-input>
67 </div> 70 </div>
68 71
69 <div class="form-group"> 72 <div class="form-group">
70 <label for="description">Description</label> 73 <label for="description">Description</label>
71 <textarea 74 <textarea
72 id="description" class="form-control" placeholder="Description..." 75 id="description" class="form-control" placeholder="Description..."
73 formControlName="description" 76 formControlName="description"
74 > 77 >
75 </textarea> 78 </textarea>
76 <div *ngIf="formErrors.description" class="alert alert-danger"> 79 <div *ngIf="formErrors.description" class="alert alert-danger">
77 {{ formErrors.description }} 80 {{ formErrors.description }}
81 </div>
78 </div> 82 </div>
79 </div>
80 83
81 <div class="form-group"> 84 <div class="form-group">
82 <input 85 <input
83 type="button" value="Update" class="btn btn-default form-control" 86 type="button" value="Update" class="btn btn-default form-control"
84 (click)="update()" 87 (click)="update()"
85 > 88 >
89 </div>
90 </form>
86 </div> 91 </div>
87</form> 92</div>
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
index 2a753adba..72d5512a6 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -1,16 +1,19 @@
1<div class="row col-md-12 videos-info"> 1<div class="row">
2 <div class="col-md-9 col-xs-5 videos-total-results"> 2 <div class="content-padding">
3 <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span> 3 <div class="videos-info">
4 4 <div class="col-md-9 col-xs-5 videos-total-results">
5 <my-loader [loading]="loading | async"></my-loader> 5 <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
6 </div>
7 6
7 <my-loader [loading]="loading | async"></my-loader>
8 </div>
8 9
9 <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort> 10 <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
11 </div>
12 </div>
10</div> 13</div>
11 14
12<div class="videos-miniatures"> 15<div class="content-padding videos-miniatures">
13 <div class="col-md-12 no-video" *ngIf="isThereNoVideo()">There is no video.</div> 16 <div class="no-video" *ngIf="isThereNoVideo()">There is no video.</div>
14 17
15 <my-video-miniature 18 <my-video-miniature
16 class="ng-animate" 19 class="ng-animate"
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
index 5ece9d003..eddcf0776 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -3,18 +3,12 @@
3 margin-left: 0; 3 margin-left: 0;
4 } 4 }
5 5
6 margin-bottom: 20px;
7 border-bottom: 1px solid #f1f1f1; 6 border-bottom: 1px solid #f1f1f1;
8 height: 40px; 7 height: 40px;
9 line-height: 40px; 8 line-height: 40px;
10 9
11 my-video-sort {
12 padding-right: 0;
13 }
14
15 .videos-total-results { 10 .videos-total-results {
16 font-size: 13px; 11 font-size: 13px;
17 padding-left: 0;
18 } 12 }
19 13
20 my-loader { 14 my-loader {
@@ -26,6 +20,7 @@
26.videos-miniatures { 20.videos-miniatures {
27 min-height: 720px; 21 min-height: 720px;
28 text-align: center; 22 text-align: center;
23 padding-top: 0;
29 24
30 my-video-miniature { 25 my-video-miniature {
31 text-align: left; 26 text-align: left;
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 0b0b0d944..826aa6a29 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -25,9 +25,6 @@
25 </span> 25 </span>
26 26
27 <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a> 27 <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
28 <span class="video-miniature-views-created-at"> 28 <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
29 <span class="video-miniature-views">{{ video.views }} views</span>
30 <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
31 </span>
32 </div> 29 </div>
33</div> 30</div>
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index 1a73648c4..778bffa29 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -64,7 +64,6 @@
64 font-weight: bold; 64 font-weight: bold;
65 transition: color 0.2s; 65 transition: color 0.2s;
66 font-size: 15px; 66 font-size: 15px;
67 color: $video-miniature-title-color;
68 67
69 &:hover { 68 &:hover {
70 text-decoration: none; 69 text-decoration: none;
@@ -88,17 +87,12 @@
88 } 87 }
89 } 88 }
90 89
91 .video-miniature-author, .video-miniature-views-created-at { 90 .video-miniature-author, .video-miniature-created-at {
92 display: block; 91 display: block;
93 margin-left: 1px; 92 margin-left: 1px;
94 font-size: 11px; 93 font-size: 11px;
95 color: $video-miniature-other-infos; 94 color: $video-miniature-other-infos;
96 opacity: 0.9; 95 opacity: 0.9;
97
98 .video-miniature-created-at::before {
99 content: '\002022';
100 margin: 0 2px 0 1px;
101 }
102 } 96 }
103 97
104 .video-miniature-author { 98 .video-miniature-author {
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index 989de0de4..059465d65 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -14,14 +14,12 @@
14</div> 14</div>
15 15
16<div class="row"> 16<div class="row">
17 <div class="col-md-12"> 17 <!-- We need the video container for videojs so we just hide it -->
18 <!-- We need the video container for videojs so we just hide it --> 18 <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
19 <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9"> 19 <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
20 <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
21 </div>
22
23 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
24 </div> 20 </div>
21
22 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
25</div> 23</div>
26 24
27<div id="torrent-info" class="row"> 25<div id="torrent-info" class="row">
@@ -32,7 +30,7 @@
32 30
33<div *ngIf="video !== null" id="video-info"> 31<div *ngIf="video !== null" id="video-info">
34 <div class="row video-name-views"> 32 <div class="row video-name-views">
35 <div id="video-name" class="col-md-8"> 33 <div class="col-md-8 video-name">
36 {{ video.name }} 34 {{ video.name }}
37 </div> 35 </div>
38 36
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index abd2832df..a8c7fdbac 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -37,10 +37,15 @@
37 font-size: 18px; 37 font-size: 18px;
38 height: $video-watch-title-height; 38 height: $video-watch-title-height;
39 line-height: $video-watch-title-height; 39 line-height: $video-watch-title-height;
40 padding: 0 30px; 40
41 .video-name {
42 padding-left: $video-watch-info-padding-left;
43 }
41 44
42 .video-views { 45 .video-views {
43 text-align: right; 46 text-align: right;
47 // Keep a symmetry with the video name
48 padding-right: $video-watch-info-padding-left
44 } 49 }
45 } 50 }
46 51
@@ -94,6 +99,8 @@
94 .video-small-block-author { 99 .video-small-block-author {
95 font-size: 15px; 100 font-size: 15px;
96 font-weight: bold; 101 font-weight: bold;
102 text-align: left;
103 padding-left: $video-watch-info-padding-left;
97 } 104 }
98 105
99 .video-small-block-share, .video-small-block-more { 106 .video-small-block-share, .video-small-block-more {
@@ -144,7 +151,7 @@
144 margin-top: 30px; 151 margin-top: 30px;
145 152
146 .video-details-date-description { 153 .video-details-date-description {
147 padding-left: 30px; 154 padding-left: $video-watch-info-padding-left;
148 155
149 .video-details-date { 156 .video-details-date {
150 font-weight: bold; 157 font-weight: bold;
diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index bb6799665..723b2bcc8 100644
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -9,10 +9,12 @@ $menu-color-block: #686f77;
9$header-height: 65px; 9$header-height: 65px;
10$header-border-color: #e9eff6; 10$header-border-color: #e9eff6;
11 11
12$video-miniature-title-color: #16a2b7; 12$footer-border-color: $header-border-color;
13
13$video-miniature-other-infos: #686767; 14$video-miniature-other-infos: #686767;
14 15
15$video-watch-border-color: #eceef4; 16$video-watch-border-color: #eceef4;
16$video-watch-title-height: 90px; 17$video-watch-title-height: 90px;
17$video-watch-info-color: #8e909b; 18$video-watch-info-color: #8e909b;
18$video-watch-info-height: 120px; 19$video-watch-info-height: 120px;
20$video-watch-info-padding-left: 40px;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 571372c2b..c0b40445e 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -41,9 +41,8 @@ input.readonly {
41} 41}
42 42
43.main-col { 43.main-col {
44 padding: 0;
45 44
46 .main-row { 45 .content-padding {
47 padding: 15px 30px; 46 padding: 15px 30px;
48 47
49 @media screen and (min-width: 1400px) { 48 @media screen and (min-width: 1400px) {
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-12 06:54:08 +0000