client/src/app/videos/+video-watch/video-watch.component.html

   1 <div class="row">
   2   <!-- We need the video container for videojs so we just hide it -->
   3   <div [hidden]="videoNotFound" id="video-container">
   4      <video id="video-element" class="video-js vjs-peertube-skin"></video>
   5   </div>
   6
   7   <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
   8
   9   <!-- Video information -->
  10   <div *ngIf="video" class="margin-content video-bottom">
  11     <div class="video-info">
  12       <div class="video-info-name-actions">
  13         <div class="video-info-name">{{ video.name }}</div>
  14
  15         <div class="video-info-actions">
  16           <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" class="action-button">
  17             <span class="icon icon-like" title="Like this video" (click)="setLike()"></span>
  18           </div>
  19
  20           <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" class="action-button">
  21             <span class="icon icon-dislike" title="Dislike this video" (click)="setDislike()"></span>
  22           </div>
  23
  24           <div (click)="showShareModal()" class="action-button">
  25             <span class="icon icon-share"></span>
  26             Share
  27           </div>
  28
  29           <div class="action-more" dropdown dropup="true" placement="right">
  30             <div class="action-button" dropdownToggle>
  31               <span class="icon icon-more"></span>
  32             </div>
  33
  34             <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
  35               <li role="menuitem">
  36                 <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
  37                   <span class="icon icon-download"></span> Download
  38                 </a>
  39               </li>
  40
  41               <li *ngIf="isUserLoggedIn()" role="menuitem">
  42                 <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
  43                   <span class="icon icon-alert"></span> Report
  44                 </a>
  45               </li>
  46
  47               <li *ngIf="isVideoBlacklistable()" role="menuitem">
  48                 <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
  49                   <span class="icon icon-blacklist"></span> Blacklist
  50                 </a>
  51               </li>
  52             </ul>
  53           </div>
  54         </div>
  55       </div>
  56
  57       <div class="video-info-date-views-bar">
  58         <div class="video-info-date-views">
  59           {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
  60         </div>
  61
  62         <div *ngIf="video.likes !== 0 || video.dislikes !== 0" class="video-info-likes-dislikes-bar">
  63           <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
  64         </div>
  65       </div>
  66
  67       <div class="video-info-channel">
  68         {{ video.channel.name }}
  69         <!-- Here will be the subscribe button -->
  70       </div>
  71
  72       <div class="video-info-by">
  73         By {{ video.by }}
  74         <img [src]="getAvatarPath()" alt="Account avatar" />
  75       </div>
  76
  77       <div class="video-info-description">
  78         <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
  79
  80         <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length === 250" (click)="showMoreDescription()">
  81           Show more
  82           <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
  83           <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
  84         </div>
  85
  86         <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
  87           Show less
  88           <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
  89         </div>
  90       </div>
  91
  92       <div class="video-attributes">
  93         <div class="video-attribute">
  94           <span class="video-attribute-label">
  95             Privacy
  96           </span>
  97           <span class="video-attribute-value">
  98             {{ video.privacyLabel }}
  99           </span>
 100         </div>
 101
 102         <div class="video-attribute">
 103           <span class="video-attribute-label">
 104             Category
 105           </span>
 106           <span class="video-attribute-value">
 107             {{ video.categoryLabel }}
 108           </span>
 109         </div>
 110
 111         <div class="video-attribute">
 112           <span class="video-attribute-label">
 113             Licence
 114           </span>
 115           <span class="video-attribute-value">
 116             {{ video.licenceLabel }}
 117           </span>
 118         </div>
 119
 120         <div class="video-attribute">
 121           <span class="video-attribute-label">
 122             Language
 123           </span>
 124           <span class="video-attribute-value">
 125             {{ video.languageLabel }}
 126           </span>
 127         </div>
 128
 129         <div class="video-attribute">
 130           <span class="video-attribute-label">
 131             Tags
 132           </span>
 133
 134           <span class="video-attribute-value">
 135             {{ getVideoTags() }}
 136           </span>
 137         </div>
 138       </div>
 139
 140     </div>
 141
 142     <div class="other-videos">
 143       <div class="title-page title-page-single">
 144         Other videos
 145       </div>
 146
 147       <div *ngFor="let video of otherVideos">
 148         <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
 149       </div>
 150     </div>
 151   </div>
 152 </div>
 153
 154 <ng-template [ngIf]="video !== null">
 155   <my-video-share #videoShareModal [video]="video"></my-video-share>
 156   <my-video-download #videoDownloadModal [video]="video"></my-video-download>
 157   <my-video-report #videoReportModal [video]="video"></my-video-report>
 158 </ng-template>