interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor how we use icons 

Inject them in an angular component so we can easily change their color
This commit is contained in:
Chocobozzz 2019-01-16 16:05:40 +01:00
parent 848f499def
commit 457bb213b2
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
116 changed files with 670 additions and 894 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@ -154,7 +154,6 @@
"videojs-contextmenu-ui": "^5.0.0",
"videojs-dock": "^2.0.2",
"videojs-hotkeys": "^0.2.21",
"webpack": "^4.17.1",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.0.8",
"webtorrent": "https://github.com/webtorrent/webtorrent#e9b209c7970816fc29e0cc871157a4918d66001d",

2
client/src/app/+about/about-instance/contact-admin-modal.component.html
View File

@ -1,7 +1,7 @@
<ng-template #modal>
<div class="modal-header">
<h4 i18n class="modal-title">Contact {{ instanceName }} administrator</h4>
<span class="close" aria-label="Close" role="button" (click)="hide()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
<div class="modal-body">

5
client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
View File

@ -1,7 +1,8 @@
<ng-template #modal>
<div class="modal-header">
<h4 i18n class="modal-title">Moderation comment</h4>
<span class="close" aria-hidden="true" (click)="hideModerationCommentModal()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
<div class="modal-body">
@ -19,7 +20,7 @@
</div>
<div class="form-group inputs">
<span i18n class="action-button action-button-cancel" (click)="hideModerationCommentModal()">Cancel</span>
<span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
<input
type="submit" i18n-value value="Update this comment" class="action-button-submit"

4
client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
View File

@ -45,7 +45,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
})
}
hideModerationCommentModal () {
hide () {
this.abuseToComment = undefined
this.openedModal.close()
this.form.reset()
@ -60,7 +60,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
this.notifier.success(this.i18n('Comment updated.'))
this.commentUpdated.emit(moderationComment)
this.hideModerationCommentModal()
this.hide()
},
err => this.notifier.error(err.message)

2
client/src/app/+admin/users/user-list/user-list.component.html
View File

@ -2,7 +2,7 @@
<div i18n class="form-sub-title">Users list</div>
<a class="add-button" routerLink="/admin/users/create">
<span class="icon icon-add"></span>
<my-global-icon iconName="add"></my-global-icon>
<ng-container i18n>Create user</ng-container>
</a>
</div>

2
client/src/app/+admin/users/user-list/user-list.component.scss
View File

@ -2,7 +2,7 @@
@import '_mixins';
.add-button {
@include create-button('../../../../assets/images/global/add.svg');
@include create-button;
}
tr.banned {

4
client/src/app/+my-account/my-account-history/my-account-history.component.scss
View File

@ -65,10 +65,10 @@
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
color: #585858;
color: $grey-foreground-color;
&:hover {
color: #303030;
color: $grey-foreground-hover-color;
}
}
}

10
client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
View File

@ -1,7 +1,13 @@
<div class="header">
<a routerLink="/my-account/settings" fragment="notifications" i18n>Notification preferences</a>
<a routerLink="/my-account/settings" fragment="notifications" i18n>
<my-global-icon iconName="cog"></my-global-icon>
Notification preferences
</a>
<button (click)="markAllAsRead()" i18n>Mark all as read</button>
<button (click)="markAllAsRead()" i18n>
<my-global-icon iconName="circle-tick"></my-global-icon>
Mark all as read
</button>
</div>
<my-user-notifications #userNotification></my-user-notifications>

4
client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
View File

@ -5,16 +5,18 @@
display: flex;
justify-content: space-between;
font-size: 15px;
margin-bottom: 10px;
margin-bottom: 20px;
a {
@include peertube-button-link;
@include grey-button;
@include button-with-icon(18px, 3px, -1px);
}
button {
@include peertube-button;
@include grey-button;
@include button-with-icon(20px, 3px, -1px);
}
}

3
client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
View File

@ -1,7 +1,8 @@
<ng-template #modal let-close="close" let-dismiss="dismiss">
<div class="modal-header">
<h4 i18n class="modal-title">Accept ownership</h4>
<span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
</div>
<div class="modal-body" [formGroup]="form">

2
client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
View File

@ -1,6 +1,6 @@
<div class="video-channels-header">
<a class="create-button" routerLink="create">
<span class="icon icon-add"></span>
<my-global-icon iconName="add"></my-global-icon>
<ng-container i18n>Create another video channel</ng-container>
</a>
</div>

2
client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
View File

@ -2,7 +2,7 @@
@import '_mixins';
.create-button {
@include create-button('../../../assets/images/global/add.svg');
@include create-button;
}
/deep/ .action-button {

4
client/src/app/+my-account/my-account-videos/my-account-videos.component.html
View File

@ -32,7 +32,7 @@
</span>
<span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
<span class="icon icon-delete-white"></span>
<my-global-icon iconName="delete"></my-global-icon>
<ng-container i18n>Delete</ng-container>
</span>
</div>
@ -45,7 +45,7 @@
<my-button i18n-label label="Change ownership"
className="action-button-change-ownership"
icon="icon-im-with-her"
icon="im-with-her"
(click)="changeOwnership($event, video)"
></my-button>
</div>

11
client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
View File

@ -23,14 +23,11 @@
.action-button-delete-selection {
@include peertube-button;
@include orange-button;
}
@include button-with-icon(21px);
.icon.icon-delete-white {
@include icon(21px);
position: relative;
top: -2px;
background-image: url('../../../assets/images/global/delete-white.svg');
my-global-icon {
@include apply-svg-color(#fff);
}
}
}
}

3
client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
View File

@ -1,7 +1,8 @@
<ng-template #modal let-close="close" let-dismiss="dismiss">
<div class="modal-header">
<h4 i18n class="modal-title">Change ownership</h4>
<span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
</div>
<div class="modal-body" [formGroup]="form">

2
client/src/app/app.component.html
View File

@ -37,7 +37,9 @@
</div>
<ngx-loading-bar [includeSpinner]="false"></ngx-loading-bar>
<my-confirm></my-confirm>
<p-toast position="bottom-right">
<ng-template let-message pTemplate="message">
<div class="notification-block">

1
client/src/app/core/confirm/index.ts
View File

@ -1,2 +1 @@
export * from './confirm.component'
export * from './confirm.service'

4
client/src/app/core/core.module.ts
View File

@ -8,7 +8,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
import { LoadingBarRouterModule } from '@ngx-loading-bar/router'
import { AuthService } from './auth'
import { ConfirmComponent, ConfirmService } from './confirm'
import { ConfirmService } from './confirm'
import { throwIfAlreadyLoaded } from './module-import-guard'
import { LoginGuard, RedirectService, UserRightGuard } from './routing'
import { ServerService } from './server'
@ -38,7 +38,6 @@ import { UserNotificationSocket } from '@app/core/notification/user-notification
],
declarations: [
ConfirmComponent,
CheatSheetComponent
],
@ -48,7 +47,6 @@ import { UserNotificationSocket } from '@app/core/notification/user-notification
ToastModule,
ConfirmComponent,
CheatSheetComponent
],

2
client/src/app/header/header.component.html
View File

@ -5,6 +5,6 @@
<span (click)="doSearch()" class="icon icon-search"></span>
<a class="upload-button" routerLink="/videos/upload">
<span class="icon icon-upload"></span>
<my-global-icon iconName="upload"></my-global-icon>
<span i18n class="upload-button-label">Upload</span>
</a>

10
client/src/app/header/header.component.scss
View File

@ -40,6 +40,7 @@
.upload-button {
@include peertube-button-link;
@include orange-button;
@include button-with-icon(22px, 3px, -1px);
margin-right: 25px;
@ -47,15 +48,6 @@
margin-right: 0;
}
.icon.icon-upload {
@include icon(22px);
background-image: url('../../assets/images/header/upload-white.svg');
height: 24px;
vertical-align: middle;
margin-right: 6px;
}
@media screen and (max-width: 600px) {
margin-right: 10px;
padding: 0 10px;

3
client/src/app/login/login.component.html
View File

@ -55,7 +55,8 @@
<ng-template #forgotPasswordModal>
<div class="modal-header">
<h4 i18n class="modal-title">Forgot your password</h4>
<span class="close" aria-hidden="true" (click)="hideForgotPasswordModal()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
</div>
<div class="modal-body">

2
client/src/app/menu/avatar-notification.component.scss
View File

@ -42,7 +42,7 @@
justify-content: center;
font-weight: $font-semibold;
color: var(--mainForegroundColor);
height: 30px;
padding: 7px 0;
}
}
}

