diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-12-06 17:15:59 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-12-06 17:15:59 +0100 |
commit | b1fa3eba70dbd7d9e5b795ad251e293c88ebeee2 (patch) | |
tree | fffcdf00d7b475c5c2de7456a7ef3c4d47c71865 /client/src/app/videos/+video-watch/video-watch.component.html | |
parent | ce0e281d46a7b574dcccb47958743656532bd312 (diff) | |
download | PeerTube-b1fa3eba70dbd7d9e5b795ad251e293c88ebeee2.tar.gz PeerTube-b1fa3eba70dbd7d9e5b795ad251e293c88ebeee2.tar.zst PeerTube-b1fa3eba70dbd7d9e5b795ad251e293c88ebeee2.zip |
Begin video watch design
Diffstat (limited to 'client/src/app/videos/+video-watch/video-watch.component.html')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.html | 233 |
1 files changed, 102 insertions, 131 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index aa1f2f77e..f31e82bff 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -1,18 +1,3 @@ | |||
1 | <div *ngIf="error" class="row"> | ||
2 | <div class="alert alert-danger"> | ||
3 | The video load seems to be abnormally long. | ||
4 | <ul> | ||
5 | <li>Maybe the server {{ video.serverHost }} is down :(</li> | ||
6 | <li> | ||
7 | If not, you can report an issue on | ||
8 | <a href="https://github.com/Chocobozzz/PeerTube/issues" title="Report an issue"> | ||
9 | https://github.com/Chocobozzz/PeerTube/issues | ||
10 | </a> | ||
11 | </li> | ||
12 | </ul> | ||
13 | </div> | ||
14 | </div> | ||
15 | |||
16 | <div class="row"> | 1 | <div class="row"> |
17 | <!-- We need the video container for videojs so we just hide it --> | 2 | <!-- We need the video container for videojs so we just hide it --> |
18 | <div [hidden]="videoNotFound" id="video-container"> | 3 | <div [hidden]="videoNotFound" id="video-container"> |
@@ -23,167 +8,153 @@ | |||
23 | </div> | 8 | </div> |
24 | 9 | ||
25 | <!-- Video information --> | 10 | <!-- Video information --> |
26 | <div *ngIf="video !== null" id="video-info"> | 11 | <div *ngIf="video" class="margin-content video-bottom"> |
27 | <div class="row video-name-views"> | 12 | <div class="video-info"> |
28 | <div class="col-xs-8 col-md-8 video-name"> | 13 | <div class="video-info-name-actions"> |
29 | {{ video.name }} | 14 | <div class="video-info-name">{{ video.name }}</div> |
30 | </div> | 15 | |
31 | 16 | <div class="video-info-actions"> | |
32 | <div class="col-xs-4 col-md-4 pull-right video-views"> | 17 | <div class="action-button"> |
33 | {{ video.views}} views | 18 | <span |
34 | </div> | 19 | class="icon icon-like" title="Like this video" |
35 | </div> | 20 | [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'like' }" (click)="setLike()" |
21 | ></span> | ||
22 | </div> | ||
36 | 23 | ||
37 | <div class="row video-small-blocks"> | 24 | <div class="action-button"> |
38 | <div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-account"> | 25 | <span |
39 | <a class="option" title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'account', search: video.account }]"> | 26 | class="icon icon-dislike" title="Dislike this video" |
40 | <span class="glyphicon glyphicon-user"></span> | 27 | [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'dislike' }" (click)="setDislike()" |
41 | <span class="video-small-block-text">{{ video.by }}</span> | 28 | ></span> |
42 | </a> | 29 | </div> |
43 | </div> | ||
44 | 30 | ||
45 | <div class="col-xs-2 col-md-3 video-small-block video-small-block-share"> | 31 | <div (click)="showShareModal()" class="action-button"> |
46 | <a class="option" (click)="showShareModal()" title="Share the video"> | 32 | <span class="icon icon-share"></span> |
47 | <span class="glyphicon glyphicon-share"></span> | 33 | Share |
48 | <span class="hidden-xs video-small-block-text">Share</span> | 34 | </div> |
49 | </a> | ||
50 | </div> | ||
51 | 35 | ||
52 | <div class="col-xs-2 col-md-3 video-small-block video-small-block-more"> | 36 | <div class="action-more" dropdown dropup="true" placement="right"> |
53 | <div class="video-small-block-dropdown" dropdown dropup="true" placement="right"> | 37 | <div class="action-button" dropdownToggle> |
54 | <a class="option" title="Access to more options" dropdownToggle> | 38 | <span class="icon icon-more"></span> |
55 | <span class="glyphicon glyphicon-option-horizontal"></span> | 39 | </div> |
56 | <span class="hidden-xs video-small-block-text">More</span> | 40 | |
57 | </a> | 41 | <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> |
58 | 42 | <li *ngIf="canUserUpdateVideo()" role="menuitem"> | |
59 | <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> | 43 | <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]"> |
60 | <li *ngIf="canUserUpdateVideo()" role="menuitem"> | 44 | <span class="glyphicon glyphicon-pencil"></span> Update |
61 | <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]"> | 45 | </a> |
62 | <span class="glyphicon glyphicon-pencil"></span> Update | 46 | </li> |
63 | </a> | 47 | |
64 | </li> | 48 | <li role="menuitem"> |
65 | 49 | <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)"> | |
66 | <li role="menuitem"> | 50 | <span class="glyphicon glyphicon-download-alt"></span> Download |
67 | <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)"> | 51 | </a> |
68 | <span class="glyphicon glyphicon-download-alt"></span> Download | 52 | </li> |
69 | </a> | 53 | |
70 | </li> | 54 | <li *ngIf="isUserLoggedIn()" role="menuitem"> |
71 | 55 | <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)"> | |
72 | <li *ngIf="isUserLoggedIn()" role="menuitem"> | 56 | <span class="glyphicon glyphicon-alert"></span> Report |
73 | <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)"> | 57 | </a> |
74 | <span class="glyphicon glyphicon-alert"></span> Report | 58 | </li> |
75 | </a> | 59 | |
76 | </li> | 60 | <li *ngIf="isVideoRemovable()" role="menuitem"> |
77 | 61 | <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)"> | |
78 | <li *ngIf="isVideoRemovable()" role="menuitem"> | 62 | <span class="glyphicon glyphicon-remove"></span> Delete |
79 | <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)"> | 63 | </a> |
80 | <span class="glyphicon glyphicon-remove"></span> Delete | 64 | </li> |
81 | </a> | 65 | |
82 | </li> | 66 | <li *ngIf="isVideoBlacklistable()" role="menuitem"> |
83 | 67 | <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)"> | |
84 | <li *ngIf="isVideoBlacklistable()" role="menuitem"> | 68 | <span class="glyphicon glyphicon-eye-close"></span> Blacklist |
85 | <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)"> | 69 | </a> |
86 | <span class="glyphicon glyphicon-eye-close"></span> Blacklist | 70 | </li> |
87 | </a> | 71 | </ul> |
88 | </li> | 72 | </div> |
89 | </ul> | ||
90 | </div> | 73 | </div> |
91 | </div> | 74 | </div> |
92 | 75 | ||
93 | <div class="col-xs-3 col-md-3 video-small-block video-small-block-rating"> | 76 | <div class="video-info-date-views"> |
94 | <div class="video-small-block-like"> | 77 | {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views |
95 | <span | 78 | </div> |
96 | class="glyphicon glyphicon-thumbs-up" title="Like this video" | ||
97 | [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'like' }" (click)="setLike()" | ||
98 | ></span> | ||
99 | |||
100 | <span class="video-small-block-text"> | ||
101 | {{ video.likes }} | ||
102 | </span> | ||
103 | </div> | ||
104 | |||
105 | <div class="video-small-block-dislike"> | ||
106 | <span | ||
107 | class="glyphicon glyphicon-thumbs-down" title="Dislike this video" | ||
108 | [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'dislike' }" (click)="setDislike()" | ||
109 | ></span> | ||
110 | 79 | ||
111 | <span class="video-small-block-text"> | 80 | <div class="video-info-channel"> |
112 | {{ video.dislikes }} | 81 | {{ video.channel.name }} |
113 | </span> | 82 | <!-- Here will be the subscribe button --> |
114 | </div> | ||
115 | </div> | 83 | </div> |
116 | </div> | ||
117 | 84 | ||
118 | <div class="row video-details"> | 85 | <div class="video-info-by"> |
119 | <div class="video-details-date-description col-xs-8 col-md-9"> | 86 | By {{ video.by }} |
120 | <div class="video-details-date"> | 87 | <img [src]="getAvatarPath()" alt="Account avatar" /> |
121 | Published on {{ video.createdAt | date:'short' }} | 88 | </div> |
122 | </div> | ||
123 | 89 | ||
124 | <div class="video-details-description" [innerHTML]="videoHTMLDescription"></div> | 90 | <div class="video-info-description"> |
91 | <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div> | ||
125 | 92 | ||
126 | <div class="video-details-description-more" *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()"> | 93 | <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()"> |
127 | Show more | 94 | Show more |
128 | <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span> | 95 | <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span> |
129 | <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader> | 96 | <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader> |
130 | </div> | 97 | </div> |
131 | 98 | ||
132 | <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-details-description-more"> | 99 | <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more"> |
133 | Show less | 100 | Show less |
134 | <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span> | 101 | <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span> |
135 | </div> | 102 | </div> |
136 | </div> | 103 | </div> |
137 | 104 | ||
138 | <div class="video-details-attributes col-xs-4 col-md-3"> | 105 | <div class="video-attributes"> |
139 | <div class="video-details-attribute"> | 106 | <div class="video-attribute"> |
140 | <span class="video-details-attribute-label"> | 107 | <span class="video-attribute-label"> |
141 | Privacy: | 108 | Privacy |
142 | </span> | 109 | </span> |
143 | <span class="video-details-attribute-value"> | 110 | <span class="video-attribute-value"> |
144 | {{ video.privacyLabel }} | 111 | {{ video.privacyLabel }} |
145 | </span> | 112 | </span> |
146 | </div> | 113 | </div> |
147 | 114 | ||
148 | <div class="video-details-attribute"> | 115 | <div class="video-attribute"> |
149 | <span class="video-details-attribute-label"> | 116 | <span class="video-attribute-label"> |
150 | Category: | 117 | Category |
151 | </span> | 118 | </span> |
152 | <span class="video-details-attribute-value"> | 119 | <span class="video-attribute-value"> |
153 | {{ video.categoryLabel }} | 120 | {{ video.categoryLabel }} |
154 | </span> | 121 | </span> |
155 | </div> | 122 | </div> |
156 | 123 | ||
157 | <div class="video-details-attribute"> | 124 | <div class="video-attribute"> |
158 | <span class="video-details-attribute-label"> | 125 | <span class="video-attribute-label"> |
159 | Licence: | 126 | Licence |
160 | </span> | 127 | </span> |
161 | <span class="video-details-attribute-value"> | 128 | <span class="video-attribute-value"> |
162 | {{ video.licenceLabel }} | 129 | {{ video.licenceLabel }} |
163 | </span> | 130 | </span> |
164 | </div> | 131 | </div> |
165 | 132 | ||
166 | <div class="video-details-attribute"> | 133 | <div class="video-attribute"> |
167 | <span class="video-details-attribute-label"> | 134 | <span class="video-attribute-label"> |
168 | Language: | 135 | Language |
169 | </span> | 136 | </span> |
170 | <span class="video-details-attribute-value"> | 137 | <span class="video-attribute-value"> |
171 | {{ video.languageLabel }} | 138 | {{ video.languageLabel }} |
172 | </span> | 139 | </span> |
173 | </div> | 140 | </div> |
174 | 141 | ||
175 | <div class="video-details-attribute"> | 142 | <div class="video-attribute"> |
176 | <span class="video-details-attribute-label"> | 143 | <span class="video-attribute-label"> |
177 | Tags: | 144 | Tags |
178 | </span> | 145 | </span> |
179 | 146 | ||
180 | <div class="video-details-tags"> | 147 | <span class="video-attribute-value"> |
181 | <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary"> | 148 | {{ getVideoTags() }} |
182 | {{ tag }} | 149 | </span> |
183 | </a> | ||
184 | </div> | ||
185 | </div> | 150 | </div> |
151 | </div> | ||
152 | |||
153 | </div> | ||
186 | 154 | ||
155 | <div class="other-videos"> | ||
156 | <div *ngFor="let video of otherVideos"> | ||
157 | <my-video-miniature [video]="video" [user]="user"></my-video-miniature> | ||
187 | </div> | 158 | </div> |
188 | </div> | 159 | </div> |
189 | </div> | 160 | </div> |