aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/video
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-02-09 09:30:37 +0100
committerChocobozzz <me@florianbigard.com>2018-02-09 09:30:37 +0100
commit3290f37c76784f1b96cefb5d389e48db56033b0a (patch)
treef383d1ea4ca666ac976c80c9a1277edd2ef0ef7e /client/src/app/shared/video
parent7193ad1044d2dfad8f929f0951f9a3601c056f67 (diff)
downloadPeerTube-3290f37c76784f1b96cefb5d389e48db56033b0a.tar.gz
PeerTube-3290f37c76784f1b96cefb5d389e48db56033b0a.tar.zst
PeerTube-3290f37c76784f1b96cefb5d389e48db56033b0a.zip
Video previews take all the width on mobile
Diffstat (limited to 'client/src/app/shared/video')
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss12
-rw-r--r--client/src/app/shared/video/abstract-video-list.ts5
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.html2
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.scss11
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.ts11
5 files changed, 34 insertions, 7 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 0f0ff20f0..3fdfcefa0 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -6,23 +6,29 @@
6 } 6 }
7} 7}
8 8
9@media screen and (max-width: 400px) and (min-resolution: 1.5dppx) { 9@media screen and (max-width: 500px) {
10 .videos { 10 .videos {
11 text-align: center; 11 text-align: center;
12 12
13 /deep/ .video-miniature { 13 /deep/ .video-miniature {
14 padding-right: 0; 14 padding-right: 0;
15 height: 215px; 15 height: auto;
16 width: 100%; 16 width: 100%;
17 margin-bottom: 20px;
17 18
18 .video-miniature-information { 19 .video-miniature-information {
19 width: 100%; 20 width: 100% !important;
21
22 span {
23 width: 100%;
24 }
20 } 25 }
21 26
22 /deep/ .video-thumbnail { 27 /deep/ .video-thumbnail {
23 width: 100%; 28 width: 100%;
24 29
25 img { 30 img {
31 height: auto;
26 width: 100%; 32 width: 100%;
27 } 33 }
28 } 34 }
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index bf0827207..a25fc532c 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -1,5 +1,6 @@
1import { OnInit } from '@angular/core' 1import { OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 2import { ActivatedRoute, Router } from '@angular/router'
3import { isInMobileView, isInSmallView } from '@app/shared/misc/utils'
3import { NotificationsService } from 'angular2-notifications' 4import { NotificationsService } from 'angular2-notifications'
4import { Observable } from 'rxjs/Observable' 5import { Observable } from 'rxjs/Observable'
5import { AuthService } from '../../core/auth' 6import { AuthService } from '../../core/auth'
@@ -42,6 +43,10 @@ export abstract class AbstractVideoList implements OnInit {
42 const routeParams = this.route.snapshot.params 43 const routeParams = this.route.snapshot.params
43 this.loadRouteParams(routeParams) 44 this.loadRouteParams(routeParams)
44 45
46 if (isInMobileView()) {
47 this.pagination.itemsPerPage = 5
48 }
49
45 if (this.loadOnInit === true) this.loadMoreVideos('after') 50 if (this.loadOnInit === true) this.loadMoreVideos('after')
46 } 51 }
47 52
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index 5c698e8f6..8acfb3c41 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -2,7 +2,7 @@
2 [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name" 2 [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
3class="video-thumbnail" 3class="video-thumbnail"
4> 4>
5<img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': nsfw }" /> 5<img [attr.src]="getImageUrl()" alt="video thumbnail" [ngClass]="{ 'blur-filter': nsfw }" />
6 6
7<div class="video-thumbnail-overlay"> 7<div class="video-thumbnail-overlay">
8 {{ video.durationLabel }} 8 {{ video.durationLabel }}
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 0fc2df220..4840a9e4f 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -11,9 +11,14 @@
11 text-decoration: none !important; 11 text-decoration: none !important;
12 } 12 }
13 13
14 img.blur-filter { 14 img {
15 filter: blur(5px); 15 width: $video-thumbnail-width;
16 transform : scale(1.03); 16 height: $video-thumbnail-height;
17
18 &.blur-filter {
19 filter: blur(5px);
20 transform : scale(1.03);
21 }
17 } 22 }
18 23
19 .video-thumbnail-overlay { 24 .video-thumbnail-overlay {
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index e543e9903..e52f7dfb0 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -1,4 +1,5 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input } from '@angular/core'
2import { isInMobileView } from '@app/shared/misc/utils'
2import { Video } from './video.model' 3import { Video } from './video.model'
3 4
4@Component({ 5@Component({
@@ -9,4 +10,14 @@ import { Video } from './video.model'
9export class VideoThumbnailComponent { 10export class VideoThumbnailComponent {
10 @Input() video: Video 11 @Input() video: Video
11 @Input() nsfw = false 12 @Input() nsfw = false
13
14 getImageUrl () {
15 if (!this.video) return ''
16
17 if (isInMobileView()) {
18 return this.video.previewUrl
19 }
20
21 return this.video.thumbnailUrl
22 }
12} 23}