2
client/src/app/menu/language-chooser.component.html
View File

@ -1,7 +1,7 @@
<ng-template #modal let-hide="close">
<div class="modal-header">
<h4 i18n class="modal-title">Change the language</h4>
<span class="close" aria-label="Close" role="button" (click)="hide()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>

4
client/src/app/search/search.component.scss
View File

@ -87,10 +87,10 @@
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
color: #585858;
color: $grey-foreground-color;
&:hover {
color: #303030;
color: $grey-foreground-hover-color;
}
}
}

2
client/src/app/shared/actor/actor.model.ts
View File

@ -16,7 +16,7 @@ export abstract class Actor implements ActorServer {
avatarUrl: string
static GET_ACTOR_AVATAR_URL (actor: { avatar: Avatar }) {
static GET_ACTOR_AVATAR_URL (actor: { avatar?: { path: string } }) {
const absoluteAPIUrl = getAbsoluteAPIUrl()
if (actor && actor.avatar) return absoluteAPIUrl + actor.avatar.path

2
client/src/app/shared/buttons/action-dropdown.component.html
View File

@ -3,7 +3,7 @@
class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
ngbDropdownToggle role="button"
>
<span *ngIf="!label" class="icon icon-action"></span>
<my-global-icon *ngIf="!label" class="more-icon" iconName="more"></my-global-icon>
<span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
</div>

9
client/src/app/shared/buttons/action-dropdown.component.scss
View File

@ -24,14 +24,11 @@
}
&:hover, &:active, &:focus {
background-color: $grey-color;
background-color: $grey-background-color;
}
.icon-action {
@include icon(21px);
background-image: url('../../../assets/images/video/more.svg');
top: -1px;
.more-icon {
width: 21px;
}
&.small {

2
client/src/app/shared/buttons/button.component.html
View File

@ -1,4 +1,4 @@
<span class="action-button" [ngClass]="className" [title]="getTitle()">
<span class="icon" [ngClass]="icon"></span>
<my-global-icon [iconName]="icon"></my-global-icon>
<span class="button-label">{{ label }}</span>
</span>

34
client/src/app/shared/buttons/button.component.scss
View File

@ -3,41 +3,19 @@
.action-button {
@include peertube-button-link;
@include button-with-icon(21px, 0, -2px);
font-size: 15px;
font-weight: $font-semibold;
color: #585858;
background-color: #E5E5E5;
color: $grey-foreground-color;
background-color: $grey-background-color;
&:hover {
background-color: #EFEFEF;
background-color: $grey-background-hover-color;
}
.icon {
@include icon(21px);
position: relative;
top: -2px;
&.icon-edit {
background-image: url('../../../assets/images/global/edit-grey.svg');
}
&.icon-delete-grey {
background-image: url('../../../assets/images/global/delete-grey.svg');
}
&.icon-im-with-her {
background-image: url('../../../assets/images/global/im-with-her.svg');
}
&.icon-tick {
background-image: url('../../../assets/images/global/tick.svg');
}
&.icon-cross {
background-image: url('../../../assets/images/global/cross.svg');
}
my-global-icon {
@include apply-svg-color($grey-foreground-color);
}
}

3
client/src/app/shared/buttons/button.component.ts
View File

@ -1,4 +1,5 @@
import { Component, Input } from '@angular/core'
import { GlobalIconName } from '@app/shared/icons/global-icon.component'
@Component({
selector: 'my-button',
@ -9,7 +10,7 @@ import { Component, Input } from '@angular/core'
export class ButtonComponent {
@Input() label = ''
@Input() className: string = undefined
@Input() icon: string = undefined
@Input() icon: GlobalIconName = undefined
@Input() title: string = undefined
getTitle () {

2
client/src/app/shared/buttons/delete-button.component.html
View File

@ -1,5 +1,5 @@
<span class="action-button action-button-delete" [title]="getTitle()" role="button">
<span class="icon icon-delete-grey"></span>
<my-global-icon iconName="delete"></my-global-icon>
<span class="button-label" *ngIf="label">{{ label }}</span>
<span class="button-label" i18n *ngIf="!label">Delete</span>

2
client/src/app/shared/buttons/edit-button.component.html
View File

@ -1,5 +1,5 @@
<a class="action-button action-button-edit" [routerLink]="routerLink" i18n-title title="Edit">
<span class="icon icon-edit"></span>
<my-global-icon iconName="edit"></my-global-icon>
<span class="button-label" *ngIf="label">{{ label }}</span>
<span i18n class="button-label" *ngIf="!label">Edit</span>

3
client/src/app/core/confirm/confirm.component.html → client/src/app/shared/confirm/confirm.component.html
View File

@ -2,7 +2,8 @@
<div class="modal-header">
<h4 class="modal-title">{{ title }}</h4>
<span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
</div>
<div class="modal-body" >

0
client/src/app/core/confirm/confirm.component.scss → client/src/app/shared/confirm/confirm.component.scss
View File

2
client/src/app/core/confirm/confirm.component.ts → client/src/app/shared/confirm/confirm.component.ts
View File

@ -1,5 +1,5 @@
import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'
import { ConfirmService } from './confirm.service'
import { ConfirmService } from '@app/core/confirm/confirm.service'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'

0
client/src/app/shared/icons/global-icon.component.html Normal file
View File

4
client/src/app/shared/icons/global-icon.component.scss Normal file
View File

@ -0,0 +1,4 @@
/deep/ svg {
width: inherit;
height: inherit;
}

47
client/src/app/shared/icons/global-icon.component.ts Normal file
View File

@ -0,0 +1,47 @@
import { Component, ElementRef, Input, OnInit } from '@angular/core'
const icons = {
'add': require('../../../assets/images/global/add.html'),
'syndication': require('../../../assets/images/global/syndication.html'),
'help': require('../../../assets/images/global/help.html'),
'sparkle': require('../../../assets/images/global/sparkle.html'),
'alert': require('../../../assets/images/global/alert.html'),
'cloud-error': require('../../../assets/images/global/cloud-error.html'),
'user-add': require('../../../assets/images/global/user-add.html'),
'no': require('../../../assets/images/global/no.html'),
'cloud-download': require('../../../assets/images/global/cloud-download.html'),
'undo': require('../../../assets/images/global/undo.html'),
'circle-tick': require('../../../assets/images/global/circle-tick.html'),
'cog': require('../../../assets/images/global/cog.html'),
'download': require('../../../assets/images/global/download.html'),
'edit': require('../../../assets/images/global/edit.html'),
'im-with-her': require('../../../assets/images/global/im-with-her.html'),
'delete': require('../../../assets/images/global/delete.html'),
'cross': require('../../../assets/images/global/cross.html'),
'validate': require('../../../assets/images/global/validate.html'),
'dislike': require('../../../assets/images/video/dislike.html'),
'heart': require('../../../assets/images/video/heart.html'),
'like': require('../../../assets/images/video/like.html'),
'more': require('../../../assets/images/video/more.html'),
'share': require('../../../assets/images/video/share.html'),
'upload': require('../../../assets/images/video/upload.html')
}
export type GlobalIconName = keyof typeof icons
@Component({
selector: 'my-global-icon',
template: '',
styleUrls: [ './global-icon.component.scss' ]
})
export class GlobalIconComponent implements OnInit {
@Input() iconName: GlobalIconName
constructor (private el: ElementRef) {}
ngOnInit () {
const nativeElement = this.el.nativeElement
nativeElement.innerHTML = icons[this.iconName]
}
}

4
client/src/app/shared/misc/help.component.html
View File

@ -25,4 +25,6 @@
[autoClose]="true"
(onHidden)="onPopoverHidden()"
(onShown)="onPopoverShown()"
></span>
>
<my-global-icon iconName="help"></my-global-icon>
</span>

19
client/src/app/shared/misc/help.component.scss
View File

@ -2,13 +2,15 @@
@import '_mixins';
.help-tooltip-button {
@include icon(17px);
position: relative;
top: -2px;
background-image: url('../../../assets/images/global/help.svg');
cursor: pointer;
border: none;
margin: 5px;
my-global-icon {
width: 17px;
position: relative;
top: -2px;
margin: 5px;
}
}
/deep/ {
@ -24,8 +26,13 @@
color: #000;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
p:last-child {
margin-bottom: 0;
}
ul {
padding-left: 20px;
margin-bottom: 0;
}
}
}

5
client/src/app/shared/moderation/user-ban-modal.component.html
View File

@ -1,7 +1,8 @@
<ng-template #modal>
<div class="modal-header">
<h4 i18n class="modal-title">Ban</h4>
<span class="close" aria-hidden="true" (click)="hideBanUserModal()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
<div class="modal-body">
@ -19,7 +20,7 @@
</div>
<div class="form-group inputs">
<span i18n class="action-button action-button-cancel" (click)="hideBanUserModal()">Cancel</span>
<span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
<input
type="submit" i18n-value value="Ban this user" class="action-button-submit"

4
client/src/app/shared/moderation/user-ban-modal.component.ts
View File

@ -42,7 +42,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
this.openedModal = this.modalService.open(this.modal)
}
hideBanUserModal () {
hide () {
this.usersToBan = undefined
this.openedModal.close()
}
@ -60,7 +60,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
this.notifier.success(message)
this.userBanned.emit(this.usersToBan)
this.hideBanUserModal()
this.hide()
},
err => this.notifier.error(err.message)

8
client/src/app/shared/shared.module.ts
View File

@ -67,6 +67,8 @@ import { UserNotificationService } from '@app/shared/users/user-notification.ser
import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component'
import { InstanceService } from '@app/shared/instance/instance.service'
import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer'
import { ConfirmComponent } from '@app/shared/confirm/confirm.component'
import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
@NgModule({
imports: [
@ -110,7 +112,9 @@ import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/sha
UserBanModalComponent,
UserModerationDropdownComponent,
TopMenuDropdownComponent,
UserNotificationsComponent
UserNotificationsComponent,
ConfirmComponent,
GlobalIconComponent
],
exports: [
@ -151,6 +155,8 @@ import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/sha
UserModerationDropdownComponent,
TopMenuDropdownComponent,
UserNotificationsComponent,
ConfirmComponent,
GlobalIconComponent,
NumberFormatterPipe,
ObjectLengthPipe,

37
client/src/app/shared/users/user-notification.model.ts
View File

@ -1,4 +1,5 @@
import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo } from '../../../../../shared'
import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo, ActorInfo } from '../../../../../shared'
import { Actor } from '@app/shared/actor/actor.model'
export class UserNotification implements UserNotificationServer {
id: number
@ -6,10 +7,7 @@ export class UserNotification implements UserNotificationServer {
read: boolean
video?: VideoInfo & {
channel: {
id: number
displayName: string
}
channel: ActorInfo & { avatarUrl?: string }
}
videoImport?: {
@ -23,10 +21,7 @@ export class UserNotification implements UserNotificationServer {
comment?: {
id: number
threadId: number
account: {
id: number
displayName: string
}
account: ActorInfo & { avatarUrl?: string }
video: VideoInfo
}
@ -40,18 +35,11 @@ export class UserNotification implements UserNotificationServer {
video: VideoInfo
}
account?: {
id: number
displayName: string
name: string
}
account?: ActorInfo & { avatarUrl?: string }
actorFollow?: {
id: number
follower: {
name: string
displayName: string
}
follower: ActorInfo & { avatarUrl?: string }
following: {
type: 'account' | 'channel'
name: string
@ -76,12 +64,22 @@ export class UserNotification implements UserNotificationServer {
this.read = hash.read
this.video = hash.video
if (this.video) this.setAvatarUrl(this.video.channel)
this.videoImport = hash.videoImport
this.comment = hash.comment
if (this.comment) this.setAvatarUrl(this.comment.account)
this.videoAbuse = hash.videoAbuse
this.videoBlacklist = hash.videoBlacklist
this.account = hash.account
if (this.account) this.setAvatarUrl(this.account)
this.actorFollow = hash.actorFollow
if (this.actorFollow) this.setAvatarUrl(this.actorFollow.follower)
this.createdAt = hash.createdAt
this.updatedAt = hash.updatedAt
@ -150,4 +148,7 @@ export class UserNotification implements UserNotificationServer {
return videoImport.targetUrl || videoImport.magnetUri || videoImport.torrentName
}
private setAvatarUrl (actor: { avatarUrl?: string, avatar?: { path: string } }) {
actor.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(actor)
}
}

2
client/src/app/shared/users/user-notification.service.ts
View File

@ -15,8 +15,6 @@ export class UserNotificationService {
static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications'
static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings'
private socket: SocketIOClient.Socket
constructor (
private auth: AuthService,
private authHttp: HttpClient,

84
client/src/app/shared/users/user-notifications.component.html
View File

@ -1,61 +1,101 @@
<div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
<div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
<div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }">
<div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
<div [ngSwitch]="notification.type">
<ng-container [ngSwitch]="notification.type">
<ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
{{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
<img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" />
<div class="message">
{{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
</div>
</ng-container>
<ng-container i18n *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
<my-global-icon iconName="undo"></my-global-icon>
<div class="message">
Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
</div>
</ng-container>
<ng-container i18n *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
<my-global-icon iconName="no"></my-global-icon>
<div class="message">
Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
</div>
</ng-container>
<ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
<a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
<my-global-icon iconName="alert"></my-global-icon>
<div class="message">
<a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
</div>
</ng-container>
<ng-container i18n *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
{{ notification.comment.account.displayName }} commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
<img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
<div class="message">
{{ notification.comment.account.displayName }} commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
</div>
</ng-container>
<ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
<my-global-icon iconName="sparkle"></my-global-icon>
<div class="message">
Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
</div>
</ng-container>
<ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
<a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
<my-global-icon iconName="cloud-download"></my-global-icon>
<div class="message">
<a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
</div>
</ng-container>
<ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
<a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
<my-global-icon iconName="cloud-error"></my-global-icon>
<div class="message">
<a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
</div>
</ng-container>
<ng-container i18n *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
<my-global-icon iconName="user-add"></my-global-icon>
<div class="message">
User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
</div>
</ng-container>
<ng-container i18n *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
<a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
<img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
<ng-container *ngIf="notification.actorFollow.following.type === 'channel'">
your channel {{ notification.actorFollow.following.displayName }}
</ng-container>
<ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
<div class="message">
<a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
<ng-container *ngIf="notification.actorFollow.following.type === 'channel'">your channel {{ notification.actorFollow.following.displayName }}</ng-container>
<ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
</div>
</ng-container>
<ng-container i18n *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
{{ notification.comment.account.displayName }} mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
</ng-container>
</div>
<img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
<div i18n title="Mark as read" class="mark-as-read">
<div class="glyphicon glyphicon-ok" (click)="markAsRead(notification)"></div>
</div>
<div class="message">
{{ notification.comment.account.displayName }} mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
</div>
</ng-container>
</ng-container>
<div class="from-date">{{ notification.createdAt | myFromNow }}</div>
</div>
</div>

48
client/src/app/shared/users/user-notifications.component.scss
View File

@ -1,3 +1,6 @@
@import '_variables';
@import '_mixins';
.no-notification {
display: flex;
justify-content: center;
@ -7,31 +10,42 @@
.notification {
display: flex;
justify-content: space-between;
align-items: center;
font-size: inherit;
padding: 15px 10px;
padding: 15px 5px 15px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
.mark-as-read {
min-width: 35px;
.glyphicon {
display: none;
cursor: pointer;
color: rgba(20, 20, 20, 0.5)
}
}
&.unread {
background-color: rgba(0, 0, 0, 0.05);
}
&:hover .mark-as-read .glyphicon {
display: block;
my-global-icon {
width: 24px;
margin-right: 11px;
margin-left: 3px;
&:hover {
color: rgba(20, 20, 20, 0.8);
}
@include apply-svg-color(#333);
}
.avatar {
@include avatar(30px);
margin-right: 10px;
}
.message {
flex-grow: 1;
a {
font-weight: $font-semibold;
}
}
.from-date {
font-size: 0.85em;
color: $grey-foreground-color;
padding-left: 5px;
min-width: 70px;
text-align: right;
}
}

14
client/src/app/shared/users/user-notifications.component.ts
View File

@ -20,11 +20,7 @@ export class UserNotificationsComponent implements OnInit {
// So we can access it in the template
UserNotificationType = UserNotificationType
componentPagination: ComponentPagination = {
currentPage: 1,
itemsPerPage: this.itemsPerPage,
totalItems: null
}
componentPagination: ComponentPagination
constructor (
private userNotificationService: UserNotificationService,
@ -32,6 +28,12 @@ export class UserNotificationsComponent implements OnInit {
) { }
ngOnInit () {
this.componentPagination = {
currentPage: 1,
itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable
totalItems: null
}
this.loadMoreNotifications()
}
@ -58,6 +60,8 @@ export class UserNotificationsComponent implements OnInit {
}
markAsRead (notification: UserNotification) {
if (notification.read) return
this.userNotificationService.markAsRead(notification)
.subscribe(
() => {

7
client/src/app/shared/video/feed.component.html
View File

@ -1,8 +1,9 @@
<div class="video-feed">
<span
<my-global-icon
*ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom"
class="icon icon-syndication" role="button"
></span>
class="icon-syndication" role="button" iconName="syndication"
>
</my-global-icon>
<ng-template #feedsList>
<a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>

15
client/src/app/shared/video/feed.component.scss
View File

@ -1,3 +1,4 @@
@import '_variables';
@import '_mixins';
.video-feed {
@ -6,14 +7,12 @@
display: block;
}
.icon {
@include icon(12px);
my-global-icon {
cursor: pointer;
width: 12px;
position: relative;
top: -2px;
&.icon-syndication {
position: relative;
top: -2px;
background-color: var(--mainForegroundColor);
mask-image: url('../../../assets/images/global/syndication.svg');
}
@include apply-svg-color(var(--mainForegroundColor))
}
}

4
client/src/app/shared/video/video-miniature.component.scss
View File

@ -50,10 +50,10 @@
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: #585858;
color: $grey-foreground-color;
&:hover {
color: #303030;
color: $grey-foreground-hover-color;
}
}
}

4
client/src/app/shared/video/video.model.ts
View File

@ -53,7 +53,7 @@ export class Video implements VideoServerModel {
displayName: string
url: string
host: string
avatar: Avatar
avatar?: Avatar
}
channel: {
@ -63,7 +63,7 @@ export class Video implements VideoServerModel {
displayName: string
url: string
host: string
avatar: Avatar
avatar?: Avatar
}
userHistory?: {

2
client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
View File

@ -3,7 +3,7 @@
<div class="modal-header">
<h4 i18n class="modal-title">Add caption</h4>
<span class="close" aria-label="Close" role="button" (click)="hide()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
<div class="modal-body">

2
client/src/app/videos/+video-edit/shared/video-edit.component.html
View File

@ -143,7 +143,7 @@
<div class="captions-header">
<a (click)="openAddCaptionModal()" class="create-caption">
<span class="icon icon-add"></span>
<my-global-icon iconName="add"></my-global-icon>
<ng-container i18n>Add another caption</ng-container>
</a>
</div>

17
client/src/app/videos/+video-edit/shared/video-edit.component.scss
View File

@ -42,7 +42,7 @@ my-peertube-checkbox {
text-align: right;
.create-caption {
@include create-button('../../../../assets/images/global/add.svg');
@include create-button;
}
}
@ -100,13 +100,14 @@ my-peertube-checkbox {
display: inline-block;
margin-right: 25px;
color: #585858;
color: $grey-foreground-color;
font-size: 15px;
}
.submit-button {
@include peertube-button;
@include orange-button;
@include button-with-icon(20px, 1px);
display: inline-block;
@ -119,16 +120,6 @@ my-peertube-checkbox {
color: inherit;
font-weight: $font-semibold;
}
.icon.icon-validate {
@include icon(20px);
cursor: inherit;
position: relative;
top: -1px;
margin-right: 4px;
background-image: url('../../../../assets/images/global/validate.svg');
}
}
}
@ -202,7 +193,7 @@ p-calendar {
top: -1px;
height: auto !important;
vertical-align: middle !important;
fill: #585858 !important;
fill: $grey-foreground-color !important;
}
&:hover {

6
client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="!hasImportedVideo" class="upload-video-container">
<div class="import-video-torrent">
<div class="icon icon-upload"></div>
<div class="first-step-block">
<my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
<div class="button-file">
<span i18n>Select the torrent to import</span>
@ -66,7 +66,7 @@
(click)="updateSecondStep()"
[ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"
>
<span class="icon icon-validate"></span>
<my-global-icon iconName="validate"></my-global-icon>
<input type="button" i18n-value value="Update" />
</div>
</div>

53
client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
View File

@ -1,45 +1,7 @@
@import 'variables';
@import 'mixins';
$width-size: 190px;
.peertube-select-container {
@include peertube-select-container($width-size);
}
.alert.alert-danger {
text-align: center;
& > div {
font-weight: $font-semibold;
}
}
.import-video-torrent {
display: flex;
flex-direction: column;
align-items: center;
.icon.icon-upload {
@include icon(90px);
margin-bottom: 25px;
cursor: default;
background-image: url('../../../../assets/images/video/upload.svg');
}
.button-file {
@include peertube-button-file(auto);
min-width: 190px;
}
.button-file-extension {
display: block;
font-size: 12px;
margin-top: 5px;
}
.first-step-block {
.torrent-or-magnet {
margin: 10px 0;
}
@ -47,19 +9,6 @@ $width-size: 190px;
.form-group-magnet-uri {
margin-bottom: 40px;
}
input[type=text] {
@include peertube-input-text($width-size);
display: block;
}
input[type=button] {
@include peertube-button;
@include orange-button;
width: $width-size;
margin-top: 30px;
}
}

3
client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
View File

@ -18,7 +18,8 @@ import { scrollToTop } from '@app/shared/misc/utils'
templateUrl: './video-import-torrent.component.html',
styleUrls: [
'../shared/video-edit.component.scss',
'./video-import-torrent.component.scss'
'./video-import-torrent.component.scss',
'./video-send.scss'
]
})
export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {

6
client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="!hasImportedVideo" class="upload-video-container">
<div class="import-video-url">
<div class="icon icon-upload"></div>
<div class="first-step-block">
<my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
<div class="form-group">
<label i18n for="targetUrl">URL</label>
@ -59,7 +59,7 @@
(click)="updateSecondStep()"
[ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"
>
<span class="icon icon-validate"></span>
<my-global-icon iconName="validate"></my-global-icon>
<input type="button" i18n-value value="Update" />
</div>
</div>

2
client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
View File

@ -18,7 +18,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
templateUrl: './video-import-url.component.html',
styleUrls: [
'../shared/video-edit.component.scss',
'./video-import-url.component.scss'
'./video-send.scss'
]
})
export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate {

31
client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss → client/src/app/videos/+video-edit/video-add-components/video-send.scss
View File

@ -3,10 +3,6 @@
$width-size: 190px;
.peertube-select-container {
@include peertube-select-container($width-size);
}
.alert.alert-danger {
text-align: center;
@ -15,17 +11,20 @@ $width-size: 190px;
}
}
.import-video-url {
.first-step-block {
display: flex;
flex-direction: column;
align-items: center;
.icon.icon-upload {
@include icon(90px);
.upload-icon {
width: 90px;
margin-bottom: 25px;
cursor: default;
background-image: url('../../../../assets/images/video/upload.svg');
@include apply-svg-color(#C6C6C6);
}
.peertube-select-container {
@include peertube-select-container($width-size);
}
input[type=text] {
@ -40,6 +39,16 @@ $width-size: 190px;
width: $width-size;
margin-top: 30px;
}
.button-file {
@include peertube-button-file(auto);
min-width: 190px;
}
.button-file-extension {
display: block;
font-size: 12px;
margin-top: 5px;
}
}

6
client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="!isUploadingVideo" class="upload-video-container">
<div class="upload-video">
<div class="icon icon-upload"></div>
<div class="first-step-block">
<my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
<div class="button-file">
<span i18n>Select the file to upload</span>
@ -61,7 +61,7 @@
(click)="updateSecondStep()"
[ngClass]="{ disabled: isPublishingButtonDisabled() }"
>
<span class="icon icon-validate"></span>
<my-global-icon iconName="validate"></my-global-icon>
<input [disabled]="isPublishingButtonDisabled()" type="button" i18n-value value="Publish" />
</div>
</div>

44
client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
View File

@ -1,47 +1,9 @@
@import 'variables';
@import 'mixins';
.peertube-select-container {
@include peertube-select-container(190px);
}
.alert.alert-danger {
text-align: center;
& > div {
font-weight: $font-semibold;
}
}
.upload-video {
display: flex;
flex-direction: column;
align-items: center;
.form-group-channel {
margin-bottom: 20px;
margin-top: 35px;
}
.icon.icon-upload {
@include icon(90px);
margin-bottom: 25px;
cursor: default;
background-image: url('../../../../assets/images/video/upload.svg');
}
.button-file {
@include peertube-button-file(auto);
min-width: 190px;
}
.button-file-extension {
display: block;
font-size: 12px;
margin-top: 5px;
}
.first-step-block .form-group-channel {
margin-bottom: 20px;
margin-top: 35px;
}
.upload-progress-cancel {

3
client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
View File

@ -20,7 +20,8 @@ import { scrollToTop } from '@app/shared/misc/utils'
templateUrl: './video-upload.component.html',
styleUrls: [
'../shared/video-edit.component.scss',
'./video-upload.component.scss'
'./video-upload.component.scss',
'./video-send.scss'
]
})
export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {

2
client/src/app/videos/+video-edit/video-update.component.html
View File

@ -13,7 +13,7 @@
<div class="submit-container">
<div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }">
<span class="icon icon-validate"></span>
<my-global-icon iconName="validate"></my-global-icon>
<input type="button" i18n-value value="Update" />
</div>
</div>

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

@ -41,7 +41,7 @@
}
.comment-date {
color: #585858;
color: $grey-foreground-color;
margin-left: 10px;
}
}
@ -69,7 +69,7 @@
.comment-action-reply,
.comment-action-delete {
color: #585858;
color: $grey-foreground-color;
cursor: pointer;
margin-right: 10px;

2
client/src/app/videos/+video-watch/modal/video-blacklist.component.html
View File

@ -1,7 +1,7 @@
<ng-template #modal>
<div class="modal-header">
<h4 i18n class="modal-title">Blacklist video</h4>
<span class="close" aria-label="Close" role="button" (click)="hide()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
<div class="modal-body">

2
client/src/app/videos/+video-watch/modal/video-download.component.html
View File

@ -1,7 +1,7 @@
<ng-template #modal let-hide="close">
<div class="modal-header">
<h4 i18n class="modal-title">Download video</h4>
<span class="close" aria-hidden="true" (click)="hide()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
<div class="modal-body">

2
client/src/app/videos/+video-watch/modal/video-report.component.html
View File

@ -1,7 +1,7 @@
<ng-template #modal>
<div class="modal-header">
<h4 i18n class="modal-title">Report video</h4>
<span class="close" aria-label="Close" role="button" (click)="hide()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
<div class="modal-body">

2
client/src/app/videos/+video-watch/modal/video-share.component.html
View File

@ -1,7 +1,7 @@
<ng-template #modal let-hide="close">
<div class="modal-header">
<h4 i18n class="modal-title">Share</h4>
<span class="close" aria-hidden="true" (click)="hide()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
<div class="modal-body">

2
client/src/app/videos/+video-watch/modal/video-support.component.html
View File

@ -1,7 +1,7 @@
<ng-template #modal let-hide="close">
<div class="modal-header">
<h4 i18n class="modal-title">Support</h4>
<span class="close" aria-label="Close" role="button" (click)="hide()"></span>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
<div class="modal-body" [innerHTML]="videoHTMLSupport"></div>

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

@ -53,55 +53,57 @@
<div
*ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
i18n-title title="Like this video"
>
<span class="icon icon-like" i18n-title title="Like this video" ></span>
<my-global-icon iconName="like"></my-global-icon>
</div>
<div
*ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
i18n-title title="Dislike this video"
>
<span class="icon icon-dislike" i18n-title title="Dislike this video"></span>
<my-global-icon iconName="dislike"></my-global-icon>
</div>
<div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
<span class="icon icon-support"></span>
<my-global-icon iconName="heart"></my-global-icon>
<span class="icon-text" i18n>Support</span>
</div>
<div (click)="showShareModal()" class="action-button action-button-share" role="button">
<span class="icon icon-share"></span>
<my-global-icon iconName="share"></my-global-icon>
<span class="icon-text" i18n>Share</span>
</div>
<div class="action-more" ngbDropdown placement="top" role="button">
<div class="action-button" ngbDropdownToggle role="button">
<span class="icon icon-more"></span>
<my-global-icon class="more-icon" iconName="more"></my-global-icon>
</div>
<div ngbDropdownMenu>
<a class="dropdown-item" i18n-title title="Download the video" href="#" (click)="showDownloadModal($event)">
<span class="icon icon-download"></span> <ng-container i18n>Download</ng-container>
<my-global-icon iconName="download"></my-global-icon> <ng-container i18n>Download</ng-container>
</a>
<a *ngIf="isUserLoggedIn()" class="dropdown-item" i18n-title title="Report this video" href="#" (click)="showReportModal($event)">
<span class="icon icon-alert"></span> <ng-container i18n>Report</ng-container>
<my-global-icon iconName="alert"></my-global-icon> <ng-container i18n>Report</ng-container>
</a>
<a *ngIf="isVideoUpdatable()" class="dropdown-item" i18n-title title="Update this video" href="#" [routerLink]="[ '/videos/update', video.uuid ]">
<span class="icon icon-edit"></span> <ng-container i18n>Update</ng-container>
<my-global-icon iconName="edit"></my-global-icon> <ng-container i18n>Update</ng-container>
</a>
<a *ngIf="isVideoBlacklistable()" class="dropdown-item" i18n-title title="Blacklist this video" href="#" (click)="showBlacklistModal($event)">
<span class="icon icon-blacklist"></span> <ng-container i18n>Blacklist</ng-container>
<my-global-icon iconName="no"></my-global-icon> <ng-container i18n>Blacklist</ng-container>
</a>
<a *ngIf="isVideoUnblacklistable()" class="dropdown-item" i18n-title title="Unblacklist this video" href="#" (click)="unblacklistVideo($event)">
<span class="icon icon-unblacklist"></span> <ng-container i18n>Unblacklist</ng-container>
<my-global-icon iconName="undo"></my-global-icon> <ng-container i18n>Unblacklist</ng-container>
</a>
<a *ngIf="isVideoRemovable()" class="dropdown-item" i18n-title title="Delete this video" href="#" (click)="removeVideo($event)">
<span class="icon icon-delete"></span> <ng-container i18n>Delete</ng-container>
<my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete</ng-container>
</a>
</div>
</div>

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

@ -183,6 +183,8 @@ $other-videos-width: 260px;
.action-button {
@include peertube-button;
@include grey-button;
@include button-with-icon(21px, 0, -1px);
@include apply-svg-color($grey-foreground-color);
font-size: 15px;
font-weight: $font-semibold;
@ -194,53 +196,25 @@ $other-videos-width: 260px;
display: none;
}
.icon {
@include icon(21px);
position: relative;
top: -2px;
&.icon-like {
background-image: url('../../../assets/images/video/like-grey.svg');
}
&.icon-dislike {
background-image: url('../../../assets/images/video/dislike-grey.svg');
}
&.icon-support {
background-image: url('../../../assets/images/video/heart.svg');
}
&.icon-share {
background-image: url('../../../assets/images/video/share.svg');
}
&.icon-more {
background-image: url('../../../assets/images/video/more.svg');
top: -1px;
}
}
.icon-text {
margin-left: 3px;
}
&.action-button-like.activated {
background-color: $green;
.icon-like {
background-image: url('../../../assets/images/video/like-white.svg');
my-global-icon {
@include apply-svg-color(#fff);
}
}
&.action-button-dislike.activated {
background-color: $red;
.icon-dislike {
background-image: url('../../../assets/images/video/dislike-white.svg');
my-global-icon {
@include apply-svg-color(#fff);
}
}
.icon-text {
margin-left: 3px;
}
}
.action-more {
@ -249,36 +223,12 @@ $other-videos-width: 260px;
.dropdown-menu .dropdown-item {
padding: 6px 24px;
.icon {
@include icon(24px);
my-global-icon {
width: 24px;
margin-right: 10px;
position: relative;
top: -1px;
&.icon-download {
background-image: url('../../../assets/images/video/download-black.svg');
}
&.icon-edit {
background-image: url('../../../assets/images/global/edit-black.svg');
}
&.icon-alert {
background-image: url('../../../assets/images/video/alert.svg');
}
&.icon-blacklist {
background-image: url('../../../assets/images/video/blacklist.svg');
}
&.icon-unblacklist {
background-image: url('../../../assets/images/global/undo.svg');
}
&.icon-delete {
background-image: url('../../../assets/images/global/delete-black.svg');
}
top: -2px;
}
}
}
@ -320,7 +270,7 @@ $other-videos-width: 260px;
.video-info-description-more {
cursor: pointer;
font-weight: $font-semibold;
color: #585858;
color: $grey-foreground-color;
font-size: 14px;
.glyphicon {
@ -339,7 +289,7 @@ $other-videos-width: 260px;
min-width: 91px;
padding-right: 5px;
display: inline-block;
color: #585858;
color: $grey-foreground-color;
font-weight: $font-bold;
}

6
client/src/assets/images/global/add.svg → client/src/assets/images/global/add.html
View File

@ -1,8 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-92.000000, -115.000000)">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-92.000000, -115.000000)">
<g id="2" transform="translate(92.000000, 115.000000)">
<circle id="Oval-1" stroke="#ffffff" stroke-width="2" cx="12" cy="12" r="10"></circle>
<rect id="Rectangle-1" fill="#ffffff" x="11" y="7" width="2" height="10" rx="1"></rect>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 785 B

After

Width:  |  Height:  |  Size: 700 B

9
client/src/assets/images/video/alert.svg → client/src/assets/images/global/alert.html
View File

@ -1,11 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>alert</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-48.000000, -467.000000)">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-48.000000, -467.000000)">
<g id="161" transform="translate(48.000000, 467.000000)">
<path d="M12.8715755,3.50973876 L12,1.96027114 L11.1284245,3.50973876 L2.12842446,19.5097388 L1.29015252,21 L3,21 L21,21 L22.7098475,21 L21.8715755,19.5097388 L12.8715755,3.50973876 Z" id="Triangle-2" stroke="#000000" stroke-width="2" stroke-linejoin="round"></path>
<path d="M12,17.75 C12.6903559,17.75 13.25,17.1903559 13.25,16.5 C13.25,15.8096441 12.6903559,15.25 12,15.25 C11.3096441,15.25 10.75,15.8096441 10.75,16.5 C10.75,17.1903559 11.3096441,17.75 12,17.75 Z" id="Oval-8" fill="#000000"></path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

12
client/src/assets/images/global/circle-tick.html Normal file
View File

@ -0,0 +1,12 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-400.000000, -1134.000000)" stroke="#000000" stroke-width="2">
<g id="Extras" transform="translate(48.000000, 1046.000000)">
<g id="yes" transform="translate(352.000000, 88.000000)">
<circle id="Oval-1" cx="12" cy="12" r="10"/>
<polyline id="Path-288" stroke-linecap="round" stroke-linejoin="round" points="8.5 12.5 10.5 14.5 15.5 9.5"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 661 B

11
client/src/assets/images/global/cloud-download.html Normal file
View File

@ -0,0 +1,11 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g transform="translate(-356.000000, -775.000000)" stroke="#000000" stroke-width="2">
<g id="308" transform="translate(356.000000, 775.000000)">
<path d="M8,17 L5,17 L5,17 C2.790861,17 1,15.209139 1,13 C1,10.790861 2.790861,9 5,9 C5.35840468,9 5.70579988,9.04713713 6.03632437,9.13555013 C6.01233106,8.92702603 6,8.71495305 6,8.5 C6,5.46243388 8.46243388,3 11.5,3 C14.0673313,3 16.2238156,4.7590449 16.8299648,7.1376465 C17.2052921,7.04765874 17.5970804,7 18,7 C20.7614237,7 23,9.23857625 23,12 C23,14.7614237 20.7614237,17 18,17 L16,17" id="Combined-Shape" stroke-linejoin="round"></path>
<path d="M12,13 L12,21" id="Path-58"></path>
<polyline id="Path-59" stroke-linejoin="round" points="15 20 12 23 9 20"></polyline>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

11
client/src/assets/images/global/cloud-error.html Normal file
View File

@ -0,0 +1,11 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g transform="translate(-400.000000, -775.000000)" stroke="#000000" stroke-width="2">
<g id="309" transform="translate(400.000000, 775.000000)">
<path d="M7,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L17,18" id="Combined-Shape"></path>
<path d="M9,21 L15,15" id="Path-238"></path>
<path d="M9,21 L15,15" id="Path-238" transform="translate(12.000000, 18.000000) scale(-1, 1) translate(-12.000000, -18.000000) "></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

9
client/src/assets/images/global/cog.html Normal file
View File

@ -0,0 +1,9 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
<g transform="translate(-796.000000, -159.000000)" stroke="#000000" stroke-width="2">
<g id="38" transform="translate(796.000000, 159.000000)">
<path d="M7.20852293,4.3800958 C8.05442158,3.84706631 8.99528987,3.45099725 10,3.22301642 L10,1.99980749 C10,1.44762906 10.4433532,1 11.0093689,1 L12.9906311,1 C13.5480902,1 14,1.44371665 14,1.99980749 L14,3.22301642 C15.0047101,3.45099725 15.9455784,3.84706631 16.7914771,4.3800958 L17.6569904,3.5145825 C18.0474395,3.12413339 18.6774591,3.12110988 19.0776926,3.52134344 L20.4786566,4.92230738 C20.8728396,5.31649045 20.8786331,5.94979402 20.4854175,6.34300963 L19.6199042,7.20852293 C20.1529337,8.05442158 20.5490027,8.99528987 20.7769836,10 L22.0001925,10 C22.5523709,10 23,10.4433532 23,11.0093689 L23,12.9906311 C23,13.5480902 22.5562834,14 22.0001925,14 L20.7769836,14 C20.5490027,15.0047101 20.1529337,15.9455784 19.6199042,16.7914771 L20.4854175,17.6569904 C20.8758666,18.0474395 20.8788901,18.6774591 20.4786566,19.0776926 L19.0776926,20.4786566 C18.6835095,20.8728396 18.050206,20.8786331 17.6569904,20.4854175 L16.7914771,19.6199042 C15.9455784,20.1529337 15.0047101,20.5490027 14,20.7769836 L14,22.0001925 C14,22.5523709 13.5566468,23 12.9906311,23 L11.0093689,23 C10.4519098,23 10,22.5562834 10,22.0001925 L10,20.7769836 C8.99528987,20.5490027 8.05442158,20.1529337 7.20852293,19.6199042 L6.34300963,20.4854175 C5.95256051,20.8758666 5.32254093,20.8788901 4.92230738,20.4786566 L3.52134344,19.0776926 C3.12716036,18.6835095 3.12136689,18.050206 3.5145825,17.6569904 L4.3800958,16.7914771 C3.84706631,15.9455784 3.45099725,15.0047101 3.22301642,14 L1.99980749,14 C1.44762906,14 1,13.5566468 1,12.9906311 L1,11.0093689 C1,10.4519098 1.44371665,10 1.99980749,10 L3.22301642,10 C3.45099725,8.99528987 3.84706631,8.05442158 4.3800958,7.20852293 L3.5145825,6.34300963 C3.12413339,5.95256051 3.12110988,5.32254093 3.52134344,4.92230738 L4.92230738,3.52134344 C5.31649045,3.12716036 5.94979402,3.12136689 6.34300963,3.5145825 L7.20852293,4.3800958 Z M12,16 C14.209139,16 16,14.209139 16,12 C16,9.790861 14.209139,8 12,8 C9.790861,8 8,9.790861 8,12 C8,14.209139 9.790861,16 12,16 Z" id="Combined-Shape"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

6
client/src/assets/images/global/cross.svg → client/src/assets/images/global/cross.html
View File

@ -1,8 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="Artboard-4" transform="translate(-312.000000, -115.000000)" stroke="#585858" stroke-width="2">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g transform="translate(-312.000000, -115.000000)" stroke="#000000" stroke-width="2">
<g id="7" transform="translate(312.000000, 115.000000)">
<path d="M19,5 L5,19" id="Path-14"></path>
<path d="M19,5 L5,19" id="Path-14" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) "></path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 743 B

After

Width:  |  Height:  |  Size: 658 B

14
client/src/assets/images/global/delete-black.svg
View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-224.000000, -159.000000)">
<g id="25" transform="translate(224.000000, 159.000000)">
<path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#000" stroke-width="2"></path>
<rect id="Rectangle-424" fill="#000" x="2" y="4" width="20" height="2" rx="1"></rect>
<path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#000"></path>
<path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#000" stroke-width="2" stroke-linejoin="round"></path>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

14
client/src/assets/images/global/delete-white.svg
View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-224.000000, -159.000000)">
<g id="25" transform="translate(224.000000, 159.000000)">
<path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#ffffff" stroke-width="2"></path>
<rect id="Rectangle-424" fill="#ffffff" x="2" y="4" width="20" height="2" rx="1"></rect>
<path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#ffffff"></path>
<path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"></path>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

14
client/src/assets/images/global/delete-grey.svg → client/src/assets/images/global/delete.html
View File

@ -1,13 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-224.000000, -159.000000)">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-224.000000, -159.000000)">
<g id="25" transform="translate(224.000000, 159.000000)">
<path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#585858" stroke-width="2"></path>
<rect id="Rectangle-424" fill="#585858" x="2" y="4" width="20" height="2" rx="1"></rect>
<path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#585858"></path>
<path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#585858" stroke-width="2" stroke-linejoin="round"></path>
<path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#000000" stroke-width="2"></path>
<rect id="Rectangle-424" fill="#000000" x="2" y="4" width="20" height="2" rx="1"></rect>
<path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#000000"></path>
<path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#000000" stroke-width="2" stroke-linejoin="round"></path>
</g>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

9
client/src/assets/images/video/download-black.svg → client/src/assets/images/global/download.html
View File

@ -1,11 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>download</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#000000" stroke-width="2">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g transform="translate(-180.000000, -291.000000)" stroke="#000000" stroke-width="2">
<g id="84" transform="translate(180.000000, 291.000000)">
<path d="M12,3 L12,15" id="Path-58"></path>
<polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 961 B

15
client/src/assets/images/global/edit-grey.svg
View File

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>edit</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-48.000000, -203.000000)" stroke="#585858" stroke-width="2">
<g id="41" transform="translate(48.000000, 203.000000)">
<path d="M3,21.0000003 L3,17 L15.8898356,4.11016442 C17.0598483,2.9401517 18.9638992,2.94723715 20.1306896,4.11402752 L19.9181432,3.90148112 C21.0902894,5.07362738 21.0882407,6.97202708 19.9174652,8.1377941 L7,21.0000003 L3,21.0000003 Z" id="Path-74" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.5,5.5 L18.5,9.5" id="Path-75"></path>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

9
client/src/assets/images/global/edit-black.svg → client/src/assets/images/global/edit.html
View File

@ -1,11 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>edit</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-48.000000, -203.000000)" stroke="#000000" stroke-width="2">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-48.000000, -203.000000)" stroke="#000000" stroke-width="2">
<g id="41" transform="translate(48.000000, 203.000000)">
<path d="M3,21.0000003 L3,17 L15.8898356,4.11016442 C17.0598483,2.9401517 18.9638992,2.94723715 20.1306896,4.11402752 L19.9181432,3.90148112 C21.0902894,5.07362738 21.0882407,6.97202708 19.9174652,8.1377941 L7,21.0000003 L3,21.0000003 Z" id="Path-74" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.5,5.5 L18.5,9.5" id="Path-75"></path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 813 B

6
client/src/assets/images/global/help.svg → client/src/assets/images/global/help.html
View File

@ -1,8 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-400.000000, -247.000000)">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-400.000000, -247.000000)">
<g id="69" transform="translate(400.000000, 247.000000)">
<circle id="Oval-7" stroke="#333333" stroke-width="2" cx="12" cy="12" r="10"></circle>
<path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#333333"></path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

11
client/src/assets/images/global/im-with-her.svg → client/src/assets/images/global/im-with-her.html
View File

@ -1,13 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>im-with-her</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-708.000000, -467.000000)">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-708.000000, -467.000000)">
<g id="176" transform="translate(708.000000, 467.000000)">
<path d="M8,9 L8,3.99339768 C8,3.44494629 7.55641359,3 7.00922203,3 L2.99077797,3 C2.45097518,3 2,3.44475929 2,3.99339768 L2,20.0066023 C2,20.5550537 2.44358641,21 2.99077797,21 L7.00922203,21 C7.54902482,21 8,20.5552407 8,20.0066023 L8,15 L14,15 L14,20.0066023 C14,20.5550537 14.4435864,21 14.990778,21 L19.009222,21 C19.5490248,21 20,20.5564587 20,20.0093228 L20,15.0006104 L23,12 L20,8.99267578 L20,4.00303919 C20,3.45042467 19.5564136,3 19.009222,3 L14.990778,3 C14.4509752,3 14,3.44475929 14,3.99339768 L14,9 L8,9 Z" id="Combined-Shape" fill="#333333" opacity="0.5"></path>
<path d="M8,9 L8,3.99339768 C8,3.44494629 7.55641359,3 7.00922203,3 L2.99077797,3 C2.45097518,3 2,3.44475929 2,3.99339768 L2,20.0066023 C2,20.5550537 2.44358641,21 2.99077797,21 L7.00922203,21 C7.54902482,21 8,20.5552407 8,20.0066023 L8,15 L14,15 L14,20.0066023 C14,20.5550537 14.4435864,21 14.990778,21 L19.009222,21 C19.5490248,21 20,20.5564587 20,20.0093228 L20,15.0006104 L23,12 L20,8.99267578 L20,4.00303919 C20,3.45042467 19.5564136,3 19.009222,3 L14.990778,3 C14.4509752,3 14,3.44475929 14,3.99339768 L14,9 L8,9 Z" id="Combined-Shape" fill="#000000" opacity="0.5"></path>
<path d="M2,9 L14,9 L14,3.99077797 C14,3.44358641 14.3203148,3.32031476 14.7062149,3.7062149 L23,12 L14.7062149,20.2937851 C14.3161832,20.6838168 14,20.5490248 14,20.009222 L14,15 L2,15 L2,9 Z" id="Rectangle-121" fill-opacity="0.5" fill="#000000"></path>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

10
client/src/assets/images/global/no.html Normal file
View File

@ -0,0 +1,10 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-312.000000, -863.000000)" stroke="#000000" stroke-width="2">
<g id="347" transform="translate(312.000000, 863.000000)">
<circle id="Oval-196" cx="12" cy="12" r="9"></circle>
<path d="M18,18 L6,6" id="Path-275"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 557 B

11
client/src/assets/images/global/sparkle.html Normal file
View File

@ -0,0 +1,11 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g transform="translate(-488.000000, -731.000000)" stroke="#000000" stroke-width="2">
<g id="291" transform="translate(488.000000, 731.000000)">
<path d="M10,9 C8.5,7.5 8,3 8,3 C8,3 7.5,7.5 6,9 C4.5,10.5 2,11 2,11 C2,11 4.5,11.5 6,13 C7.5,14.5 8,19 8,19 C8,19 8.5,14.5 10,13 C11.5,11.5 14,11 14,11 C14,11 11.5,10.5 10,9 Z" id="Combined-Shape"></path>
<path d="M19.6666667,4.75 C18.7916667,3.8125 18.5,1 18.5,1 C18.5,1 18.2083333,3.8125 17.3333333,4.75 C16.4583333,5.6875 15,6 15,6 C15,6 16.4583333,6.3125 17.3333333,7.25 C18.2083333,8.1875 18.5,11 18.5,11 C18.5,11 18.7916667,8.1875 19.6666667,7.25 C20.5416667,6.3125 22,6 22,6 C22,6 20.5416667,5.6875 19.6666667,4.75 Z" id="Combined-Shape"></path>
<path d="M17,17 C16.25,16.25 16,14 16,14 C16,14 15.75,16.25 15,17 C14.25,17.75 13,18 13,18 C13,18 14.25,18.25 15,19 C15.75,19.75 16,22 16,22 C16,22 16.25,19.75 17,19 C17.75,18.25 19,18 19,18 C19,18 17.75,17.75 17,17 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
client/src/assets/images/global/syndication.svg → client/src/assets/images/global/syndication.html
View File

@ -1,10 +1,8 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 559.372 559.372" style="enable-background:new 0 0 559.372 559.372;" xml:space="preserve">
<g>
<g>
<path style="fill:#010002;" d="M53.244,0.002c46.512,0,91.29,6.018,134.334,18.054s83.334,29.07,120.869,51.102
<path fill="#000000" d="M53.244,0.002c46.512,0,91.29,6.018,134.334,18.054s83.334,29.07,120.869,51.102
c37.537,22.032,71.707,48.45,102.514,79.254c30.803,30.804,57.221,64.974,79.254,102.51
c22.029,37.539,39.063,77.828,51.102,120.873c12.037,43.043,18.055,87.818,18.055,134.334c0,14.688-5.201,27.23-15.605,37.637
c-10.404,10.407-22.949,15.604-37.637,15.604c-14.689,0-27.234-5.199-37.641-15.604c-10.402-10.404-15.604-22.949-15.604-37.637
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

6
client/src/assets/images/global/tick.svg → client/src/assets/images/global/tick.html
View File

@ -1,8 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="Artboard-4" transform="translate(-356.000000, -115.000000)" stroke="#585858" stroke-width="2">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g transform="translate(-356.000000, -115.000000)" stroke="#000000" stroke-width="2">
<g id="8" transform="translate(356.000000, 115.000000)">
<path d="M21,6 L9,18" id="Path-14"></path>
<path d="M9,13 L4,18" id="Path-14" transform="translate(6.500000, 15.500000) scale(-1, 1) translate(-6.500000, -15.500000) "></path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 741 B

After

Width:  |  Height:  |  Size: 656 B

9
client/src/assets/images/global/undo.html Normal file
View File

@ -0,0 +1,9 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-180.000000, -115.000000)" fill="#000000">
<g id="4" transform="translate(180.000000, 115.000000)">
<path d="M10,19 C10.5522847,19 11,19.4477153 11,20 C11,20.5522847 10.5522847,21 10,21 C9.99404288,21 9.98809793,20.9999479 9.98216558,20.9998442 C5.01980239,20.990358 1,16.9646166 1,12 C1,7.02943725 5.02943725,3 10,3 C14.9705627,3 19,7.02943725 19,12 L17,12 C17,8.13400675 13.8659932,5 10,5 C6.13400675,5 3,8.13400675 3,12 C3,15.8659932 6.13400675,19 10,19 Z M14,12 L22,12 L18,16 L14,12 Z" id="Combined-Shape" transform="translate(11.500000, 12.000000) scale(-1, 1) translate(-11.500000, -12.000000) "/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 894 B

11
client/src/assets/images/global/undo.svg
View File

@ -1,11 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-180.000000, -115.000000)" fill="#000">
<g id="4" transform="translate(180.000000, 115.000000)">
<path d="M10,19 C10.5522847,19 11,19.4477153 11,20 C11,20.5522847 10.5522847,21 10,21 C9.99404288,21 9.98809793,20.9999479 9.98216558,20.9998442 C5.01980239,20.990358 1,16.9646166 1,12 C1,7.02943725 5.02943725,3 10,3 C14.9705627,3 19,7.02943725 19,12 L17,12 C17,8.13400675 13.8659932,5 10,5 C6.13400675,5 3,8.13400675 3,12 C3,15.8659932 6.13400675,19 10,19 Z M14,12 L22,12 L18,16 L14,12 Z" id="Combined-Shape" transform="translate(11.500000, 12.000000) scale(-1, 1) translate(-11.500000, -12.000000) "></path>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1014 B

11
client/src/assets/images/global/user-add.html Normal file
View File

@ -0,0 +1,11 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-136.000000, -863.000000)">
<g id="343" transform="translate(136.000000, 863.000000)">
<path d="M14.2571621,15 L7,15 C4.20063223,15 2.390348,16.1679253 1.5255785,18.0896353 C1.07423388,19.0926234 0.949016905,20.1108713 0.995546634,20.9698816 C0.998604759,21.0263393 1.0014872,21.0632937 1.00496281,21.0995037 C1.0599172,21.6490476 1.54995985,22.0499916 2.09950372,21.9950372 C2.64904758,21.9400828 3.04999158,21.4500401 2.99503719,20.9004963 C2.99555422,20.9071205 2.99399879,20.8871791 2.99261905,20.8617069 C2.96185588,20.2937714 3.05021139,19.575276 3.34942151,18.9103647 C3.890902,17.7070747 4.98686778,17 7,17 L12.0070975,17 L13.2070325,17 C13.4170071,16.2576107 13.7789623,15.5790321 14.2571621,15 Z" id="Path-41" fill="#000000" fill-rule="nonzero"></path>
<path d="M19,18 L19,16.4976988 C19,16.2228273 18.7680664,16 18.5,16 C18.2238576,16 18,16.2148438 18,16.4976988 L18,18 L16.4976988,18 C16.2148438,18 16,18.2238576 16,18.5 C16,18.7680664 16.2228273,19 16.4976988,19 L18,19 L18,20.5023012 C18,20.7771727 18.2319336,21 18.5,21 C18.7761424,21 19,20.7851562 19,20.5023012 L19,19 L20.5023012,19 C20.7851562,19 21,18.7761424 21,18.5 C21,18.2319336 20.7771727,18 20.5023012,18 L19,18 Z M18.5,23 C16.0147186,23 14,20.9852814 14,18.5 C14,16.0147186 16.0147186,14 18.5,14 C20.9852814,14 23,16.0147186 23,18.5 C23,20.9852814 20.9852814,23 18.5,23 Z" id="Combined-Shape" fill="#000000"></path>
<circle id="Oval-40" stroke="#000000" stroke-width="2" cx="12" cy="8" r="5"></circle>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

6
client/src/assets/images/global/validate.svg → client/src/assets/images/global/validate.html
View File

@ -1,8 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-400.000000, -1134.000000)" stroke="#ffffff" stroke-width="2">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-400.000000, -1134.000000)" stroke="#000000" stroke-width="2">
<g id="Extras" transform="translate(48.000000, 1046.000000)">
<g id="yes" transform="translate(352.000000, 88.000000)">
<circle id="Oval-1" cx="12" cy="12" r="10"></circle>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 824 B

After

Width:  |  Height:  |  Size: 739 B

15
client/src/assets/images/video/blacklist.svg
View File

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>no</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-312.000000, -863.000000)" stroke="#000000" stroke-width="2">
<g id="347" transform="translate(312.000000, 863.000000)">
<circle id="Oval-196" cx="12" cy="12" r="9"></circle>
<path d="M18,18 L6,6" id="Path-275"></path>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 785 B

14
client/src/assets/images/video/dislike-white.svg
View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="Artboard-4" transform="translate(-752.000000, -1090.000000)" stroke="#ffffff" stroke-width="2">
<g id="Extras" transform="translate(48.000000, 1046.000000)">
<g id="thumbs-down" transform="translate(704.000000, 44.000000)">
<path d="M6,16 C6,18.5 6.5,21 8,21 L16.9938335,21 C17.5495239,21 18.1819788,20.5956028 18.4072817,20.0949295 L20.8562951,14.6526776 C21.7640882,12.6353595 20.7154925,11 18.5092545,11 L15.5,11 C15.5,11 18.5,5 15,5 C12.5,5 11.5,11 8,11 C6.5,11 6,13.5 6,16 Z" id="Path-188" stroke-linejoin="round" transform="translate(13.591488, 13.000000) scale(1, -1) translate(-13.591488, -13.000000) "></path>
<path d="M4,4.5 C4,4.5 3,7 3,10 C3,13 4,15.5 4,15.5" id="Path-189" transform="translate(3.500000, 10.000000) scale(1, -1) translate(-3.500000, -10.000000) "></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

6
client/src/assets/images/video/dislike-grey.svg → client/src/assets/images/video/dislike.html
View File

@ -1,8 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="Artboard-4" transform="translate(-752.000000, -1090.000000)" stroke="#585858" stroke-width="2">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g transform="translate(-752.000000, -1090.000000)" stroke="#000000" stroke-width="2">
<g id="Extras" transform="translate(48.000000, 1046.000000)">
<g id="thumbs-down" transform="translate(704.000000, 44.000000)">
<path d="M6,16 C6,18.5 6.5,21 8,21 L16.9938335,21 C17.5495239,21 18.1819788,20.5956028 18.4072817,20.0949295 L20.8562951,14.6526776 C21.7640882,12.6353595 20.7154925,11 18.5092545,11 L15.5,11 C15.5,11 18.5,5 15,5 C12.5,5 11.5,11 8,11 C6.5,11 6,13.5 6,16 Z" id="Path-188" stroke-linejoin="round" transform="translate(13.591488, 13.000000) scale(1, -1) translate(-13.591488, -13.000000) "></path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

16
client/src/assets/images/video/download-grey.svg
View File

@ -1,16 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>download</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#585858" stroke-width="2">
<g id="84" transform="translate(180.000000, 291.000000)">
<path d="M12,3 L12,15" id="Path-58"></path>
<polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
<path d="M3,18 L3,20.0590859 C3,20.6127331 3.44494889,21.0615528 3.99340349,21.0615528 L20.0067018,21.0615528 C20.5553434,21.0615528 21.0001052,20.6098102 21.0001051,20.0590859 L21.0001049,18" id="Path-12" stroke-linejoin="round"></path>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

Some files were not shown because too many files have changed in this diff Show More