forks/peertube
1
0
Fork 0
Code Releases Activity

video description/account alignment, watch view basic tooltips

Browse source
This commit is contained in:
Rigel Kent 2019-12-12 19:42:37 +01:00 committed by Chocobozzz
parent 706c5a4743
commit 94dfca3e35
4 changed files with 35 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/app/menu/menu.component.html
View file

@ -9,7 +9,7 @@
<div class="logged-in-username">{{ user.username }}</div>
</div>
<div class="logged-in-more" ngbDropdown placement="bottom-right">
<div class="logged-in-more" ngbDropdown placement="bottom-right auto">
<my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
<div ngbDropdownMenu>

26
client/src/app/videos/+video-watch/video-watch.component.html
View file

@ -62,7 +62,8 @@
<div
[ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
i18n-title title="Like this video"
[ngbTooltip]="tooltipLike"
placement="bottom auto"
>
<my-global-icon iconName="like"></my-global-icon>
<span *ngIf="video.likes" class="count">{{ video.likes }}</span>
@ -71,13 +72,17 @@
<div
[ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
i18n-title title="Dislike this video"
[ngbTooltip]="tooltipDislike"
placement="bottom auto"
>
<my-global-icon iconName="dislike"></my-global-icon>
<span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
</div>
<div *ngIf="video.support" (click)="showSupportModal()" class="action-button">
<div *ngIf="video.support" (click)="showSupportModal()" class="action-button"
[ngbTooltip]="tooltipSupport"
placement="bottom auto"
>
<my-global-icon iconName="heart"></my-global-icon>
<span class="icon-text" i18n>Support</span>
</div>
@ -90,6 +95,8 @@
<div
class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
*ngIf="isUserLoggedIn()" (openChange)="addContent.openChange($event)"
[ngbTooltip]="tooltipSaveToPlaylist"
placement="bottom auto"
>
<div class="action-button action-button-save" ngbDropdownToggle role="button">
<my-global-icon iconName="playlist-add"></my-global-icon>
@ -102,7 +109,7 @@
</div>
<my-video-actions-dropdown
placement="top" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
placement="top auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
(videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
></my-video-actions-dropdown>
</div>
@ -131,9 +138,8 @@
<div class="pt-3 border-top video-info-channel">
<a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
{{ video.channel.displayName }}
<img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
{{ video.channel.displayName }}
</a>
<my-subscribe-button #subscribeButton [videoChannel]="video.channel" size="small"></my-subscribe-button>
@ -141,15 +147,15 @@
<div class="video-info-by">
<a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
<span i18n>By {{ video.byAccount }}</span>
<img [src]="video.accountAvatarUrl" alt="Account avatar" />
<span i18n>By {{ video.byAccount }}</span>
</a>
</div>
</div>
</div>
<div class="video-info-description">
<div class="video-info-description ml-4">
<div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
<div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
@ -164,7 +170,7 @@
</div>
</div>
<div class="video-attributes">
<div class="video-attributes mb-3 ml-4">
<div class="video-attribute">
<span i18n class="video-attribute-label">Privacy</span>
<span class="video-attribute-value">{{ video.privacy.label }}</span>
@ -211,7 +217,7 @@
</div>
</div>
<my-video-comments [video]="video" [user]="user"></my-video-comments>
<my-video-comments class="border-top" [video]="video" [user]="user"></my-video-comments>
</div>
<my-recommended-videos

11
client/src/app/videos/+video-watch/video-watch.component.scss
View file

@ -176,7 +176,7 @@ $player-factor: 1.7; // 16/9
img {
@include avatar(18px);
margin: -2px 2px 0 5px;
margin: -2px 5px 0 0;
}
}
@ -199,11 +199,14 @@ $player-factor: 1.7; // 16/9
opacity: 0.8;
}
span {
margin-left: 2px;
}
img {
@include avatar(18px);
margin-top: -2px;
margin-left: 7px;
margin: -2px 5px 0 0;
}
}
@ -397,7 +400,7 @@ $player-factor: 1.7; // 16/9
.video-miniature {
display: flex;
width: $other-videos-width;
width: max-content;
height: 100%;
margin-bottom: 20px;
flex-wrap: wrap;

12
client/src/app/videos/+video-watch/video-watch.component.ts
View file

@ -72,6 +72,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
remoteServerDown = false
hotkeys: Hotkey[] = []
tooltipLike = ''
tooltipDislike = ''
tooltipSupport = ''
tooltipSaveToPlaylist = ''
private nextVideoUuid = ''
private currentTime: number
private paramsSub: Subscription
@ -102,7 +107,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
private hooks: HooksService,
private location: PlatformLocation,
@Inject(LOCALE_ID) private localeId: string
) {}
) {
this.tooltipLike = this.i18n('Like this video')
this.tooltipDislike = this.i18n('Dislike this video')
this.tooltipSupport = this.i18n('Support options for this video')
this.tooltipSaveToPlaylist = this.i18n('Save to playlist')
}
get user () {
return this.authService.getUser()