aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
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
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')
-rw-r--r--client/src/app/app.component.ts6
-rw-r--r--client/src/app/shared/forms/markdown-textarea.component.ts4
-rw-r--r--client/src/app/shared/misc/utils.ts7
-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
-rw-r--r--client/src/manifest.json2
-rw-r--r--client/src/sass/include/_variables.scss3
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 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router' 2import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router'
3import { AuthService, ServerService } from '@app/core' 3import { AuthService, ServerService } from '@app/core'
4import { isInMobileView } from '@app/shared/misc/utils' 4import { isInSmallView } from '@app/shared/misc/utils'
5 5
6@Component({ 6@Component({
7 selector: 'my-app', 7 selector: 'my-app',
@@ -54,14 +54,14 @@ export class AppComponent implements OnInit {
54 this.serverService.loadVideoPrivacies() 54 this.serverService.loadVideoPrivacies()
55 55
56 // Do not display menu on small screens 56 // Do not display menu on small screens
57 if (isInMobileView()) { 57 if (isInSmallView()) {
58 this.isMenuDisplayed = false 58 this.isMenuDisplayed = false
59 } 59 }
60 60
61 this.router.events.subscribe( 61 this.router.events.subscribe(
62 e => { 62 e => {
63 // User clicked on a link in the menu, change the page 63 // User clicked on a link in the menu, change the page
64 if (e instanceof GuardsCheckStart && isInMobileView()) { 64 if (e instanceof GuardsCheckStart && isInSmallView()) {
65 this.isMenuDisplayed = false 65 this.isMenuDisplayed = false
66 } 66 }
67 } 67 }
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'
2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' 2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3import 'rxjs/add/operator/debounceTime' 3import 'rxjs/add/operator/debounceTime'
4import 'rxjs/add/operator/distinctUntilChanged' 4import 'rxjs/add/operator/distinctUntilChanged'
5import { isInMobileView } from '@app/shared/misc/utils' 5import { isInSmallView } from '@app/shared/misc/utils'
6import { MarkdownService } from '@app/videos/shared' 6import { MarkdownService } from '@app/videos/shared'
7import { Subject } from 'rxjs/Subject' 7import { Subject } from 'rxjs/Subject'
8import truncate from 'lodash-es/truncate' 8import truncate from 'lodash-es/truncate'
@@ -74,7 +74,7 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
74 } 74 }
75 75
76 arePreviewsDisplayed () { 76 arePreviewsDisplayed () {
77 return isInMobileView() === false 77 return isInSmallView() === false
78 } 78 }
79 79
80 private updateDescriptionPreviews () { 80 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) {
55 return datePipe.transform(date, 'medium') 55 return datePipe.transform(date, 'medium')
56} 56}
57 57
58function isInMobileView () { 58function isInSmallView () {
59 return window.innerWidth < 600 59 return window.innerWidth < 600
60} 60}
61 61
62function isInMobileView () {
63 return window.innerWidth < 500
64}
65
62export { 66export {
63 viewportHeight, 67 viewportHeight,
64 getParameterByName, 68 getParameterByName,
65 populateAsyncUserVideoChannels, 69 populateAsyncUserVideoChannels,
66 getAbsoluteAPIUrl, 70 getAbsoluteAPIUrl,
67 dateToHuman, 71 dateToHuman,
72 isInSmallView,
68 isInMobileView 73 isInMobileView
69} 74}
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}
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 @@
1{ 1{
2 "background_color": "gray", 2 "background_color": "white",
3 "description": "A federated video streaming platform using P2P", 3 "description": "A federated video streaming platform using P2P",
4 "display": "fullscreen", 4 "display": "fullscreen",
5 "orientation": "portrait", 5 "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;
27$footer-margin: 30px; 27$footer-margin: 30px;
28 28
29$footer-border-color: $header-border-color; 29$footer-border-color: $header-border-color;
30
31$video-thumbnail-height: 110px;
32$video-thumbnail-width: 200px;