1 <div class=
"root" [ngClass]=
"{ 'theater-enabled': theaterEnabled }">
2 <!-- We need the video container for videojs so we just hide it -->
3 <div id=
"video-wrapper">
4 <div *
ngIf=
"remoteServerDown" class=
"remote-server-down">
5 Sorry, but this video is not available because the remote instance is not responding.
7 Please try again later.
10 <div id=
"videojs-wrapper">
11 <img class=
"placeholder-image" *
ngIf=
"playerPlaceholderImgSrc" [src]=
"playerPlaceholderImgSrc" alt=
"Placeholder image" i18n-alt
>
14 <my-video-watch-playlist
15 #videoWatchPlaylist [playlist]=
"playlist"
16 (noVideoFound)=
"onPlaylistNoVideoFound()" (videoFound)=
"onPlaylistVideoFound($event)"
17 ></my-video-watch-playlist>
19 <my-plugin-placeholder pluginId=
"player-next"></my-plugin-placeholder>
22 <my-video-alert [video]=
"video" [noPlaylistVideoFound]=
"noPlaylistVideoFound"></my-video-alert>
24 <!-- Video information -->
25 <div *
ngIf=
"video" class=
"margin-content video-bottom">
26 <div class=
"video-info">
27 <div class=
"video-info-first-row">
29 <ng-template #publishedTemplate
>
30 <ng-container i18n
>Published
<my-date-toggle [date]=
"video.publishedAt"></my-date-toggle></ng-container>
32 <my-video-views-counter [video]=
"video"></my-video-views-counter>
35 <div class=
"d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below -->
36 <h1 class=
"video-info-name">{{ video.name }}
</h1>
38 <div class=
"video-info-date-views">
39 <ng-template *
ngTemplateOutlet=
"publishedTemplate"></ng-template>
43 <div class=
"d-flex justify-content-between flex-direction-column">
44 <div class=
"d-none d-md-block">
45 <h1 class=
"video-info-name">{{ video.name }}
</h1>
48 <div class=
"video-info-first-row-bottom">
49 <div class=
"d-none d-md-block video-info-date-views">
50 <ng-template *
ngTemplateOutlet=
"publishedTemplate"></ng-template>
54 [video]=
"video" [isUserLoggedIn]=
"isUserLoggedIn()" [videoCaptions]=
"videoCaptions" [playlist]=
"playlist"
55 [currentTime]=
"getCurrentTime()" [currentPlaylistPosition]=
"getCurrentPlaylistPosition()"
60 <div class=
"pt-3 border-top video-info-channel d-flex">
61 <div class=
"video-info-channel-left d-flex">
62 <my-video-avatar-channel [video]=
"video" [showChannel]=
"!isChannelDisplayNameGeneric()"></my-video-avatar-channel>
64 <div class=
"video-info-channel-left-links ms-1">
65 <ng-container *
ngIf=
"!isChannelDisplayNameGeneric()">
66 <a [routerLink]=
"[ '/c', video.byVideoChannel ]" i18n-title
title=
"Channel page">
67 {{ video.channel.displayName }}
69 <a [routerLink]=
"[ '/a', video.byAccount ]" i18n-title
title=
"Account page">
70 <span i18n
>By {{ video.byAccount }}
</span>
74 <ng-container *
ngIf=
"isChannelDisplayNameGeneric()">
75 <a [routerLink]=
"[ '/a', video.byAccount ]" class=
"single-link" i18n-title
title=
"Account page">
76 <span i18n
>{{ video.byAccount }}
</span>
82 <my-subscribe-button #subscribeButton [videoChannels]=
"[video.channel]" size=
"small"></my-subscribe-button>
88 <my-video-description [video]=
"video" (timestampClicked)=
"handleTimestampClicked($event)"></my-video-description>
90 <my-video-attributes [video]=
"video"></my-video-attributes>
96 (timestampClicked)=
"handleTimestampClicked($event)"
100 <my-recommended-videos
101 [displayAsRow]=
"displayOtherVideosAsRow()"
102 [inputRecommendation]=
"{ uuid: video.uuid, tags: video.tags }"
103 [playlist]=
"playlist"
104 (gotRecommendations)=
"onRecommendations($event)"
105 ></my-recommended-videos>
108 <my-privacy-concerns *
ngIf=
"video" [video]=
"video"></my-privacy-concerns>
111 <my-player-styles></my-player-styles>