2016-11-04 15:04:50 +00:00
< div class = "row" >
2017-04-21 16:26:09 +00:00
<!-- We need the video container for videojs so we just hide it -->
2017-12-05 09:44:11 +00:00
< div [ hidden ] = " videoNotFound " id = "video-container" >
2018-02-16 15:35:32 +00:00
< video [ poster ] = " getVideoPoster ( ) " id = "video-element" class = "video-js vjs-peertube-skin" > < / video >
2016-11-04 15:04:50 +00:00
< / div >
2017-04-21 16:26:09 +00:00
< div * ngIf = "videoNotFound" id = "video-not-found" > Video not found :'(< / div >
2017-12-06 16:15:59 +00:00
2017-12-11 09:02:17 +00:00
<!-- Video information -->
< div * ngIf = "video" class = "margin-content video-bottom" >
< div class = "video-info" >
2018-01-31 10:38:05 +00:00
< div class = "video-info-first-row" >
< div >
< div class = "video-info-name" > {{ video.name }}< / div >
2016-11-04 15:04:50 +00:00
2018-01-31 10:38:05 +00:00
< div class = "video-info-date-views" >
{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
2017-12-11 09:02:17 +00:00
< / div >
2017-03-08 20:35:43 +00:00
2018-01-31 10:38:05 +00:00
< div class = "video-info-channel" >
{{ video.channel.displayName }}
<!-- Here will be the subscribe button -->
2017-12-11 09:02:17 +00:00
< / div >
2016-11-08 20:11:57 +00:00
2018-01-31 10:38:05 +00:00
< div class = "video-info-by" >
By {{ video.by }}
< img [ src ] = " getAvatarPath ( ) " alt = "Account avatar" / >
2017-12-06 16:15:59 +00:00
< / div >
2018-01-31 10:38:05 +00:00
< / div >
2017-12-06 16:15:59 +00:00
2018-01-31 10:38:05 +00:00
< div class = "video-actions-rates" >
< div class = "video-actions" >
< div
*ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
class="action-button action-button-like"
>
< span class = "icon icon-like" title = "Like this video" > < / span >
2017-12-11 09:02:17 +00:00
< / div >
2018-01-31 10:38:05 +00:00
< div
*ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
class="action-button action-button-dislike"
>
< span class = "icon icon-dislike" title = "Dislike this video" > < / span >
< / div >
2017-12-06 17:04:40 +00:00
2018-02-21 07:49:05 +00:00
< div * ngIf = "video.support" ( click ) = " showSupportModal ( ) " class = "action-button action-button-support" >
2018-02-20 15:13:05 +00:00
< span class = "icon icon-support" > < / span >
< span class = "icon-text" > Support< / span >
< / div >
2018-02-07 10:02:56 +00:00
< div ( click ) = " showShareModal ( ) " class = "action-button action-button-share" >
2018-01-31 10:38:05 +00:00
< span class = "icon icon-share" > < / span >
2018-02-20 15:13:05 +00:00
< span class = "icon-text" > Share< / span >
2018-01-31 10:38:05 +00:00
< / div >
2017-03-22 20:15:55 +00:00
2018-01-31 10:38:05 +00:00
< div class = "action-more" dropdown dropup = "true" placement = "right" >
< div class = "action-button" dropdownToggle >
< span class = "icon icon-more" > < / span >
< / div >
< ul * dropdownMenu class = "dropdown-menu" id = "more-menu" role = "menu" aria-labelledby = "single-button" >
< li role = "menuitem" >
< a class = "dropdown-item" title = "Download the video" href = "#" ( click ) = " showDownloadModal ( $ event ) " >
< span class = "icon icon-download" > < / span > Download
< / a >
< / li >
< li * ngIf = "isUserLoggedIn()" role = "menuitem" >
< a class = "dropdown-item" title = "Report this video" href = "#" ( click ) = " showReportModal ( $ event ) " >
< span class = "icon icon-alert" > < / span > Report
< / a >
< / li >
< li * ngIf = "isVideoBlacklistable()" role = "menuitem" >
< a class = "dropdown-item" title = "Blacklist this video" href = "#" ( click ) = " blacklistVideo ( $ event ) " >
< span class = "icon icon-blacklist" > < / span > Blacklist
< / a >
< / li >
< li * ngIf = "isVideoUpdatable()" role = "menuitem" >
< a class = "dropdown-item" title = "Update this video" href = "#" [ routerLink ] = " [ ' / videos / edit ' , video . uuid ] " >
< span class = "icon icon-edit" > < / span > Update
< / a >
< / li >
< li * ngIf = "isVideoRemovable()" role = "menuitem" >
< a class = "dropdown-item" title = "Delete this video" href = "#" ( click ) = " removeVideo ( $ event ) " >
< span class = "icon icon-blacklist" > < / span > Delete
< / a >
< / li >
< / ul >
< / div >
< / div >
2017-03-27 19:11:37 +00:00
2018-01-31 10:38:05 +00:00
< div
class="video-info-likes-dislikes-bar"
*ngIf="video.likes !== 0 || video.dislikes !== 0" [tooltip]="likesBarTooltipText">
< div class = "likes-bar" [ ngStyle ] = " { ' width . % ' : video . likesPercent } " > < / div >
< / div >
< / div >
2017-12-11 09:02:17 +00:00
< / div >
2017-04-21 14:40:45 +00:00
2017-12-11 09:02:17 +00:00
< div class = "video-info-description" >
< div class = "video-info-description-html" [ innerHTML ] = " videoHTMLDescription " > < / div >
2017-10-30 19:26:06 +00:00
2018-02-27 09:55:00 +00:00
< div class = "video-info-description-more" * ngIf = "completeDescriptionShown === false && video.description?.length >= 250" ( click ) = " showMoreDescription ( ) " >
2017-12-11 09:02:17 +00:00
Show more
< span * ngIf = "descriptionLoading === false" class = "glyphicon glyphicon-menu-down" > < / span >
< my-loader class = "description-loading" [ loading ] = " descriptionLoading " > < / my-loader >
< / div >
2017-10-30 19:26:06 +00:00
2017-12-11 09:02:17 +00:00
< div * ngIf = "completeDescriptionShown === true" ( click ) = " showLessDescription ( ) " class = "video-info-description-more" >
Show less
< span * ngIf = "descriptionLoading === false" class = "glyphicon glyphicon-menu-up" > < / span >
< / div >
2017-10-30 19:26:06 +00:00
< / div >
2017-04-07 12:57:05 +00:00
2017-12-11 09:02:17 +00:00
< div class = "video-attributes" >
< div class = "video-attribute" >
< span class = "video-attribute-label" >
Privacy
< / span >
< span class = "video-attribute-value" >
{{ video.privacyLabel }}
< / span >
< / div >
2017-10-31 10:52:52 +00:00
2017-12-11 09:02:17 +00:00
< div class = "video-attribute" >
< span class = "video-attribute-label" >
Category
< / span >
< span class = "video-attribute-value" >
{{ video.categoryLabel }}
< / span >
< / div >
2017-04-21 14:40:45 +00:00
2017-12-11 09:02:17 +00:00
< div class = "video-attribute" >
< span class = "video-attribute-label" >
Licence
< / span >
< span class = "video-attribute-value" >
{{ video.licenceLabel }}
< / span >
< / div >
2017-04-21 14:40:45 +00:00
2017-12-11 09:02:17 +00:00
< div class = "video-attribute" >
< span class = "video-attribute-label" >
Language
< / span >
< span class = "video-attribute-value" >
{{ video.languageLabel }}
< / span >
< / div >
2017-04-23 19:57:08 +00:00
2017-12-11 09:02:17 +00:00
< div class = "video-attribute" >
< span class = "video-attribute-label" >
Tags
< / span >
2017-04-23 19:57:08 +00:00
2017-12-11 09:02:17 +00:00
< span class = "video-attribute-value" >
{{ getVideoTags() }}
< / span >
< / div >
2017-04-23 19:57:08 +00:00
< / div >
2017-12-06 16:15:59 +00:00
2017-12-27 15:11:53 +00:00
< my-video-comments [ video ] = " video " [ user ] = " user " > < / my-video-comments >
2017-12-06 17:10:57 +00:00
< / div >
2017-12-11 09:02:17 +00:00
< div class = "other-videos" >
< div class = "title-page title-page-single" >
Other videos
< / div >
2018-01-07 13:48:10 +00:00
< div * ngFor = "let video of otherVideosDisplayed" >
2017-12-11 09:02:17 +00:00
< my-video-miniature [ video ] = " video " [ user ] = " user " > < / my-video-miniature >
< / div >
2016-11-04 15:04:50 +00:00
< / div >
< / div >
2018-03-07 16:35:30 +00:00
< div class = "privacy-concerns" * ngIf = "hasAlreadyAcceptedPrivacyConcern === false" >
< strong > Friendly Reminder:< / strong >
< div class = "privacy-concerns-text" >
The sharing system used by this video implies that some technical information about your system (such as a public IP address) can be accessed publicly.
< a title = "Get more information" target = "_blank" href = "/about#p2p-privacy" > More information< / a >
< / div >
< div class = "privacy-concerns-okay" ( click ) = " acceptedPrivacyConcern ( ) " >
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 >
2017-04-12 20:00:17 +00:00
< / ng-template >