aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-04-05 14:16:48 +0200
committerChocobozzz <me@florianbigard.com>2019-04-05 14:16:48 +0200
commit8dfceec44a5eec8b0190d1d5076aab0f03a0cb52 (patch)
tree70ff676157240702a2013f2f6d705bfc342a8a81 /client
parent3a0fb65c61f80b510bce979a45d59d17948745e8 (diff)
downloadPeerTube-8dfceec44a5eec8b0190d1d5076aab0f03a0cb52.tar.gz
PeerTube-8dfceec44a5eec8b0190d1d5076aab0f03a0cb52.tar.zst
PeerTube-8dfceec44a5eec8b0190d1d5076aab0f03a0cb52.zip
video add to playlist component -> onpush strategy
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/forms/peertube-checkbox.component.scss2
-rw-r--r--client/src/app/shared/forms/peertube-checkbox.component.ts11
-rw-r--r--client/src/app/shared/misc/screen.service.ts4
-rw-r--r--client/src/app/shared/video-playlist/video-add-to-playlist.component.html4
-rw-r--r--client/src/app/shared/video-playlist/video-add-to-playlist.component.scss1
-rw-r--r--client/src/app/shared/video-playlist/video-add-to-playlist.component.ts22
-rw-r--r--client/src/app/shared/video/modals/video-download.component.html2
-rw-r--r--client/src/app/shared/video/modals/video-download.component.ts2
-rw-r--r--client/src/app/shared/video/video-actions-dropdown.component.ts2
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss6
-rw-r--r--client/src/app/shared/video/video-miniature.component.ts3
11 files changed, 46 insertions, 13 deletions
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index 6e4e20775..ea321ee65 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -28,4 +28,4 @@
28 position: relative; 28 position: relative;
29 top: -2px; 29 top: -2px;
30 } 30 }
31} \ No newline at end of file 31}
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts
index c1a6915e8..9578f5618 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.ts
+++ b/client/src/app/shared/forms/peertube-checkbox.component.ts
@@ -1,4 +1,4 @@
1import { Component, forwardRef, Input } from '@angular/core' 1import { ChangeDetectorRef, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core'
2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' 2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3 3
4@Component({ 4@Component({
@@ -21,10 +21,19 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor {
21 @Input() helpHtml: string 21 @Input() helpHtml: string
22 @Input() disabled = false 22 @Input() disabled = false
23 23
24 // FIXME: https://github.com/angular/angular/issues/10816#issuecomment-307567836
25 @Input() onPushWorkaround = false
26
27 constructor (private cdr: ChangeDetectorRef) { }
28
24 propagateChange = (_: any) => { /* empty */ } 29 propagateChange = (_: any) => { /* empty */ }
25 30
26 writeValue (checked: boolean) { 31 writeValue (checked: boolean) {
27 this.checked = checked 32 this.checked = checked
33
34 if (this.onPushWorkaround) {
35 this.cdr.markForCheck()
36 }
28 } 37 }
29 38
30 registerOnChange (fn: (_: any) => void) { 39 registerOnChange (fn: (_: any) => void) {
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index db481204e..af75569d9 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -18,6 +18,10 @@ export class ScreenService {
18 return this.getWindowInnerWidth() < 500 18 return this.getWindowInnerWidth() < 500
19 } 19 }
20 20
21 isInTouchScreen () {
22 return 'ontouchstart' in window || navigator.msMaxTouchPoints
23 }
24
21 // Cache window inner width, because it's an expensive call 25 // Cache window inner width, because it's an expensive call
22 private getWindowInnerWidth () { 26 private getWindowInnerWidth () {
23 if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth() 27 if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
index 6029b3648..648d580fa 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -42,7 +42,7 @@
42 </div> 42 </div>
43 43
44 <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)"> 44 <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
45 <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist"></my-peertube-checkbox> 45 <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
46 46
47 <div class="display-name"> 47 <div class="display-name">
48 {{ playlist.displayName }} 48 {{ playlist.displayName }}
@@ -56,7 +56,7 @@
56 <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened"> 56 <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
57 <my-global-icon iconName="add"></my-global-icon> 57 <my-global-icon iconName="add"></my-global-icon>
58 58
59 Create a new playlist 59 Create a private playlist
60 </div> 60 </div>
61 61
62 <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form"> 62 <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index 0424e2ee9..c677fea6c 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -40,6 +40,7 @@
40 40
41 .options-row { 41 .options-row {
42 margin-top: 10px; 42 margin-top: 10px;
43 padding-left: 10px;
43 44
44 > div { 45 > div {
45 display: flex; 46 display: flex;
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
index 152f20c85..7dcdf7a9e 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
@@ -1,4 +1,4 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
2import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' 2import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
3import { AuthService, Notifier } from '@app/core' 3import { AuthService, Notifier } from '@app/core'
4import { forkJoin } from 'rxjs' 4import { forkJoin } from 'rxjs'
@@ -19,7 +19,8 @@ type PlaylistSummary = {
19@Component({ 19@Component({
20 selector: 'my-video-add-to-playlist', 20 selector: 'my-video-add-to-playlist',
21 styleUrls: [ './video-add-to-playlist.component.scss' ], 21 styleUrls: [ './video-add-to-playlist.component.scss' ],
22 templateUrl: './video-add-to-playlist.component.html' 22 templateUrl: './video-add-to-playlist.component.html',
23 changeDetection: ChangeDetectionStrategy.OnPush
23}) 24})
24export class VideoAddToPlaylistComponent extends FormReactive implements OnInit { 25export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
25 @Input() video: Video 26 @Input() video: Video
@@ -42,7 +43,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
42 private notifier: Notifier, 43 private notifier: Notifier,
43 private i18n: I18n, 44 private i18n: I18n,
44 private videoPlaylistService: VideoPlaylistService, 45 private videoPlaylistService: VideoPlaylistService,
45 private videoPlaylistValidatorsService: VideoPlaylistValidatorsService 46 private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
47 private cd: ChangeDetectorRef
46 ) { 48 ) {
47 super() 49 super()
48 } 50 }
@@ -79,6 +81,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
79 stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined 81 stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
80 }) 82 })
81 } 83 }
84
85 this.cd.markForCheck()
82 } 86 }
83 ) 87 )
84 } 88 }
@@ -107,6 +111,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
107 111
108 playlist.inPlaylist = !playlist.inPlaylist 112 playlist.inPlaylist = !playlist.inPlaylist
109 this.resetOptions() 113 this.resetOptions()
114
115 this.cd.markForCheck()
110 } 116 }
111 117
112 createPlaylist () { 118 createPlaylist () {
@@ -126,6 +132,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
126 }) 132 })
127 133
128 this.isNewPlaylistBlockOpened = false 134 this.isNewPlaylistBlockOpened = false
135
136 this.cd.markForCheck()
129 }, 137 },
130 138
131 err => this.notifier.error(err.message) 139 err => this.notifier.error(err.message)
@@ -165,7 +173,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
165 this.notifier.error(err.message) 173 this.notifier.error(err.message)
166 174
167 playlist.inPlaylist = true 175 playlist.inPlaylist = true
168 } 176 },
177
178 () => this.cd.markForCheck()
169 ) 179 )
170 } 180 }
171 181
@@ -194,7 +204,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
194 this.notifier.error(err.message) 204 this.notifier.error(err.message)
195 205
196 playlist.inPlaylist = false 206 playlist.inPlaylist = false
197 } 207 },
208
209 () => this.cd.markForCheck()
198 ) 210 )
199 } 211 }
200} 212}
diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index 2bb5d6d37..dd01c1388 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -9,7 +9,7 @@
9 <div class="input-group input-group-sm"> 9 <div class="input-group input-group-sm">
10 <div class="input-group-prepend peertube-select-container"> 10 <div class="input-group-prepend peertube-select-container">
11 <select [(ngModel)]="resolutionId"> 11 <select [(ngModel)]="resolutionId">
12 <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option> 12 <option *ngFor="let file of video?.files" [value]="file.resolution.id">{{ file.resolution.label }}</option>
13 </select> 13 </select>
14 </div> 14 </div>
15 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" /> 15 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
diff --git a/client/src/app/shared/video/modals/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts
index 64aaeb3c8..d6d10d29e 100644
--- a/client/src/app/shared/video/modals/video-download.component.ts
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@@ -15,7 +15,7 @@ export class VideoDownloadComponent {
15 downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent' 15 downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent'
16 resolutionId: number | string = -1 16 resolutionId: number | string = -1
17 17
18 private video: VideoDetails 18 video: VideoDetails
19 19
20 constructor ( 20 constructor (
21 private notifier: Notifier, 21 private notifier: Notifier,
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
index 90bdf7df8..787ef1188 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -46,7 +46,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
46 delete: true, 46 delete: true,
47 report: true 47 report: true
48 } 48 }
49 @Input() placement: string = 'left' 49 @Input() placement = 'left'
50 50
51 @Input() label: string 51 @Input() label: string
52 52
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 0d4e59c2a..fa2739f00 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -99,6 +99,7 @@
99 99
100 .video-miniature-information { 100 .video-miniature-information {
101 width: auto; 101 width: auto;
102 min-width: 500px;
102 103
103 .video-miniature-name { 104 .video-miniature-name {
104 @include ellipsis-multiline(1.3em, 2); 105 @include ellipsis-multiline(1.3em, 2);
@@ -111,6 +112,7 @@
111 .video-miniature-account, 112 .video-miniature-account,
112 .video-miniature-channel { 113 .video-miniature-channel {
113 font-size: 14px; 114 font-size: 14px;
115 width: fit-content;
114 } 116 }
115 117
116 .video-info-privacy { 118 .video-info-privacy {
@@ -134,6 +136,10 @@
134 my-video-thumbnail { 136 my-video-thumbnail {
135 margin-right: 0; 137 margin-right: 0;
136 } 138 }
139
140 .video-miniature-information {
141 min-width: initial;
142 }
137 } 143 }
138 } 144 }
139} 145}
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index e3552abba..e32b8cbc5 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -72,7 +72,8 @@ export class VideoMiniatureComponent implements OnInit {
72 ngOnInit () { 72 ngOnInit () {
73 this.setUpBy() 73 this.setUpBy()
74 74
75 if (this.screenService.isInSmallView()) { 75 // We rely on mouseenter to lazy load actions
76 if (this.screenService.isInTouchScreen()) {
76 this.showActions = true 77 this.showActions = true
77 } 78 }
78 } 79 }