2018-08-14 07:08:47 +00:00
< div class = "root-row row" >
2017-04-21 16:26:09 +00:00
<!-- We need the video container for videojs so we just hide it -->
2018-06-08 13:35:18 +00:00
< div id = "video-element-wrapper" >
2018-07-16 17:15:20 +00:00
< div * ngIf = "remoteServerDown" class = "remote-server-down" >
Sorry, but this video is not available because the remote instance is not responding.
< br / >
Please try again later.
< / div >
2016-11-04 15:04:50 +00:00
< / div >
2017-04-21 16:26:09 +00:00
2018-08-03 07:43:00 +00:00
< div i18n class = "alert alert-warning" * ngIf = "isVideoToImport()" >
The video is being imported, it will be available when the import is finished.
< / div >
2018-06-15 14:52:15 +00:00
< div i18n class = "alert alert-warning" * ngIf = "isVideoToTranscode()" >
2018-06-12 18:04:58 +00:00
The video is being transcoded, it may not work properly.
< / div >
2018-06-15 14:52:15 +00:00
< div i18n class = "alert alert-info" * ngIf = "hasVideoScheduledPublication()" >
2018-08-14 07:08:47 +00:00
This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
< / div >
< div class = "alert alert-danger" * ngIf = "video?.blacklisted" >
< div class = "blacklisted-label" i18n > This video is blacklisted.< / div >
{{ video.blacklistedReason }}
2018-06-15 14:52:15 +00:00
< / div >
2017-12-11 09:02:17 +00:00
<!-- Video information -->
2018-09-03 13:01:52 +00:00
< div * ngIf = "video" class = "margin-content video-bottom" >
2018-08-30 09:15:22 +00:00
< div class = "row fullWidth" >
2018-09-04 16:35:39 +00:00
< div class = "col-12 col-lg-auto video-info" >
2018-08-30 09:15:22 +00:00
< div class = "video-info-first-row" >
< div >
< div class = "d-block d-sm-none" > <!-- only shown on small devices, has its conterpart for larger viewports below -->
2018-09-19 23:08:46 +00:00
< h1 class = "video-info-name" > {{ video.name }}< / h1 >
2018-08-30 09:15:22 +00:00
< div i18n class = "video-info-date-views" >
Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
< / div >
2017-12-11 09:02:17 +00:00
< / div >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< div class = "d-flex justify-content-between align-items-sm-end" >
< div class = "d-none d-sm-block" >
2018-09-19 23:08:46 +00:00
< h1 class = "video-info-name" > {{ video.name }}< / h1 >
2018-08-30 09:15:22 +00:00
< div i18n class = "video-info-date-views" >
Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
< / div >
2018-08-30 12:58:00 +00:00
< / div >
2018-08-30 09:15:22 +00:00
< div class = "video-actions-rates" >
< div class = "video-actions fullWidth justify-content-end" >
< div
*ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
2019-01-16 15:05:40 +00:00
i18n-title title="Like this video"
2018-08-30 09:15:22 +00:00
>
2019-01-16 15:05:40 +00:00
< my-global-icon iconName = "like" > < / my-global-icon >
2018-08-30 09:15:22 +00:00
< / div >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< div
*ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
2019-01-16 15:05:40 +00:00
i18n-title title="Dislike this video"
2018-08-30 09:15:22 +00:00
>
2019-01-16 15:05:40 +00:00
< my-global-icon iconName = "dislike" > < / my-global-icon >
2018-08-30 09:15:22 +00:00
< / div >
2018-08-30 12:58:00 +00:00
2019-03-07 16:06:00 +00:00
< div * ngIf = "video.support" ( click ) = " showSupportModal ( ) " class = "action-button" >
2019-01-16 15:05:40 +00:00
< my-global-icon iconName = "heart" > < / my-global-icon >
2018-08-30 09:15:22 +00:00
< span class = "icon-text" i18n > Support< / span >
< / div >
2018-08-30 12:58:00 +00:00
2019-03-07 16:06:00 +00:00
< div ( click ) = " showShareModal ( ) " class = "action-button" role = "button" >
2019-01-16 15:05:40 +00:00
< my-global-icon iconName = "share" > < / my-global-icon >
2018-08-30 09:15:22 +00:00
< span class = "icon-text" i18n > Share< / span >
< / div >
2018-08-30 12:58:00 +00:00
2019-03-07 16:06:00 +00:00
< div
class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
*ngIf="isUserLoggedIn()" (openChange)="addContent.openChange($event)"
>
< div class = "action-button action-button-save" ngbDropdownToggle role = "button" >
< my-global-icon iconName = "playlist-add" > < / my-global-icon >
< span class = "icon-text" i18n > Save< / span >
< / div >
< div ngbDropdownMenu >
< my-video-add-to-playlist # addContent [ video ] = " video " > < / my-video-add-to-playlist >
< / div >
< / div >
< div class = "action-dropdown" ngbDropdown placement = "top" role = "button" >
2018-08-30 09:15:22 +00:00
< div class = "action-button" ngbDropdownToggle role = "button" >
2019-03-11 15:23:33 +00:00
< my-global-icon class = "more-icon" iconName = "more-horizontal" > < / my-global-icon >
2018-08-30 09:15:22 +00:00
< / div >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< div ngbDropdownMenu >
2018-10-06 17:17:21 +00:00
< a * ngIf = "isVideoDownloadable()" class = "dropdown-item" i18n-title title = "Download the video" href = "#" ( click ) = " showDownloadModal ( $ event ) " >
2019-01-16 15:05:40 +00:00
< my-global-icon iconName = "download" > < / my-global-icon > < ng-container i18n > Download< / ng-container >
2018-08-30 09:15:22 +00:00
< / a >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< a * ngIf = "isUserLoggedIn()" class = "dropdown-item" i18n-title title = "Report this video" href = "#" ( click ) = " showReportModal ( $ event ) " >
2019-01-16 15:05:40 +00:00
< my-global-icon iconName = "alert" > < / my-global-icon > < ng-container i18n > Report< / ng-container >
2018-08-30 09:15:22 +00:00
< / a >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< a * ngIf = "isVideoUpdatable()" class = "dropdown-item" i18n-title title = "Update this video" href = "#" [ routerLink ] = " [ ' / videos / update ' , video . uuid ] " >
2019-01-16 15:05:40 +00:00
< my-global-icon iconName = "edit" > < / my-global-icon > < ng-container i18n > Update< / ng-container >
2018-08-30 09:15:22 +00:00
< / a >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< a * ngIf = "isVideoBlacklistable()" class = "dropdown-item" i18n-title title = "Blacklist this video" href = "#" ( click ) = " showBlacklistModal ( $ event ) " >
2019-01-16 15:05:40 +00:00
< my-global-icon iconName = "no" > < / my-global-icon > < ng-container i18n > Blacklist< / ng-container >
2018-08-30 09:15:22 +00:00
< / a >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< a * ngIf = "isVideoUnblacklistable()" class = "dropdown-item" i18n-title title = "Unblacklist this video" href = "#" ( click ) = " unblacklistVideo ( $ event ) " >
2019-01-16 15:05:40 +00:00
< my-global-icon iconName = "undo" > < / my-global-icon > < ng-container i18n > Unblacklist< / ng-container >
2018-08-30 09:15:22 +00:00
< / a >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< a * ngIf = "isVideoRemovable()" class = "dropdown-item" i18n-title title = "Delete this video" href = "#" ( click ) = " removeVideo ( $ event ) " >
2019-01-16 15:05:40 +00:00
< my-global-icon iconName = "delete" > < / my-global-icon > < ng-container i18n > Delete< / ng-container >
2018-08-30 09:15:22 +00:00
< / a >
< / div >
< / div >
< / div >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< div
class="video-info-likes-dislikes-bar"
*ngIf="video.likes !== 0 || video.dislikes !== 0"
2018-09-05 09:20:44 +00:00
[ngbTooltip]="likesBarTooltipText"
2018-08-30 09:15:22 +00:00
placement="bottom"
2018-09-05 09:20:44 +00:00
>
2018-08-30 09:15:22 +00:00
< div class = "likes-bar" [ ngStyle ] = " { ' width . % ' : video . likesPercent } " > < / div >
< / div >
< / div >
2018-01-31 10:38:05 +00:00
< / div >
2017-12-06 17:04:40 +00:00
2018-02-20 15:13:05 +00:00
2018-08-30 09:15:22 +00:00
< div class = "pt-3 border-top video-info-channel" >
2018-09-06 11:41:23 +00:00
< a [ routerLink ] = " [ ' / video-channels ' , video . byVideoChannel ] " i18n-title title = "Go the channel page" >
2018-08-30 09:15:22 +00:00
{{ video.channel.displayName }}
2017-03-22 20:15:55 +00:00
2018-08-30 09:15:22 +00:00
< img [ src ] = " video . videoChannelAvatarUrl " alt = "Video channel avatar" / >
< / a >
2018-01-31 10:38:05 +00:00
2018-09-25 13:42:58 +00:00
< my-subscribe-button # subscribeButton [ videoChannel ] = " video . channel " size = "small" > < / my-subscribe-button >
2018-08-30 09:15:22 +00:00
< / div >
2018-08-09 12:55:06 +00:00
2018-08-30 09:15:22 +00:00
< div class = "video-info-by" >
< a [ routerLink ] = " [ ' / accounts ' , video . byAccount ] " i18n-title title = "Go to the account page" >
< span i18n > By {{ video.byAccount }}< / span >
< img [ src ] = " video . accountAvatarUrl " alt = "Account avatar" / >
< / a >
< / div >
< / div >
2018-08-09 12:55:06 +00:00
2018-08-30 09:15:22 +00:00
< / div >
2018-08-13 14:57:13 +00:00
2018-08-30 09:15:22 +00:00
< div class = "video-info-description" >
< div class = "video-info-description-html" [ innerHTML ] = " videoHTMLDescription " > < / div >
2018-08-14 07:08:47 +00:00
2018-08-30 09:15:22 +00:00
< div class = "video-info-description-more" * ngIf = "completeDescriptionShown === false && video.description?.length >= 250" ( click ) = " showMoreDescription ( ) " >
< ng-container i18n > Show more< / ng-container >
< span * ngIf = "descriptionLoading === false" class = "glyphicon glyphicon-menu-down" > < / span >
2019-02-20 09:16:04 +00:00
< my-small-loader class = "description-loading" [ loading ] = " descriptionLoading " > < / my-small-loader >
2018-01-31 10:38:05 +00:00
< / div >
2017-03-27 19:11:37 +00:00
2018-08-30 09:15:22 +00:00
< div * ngIf = "completeDescriptionShown === true" ( click ) = " showLessDescription ( ) " class = "video-info-description-more" >
< ng-container i18n > Show less< / ng-container >
< span * ngIf = "descriptionLoading === false" class = "glyphicon glyphicon-menu-up" > < / span >
2018-01-31 10:38:05 +00:00
< / div >
< / div >
2017-04-21 14:40:45 +00:00
2018-08-30 09:15:22 +00:00
< div class = "video-attributes" >
< div class = "video-attribute" >
< span i18n class = "video-attribute-label" > Privacy< / span >
< span class = "video-attribute-value" > {{ video.privacy.label }}< / span >
< / div >
2019-01-12 13:45:39 +00:00
2019-02-11 13:09:23 +00:00
< div * ngIf = "!!video.originallyPublishedAt" class = "video-attribute" >
< span i18n class = "video-attribute-label" > Originally published< / span >
< span class = "video-attribute-value" > {{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}< / span >
2019-01-12 13:45:39 +00:00
< / div >
2017-10-30 19:26:06 +00:00
2018-08-30 09:15:22 +00:00
< div class = "video-attribute" >
< span i18n class = "video-attribute-label" > Category< / span >
< span * ngIf = "!video.category.id" class = "video-attribute-value" > {{ video.category.label }}< / span >
< a
*ngIf="video.category.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ categoryOneOf: [ video.category.id ] }"
>{{ video.category.label }}< / a >
< / div >
2017-10-30 19:26:06 +00:00
2018-08-30 09:15:22 +00:00
< div class = "video-attribute" >
< span i18n class = "video-attribute-label" > Licence< / span >
< span * ngIf = "!video.licence.id" class = "video-attribute-value" > {{ video.licence.label }}< / span >
< a
*ngIf="video.licence.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ licenceOneOf: [ video.licence.id ] }"
>{{ video.licence.label }}< / a >
< / div >
2017-04-07 12:57:05 +00:00
2018-08-30 09:15:22 +00:00
< div class = "video-attribute" >
< span i18n class = "video-attribute-label" > Language< / span >
< span * ngIf = "!video.language.id" class = "video-attribute-value" > {{ video.language.label }}< / span >
< a
*ngIf="video.language.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ languageOneOf: [ video.language.id ] }"
>{{ video.language.label }}< / a >
< / div >
2017-10-31 10:52:52 +00:00
2018-08-30 09:15:22 +00:00
< div class = "video-attribute video-attribute-tags" >
< span i18n class = "video-attribute-label" > Tags< / span >
< a
*ngFor="let tag of getVideoTags()"
class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
>{{ tag }}< / a >
< / div >
2017-12-11 09:02:17 +00:00
< / div >
2017-04-21 14:40:45 +00:00
2018-09-04 16:35:39 +00:00
< my-video-comments [ video ] = " video " [ user ] = " user " > < / my-video-comments >
< / div >
2018-09-05 09:20:44 +00:00
< my-recommended-videos [ inputRecommendation ] = " { uuid: video . uuid , tags: video . tags } " [ user ] = " user " > < / my-recommended-videos >
2016-11-04 15:04:50 +00:00
< / div >
< / div >
2018-09-05 09:20:44 +00:00
2018-03-07 16:35:30 +00:00
< div class = "privacy-concerns" * ngIf = "hasAlreadyAcceptedPrivacyConcern === false" >
< div class = "privacy-concerns-text" >
2018-08-30 09:15:22 +00:00
< strong i18n > Friendly Reminder: < / strong >
2018-05-31 16:12:15 +00:00
< ng-container i18n >
2018-09-02 17:22:34 +00:00
the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
2018-05-31 16:12:15 +00:00
< / ng-container >
2018-06-27 12:21:03 +00:00
< a i18n i18n-title title = "Get more information" target = "_blank" rel = "noopener noreferrer" href = "/about/peertube" > More information< / a >
2018-03-07 16:35:30 +00:00
< / div >
2018-05-31 16:12:15 +00:00
< div i18n class = "privacy-concerns-okay" ( click ) = " acceptedPrivacyConcern ( ) " >
2018-03-07 16:35:30 +00:00
OK
< / div >
< / div >
2016-11-04 15:04:50 +00:00
2017-04-12 20:00:17 +00:00
< ng-template [ ngIf ] = " video ! = = null " >
2018-02-20 15:13:05 +00:00
< my-video-support # videoSupportModal [ video ] = " video " > < / my-video-support >
2017-01-20 18:22:15 +00:00
< my-video-share # videoShareModal [ video ] = " video " > < / my-video-share >
2017-10-19 12:58:28 +00:00
< my-video-download # videoDownloadModal [ video ] = " video " > < / my-video-download >
2017-01-20 18:22:15 +00:00
< my-video-report # videoReportModal [ video ] = " video " > < / my-video-report >
2018-08-13 14:57:13 +00:00
< my-video-blacklist # videoBlacklistModal [ video ] = " video " > < / my-video-blacklist >
2017-04-12 20:00:17 +00:00
< / ng-template >