aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-11 10:02:17 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-11 10:02:17 +0100
commit20206dfb0bfe1537912ae0a5b99f2fa40c881d33 (patch)
tree1b51dca6bce2d0dc1c2c667dd13af1ddc50baca1 /client/src/app/videos
parent9b7d1c723d7c11572d91d606954997e413f56a1f (diff)
downloadPeerTube-20206dfb0bfe1537912ae0a5b99f2fa40c881d33.tar.gz
PeerTube-20206dfb0bfe1537912ae0a5b99f2fa40c881d33.tar.zst
PeerTube-20206dfb0bfe1537912ae0a5b99f2fa40c881d33.zip
Fix loading spinner in player
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html230
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss8
2 files changed, 121 insertions, 117 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 43b175acc..f99e84caf 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -5,148 +5,148 @@
5 </div> 5 </div>
6 6
7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> 7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
8</div>
9
10<!-- Video information -->
11<div *ngIf="video" class="margin-content video-bottom">
12 <div class="video-info">
13 <div class="video-info-name-actions">
14 <div class="video-info-name">{{ video.name }}</div>
15 8
16 <div class="video-info-actions"> 9 <!-- Video information -->
17 <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" class="action-button"> 10 <div *ngIf="video" class="margin-content video-bottom">
18 <span class="icon icon-like" title="Like this video" (click)="setLike()"></span> 11 <div class="video-info">
19 </div> 12 <div class="video-info-name-actions">
13 <div class="video-info-name">{{ video.name }}</div>
20 14
21 <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" class="action-button"> 15 <div class="video-info-actions">
22 <span class="icon icon-dislike" title="Dislike this video" (click)="setDislike()"></span> 16 <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" class="action-button">
23 </div> 17 <span class="icon icon-like" title="Like this video" (click)="setLike()"></span>
18 </div>
24 19
25 <div (click)="showShareModal()" class="action-button"> 20 <div *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" class="action-button">
26 <span class="icon icon-share"></span> 21 <span class="icon icon-dislike" title="Dislike this video" (click)="setDislike()"></span>
27 Share 22 </div>
28 </div>
29 23
30 <div class="action-more" dropdown dropup="true" placement="right"> 24 <div (click)="showShareModal()" class="action-button">
31 <div class="action-button" dropdownToggle> 25 <span class="icon icon-share"></span>
32 <span class="icon icon-more"></span> 26 Share
33 </div> 27 </div>
34 28
35 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> 29 <div class="action-more" dropdown dropup="true" placement="right">
36 <li role="menuitem"> 30 <div class="action-button" dropdownToggle>
37 <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)"> 31 <span class="icon icon-more"></span>
38 <span class="icon icon-download"></span> Download 32 </div>
39 </a> 33
40 </li> 34 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
41 35 <li role="menuitem">
42 <li *ngIf="isUserLoggedIn()" role="menuitem"> 36 <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
43 <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)"> 37 <span class="icon icon-download"></span> Download
44 <span class="icon icon-alert"></span> Report 38 </a>
45 </a> 39 </li>
46 </li> 40
47 41 <li *ngIf="isUserLoggedIn()" role="menuitem">
48 <li *ngIf="isVideoBlacklistable()" role="menuitem"> 42 <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
49 <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)"> 43 <span class="icon icon-alert"></span> Report
50 <span class="icon icon-blacklist"></span> Blacklist 44 </a>
51 </a> 45 </li>
52 </li> 46
53 </ul> 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> 54 </div>
55 </div> 55 </div>
56 </div>
57 56
58 <div class="video-info-date-views-bar"> 57 <div class="video-info-date-views-bar">
59 <div class="video-info-date-views"> 58 <div class="video-info-date-views">
60 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views 59 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
61 </div> 60 </div>
62 61
63 <div *ngIf="video.likes !== 0 || video.dislikes !== 0" class="video-info-likes-dislikes-bar"> 62 <div *ngIf="video.likes !== 0 || video.dislikes !== 0" class="video-info-likes-dislikes-bar">
64 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> 63 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
64 </div>
65 </div> 65 </div>
66 </div>
67 66
68 <div class="video-info-channel"> 67 <div class="video-info-channel">
69 {{ video.channel.name }} 68 {{ video.channel.name }}
70 <!-- Here will be the subscribe button --> 69 <!-- Here will be the subscribe button -->
71 </div> 70 </div>
72 71
73 <div class="video-info-by"> 72 <div class="video-info-by">
74 By {{ video.by }} 73 By {{ video.by }}
75 <img [src]="getAvatarPath()" alt="Account avatar" /> 74 <img [src]="getAvatarPath()" alt="Account avatar" />
76 </div> 75 </div>
77 76
78 <div class="video-info-description"> 77 <div class="video-info-description">
79 <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div> 78 <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
80 79
81 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length === 250" (click)="showMoreDescription()"> 80 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length === 250" (click)="showMoreDescription()">
82 Show more 81 Show more
83 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span> 82 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
84 <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader> 83 <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
85 </div> 84 </div>
86 85
87 <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more"> 86 <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
88 Show less 87 Show less
89 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span> 88 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
89 </div>
90 </div> 90 </div>
91 </div>
92 91
93 <div class="video-attributes"> 92 <div class="video-attributes">
94 <div class="video-attribute"> 93 <div class="video-attribute">
95 <span class="video-attribute-label"> 94 <span class="video-attribute-label">
96 Privacy 95 Privacy
97 </span> 96 </span>
98 <span class="video-attribute-value"> 97 <span class="video-attribute-value">
99 {{ video.privacyLabel }} 98 {{ video.privacyLabel }}
100 </span> 99 </span>
101 </div> 100 </div>
102 101
103 <div class="video-attribute"> 102 <div class="video-attribute">
104 <span class="video-attribute-label"> 103 <span class="video-attribute-label">
105 Category 104 Category
106 </span> 105 </span>
107 <span class="video-attribute-value"> 106 <span class="video-attribute-value">
108 {{ video.categoryLabel }} 107 {{ video.categoryLabel }}
109 </span> 108 </span>
110 </div> 109 </div>
111 110
112 <div class="video-attribute"> 111 <div class="video-attribute">
113 <span class="video-attribute-label"> 112 <span class="video-attribute-label">
114 Licence 113 Licence
115 </span> 114 </span>
116 <span class="video-attribute-value"> 115 <span class="video-attribute-value">
117 {{ video.licenceLabel }} 116 {{ video.licenceLabel }}
118 </span> 117 </span>
119 </div> 118 </div>
120 119
121 <div class="video-attribute"> 120 <div class="video-attribute">
122 <span class="video-attribute-label"> 121 <span class="video-attribute-label">
123 Language 122 Language
124 </span> 123 </span>
125 <span class="video-attribute-value"> 124 <span class="video-attribute-value">
126 {{ video.languageLabel }} 125 {{ video.languageLabel }}
127 </span> 126 </span>
128 </div> 127 </div>
129 128
130 <div class="video-attribute"> 129 <div class="video-attribute">
131 <span class="video-attribute-label"> 130 <span class="video-attribute-label">
132 Tags 131 Tags
133 </span> 132 </span>
134 133
135 <span class="video-attribute-value"> 134 <span class="video-attribute-value">
136 {{ getVideoTags() }} 135 {{ getVideoTags() }}
137 </span> 136 </span>
137 </div>
138 </div> 138 </div>
139 </div>
140 139
141 </div>
142
143 <div class="other-videos">
144 <div class="title-page title-page-single">
145 Other videos
146 </div> 140 </div>
147 141
148 <div *ngFor="let video of otherVideos"> 142 <div class="other-videos">
149 <my-video-miniature [video]="video" [user]="user"></my-video-miniature> 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> 150 </div>
151 </div> 151 </div>
152</div> 152</div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 83a7cc41d..9daa757b4 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -216,14 +216,18 @@
216} 216}
217 217
218 218
219@media screen and (max-width: 800px) { 219@media screen and (max-width: 1000px) {
220 .other-videos { 220 .other-videos {
221 display: none; 221 display: none;
222 } 222 }
223}
223 224
225@media screen and (max-width: 800px) {
224 .video-bottom { 226 .video-bottom {
227 margin: 20px 0 0 0;
228
225 .video-info { 229 .video-info {
226 margin-right: 10px; 230 margin-right: 0;
227 231
228 .video-info-name-actions { 232 .video-info-name-actions {
229 align-items: left; 233 align-items: left;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-26 07:03:59 +0000