<div class="d-block d-md-none"> <!-- only shown on medium devices, has its conterpart for larger viewports below -->
<h1 class="video-info-name">{{ video.name }}</h1>
<div i18n class="video-info-date-views">
- Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
+ Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
</div>
</div>
<h1 class="video-info-name">{{ video.name }}</h1>
<div i18n class="video-info-date-views">
- Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
+ Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
</div>
</div>
<div class="video-actions-rates">
<div class="video-actions fullWidth justify-content-end">
<div
- *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
+ [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"
>
<my-global-icon iconName="like"></my-global-icon>
+ <span *ngIf="video.likes" class="count">{{ video.likes }}</span>
</div>
<div
- *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
+ [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"
>
<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">
- <my-global-icon iconName="heart"></my-global-icon>
+ <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
+ <my-global-icon iconName="support"></my-global-icon>
<span class="icon-text" i18n>Support</span>
</div>
</div>
<my-video-actions-dropdown
- placement="top" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" (videoRemoved)="onVideoRemoved()"
+ placement="top" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
+ (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
></my-video-actions-dropdown>
</div>
<my-video-comments [video]="video" [user]="user"></my-video-comments>
</div>
- <my-recommended-videos [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
+ <my-recommended-videos
+ [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }"
+ [user]="user"
+ (gotRecommendations)="onRecommendations($event)"
+ ></my-recommended-videos>
</div>
<div class="row privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
</div>
</div>
-<ng-template [ngIf]="video !== null">
+<ng-container *ngIf="video !== null">
<my-video-support #videoSupportModal [video]="video"></my-video-support>
- <my-video-share #videoShareModal [video]="video"></my-video-share>
-</ng-template>
+ <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>
+</ng-container>