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 #videoWatchPlaylist [playlist]=
"playlist" (videoFound)=
"onPlaylistVideoFound($event)"></my-video-watch-playlist>
16 <my-plugin-placeholder pluginId=
"player-next"></my-plugin-placeholder>
19 <my-video-alert [video]=
"video"></my-video-alert>
21 <!-- Video information -->
22 <div *
ngIf=
"video" class=
"margin-content video-bottom">
23 <div class=
"video-info">
24 <div class=
"video-info-first-row">
26 <ng-template #publishedTemplate
>
27 <ng-container i18n
>Published
<my-date-toggle [date]=
"video.publishedAt"></my-date-toggle></ng-container>
29 <my-video-views-counter [video]=
"video"></my-video-views-counter>
32 <div class=
"d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below -->
33 <h1 class=
"video-info-name">{{ video.name }}
</h1>
35 <div class=
"video-info-date-views">
36 <ng-template *
ngTemplateOutlet=
"publishedTemplate"></ng-template>
40 <div class=
"d-flex justify-content-between flex-direction-column">
41 <div class=
"d-none d-md-block">
42 <h1 class=
"video-info-name">{{ video.name }}
</h1>
45 <div class=
"video-info-first-row-bottom">
46 <div class=
"d-none d-md-block video-info-date-views">
47 <ng-template *
ngTemplateOutlet=
"publishedTemplate"></ng-template>
51 [video]=
"video" [isUserLoggedIn]=
"isUserLoggedIn()" [videoCaptions]=
"videoCaptions" [playlist]=
"playlist"
52 [currentTime]=
"getCurrentTime()" [currentPlaylistPosition]=
"getCurrentPlaylistPosition()"
57 <div class=
"pt-3 border-top video-info-channel d-flex">
58 <div class=
"video-info-channel-left d-flex">
59 <my-video-avatar-channel [video]=
"video" [showChannel]=
"!isChannelDisplayNameGeneric()"></my-video-avatar-channel>
61 <div class=
"video-info-channel-left-links ml-1">
62 <ng-container *
ngIf=
"!isChannelDisplayNameGeneric()">
63 <a [routerLink]=
"[ '/c', video.byVideoChannel ]" i18n-title
title=
"Channel page">
64 {{ video.channel.displayName }}
66 <a [routerLink]=
"[ '/a', video.byAccount ]" i18n-title
title=
"Account page">
67 <span i18n
>By {{ video.byAccount }}
</span>
71 <ng-container *
ngIf=
"isChannelDisplayNameGeneric()">
72 <a [routerLink]=
"[ '/a', video.byAccount ]" class=
"single-link" i18n-title
title=
"Account page">
73 <span i18n
>{{ video.byAccount }}
</span>
79 <my-subscribe-button #subscribeButton [videoChannels]=
"[video.channel]" size=
"small"></my-subscribe-button>
85 <my-video-description [video]=
"video" (timestampClicked)=
"handleTimestampClicked($event)"></my-video-description>
87 <my-video-attributes [video]=
"video"></my-video-attributes>
93 (timestampClicked)=
"handleTimestampClicked($event)"
97 <my-recommended-videos
98 [displayAsRow]=
"displayOtherVideosAsRow()"
99 [inputRecommendation]=
"{ uuid: video.uuid, tags: video.tags }"
100 [playlist]=
"playlist"
101 (gotRecommendations)=
"onRecommendations($event)"
102 ></my-recommended-videos>
105 <my-privacy-concerns *
ngIf=
"video" [video]=
"video"></my-privacy-concerns>
108 <my-player-styles></my-player-styles>