aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-history/my-account-history.component.html8
-rw-r--r--client/src/app/+my-account/my-account-history/my-account-history.component.scss58
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.html12
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss49
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.ts10
5 files changed, 15 insertions, 122 deletions
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.html b/client/src/app/+my-account/my-account-history/my-account-history.component.html
index 00ee5fbd1..4b94490a0 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.html
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.html
@@ -15,12 +15,6 @@
15 15
16<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" class="videos"> 16<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" class="videos">
17 <div class="video" *ngFor="let video of videos"> 17 <div class="video" *ngFor="let video of videos">
18 <my-video-thumbnail [video]="video"></my-video-thumbnail> 18 <my-video-miniature [video]="video" [displayAsRow]="true"></my-video-miniature>
19
20 <div class="video-info">
21 <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
22 <span i18n class="video-info-date-views">{{ video.views | myNumberFormatter }} views</span>
23 <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
24 </div>
25 </div> 19 </div>
26</div> 20</div>
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
index e03d81055..af6395fb1 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
@@ -34,63 +34,7 @@
34.video { 34.video {
35 @include row-blocks; 35 @include row-blocks;
36 36
37 my-video-thumbnail { 37 .my-video-miniature {
38 margin-right: 10px;
39 }
40
41 .video-info {
42 flex-grow: 1; 38 flex-grow: 1;
43
44 .video-info-name {
45 @include disable-default-a-behaviour;
46
47 color: var(--mainForegroundColor);
48 display: block;
49 width: fit-content;
50 font-size: 18px;
51 font-weight: $font-semibold;
52 }
53
54 .video-info-date-views {
55 font-size: 14px;
56 }
57
58 .video-info-account {
59 @include disable-default-a-behaviour;
60 @include ellipsis;
61
62 display: block;
63 width: fit-content;
64 font-size: 14px;
65 color: $grey-foreground-color;
66
67 &:hover {
68 color: $grey-foreground-hover-color;
69 }
70 }
71 }
72}
73
74@media screen and (max-width: $small-view) {
75 .video {
76 flex-direction: column;
77 height: auto;
78 text-align: center;
79
80 .video-info-name {
81 margin: auto;
82 }
83
84 input[type=checkbox] {
85 display: none;
86 }
87
88 my-video-thumbnail {
89 margin-right: 0;
90 }
91
92 .video-buttons {
93 margin-top: 10px;
94 }
95 } 39 }
96} 40}
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 1f3ac0005..3a4054de8 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -6,17 +6,7 @@
6 <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox> 6 <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox>
7 </div> 7 </div>
8 8
9 <my-video-thumbnail [video]="video"></my-video-thumbnail> 9 <my-video-miniature [video]="video" [displayOptions]="miniatureDisplayOptions" [displayAsRow]="true"></my-video-miniature>
10
11 <div class="video-info">
12 <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
13 <span i18n class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
14 <div class="video-info-privacy">{{ video.privacy.label }}{{ getStateLabel(video) }}</div>
15 <div *ngIf="video.blacklisted" class="video-info-blacklisted">
16 <span class="blacklisted-label" i18n>Blacklisted</span>
17 <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span>
18 </div>
19 </div>
20 10
21 <!-- Display only once --> 11 <!-- Display only once -->
22 <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0"> 12 <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index d2df6f290..405ded3f8 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -46,44 +46,8 @@
46 margin-left: 12px; 46 margin-left: 12px;
47 } 47 }
48 48
49 my-video-thumbnail { 49 my-video-miniature {
50 margin-right: 10px;
51 }
52
53 .video-info {
54 flex-grow: 1; 50 flex-grow: 1;
55
56 .video-info-name {
57 @include disable-default-a-behaviour;
58
59 color: var(--mainForegroundColor);
60 display: block;
61 width: fit-content;
62 font-size: 16px;
63 font-weight: $font-semibold;
64 }
65
66 .video-info-date-views,
67 .video-info-privacy,
68 .video-info-blacklisted {
69 font-size: 13px;
70
71 &.video-info-privacy,
72 &.video-info-blacklisted .blacklisted-label {
73 font-weight: $font-semibold;
74 }
75
76 &.video-info-blacklisted {
77 color: red;
78
79 .blacklisted-reason {
80 &::before {
81 content: ' - ';
82 }
83 }
84 }
85
86 }
87 } 51 }
88 52
89 .video-buttons { 53 .video-buttons {
@@ -99,20 +63,11 @@
99 .video { 63 .video {
100 flex-direction: column; 64 flex-direction: column;
101 height: auto; 65 height: auto;
102 text-align: center;
103 66
104 .video-info-name { 67 .checkbox-container {
105 margin: auto;
106 }
107
108 input[type=checkbox] {
109 display: none; 68 display: none;
110 } 69 }
111 70
112 my-video-thumbnail {
113 margin-right: 0;
114 }
115
116 .video-buttons { 71 .video-buttons {
117 margin-top: 10px; 72 margin-top: 10px;
118 } 73 }
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index eb5096a5e..bbe86af73 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -14,6 +14,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
14import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos' 14import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos'
15import { ScreenService } from '@app/shared/misc/screen.service' 15import { ScreenService } from '@app/shared/misc/screen.service'
16import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component' 16import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component'
17import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
17 18
18@Component({ 19@Component({
19 selector: 'my-account-videos', 20 selector: 'my-account-videos',
@@ -30,6 +31,15 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
30 itemsPerPage: 5, 31 itemsPerPage: 5,
31 totalItems: null 32 totalItems: null
32 } 33 }
34 miniatureDisplayOptions: MiniatureDisplayOptions = {
35 date: true,
36 views: true,
37 by: false,
38 privacyLabel: false,
39 privacyText: true,
40 state: true,
41 blacklistInfo: true
42 }
33 43
34 constructor ( 44 constructor (
35 protected router: Router, 45 protected router: Router,