Video previews take all the width on mobile

client/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router'
 import { AuthService, ServerService } from '@app/core'
-import { isInMobileView } from '@app/shared/misc/utils'
+import { isInSmallView } from '@app/shared/misc/utils'
 
 @Component({
   selector: 'my-app',
@@ -54,14 +54,14 @@ export class AppComponent implements OnInit {
     this.serverService.loadVideoPrivacies()
 
     // Do not display menu on small screens
-    if (isInMobileView()) {
+    if (isInSmallView()) {
       this.isMenuDisplayed = false
     }
 
     this.router.events.subscribe(
       e => {
         // User clicked on a link in the menu, change the page
-        if (e instanceof GuardsCheckStart && isInMobileView()) {
+        if (e instanceof GuardsCheckStart && isInSmallView()) {
           this.isMenuDisplayed = false
         }
       }

client/src/app/shared/forms/markdown-textarea.component.ts

@@ -2,7 +2,7 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import 'rxjs/add/operator/debounceTime'
 import 'rxjs/add/operator/distinctUntilChanged'
-import { isInMobileView } from '@app/shared/misc/utils'
+import { isInSmallView } from '@app/shared/misc/utils'
 import { MarkdownService } from '@app/videos/shared'
 import { Subject } from 'rxjs/Subject'
 import truncate from 'lodash-es/truncate'
@@ -74,7 +74,7 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   }
 
   arePreviewsDisplayed () {
-    return isInMobileView() === false
+    return isInSmallView() === false
   }
 
   private updateDescriptionPreviews () {

client/src/app/shared/misc/utils.ts

@@ -55,15 +55,20 @@ function dateToHuman (date: string) {
   return datePipe.transform(date, 'medium')
 }
 
-function isInMobileView () {
+function isInSmallView () {
   return window.innerWidth < 600
 }
 
+function isInMobileView () {
+  return window.innerWidth < 500
+}
+
 export {
   viewportHeight,
   getParameterByName,
   populateAsyncUserVideoChannels,
   getAbsoluteAPIUrl,
   dateToHuman,
+  isInSmallView,
   isInMobileView
 }

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%;
         }
       }

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')
   }
 

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 }}

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 {

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
+  }
 }

client/src/manifest.json

@@ -1,5 +1,5 @@
 {
-  "background_color": "gray",
+  "background_color": "white",
   "description": "A federated video streaming platform using P2P",
   "display": "fullscreen",
   "orientation": "portrait",

client/src/sass/include/_variables.scss

@@ -27,3 +27,6 @@ $footer-height: 30px;
 $footer-margin: 30px;
 
 $footer-border-color: $header-border-color;
+
+$video-thumbnail-height: 110px;
+$video-thumbnail-width: 200px;