From 3290f37c76784f1b96cefb5d389e48db56033b0a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 9 Feb 2018 09:30:37 +0100 Subject: [PATCH] Video previews take all the width on mobile --- client/src/app/app.component.ts | 6 +++--- .../app/shared/forms/markdown-textarea.component.ts | 4 ++-- client/src/app/shared/misc/utils.ts | 7 ++++++- client/src/app/shared/video/abstract-video-list.scss | 12 +++++++++--- client/src/app/shared/video/abstract-video-list.ts | 5 +++++ .../app/shared/video/video-thumbnail.component.html | 2 +- .../app/shared/video/video-thumbnail.component.scss | 11 ++++++++--- .../app/shared/video/video-thumbnail.component.ts | 11 +++++++++++ client/src/manifest.json | 2 +- client/src/sass/include/_variables.scss | 3 +++ 10 files changed, 49 insertions(+), 14 deletions(-) diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 121e60ffc..220b104b7 100644 --- a/client/src/app/app.component.ts +++ b/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 } } diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts index 20f13b28c..2eae1b27e 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.ts +++ b/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 () { diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index 0e6e6b366..6620ac973 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/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 } 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" > -video thumbnail +video thumbnail
{{ 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 + } } diff --git a/client/src/manifest.json b/client/src/manifest.json index a9e885739..4954717db 100644 --- a/client/src/manifest.json +++ b/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", diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 0d310409b..e7bed418e 100644 --- a/client/src/sass/include/_variables.scss +++ b/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;