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
16 [playlist]=
"playlist" class=
"playlist"
17 (videoFound)=
"onPlaylistVideoFound($event)"
18 ></my-video-watch-playlist>
20 <my-plugin-placeholder pluginId=
"player-next"></my-plugin-placeholder>
23 <my-video-alert [video]=
"video"></my-video-alert>
25 <!-- Video information -->
26 <div *
ngIf=
"video" class=
"margin-content video-bottom">
27 <div class=
"video-info">
28 <div class=
"video-info-first-row">
30 <ng-template #publishedTemplate
>
31 <ng-container i18n
>Published
<my-date-toggle [date]=
"video.publishedAt"></my-date-toggle></ng-container>
33 <my-video-views-counter [video]=
"video"></my-video-views-counter>
36 <div class=
"d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below -->
37 <h1 class=
"video-info-name">{{ video.name }}
</h1>
39 <div class=
"video-info-date-views">
40 <ng-template *
ngTemplateOutlet=
"publishedTemplate"></ng-template>
44 <div class=
"d-flex justify-content-between flex-direction-column">
45 <div class=
"d-none d-md-block">
46 <h1 class=
"video-info-name">{{ video.name }}
</h1>
49 <div class=
"video-info-first-row-bottom">
50 <div class=
"d-none d-md-block video-info-date-views">
51 <ng-template *
ngTemplateOutlet=
"publishedTemplate"></ng-template>
55 [video]=
"video" [isUserLoggedIn]=
"isUserLoggedIn()" [videoCaptions]=
"videoCaptions" [playlist]=
"playlist"
56 [currentTime]=
"getCurrentTime()" [currentPlaylistPosition]=
"getCurrentPlaylistPosition()"
61 <div class=
"pt-3 border-top video-info-channel d-flex">
62 <div class=
"video-info-channel-left d-flex">
63 <my-video-avatar-channel [video]=
"video" [showChannel]=
"!isChannelDisplayNameGeneric()"></my-video-avatar-channel>
65 <div class=
"video-info-channel-left-links ml-1">
66 <ng-container *
ngIf=
"!isChannelDisplayNameGeneric()">
67 <a [routerLink]=
"[ '/c', video.byVideoChannel ]" i18n-title
title=
"Channel page">
68 {{ video.channel.displayName }}
70 <a [routerLink]=
"[ '/a', video.byAccount ]" i18n-title
title=
"Account page">
71 <span i18n
>By {{ video.byAccount }}
</span>
75 <ng-container *
ngIf=
"isChannelDisplayNameGeneric()">
76 <a [routerLink]=
"[ '/a', video.byAccount ]" class=
"single-link" i18n-title
title=
"Account page">
77 <span i18n
>{{ video.byAccount }}
</span>
83 <my-subscribe-button #subscribeButton [videoChannels]=
"[video.channel]" size=
"small"></my-subscribe-button>
89 <my-video-description [video]=
"video" (timestampClicked)=
"handleTimestampClicked($event)"></my-video-description>
91 <my-video-attributes [video]=
"video"></my-video-attributes>
97 (timestampClicked)=
"handleTimestampClicked($event)"
101 <my-recommended-videos
102 [displayAsRow]=
"displayOtherVideosAsRow()"
103 [inputRecommendation]=
"{ uuid: video.uuid, tags: video.tags }"
104 [playlist]=
"playlist"
105 (gotRecommendations)=
"onRecommendations($event)"
106 ></my-recommended-videos>
109 <my-privacy-concerns *
ngIf=
"video" [video]=
"video"></my-privacy-concerns>
112 <my-player-styles></my-player-styles>