<h1 class="video-info-name">{{ video.name }}</h1>
<div i18n class="video-info-date-views">
- Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
+ Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> • {{ video.views | myNumberFormatter }} views</span>
</div>
</div>
<div class="video-info-first-row-bottom">
<div i18n class="d-none d-md-block video-info-date-views">
- Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
+ Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> • {{ video.views | myNumberFormatter }} views</span>
</div>
<div class="video-actions-rates">
<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 action-button-support"
[ngbTooltip]="tooltipSupport"
placement="bottom auto"
>
</div>
<my-video-actions-dropdown
- placement="top auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
+ placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
(videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
></my-video-actions-dropdown>
</div>
- <div
- class="video-info-likes-dislikes-bar"
- *ngIf="video.likes !== 0 || video.dislikes !== 0"
- [ngbTooltip]="likesBarTooltipText"
- placement="bottom"
- >
- <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
+ <div class="video-info-likes-dislikes-bar-outer-container">
+ <div
+ class="video-info-likes-dislikes-bar-inner-container"
+ *ngIf="video.likes !== 0 || video.dislikes !== 0"
+ [ngbTooltip]="likesBarTooltipText"
+ placement="bottom"
+ >
+ <div
+ class="video-info-likes-dislikes-bar"
+ >
+ <div class="likes-bar" [ngClass]="{ 'liked': userRating !== 'none' }" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
+ </div>
+ </div>
</div>
</div>
</div>
<div class="video-info-description">
- <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
+ <div
+ class="video-info-description-html"
+ [innerHTML]="videoHTMLDescription"
+ (timestampClicked)="handleTimestampClicked($event)"
+ timestampRouteTransformer
+ ></div>
<div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
<ng-container i18n>Show more</ng-container>
</div>
</div>
- <my-video-comments class="border-top" [video]="video" [user]="user"></my-video-comments>
+ <my-video-comments
+ class="border-top"
+ [video]="video"
+ [user]="user"
+ (timestampClicked)="handleTimestampClicked($event)"
+ ></my-video-comments>
</div>
<my-recommended-videos
</div>
<ng-container *ngIf="video !== null">
- <my-video-support #videoSupportModal [video]="video"></my-video-support>
+ <my-video-support #videoSupportModal [video]="video" [user]="user"></my-video-support>
<my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>
</ng-container>