borekon/PeerTube_original
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add likes/dislikes bar

Browse Source
This commit is contained in:
Chocobozzz 2017-12-06 18:04:40 +01:00
parent b1fa3eba70
commit 6a9e1d42f8
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/app/shared/video/video-details.model.ts
View File

@ -46,6 +46,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
privacy: VideoPrivacy privacy: VideoPrivacy
privacyLabel: string privacyLabel: string
account: Account account: Account
likesPercent: number
dislikesPercent: number
constructor (hash: VideoDetailsServerModel) { constructor (hash: VideoDetailsServerModel) {
super(hash) super(hash)
@ -56,6 +58,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
this.files = hash.files this.files = hash.files
this.channel = hash.channel this.channel = hash.channel
this.account = hash.account this.account = hash.account
this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
} }
getAppropriateMagnetUri (actualDownloadSpeed = 0) { getAppropriateMagnetUri (actualDownloadSpeed = 0) {

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

@ -73,8 +73,14 @@
</div> </div>
</div> </div>
<div class="video-info-date-views"> <div class="video-info-date-views-bar">
{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views <div class="video-info-date-views">
{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
</div>
<div class="video-info-likes-dislikes-bar">
<div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
</div>
</div> </div>
<div class="video-info-channel"> <div class="video-info-channel">

23
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -84,9 +84,26 @@
} }
} }
.video-info-date-views { .video-info-date-views-bar {
font-size: 16px; display: flex;
margin-bottom: 10px;
.video-info-date-views {
font-size: 16px;
margin-bottom: 10px;
flex-grow: 1;
}
.video-info-likes-dislikes-bar {
height: 5px;
width: 186px;
background-color: #E5E5E5;
margin-top: 25px;
.likes-bar {
height: 100%;
background-color: #39CC0B;
}
}
} }
.video-info-channel { .video-info-channel {