diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts index b04e230f0..7180400b5 100644 --- a/client/src/app/shared/user-subscription/subscribe-button.component.ts +++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts @@ -70,7 +70,11 @@ export class SubscribeButtonComponent implements OnInit { this.subscribed = true this.notifier.success( - this.i18n('Subscribed to {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName }), + this.i18n( + 'Subscribed to {{nameWithHost}}. ' + + 'You will be notified of all their new videos.', + { nameWithHost: this.videoChannel.displayName } + ), this.i18n('Subscribed') ) }, 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 @@ 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; } .video-info-first-row-bottom { - display: grid; - grid-template-columns: 1fr auto; + display: flex; + flex-wrap: wrap; align-items: center; width: 100%; } .video-info-date-views { - flex-grow: 1; align-self: start; margin-bottom: 10px; margin-right: 10px; @@ -210,8 +209,8 @@ $video-info-margin-left: 44px; .video-actions-rates { margin: 0 0 10px 0; align-items: start; - align-self: end; width: max-content; + margin-left: auto; .video-actions { height: 40px; // Align with the title @@ -397,6 +396,10 @@ $video-info-margin-left: 44px; padding-left: 15px; min-width: $video-miniature-width; + @media screen and (min-width: 1800px - (3* $video-miniature-width)) { + width: min-content; + } + .title-page { margin: 0 !important; } 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 @@
-
+
Other videos
-
+
Autoplay
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 @@ .title-page-container { + display: flex; justify-content: space-between; - align-items: center; + align-items: baseline; margin-bottom: 25px; + flex-wrap: wrap-reverse; .title-page.active, .title-page.title-page-single { margin-bottom: unset; + margin-right: .5rem !important; } } .title-page-autoplay { + display: flex; width: max-content; height: max-content; align-items: center; + margin-left: auto; span { 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' import { AuthService, Notifier } from '@app/core' import { UserService } from '@app/shared/users/user.service' import { peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' +import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-recommended-videos', @@ -23,6 +24,7 @@ export class RecommendedVideosComponent implements OnChanges { @Output() gotRecommendations = new EventEmitter() autoPlayNextVideo: boolean + autoPlayNextVideoTooltip: string readonly hasVideos$: Observable readonly videos$: Observable @@ -31,6 +33,7 @@ export class RecommendedVideosComponent implements OnChanges { private userService: UserService, private authService: AuthService, private notifier: Notifier, + private i18n: I18n, private store: RecommendedVideosStore ) { this.videos$ = this.store.recommendations$ @@ -40,6 +43,8 @@ export class RecommendedVideosComponent implements OnChanges { this.autoPlayNextVideo = this.authService.isLoggedIn() ? this.authService.getUser().autoPlayNextVideo : peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' || false + + this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.') } public ngOnChanges (): void {