]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/videos/+video-watch/video-watch.component.html
Add scores to follows and remove bad ones
[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / video-watch.component.html
CommitLineData
d1992b93 1<div class="row">
897ec54d 2 <!-- We need the video container for videojs so we just hide it -->
be6a4802 3 <div [hidden]="videoNotFound" id="video-container">
014ad879 4 <video id="video-element" class="video-js vjs-peertube-skin"></video>
d1992b93 5 </div>
897ec54d
C
6
7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
b1fa3eba 8
20206dfb
C
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>
d1992b93 14
20206dfb 15 <div class="video-info-actions">
6e33bf28 16 <div
cf117aaa
C
17 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
18 class="action-button action-button-like"
19 >
6e33bf28 20 <span class="icon icon-like" title="Like this video" ></span>
20206dfb 21 </div>
d38b8281 22
6e33bf28 23 <div
cf117aaa
C
24 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
25 class="action-button action-button-dislike"
26 >
6e33bf28 27 <span class="icon icon-dislike" title="Dislike this video"></span>
20206dfb 28 </div>
99cc4f49 29
20206dfb
C
30 <div (click)="showShareModal()" class="action-button">
31 <span class="icon icon-share"></span>
32 Share
b1fa3eba
C
33 </div>
34
20206dfb
C
35 <div class="action-more" dropdown dropup="true" placement="right">
36 <div class="action-button" dropdownToggle>
37 <span class="icon icon-more"></span>
38 </div>
39
40 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
41 <li role="menuitem">
42 <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
43 <span class="icon icon-download"></span> Download
44 </a>
45 </li>
46
47 <li *ngIf="isUserLoggedIn()" role="menuitem">
48 <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
49 <span class="icon icon-alert"></span> Report
50 </a>
51 </li>
52
53 <li *ngIf="isVideoBlacklistable()" role="menuitem">
54 <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
55 <span class="icon icon-blacklist"></span> Blacklist
56 </a>
57 </li>
6725d05c 58
4635f59d
C
59 <li *ngIf="isVideoUpdatable()" role="menuitem">
60 <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
61 <span class="icon icon-edit"></span> Update
62 </a>
63 </li>
64
6725d05c
C
65 <li *ngIf="isVideoRemovable()" role="menuitem">
66 <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
67 <span class="icon icon-blacklist"></span> Delete
68 </a>
69 </li>
20206dfb
C
70 </ul>
71 </div>
b1fa3eba 72 </div>
4f8c0eb0 73 </div>
d1992b93 74
20206dfb
C
75 <div class="video-info-date-views-bar">
76 <div class="video-info-date-views">
77 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
78 </div>
6a9e1d42 79
e9189001
C
80 <div
81 class="video-info-likes-dislikes-bar"
82 *ngIf="video.likes !== 0 || video.dislikes !== 0" [tooltip]="likesBarTooltipText">
20206dfb
C
83 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
84 </div>
6a9e1d42 85 </div>
6e07c3de 86
20206dfb 87 <div class="video-info-channel">
60650c77 88 {{ video.channel.displayName }}
20206dfb
C
89 <!-- Here will be the subscribe button -->
90 </div>
d07137b9 91
20206dfb
C
92 <div class="video-info-by">
93 By {{ video.by }}
94 <img [src]="getAvatarPath()" alt="Account avatar" />
95 </div>
09223546 96
20206dfb
C
97 <div class="video-info-description">
98 <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
2de96f4d 99
20206dfb
C
100 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length === 250" (click)="showMoreDescription()">
101 Show more
102 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
103 <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
104 </div>
2de96f4d 105
20206dfb
C
106 <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
107 Show less
108 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
109 </div>
2de96f4d 110 </div>
db216afd 111
20206dfb
C
112 <div class="video-attributes">
113 <div class="video-attribute">
114 <span class="video-attribute-label">
115 Privacy
116 </span>
117 <span class="video-attribute-value">
118 {{ video.privacyLabel }}
119 </span>
120 </div>
fd45e8f4 121
20206dfb
C
122 <div class="video-attribute">
123 <span class="video-attribute-label">
124 Category
125 </span>
126 <span class="video-attribute-value">
127 {{ video.categoryLabel }}
128 </span>
129 </div>
09223546 130
20206dfb
C
131 <div class="video-attribute">
132 <span class="video-attribute-label">
133 Licence
134 </span>
135 <span class="video-attribute-value">
136 {{ video.licenceLabel }}
137 </span>
138 </div>
09223546 139
20206dfb
C
140 <div class="video-attribute">
141 <span class="video-attribute-label">
142 Language
143 </span>
144 <span class="video-attribute-value">
145 {{ video.languageLabel }}
146 </span>
147 </div>
8ce9e815 148
20206dfb
C
149 <div class="video-attribute">
150 <span class="video-attribute-label">
151 Tags
152 </span>
8ce9e815 153
20206dfb
C
154 <span class="video-attribute-value">
155 {{ getVideoTags() }}
156 </span>
157 </div>
8ce9e815 158 </div>
b1fa3eba 159
4635f59d 160 <my-video-comments [video]="video" [user]="user"></my-video-comments>
41c3dfac
C
161 </div>
162
20206dfb
C
163 <div class="other-videos">
164 <div class="title-page title-page-single">
165 Other videos
166 </div>
167
57a49263 168 <div *ngFor="let video of otherVideosDisplayed">
20206dfb
C
169 <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
170 </div>
d1992b93
C
171 </div>
172 </div>
173</div>
174
ad42bea3 175<ng-template [ngIf]="video !== null">
4f8c0eb0 176 <my-video-share #videoShareModal [video]="video"></my-video-share>
a96aed15 177 <my-video-download #videoDownloadModal [video]="video"></my-video-download>
4f8c0eb0 178 <my-video-report #videoReportModal [video]="video"></my-video-report>
ad42bea3 179</ng-template>