Verified Commit 746018f6 authored by Chocobozzz's avatar Chocobozzz
Browse files

Refactor actor avatar display

parent ec489ce2
......@@ -8,9 +8,10 @@
<div class="channel" *ngFor="let videoChannel of videoChannels">
<div class="channel-avatar-row">
<a class="avatar-link" [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
<img [src]="videoChannel.avatarUrl" alt="Avatar" />
</a>
<my-actor-avatar
[channel]="videoChannel" [internalHref]="getVideoChannelLink(videoChannel)"
i18n-title title="See this video channel"
></my-actor-avatar>
<h2>
<a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
......
......@@ -27,14 +27,12 @@
grid-template-columns: auto auto 1fr;
grid-template-rows: auto 1fr;
.avatar-link {
my-actor-avatar {
@include actor-avatar-size(75px);
grid-column: 1;
grid-row: 1 / 3;
margin-right: 30px;
}
img {
@include channel-avatar(75px);
margin-right: 15px;
}
a {
......
......@@ -2,7 +2,7 @@
<div class="account-info">
<div class="account-avatar-row">
<my-account-avatar [account]="account" size="120"></my-account-avatar>
<my-actor-avatar class="main-avatar" [account]="account"></my-actor-avatar>
<div>
<div class="section-label" i18n>PEERTUBE ACCOUNT</div>
......
......@@ -10,7 +10,7 @@ import { AccountVideoChannelsComponent } from './account-video-channels/account-
import { AccountVideosComponent } from './account-videos/account-videos.component'
import { AccountsRoutingModule } from './accounts-routing.module'
import { AccountsComponent } from './accounts.component'
import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
@NgModule({
imports: [
......@@ -22,7 +22,7 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share
SharedModerationModule,
SharedVideoMiniatureModule,
SharedGlobalIconModule,
SharedAccountAvatarModule
SharedActorImageModule
],
declarations: [
......
......@@ -9,7 +9,7 @@ import { SharedGlobalIconModule } from '@app/shared/shared-icons'
import { SharedMainModule } from '@app/shared/shared-main'
import { SharedModerationModule } from '@app/shared/shared-moderation'
import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
import { AdminRoutingModule } from './admin-routing.module'
import { AdminComponent } from './admin.component'
import {
......@@ -51,7 +51,7 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom
SharedGlobalIconModule,
SharedAbuseListModule,
SharedVideoCommentModule,
SharedAccountAvatarModule,
SharedActorImageModule,
SharedActorImageEditModule,
TableModule,
......
......@@ -34,7 +34,7 @@
<td>
<a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
<div class="chip two-lines">
<my-account-avatar [account]="accountBlock.blockedAccount"></my-account-avatar>
<my-actor-avatar [account]="accountBlock.blockedAccount"></my-actor-avatar>
<div>
{{ accountBlock.blockedAccount.displayName }}
<span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
......
......@@ -86,7 +86,7 @@
<td>
<a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
<div class="chip two-lines">
<my-account-avatar [account]="videoComment.account"></my-account-avatar>
<my-actor-avatar [account]="videoComment.account"></my-actor-avatar>
<div>
{{ videoComment.account.displayName }}
<span>{{ videoComment.by }}</span>
......
......@@ -106,7 +106,7 @@
<td *ngIf="isSelected('username')">
<a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
<div class="chip two-lines">
<my-account-avatar [account]="user?.account" size="32"></my-account-avatar>
<my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar>
<div>
<span class="user-table-primary-text">{{ user.account.displayName }}</span>
<span class="text-muted">{{ user.username }}</span>
......
......@@ -10,7 +10,7 @@ import { SharedMainModule } from '@app/shared/shared-main'
import { SharedModerationModule } from '@app/shared/shared-moderation'
import { SharedShareModal } from '@app/shared/shared-share-modal'
import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings'
import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
import { MyAccountAbusesListComponent } from './my-account-abuses/my-account-abuses-list.component'
import { MyAccountApplicationsComponent } from './my-account-applications/my-account-applications.component'
import { MyAccountBlocklistComponent } from './my-account-blocklist/my-account-blocklist.component'
......@@ -40,7 +40,7 @@ import { MyAccountComponent } from './my-account.component'
SharedGlobalIconModule,
SharedAbuseListModule,
SharedShareModal,
SharedAccountAvatarModule,
SharedActorImageModule,
SharedActorImageEditModule
],
......
......@@ -22,9 +22,7 @@
<div class="video-channels">
<div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
<a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]">
<img [src]="videoChannel.avatarUrl" alt="Avatar" />
</a>
<my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/video-channels', videoChannel.nameWithHost ]"></my-actor-avatar>
<div class="video-channel-info">
<a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
......
......@@ -20,8 +20,8 @@ input[type=text] {
padding-bottom: 0;
img {
@include channel-avatar(80px);
my-actor-avatar {
@include actor-avatar-size(80px);
margin-right: 10px;
}
......
......@@ -8,6 +8,7 @@ import { MyVideoChannelCreateComponent } from './my-video-channel-create.compone
import { MyVideoChannelUpdateComponent } from './my-video-channel-update.component'
import { MyVideoChannelsRoutingModule } from './my-video-channels-routing.module'
import { MyVideoChannelsComponent } from './my-video-channels.component'
import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
@NgModule({
imports: [
......@@ -18,7 +19,8 @@ import { MyVideoChannelsComponent } from './my-video-channels.component'
SharedMainModule,
SharedFormModule,
SharedGlobalIconModule,
SharedActorImageEditModule
SharedActorImageEditModule,
SharedActorImageModule
],
declarations: [
......
......@@ -26,7 +26,7 @@ import { MyVideoPlaylistUpdateComponent } from './my-video-playlists/my-video-pl
import { MyVideoPlaylistsComponent } from './my-video-playlists/my-video-playlists.component'
import { VideoChangeOwnershipComponent } from './my-videos/modals/video-change-ownership.component'
import { MyVideosComponent } from './my-videos/my-videos.component'
import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
@NgModule({
imports: [
......@@ -47,7 +47,7 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share
SharedAbuseListModule,
SharedShareModal,
SharedVideoLiveModule,
SharedAccountAvatarModule
SharedActorImageModule
],
declarations: [
......
......@@ -37,7 +37,7 @@
<td>
<a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
<div class="chip two-lines">
<my-account-avatar [account]="videoChangeOwnership.initiatorAccount"></my-account-avatar>
<my-actor-avatar [account]="videoChangeOwnership.initiatorAccount"></my-actor-avatar>
<div>
{{ videoChangeOwnership.initiatorAccount.displayName }}
<span class="text-muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
......
......@@ -19,9 +19,7 @@
<div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
<div *ngFor="let videoChannel of videoChannels" class="video-channel">
<a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]">
<img [src]="videoChannel.avatarUrl" alt="Avatar" />
</a>
<my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/video-channels', videoChannel.nameWithHost ]"></my-actor-avatar>
<div class="video-channel-info">
<a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
......@@ -33,7 +31,8 @@
<a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
<span i18n>Created by {{ videoChannel.ownerBy }}</span>
<img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
<my-actor-avatar [account]="videoChannel.ownerAccount" size="18"></my-actor-avatar>
</a>
</div>
......
......@@ -8,8 +8,8 @@ input[type=text] {
.video-channel {
@include row-blocks;
img {
@include channel-avatar(80px);
> my-actor-avatar {
@include actor-avatar-size(80px);
margin-right: 10px;
}
......@@ -40,9 +40,20 @@ input[type=text] {
}
.actor-owner {
@include actor-owner;
@include disable-default-a-behaviour;
font-size: 13px;
color: pvar(--mainForegroundColor);
margin-top: 0;
span:hover {
opacity: 0.8;
}
my-actor-avatar {
margin-left: 7px;
display: inline-block;
vertical-align: top;
}
}
.video-subscriptions-header {
......
......@@ -33,20 +33,15 @@
<ng-container *ngFor="let result of results">
<div *ngIf="isVideoChannel(result)" class="entry video-channel">
<a class="link-avatar" *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)">
<img [src]="result.avatarUrl" alt="Avatar" />
</a>
<a class="link-avatar" *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank">
<img [src]="result.avatarUrl" alt="Avatar" />
</a>
<my-actor-avatar [channel]="result" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)"></my-actor-avatar>
<div class="video-channel-info">
<a *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)" class="video-channel-names">
<a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names">
<ng-container *ngTemplateOutlet="aContent"></ng-container>
</a>
<a *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank" class="video-channel-names">
<a *ngIf="isExternalChannelUrl()" [href]="getExternalChannelUrl(result)" target="_blank" class="video-channel-names">
<ng-container *ngTemplateOutlet="aContent"></ng-container>
</a>
......
......@@ -5,7 +5,7 @@
$image-size: min(130px, $video-img-width);
$margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
@include channel-avatar($image-size);
@include actor-avatar-size($image-size);
margin: 0 $margin-size 0 $margin-size;
}
......@@ -53,10 +53,8 @@
max-width: 800px;
}
.video-channel {
img {
@include build-channel-img-size($video-thumbnail-width);
}
.video-channel my-actor-avatar {
@include build-channel-img-size($video-thumbnail-width);
}
.video-channel-info {
......@@ -92,14 +90,12 @@
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
.link-avatar {
my-actor-avatar {
@include build-channel-img-size($video-thumbnail-medium-width);
grid-column: 1;
grid-row: 1 / -1;
}
img {
@include build-channel-img-size($video-thumbnail-medium-width);
}
}
.video-channel-info {
......@@ -115,7 +111,7 @@
}
@include on-mobile-main-col {
.video-channel img {
.video-channel my-actor-avatar {
@include build-channel-img-size($video-thumbnail-small-width);
}
}
......
......@@ -132,10 +132,6 @@ export class SearchComponent implements OnInit, OnDestroy {
return 'internal'
}
isExternalChannelUrl () {
return this.getVideoLinkType() === 'external'
}
search () {
forkJoin([
this.getVideosObs(),
......@@ -200,17 +196,33 @@ export class SearchComponent implements OnInit, OnDestroy {
this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
}
getChannelUrl (channel: VideoChannel) {
isExternalChannelUrl () {
return this.getVideoLinkType() === 'external'
}
getExternalChannelUrl (channel: VideoChannel) {
// Same algorithm than videos
if (this.getVideoLinkType() === 'external') {
return channel.url
}
if (this.getVideoLinkType() === 'internal') {
// lazy-load or internal
return undefined
}
getInternalChannelUrl (channel: VideoChannel) {
const linkType = this.getVideoLinkType()
if (linkType === 'internal') {
return [ '/video-channels', channel.nameWithHost ]
}
return [ '/search/lazy-load-channel', { url: channel.url } ]
if (linkType === 'lazy-load') {
return [ '/search/lazy-load-channel', { url: channel.url } ]
}
// external
return undefined
}
hideActions () {
......
import { NgModule } from '@angular/core'
import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
import { SharedFormModule } from '@app/shared/shared-forms'
import { SharedMainModule } from '@app/shared/shared-main'
import { SharedSearchModule } from '@app/shared/shared-search'
......@@ -18,6 +19,7 @@ import { VideoLazyLoadResolver } from './video-lazy-load.resolver'
SharedMainModule,
SharedSearchModule,
SharedFormModule,
SharedActorImageModule,
SharedUserSubscriptionModule,
SharedVideoMiniatureModule
],
......
......@@ -6,16 +6,16 @@
<div class="channel-info">
<ng-template #buttonsTemplate>
<a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
Manage channel
</a>
<a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
Manage channel
</a>
<my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
<my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
<button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
<my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
<span class="icon-text" i18n>Support</span>
</button>
<button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
<my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
<span class="icon-text" i18n>Support</span>
</button>
</ng-template>
<ng-template #ownerTemplate>
......@@ -23,7 +23,7 @@
<div class="section-label" i18n>OWNER ACCOUNT</div>
<div class="avatar-row">
<my-account-avatar [account]="videoChannel.ownerAccount" [internalHref]="getAccountUrl()" size="120"></my-account-avatar>
<my-actor-avatar class="account-avatar" [account]="videoChannel.ownerAccount" [internalHref]="getAccountUrl()"></my-actor-avatar>
<div class="actor-info">
<h4>
......@@ -49,7 +49,7 @@
</ng-template>
<div class="channel-avatar-row">
<img class="channel-avatar" [src]="videoChannel.avatarUrl" alt="Avatar" />
<my-actor-avatar class="main-avatar" [channel]="videoChannel"></my-actor-avatar>
<div>
<div class="section-label" i18n>VIDEO CHANNEL</div>
......
......@@ -107,8 +107,8 @@
display: flex;
margin-bottom: 15px;
img {
@include avatar(48px);
.account-avatar {
@include actor-avatar-size(48px);
}
.actor-info {
......@@ -289,8 +289,8 @@
margin-top: -5px;
}
img {
@include channel-avatar(64px);
.account-avatar {
@include actor-avatar-size(64px);
margin: -30px 0 0 15px;
}
......
......@@ -10,7 +10,7 @@ import { VideoChannelPlaylistsComponent } from './video-channel-playlists/video-
import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
import { VideoChannelsRoutingModule } from './video-channels-routing.module'
import { VideoChannelsComponent } from './video-channels.component'
import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module'
import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
@NgModule({
imports: [
......@@ -23,7 +23,7 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share
SharedUserSubscriptionModule,
SharedGlobalIconModule,
SharedSupportModal,
SharedAccountAvatarModule
SharedActorImageModule
],
declarations: [
......
<form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
<div class="avatar-and-textarea">
<my-account-avatar [account]="user?.account" size="25"></my-account-avatar>
<my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar>
<div class="form-group">
<textarea i18n-placeholder placeholder="Add comment..." myAutoResize
......
......@@ -13,8 +13,7 @@ form {
display: flex;
margin-bottom: 10px;
my-account-avatar {
vertical-align: top;
my-actor-avatar {
margin-right: 10px;
}
......
<div *ngIf="isCommentDisplayed()" class="root-comment">
<div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }">
<div class="left">
<my-account-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-account-avatar>
<my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-actor-avatar>
<div class="vertical-border"></div>
</div>
<div class="right" [ngClass]="{ 'mb-3': firstInThread }">
<span *ngIf="comment.isDeleted" class="comment-avatar"></span>
<div class="comment">
<ng-container *ngIf="!comment.isDeleted">
<div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
......@@ -68,7 +66,7 @@
[textValue]="redraftValue"
></my-video-comment-add>
<div *ngIf="commentTree" class="children">
<div *ngIf="commentTree">
<div *ngFor="let commentChild of commentTree.children">
<my-video-comment
[comment]="commentChild.comment"
......
......@@ -24,6 +24,10 @@
}
}
my-actor-avatar {
@include actor-avatar-size(36px);
}
.comment {
flex-grow: 1;
// Fix word-wrap with flex
......@@ -148,10 +152,10 @@ my-video-comment-add {
}
}
.children {
.is-child {
// Reduce avatars size for replies
.comment-avatar {
@include avatar(25px);
my-actor-avatar {
@include actor-avatar-size(25px);
}
.left {
......
......@@ -138,6 +138,10 @@ export class VideoCommentComponent implements OnInit, OnChanges {
(this.commentTree?.hasDisplayedChildren) // Or this is a reply that have other replies
}
isChild () {
return this.parentComments.length !== 0
}
private getUserIfNeeded (account: Account) {
if (!account.userId) return
if (!this.authService.isLoggedIn()) return
......
......@@ -4,11 +4,11 @@
<img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
</a>
<my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar>
<my-actor-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-actor-avatar>
</ng-container>
<ng-container *ngIf="!isChannelAvatarNull() && genericChannel">
<my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar>
<my-actor-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-actor-avatar>
<a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">