aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-21 09:25:02 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-21 09:25:02 +0100
commit5def76ebba937594c77070dba14aff8f168ced24 (patch)
tree79371616329666272936a151d2c27eccd9f5d35b /client/src/app/videos
parent3921166d78540a08d329793c9c2f952135c6fd67 (diff)
downloadPeerTube-5def76ebba937594c77070dba14aff8f168ced24.tar.gz
PeerTube-5def76ebba937594c77070dba14aff8f168ced24.tar.zst
PeerTube-5def76ebba937594c77070dba14aff8f168ced24.zip
Add autoplay tooltip, use of flex-wrap in video-info and other-videos
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss11
-rw-r--r--client/src/app/videos/recommendations/recommended-videos.component.html6
-rw-r--r--client/src/app/videos/recommendations/recommended-videos.component.scss7
-rw-r--r--client/src/app/videos/recommendations/recommended-videos.component.ts5
5 files changed, 23 insertions, 8 deletions
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 e87f59c98..25029623e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -109,7 +109,7 @@
109 </div> 109 </div>
110 110
111 <my-video-actions-dropdown 111 <my-video-actions-dropdown
112 placement="top auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" 112 placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
113 (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()" 113 (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
114 ></my-video-actions-dropdown> 114 ></my-video-actions-dropdown>
115 </div> 115 </div>
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 f9ff83c34..5da5a60dd 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -147,14 +147,13 @@ $video-info-margin-left: 44px;
147 } 147 }
148 148
149 .video-info-first-row-bottom { 149 .video-info-first-row-bottom {
150 display: grid; 150 display: flex;
151 grid-template-columns: 1fr auto; 151 flex-wrap: wrap;
152 align-items: center; 152 align-items: center;
153 width: 100%; 153 width: 100%;
154 } 154 }
155 155
156 .video-info-date-views { 156 .video-info-date-views {
157 flex-grow: 1;
158 align-self: start; 157 align-self: start;
159 margin-bottom: 10px; 158 margin-bottom: 10px;
160 margin-right: 10px; 159 margin-right: 10px;
@@ -210,8 +209,8 @@ $video-info-margin-left: 44px;
210 .video-actions-rates { 209 .video-actions-rates {
211 margin: 0 0 10px 0; 210 margin: 0 0 10px 0;
212 align-items: start; 211 align-items: start;
213 align-self: end;
214 width: max-content; 212 width: max-content;
213 margin-left: auto;
215 214
216 .video-actions { 215 .video-actions {
217 height: 40px; // Align with the title 216 height: 40px; // Align with the title
@@ -397,6 +396,10 @@ $video-info-margin-left: 44px;
397 padding-left: 15px; 396 padding-left: 15px;
398 min-width: $video-miniature-width; 397 min-width: $video-miniature-width;
399 398
399 @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
400 width: min-content;
401 }
402
400 .title-page { 403 .title-page {
401 margin: 0 !important; 404 margin: 0 !important;
402 } 405 }
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html
index c82642c1c..476eca071 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.html
+++ b/client/src/app/videos/recommendations/recommended-videos.component.html
@@ -1,10 +1,12 @@
1<div class="other-videos"> 1<div class="other-videos">
2 <ng-container *ngIf="hasVideos$ | async"> 2 <ng-container *ngIf="hasVideos$ | async">
3 <div class="d-flex title-page-container"> 3 <div class="title-page-container">
4 <div i18n class="title-page title-page-single"> 4 <div i18n class="title-page title-page-single">
5 Other videos 5 Other videos
6 </div> 6 </div>
7 <div *ngIf="!playlist" class="d-flex title-page-autoplay"> 7 <div *ngIf="!playlist" class="title-page-autoplay"
8 [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
9 >
8 <span i18n>Autoplay</span> 10 <span i18n>Autoplay</span>
9 <p-inputSwitch [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></p-inputSwitch> 11 <p-inputSwitch [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></p-inputSwitch>
10 </div> 12 </div>
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.scss b/client/src/app/videos/recommendations/recommended-videos.component.scss
index c337979d8..1ab0c47ff 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.scss
+++ b/client/src/app/videos/recommendations/recommended-videos.component.scss
@@ -1,17 +1,22 @@
1.title-page-container { 1.title-page-container {
2 display: flex;
2 justify-content: space-between; 3 justify-content: space-between;
3 align-items: center; 4 align-items: baseline;
4 margin-bottom: 25px; 5 margin-bottom: 25px;
6 flex-wrap: wrap-reverse;
5 7
6 .title-page.active, .title-page.title-page-single { 8 .title-page.active, .title-page.title-page-single {
7 margin-bottom: unset; 9 margin-bottom: unset;
10 margin-right: .5rem !important;
8 } 11 }
9} 12}
10 13
11.title-page-autoplay { 14.title-page-autoplay {
15 display: flex;
12 width: max-content; 16 width: max-content;
13 height: max-content; 17 height: max-content;
14 align-items: center; 18 align-items: center;
19 margin-left: auto;
15 20
16 span { 21 span {
17 margin-right: 0.3rem; 22 margin-right: 0.3rem;
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts
index 116b0e8f7..ada6d3433 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.ts
+++ b/client/src/app/videos/recommendations/recommended-videos.component.ts
@@ -8,6 +8,7 @@ import { User } from '@app/shared'
8import { AuthService, Notifier } from '@app/core' 8import { AuthService, Notifier } from '@app/core'
9import { UserService } from '@app/shared/users/user.service' 9import { UserService } from '@app/shared/users/user.service'
10import { peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' 10import { peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage'
11import { I18n } from '@ngx-translate/i18n-polyfill'
11 12
12@Component({ 13@Component({
13 selector: 'my-recommended-videos', 14 selector: 'my-recommended-videos',
@@ -23,6 +24,7 @@ export class RecommendedVideosComponent implements OnChanges {
23 @Output() gotRecommendations = new EventEmitter<Video[]>() 24 @Output() gotRecommendations = new EventEmitter<Video[]>()
24 25
25 autoPlayNextVideo: boolean 26 autoPlayNextVideo: boolean
27 autoPlayNextVideoTooltip: string
26 28
27 readonly hasVideos$: Observable<boolean> 29 readonly hasVideos$: Observable<boolean>
28 readonly videos$: Observable<Video[]> 30 readonly videos$: Observable<Video[]>
@@ -31,6 +33,7 @@ export class RecommendedVideosComponent implements OnChanges {
31 private userService: UserService, 33 private userService: UserService,
32 private authService: AuthService, 34 private authService: AuthService,
33 private notifier: Notifier, 35 private notifier: Notifier,
36 private i18n: I18n,
34 private store: RecommendedVideosStore 37 private store: RecommendedVideosStore
35 ) { 38 ) {
36 this.videos$ = this.store.recommendations$ 39 this.videos$ = this.store.recommendations$
@@ -40,6 +43,8 @@ export class RecommendedVideosComponent implements OnChanges {
40 this.autoPlayNextVideo = this.authService.isLoggedIn() 43 this.autoPlayNextVideo = this.authService.isLoggedIn()
41 ? this.authService.getUser().autoPlayNextVideo 44 ? this.authService.getUser().autoPlayNextVideo
42 : peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false 45 : peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false
46
47 this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.')
43 } 48 }
44 49
45 public ngOnChanges (): void { 50 public ngOnChanges (): void {