Video previews take all the width on mobile

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 @@
   }
 }
 
-@media screen and (max-width: 400px) and (min-resolution: 1.5dppx) {
+@media screen and (max-width: 500px) {
   .videos {
     text-align: center;
 
     /deep/ .video-miniature {
       padding-right: 0;
-      height: 215px;
+      height: auto;
       width: 100%;
+      margin-bottom: 20px;
 
       .video-miniature-information {
-        width: 100%;
+        width: 100% !important;
+
+        span {
+          width: 100%;
+        }
       }
 
       /deep/ .video-thumbnail {
         width: 100%;
 
         img {
+          height: auto;
           width: 100%;
         }
       }
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 @@
 import { OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
+import { isInMobileView, isInSmallView } from '@app/shared/misc/utils'
 import { NotificationsService } from 'angular2-notifications'
 import { Observable } from 'rxjs/Observable'
 import { AuthService } from '../../core/auth'
@@ -42,6 +43,10 @@ export abstract class AbstractVideoList implements OnInit {
     const routeParams = this.route.snapshot.params
     this.loadRouteParams(routeParams)
 
+    if (isInMobileView()) {
+      this.pagination.itemsPerPage = 5
+    }
+
     if (this.loadOnInit === true) this.loadMoreVideos('after')
   }
 
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 @@
   [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
 class="video-thumbnail"
 >
-<img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': nsfw }" />
+<img [attr.src]="getImageUrl()" alt="video thumbnail" [ngClass]="{ 'blur-filter': nsfw }" />
 
 <div class="video-thumbnail-overlay">
   {{ 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 @@
     text-decoration: none !important;
   }
 
-  img.blur-filter {
-    filter: blur(5px);
-    transform : scale(1.03);
+  img {
+    width: $video-thumbnail-width;
+    height: $video-thumbnail-height;
+
+    &.blur-filter {
+      filter: blur(5px);
+      transform : scale(1.03);
+    }
   }
 
   .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 @@
 import { Component, Input } from '@angular/core'
+import { isInMobileView } from '@app/shared/misc/utils'
 import { Video } from './video.model'
 
 @Component({
@@ -9,4 +10,14 @@ import { Video } from './video.model'
 export class VideoThumbnailComponent {
   @Input() video: Video
   @Input() nsfw = false
+
+  getImageUrl () {
+    if (!this.video) return ''
+
+    if (isInMobileView()) {
+      return this.video.previewUrl
+    }
+
+    return this.video.thumbnailUrl
+  }
 }