OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Limit thumbnail sizes

pull/2868/head
Chocobozzz 2020-06-11 14:33:33 +02:00
parent 7e4022a554
commit cf78883c70
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
15 changed files with 151 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
View File

@ -3,7 +3,7 @@
@import '_miniature';
.margin-content {
@include adapt-margin-content-width;
@include fluid-videos-miniature-layout;
}
.section {

2
client/src/app/search/search.component.html
View File

@ -54,7 +54,7 @@
<div *ngIf="isVideo(result)" class="entry video">
<my-video-miniature
[video]="result" [user]="user" [displayAsRow]="true" [displayVideoActions]="!hideActions()"
[useLazyLoadUrl]="advancedSearch.searchTarget === 'search-index'"
[displayOptions]="videoDisplayOptions" [useLazyLoadUrl]="advancedSearch.searchTarget === 'search-index'"
(videoBlocked)="removeVideoFromArray(result)" (videoRemoved)="removeVideoFromArray(result)"
></my-video-miniature>
</div>

13
client/src/app/search/search.component.ts
View File

@ -8,11 +8,11 @@ import { SearchService } from '@app/search/search.service'
import { immutableAssign } from '@app/shared/misc/utils'
import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
import { Video } from '@app/shared/video/video.model'
import { MetaService } from '@ngx-meta/core'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { ServerConfig } from '@shared/models'
import { UserService } from '@app/shared'
import { SearchTargetType } from '@shared/models/search/search-target-query.model'
@Component({
@ -32,6 +32,17 @@ export class SearchComponent implements OnInit, OnDestroy {
isSearchFilterCollapsed = true
currentSearch: string
videoDisplayOptions: MiniatureDisplayOptions = {
date: true,
views: true,
by: true,
avatar: false,
privacyLabel: false,
privacyText: false,
state: false,
blacklistInfo: false
}
errorMessage: string
serverConfig: ServerConfig

10
client/src/app/shared/misc/screen.service.ts
View File

@ -36,11 +36,11 @@ export class ScreenService {
let numberOfVideos = 1
if (screenWidth > 1850) numberOfVideos = 6
else if (screenWidth > 1600) numberOfVideos = 5
else if (screenWidth > 1370) numberOfVideos = 4
else if (screenWidth > 1100) numberOfVideos = 3
else if (screenWidth > 850) numberOfVideos = 2
if (screenWidth > 1850) numberOfVideos = 7
else if (screenWidth > 1600) numberOfVideos = 6
else if (screenWidth > 1370) numberOfVideos = 5
else if (screenWidth > 1100) numberOfVideos = 4
else if (screenWidth > 850) numberOfVideos = 3
return numberOfVideos
}

16
client/src/app/shared/video/abstract-video-list.html
View File

@ -35,13 +35,15 @@
{{ getCurrentGroupedDateLabel(video) }}
</div>
<my-video-miniature
[fitWidth]="true"
[video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
[displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
(videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
>
</my-video-miniature>
<div class="video-wrapper">
<my-video-miniature
[fitWidth]="true"
[video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
[displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
(videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
>
</my-video-miniature>
</div>
</ng-container>
</div>
</div>

23
client/src/app/shared/video/abstract-video-list.scss
View File

@ -3,24 +3,6 @@
@import '_mixins';
@import '_miniature';
.videos {
$column-width: #{$video-thumbnail-width - 25px};
display: grid;
column-gap: calc(10px + .2%);
grid-template-columns: repeat(
auto-fill,
minmax(
var(--miniature-min-width, #{$column-width}),
1fr
)
);
@media screen and (min-width: #{breakpoint(fhd)}) {
--miniature-min-width: #{$column-width + 100px};
}
}
.videos-header {
display: flex;
justify-content: space-between;
@ -74,8 +56,8 @@
}
}
:host-context(.main-col:not(.expanded)) .margin-content {
@include adapt-margin-content-width($fluid: true);
.margin-content {
@include fluid-videos-miniature-layout;
}
@media screen and (max-width: $mobile-view) {
@ -83,6 +65,7 @@
flex-direction: column;
align-items: center;
height: auto;
margin-bottom: 10px;
.title-page {
margin-bottom: 10px;

7
client/src/app/shared/video/abstract-video-list.ts
View File

@ -56,7 +56,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
date: true,
views: true,
by: true,
avatar: true,
avatar: false,
privacyLabel: true,
privacyText: false,
state: false,
@ -139,6 +139,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
if (this.hasDoneFirstQuery) this.reloadVideos()
}
)
// Display avatar in mobile view
if (this.screenService.isInMobileView()) {
this.displayOptions.avatar = true
}
}
ngOnDestroy () {

22
client/src/app/shared/video/video-miniature.component.html
View File

@ -9,32 +9,34 @@
<div class="video-bottom">
<div class="video-miniature-information">
<a
tabindex="-1"
class="video-miniature-name"
[routerLink]="videoLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
>{{ video.name }}</a>
<div class="d-inline-flex">
<avatar-channel *ngIf="displayOptions.avatar" class="mr-1 pt-1" [video]="video" size="sm"></avatar-channel>
<div *ngIf="displayOptions.avatar" class="avatar">
<img [src]="getAvatarUrl()" alt="Avatar" />
</div>
<div class="d-flex flex-column">
<a
tabindex="-1"
class="video-miniature-name"
[routerLink]="videoLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
>{{ video.name }}</a>
<span class="video-miniature-created-at-views">
<my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle>
<span class="views">
<ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
<ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>
</span>
</span>
<a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
{{ video.byAccount }}
</a>
<a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
{{ video.byVideoChannel }}
</a>
<div class="video-info-privacy">
<ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container>
<ng-container *ngIf="displayOptions.privacyText && displayOptions.state && getStateLabel(video)"> - </ng-container>

14
client/src/app/shared/video/video-miniature.component.scss
View File

@ -19,16 +19,22 @@ $more-margin-right: 15px;
.video-miniature-information {
width: $video-miniature-width - $more-button-width - $more-margin-right;
line-height: normal;
font-size: 13px;
.avatar {
margin: 10px 10px 0 0;
img {
@include avatar(40px);
}
}
.video-miniature-name {
@include miniature-name;
font-size: 110%;
}
.video-miniature-created-at-views {
display: block;
font-size: 95%;
font-size: 13px;
}
.video-miniature-account,
@ -37,7 +43,7 @@ $more-margin-right: 15px;
@include ellipsis;
display: block;
font-size: 95%;
font-size: 13px;
color: pvar(--greyForegroundColor);
&:hover {

8
client/src/app/shared/video/video-miniature.component.ts
View File

@ -178,6 +178,14 @@ export class VideoMiniatureComponent implements OnInit {
return ''
}
getAvatarUrl () {
if (this.ownerDisplayTypeChosen === 'account') {
return this.video.accountAvatarUrl
}
return this.video.videoChannelAvatarUrl
}
loadActions () {
if (this.displayVideoActions) this.showActions = true

24
client/src/app/videos/video-list/video-overview.component.html
View File

@ -7,25 +7,29 @@
>
<ng-container *ngFor="let overview of overviews">
<div class="section" *ngFor="let object of overview.categories">
<div class="section videos" *ngFor="let object of overview.categories">
<div class="section-title">
<a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
</div>
<my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
</my-video-miniature>
<div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
<my-video-miniature [video]="video" [fitWidth]="true" [user]="user" [displayVideoActions]="false">
</my-video-miniature>
</div>
</div>
<div class="section" *ngFor="let object of overview.tags">
<div class="section videos" *ngFor="let object of overview.tags">
<div class="section-title">
<a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
</div>
<my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
</my-video-miniature>
<div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
<my-video-miniature [video]="video" [fitWidth]="true" [user]="user" [displayVideoActions]="false">
</my-video-miniature>
</div>
</div>
<div class="section channel" *ngFor="let object of overview.channels">
<div class="section channel videos" *ngFor="let object of overview.channels">
<div class="section-title">
<a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
<img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
@ -34,8 +38,10 @@
</a>
</div>
<my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
</my-video-miniature>
<div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
<my-video-miniature [video]="video" [fitWidth]="true" [user]="user" [displayVideoActions]="false">
</my-video-miniature>
</div>
</div>
</ng-container>

7
client/src/app/videos/video-list/video-overview.component.scss
View File

@ -2,8 +2,13 @@
@import '_mixins';
@import '_miniature';
.section-title {
// make the element span a full grid row within .videos grid
grid-column: 1 / -1;
}
.margin-content {
@include adapt-margin-content-width;
@include fluid-videos-miniature-layout;
}
.section {

2
client/src/sass/include/_bootstrap-variables.scss
View File

@ -18,7 +18,7 @@ $grid-breakpoints: (
xxl: 1600px,
// SCREEN GROUP
fhd: 1920px,
fhd: 1800px,
qhd: 2560px,
uhd: 3840px
);

123
client/src/sass/include/_miniature.scss
View File

@ -108,38 +108,6 @@ $play-overlay-width: 18px;
color: #fff;
}
@mixin video-miniature-small-screen {
text-align: center;
::ng-deep .video-miniature {
padding-right: 0;
height: auto;
width: 100%;
margin-bottom: 20px;
.video-miniature-information {
width: 100% !important;
text-align: left;
span {
width: 100%;
}
}
.video-thumbnail {
margin-bottom: 10px;
width: 100%;
height: calc(100% / #{$video-thumbnail-ratio});
border-radius: 0;
img {
width: 100%;
height: 100%;
}
}
}
}
@mixin miniature-rows {
&:first-child {
padding-top: 30px;
@ -149,10 +117,6 @@ $play-overlay-width: 18px;
}
}
my-video-miniature {
text-align: left;
}
.section-title {
font-size: 24px;
font-weight: $font-semibold;
@ -213,44 +177,81 @@ $play-overlay-width: 18px;
max-height: initial;
overflow: initial;
@include video-miniature-small-screen;
.section-title {
font-size: 17px;
margin-left: 10px;
}
}
}
@mixin adapt-margin-content-width($fluid: false) {
@if $fluid {
margin-left: 3vw !important;
margin-right: 3vw !important;
} @else {
width: $video-miniature-width * 6;
margin: auto !important;
@mixin fluid-videos-miniature-layout {
margin-left: 3vw !important;
margin-right: 3vw !important;
@media screen and (max-width: 1800px) {
width: $video-miniature-width * 5;
@media screen and (max-width: $mobile-view) {
width: auto;
margin: 0 !important;
.videos {
text-align: center;
::ng-deep .video-miniature {
padding-right: 0;
height: auto;
width: 100%;
margin-bottom: 25px;
.video-miniature-information {
width: 100% !important;
text-align: left;
span {
width: 100%;
}
}
.video-thumbnail {
border-radius: 0;
}
}
}
}
@media screen and (max-width: 1800px - $video-miniature-width) {
width: $video-miniature-width * 4;
}
@media screen and (min-width: #{breakpoint(fhd)}) {
margin-left: 6vw !important;
margin-right: 6vw !important;
}
@media screen and (max-width: 1800px - (2* $video-miniature-width)) {
width: $video-miniature-width * 3;
}
@media screen and (min-width: $mobile-view) {
@media screen and (max-width: 1800px - (3* $video-miniature-width)) {
width: $video-miniature-width * 2;
}
.videos {
--miniature-min-width: #{$video-thumbnail-width - 15px};
--miniature-max-width: #{$video-thumbnail-width};
@media screen and (max-width: $mobile-view) {
width: auto;
margin: 0 !important;
display: grid;
column-gap: 5px;
grid-template-columns: repeat(
auto-fill,
minmax(
var(--miniature-min-width),
1fr
)
);
.videos {
@include video-miniature-small-screen;
@media screen and (min-width: #{breakpoint(fhd)}) {
column-gap: 1%;
--miniature-min-width: #{$video-thumbnail-width};
}
.video-wrapper {
margin: 0 auto;
width: 100%;
my-video-miniature {
display: block;
min-width: var(--miniature-min-width);
max-width: var(--miniature-max-width);
}
}
}
}

1
client/src/sass/include/_variables.scss
View File

@ -59,7 +59,6 @@ $video-miniature-width: 238px;
$video-miniature-margin-bottom: 30px;
$video-thumbnail-height: 122px;
$video-thumbnail-width: 223px;
$video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height;
$theater-bottom-space: 115px;