<div class="video-info">
<div class="video-info-first-row">
<div>
+ <ng-template #publishedTemplate>
+ <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
+ •
+ <my-video-views-counter [video]="video"></my-video-views-counter>
+ </ng-template>
+
<div class="d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below -->
<h1 class="video-info-name">{{ video.name }}</h1>
<div class="video-info-date-views">
- <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
- •
- <my-video-views-counter [video]="video"></my-video-views-counter>
+ <ng-template *ngTemplateOutlet="publishedTemplate"></ng-template>
</div>
</div>
<div class="video-info-first-row-bottom">
<div class="d-none d-md-block video-info-date-views">
- <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
- •
- <my-video-views-counter [video]="video"></my-video-views-counter>
+ <ng-template *ngTemplateOutlet="publishedTemplate"></ng-template>
</div>
<my-action-buttons