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-08-30 09:15:22 +00:00
< div * ngIf = "video" class = "container video-bottom" >
< div class = "row fullWidth" >
< div class = "col-12 col-md-9 video-info" >
< 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 -->
< div class = "video-info-name" > {{ video.name }}< / div >
< 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" >
< div class = "video-info-name" > {{ video.name }}< / div >
< 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'"
>
< span class = "icon icon-like" i18n-title title = "Like this video" > < / span >
< / 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'"
>
< span class = "icon icon-dislike" i18n-title title = "Dislike this video" > < / span >
< / div >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< div * ngIf = "video.support" ( click ) = " showSupportModal ( ) " class = "action-button action-button-support" >
< span class = "icon icon-support" > < / span >
< span class = "icon-text" i18n > Support< / span >
< / div >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< div ( click ) = " showShareModal ( ) " class = "action-button action-button-share" role = "button" >
< span class = "icon icon-share" > < / span >
< span class = "icon-text" i18n > Share< / span >
< / div >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< div class = "action-more" ngbDropdown placement = "top" role = "button" >
< div class = "action-button" ngbDropdownToggle role = "button" >
< span class = "icon icon-more" > < / span >
< / div >
2018-08-30 12:58:00 +00:00
2018-08-30 09:15:22 +00:00
< div ngbDropdownMenu >
< a class = "dropdown-item" i18n-title title = "Download the video" href = "#" ( click ) = " showDownloadModal ( $ event ) " >
< span class = "icon icon-download" > < / span > < ng-container i18n > Download< / ng-container >
< / 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 ) " >
< span class = "icon icon-alert" > < / span > < ng-container i18n > Report< / ng-container >
< / 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 ] " >
< span class = "icon icon-edit" > < / span > < ng-container i18n > Update< / ng-container >
< / 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 ) " >
< span class = "icon icon-blacklist" > < / span > < ng-container i18n > Blacklist< / ng-container >
< / 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 ) " >
< span class = "icon icon-unblacklist" > < / span > < ng-container i18n > Unblacklist< / ng-container >
< / 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 ) " >
< span class = "icon icon-delete" > < / span > < ng-container i18n > Delete< / ng-container >
< / 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"
placement="bottom"
[ngbTooltip]="likesBarTooltipText">
< 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" >
< a [ routerLink ] = " [ ' / video-channels ' , video . channel . name ] " i18n-title title = "Go the channel page" >
{{ 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-08-30 12:58:00 +00:00
< my-subscribe-button * ngIf = "isUserLoggedIn()" [ 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 >
2018-08-09 12:55:06 +00:00
2018-08-30 09:15:22 +00:00
< my-help helpType = "custom" i18n-customHtml customHtml = "You can subscribe to this account via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type in the search box <strong>@{{video.account.name}}@{{video.account.host}}</strong> and subscribe there." > < / my-help >
< / 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 >
< my-loader class = "description-loading" [ loading ] = " descriptionLoading " > < / my-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 >
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-08-31 15:19:21 +00:00
< my-video-comments [ video ] = " video " [ user ] = " user " > < / my-video-comments >
2016-11-04 15:04:50 +00:00
< / div >
2018-08-31 15:19:21 +00:00
< my-recommended-videos class = "ml-3 ml-sm-0 col-12 col-md-3"
[inputVideo]="video" [user]="user">< / my-recommended-videos >
2016-11-04 15:04:50 +00:00
< / div >
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-08-30 09:15:22 +00:00
the sharing system used by 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
< / div >
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 >