import { environment } from '../../../environments/environment'
import { UserNotification as UserNotificationServer } from '../../../../../shared'
import { Subject } from 'rxjs'
-import * as io from 'socket.io-client'
import { AuthService } from '../auth'
export type NotificationEvent = 'new' | 'read' | 'read-all'
<div
[ngbPopover]="popContent" autoClose="outside" placement="bottom-left" container="body" popoverClass="popover-notifications"
- i18n-title title="View your notifications" class="notification-avatar" #popover="ngbPopover"
+ i18n-title title="View your notifications" class="notification-avatar" #popover="ngbPopover" (hidden)="onPopoverHidden()"
>
<div *ngIf="unreadNotifications > 0" class="unread-notifications">{{ unreadNotifications }}</div>
</div>
<ng-template #popContent>
- <div class="notifications-header">
- <div i18n>Notifications</div>
+ <div class="content" [ngClass]="{ loaded: loaded }">
+ <div class="notifications-header">
+ <div i18n>Notifications</div>
- <a
- i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog"
- routerLink="/my-account/settings" fragment="notifications"
- ></a>
- </div>
+ <a
+ i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog"
+ routerLink="/my-account/settings" fragment="notifications"
+ ></a>
+ </div>
+
+ <div *ngIf="!loaded" class="loader">
+ <my-loader [loading]="!loaded"></my-loader>
+ </div>
- <my-user-notifications [ignoreLoadingBar]="true" [infiniteScroll]="false" itemsPerPage="10"></my-user-notifications>
+ <my-user-notifications
+ [ignoreLoadingBar]="true" [infiniteScroll]="false" itemsPerPage="10"
+ (notificationsLoaded)="onNotificationLoaded()"
+ ></my-user-notifications>
- <a class="all-notifications" routerLink="/my-account/notifications" i18n>See all your notifications</a>
+ <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" i18n>See all your notifications</a>
+ </div>
</ng-template>
padding: 0;
font-size: 14px;
font-family: $main-fonts;
- overflow-y: auto;
- max-height: 500px;
+ overflow-y: scroll;
width: 400px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
+ .loader {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ padding: 5px 0;
+ }
+
+ .content {
+ max-height: 150px;
+ transition: max-height 0.15s ease-out;
+
+ &.loaded {
+ max-height: 500px;
+ }
+ }
+
.notifications-header {
display: flex;
justify-content: space-between;
@Input() user: User
unreadNotifications = 0
+ loaded = false
private notificationSub: Subscription
private routeSub: Subscription
this.popover.close()
}
+ onPopoverHidden () {
+ this.loaded = false
+ }
+
+ onNotificationLoaded () {
+ this.loaded = true
+ }
+
private async subscribeToNotifications () {
const obs = await this.userNotificationSocket.getMyNotificationsSocket()
-<div id="video-loading" *ngIf="loading">
- <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+<div *ngIf="loading">
+ <div class="lds-ring">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
</div>
--- /dev/null
+@import '_variables';
+@import '_mixins';
+
+// Thanks to https://loading.io/css/ (CC0 License)
+
+.lds-ring {
+ display: inline-block;
+ position: relative;
+ width: 50px;
+ height: 50px;
+}
+
+.lds-ring div {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ width: 44px;
+ height: 44px;
+ margin: 6px;
+ border: 4px solid;
+ border-radius: 50%;
+ animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: #999999 transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+ animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+ animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+ animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
@Component({
selector: 'my-loader',
- styleUrls: [ ],
+ styleUrls: [ './loader.component.scss' ],
templateUrl: './loader.component.html'
})
-
export class LoaderComponent {
@Input() loading: boolean
}
--- /dev/null
+<div *ngIf="loading">
+ <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
--- /dev/null
+import { Component, Input } from '@angular/core'
+
+@Component({
+ selector: 'my-small-loader',
+ styleUrls: [ ],
+ templateUrl: './small-loader.component.html'
+})
+
+export class SmallLoaderComponent {
+ @Input() loading: boolean
+}
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'
+import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component'
@NgModule({
imports: [
declarations: [
LoaderComponent,
+ SmallLoaderComponent,
VideoThumbnailComponent,
VideoMiniatureComponent,
FeedComponent,
KeysPipe,
LoaderComponent,
+ SmallLoaderComponent,
VideoThumbnailComponent,
VideoMiniatureComponent,
FeedComponent,
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
import { UserNotificationService } from '@app/shared/users/user-notification.service'
import { UserNotificationType } from '../../../../../shared'
import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
@Input() infiniteScroll = true
@Input() itemsPerPage = 20
+ @Output() notificationsLoaded = new EventEmitter()
+
notifications: UserNotification[] = []
// So we can access it in the template
result => {
this.notifications = this.notifications.concat(result.data)
this.componentPagination.totalItems = result.total
+
+ this.notificationsLoaded.emit()
},
err => this.notifier.error(err.message)
<ng-container i18n>View all {{ comment.totalReplies }} replies</ng-container>
<span *ngIf="!threadLoading[comment.id]" class="glyphicon glyphicon-menu-down"></span>
- <my-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-loader>
+ <my-small-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-small-loader>
</div>
</div>
</div>
<div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
<ng-container i18n>Show more</ng-container>
<span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
- <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
+ <my-small-loader class="description-loading" [loading]="descriptionLoading"></my-small-loader>
</div>
<div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">