Skip to content

Minds Frontend
Minds Frontend
Source
...
Target
 
Commits (3)
Hide whitespace changes
Inline Side-by-side
Showing with 482 additions and 152 deletions
src/app/common/common.module.ts
View file @ 6430dd1e
......@@ -126,6 +126,7 @@ import { ShadowboxSubmitButtonComponent } from './components/shadowbox-submit-bu
import { FormDescriptorComponent } from './components/form-descriptor/form-descriptor.component';
import { FormToastComponent } from './components/form-toast/form-toast.component';
import { SsoService } from './services/sso.service';
import { ProgressRingComponent } from './components/progress-ring/progress.component';
PlotlyModule.plotlyjs = PlotlyJS;
......@@ -241,6 +242,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
FormDescriptorComponent,
FormToastComponent,
ShadowboxSubmitButtonComponent,
ProgressRingComponent,
],
exports: [
MINDS_PIPES,
......@@ -340,6 +342,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
FormDescriptorComponent,
FormToastComponent,
ShadowboxSubmitButtonComponent,
ProgressRingComponent,
],
providers: [
SiteService,
......
src/app/common/components/progress-ring/progress.component.html 0 → 100644
View file @ 6430dd1e
<svg class="m-progress-ring" [style.width]="width" [style.height]="height">
<circle
class="m-progressRing__circle"
[attr.r]="radius"
[attr.cx]="cx"
[attr.cy]="cy"
#circle
/>
</svg>
src/app/common/components/progress-ring/progress.component.scss 0 → 100644
View file @ 6430dd1e
m-progress-ring {
.m-progress-ring {
.m-progressRing__circle {
transition: 0.35s stroke-dashoffset;
// axis compensation
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke: #ddd;
stroke-width: 2;
fill: transparent;
}
}
}
src/app/common/components/progress-ring/progress.component.ts 0 → 100644
View file @ 6430dd1e
import {
ChangeDetectionStrategy,
Component,
ElementRef,
Input,
OnInit,
ViewChild,
} from '@angular/core';
@Component({
selector: 'm-progress-ring',
templateUrl: 'progress.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProgressRingComponent implements OnInit {
progress: number = 0;
width: number = 20;
height: number = 20;
radius: number = 10;
@Input('progress') set _progress(value: number) {
if (value < 101 && value > -1) {
this.setProgress(value);
}
}
@Input('size') set _size(value: { w: number; h: number; r: number }) {
this.width = value.w;
this.height = value.h;
this.radius = value.r;
}
@Input() cx: number = 10;
@Input() cy: number = 10;
@ViewChild('circle', { static: true }) circle: ElementRef;
private circumference;
constructor() {}
ngOnInit() {
// this.r = this.circle.r.baseVal.value;
this.circumference = this.radius * 2 * Math.PI;
this.circle.nativeElement.style.strokeDasharray = `${this.circumference} ${this.circumference}`;
// this.circle.nativeElement.style.strokeDashoffset = `${this.circumference}`;
// this.setProgress(this.progress);
}
setProgress(percent) {
if (!this.circumference) {
this.circumference = this.radius * 2 * Math.PI;
}
// if (this.circle) {
console.warn('circ: ', this.circumference);
console.warn('percent: ', percent);
console.warn(this.circumference - (percent / 100) * this.circumference);
this.circle.nativeElement.style.strokeDashoffset =
this.circumference - (percent / 100) * this.circumference; // calculate offset
// }
}
}
src/app/common/read-more/button.component.scss
View file @ 6430dd1e
......@@ -4,7 +4,7 @@
bottom: 0;
width: 100%;
left: 0;
padding: 42px 16px 16px;
padding: 42px 0 16px;
@include m-theme() {
background: linear-gradient(
to bottom,
......
src/app/common/read-more/read-more.directive.ts
View file @ 6430dd1e
import {
AfterViewInit,
ChangeDetectorRef,
ContentChild,
Directive,
ElementRef,
ContentChild,
ChangeDetectorRef,
Input,
} from '@angular/core';
import { ReadMoreButtonComponent } from './button.component';
......@@ -10,7 +11,7 @@ import { ReadMoreButtonComponent } from './button.component';
@Directive({
selector: '[m-read-more]',
})
export class ReadMoreDirective {
export class ReadMoreDirective implements AfterViewInit {
_element: any;
realHeight: any;
expandable: boolean = false;
......@@ -27,7 +28,7 @@ export class ReadMoreDirective {
}
setTimeout(() => {
this.realHeight = this._element.clientHeight;
this.realHeight = this._element.scrollHeight;
if (this.button && !this.button.content) {
this.button.content = this;
}
......
src/app/modules/legacy/components/cards/activity-v2/activity.component.html
View file @ 6430dd1e
......@@ -51,28 +51,6 @@
i18n="@@M__COMMON__EDITED"
>edited</span
>
<div
class="mdl-card__supporting-text is-boosted"
*ngIf="boosted"
[class.is-onchain]="activity.boosted_onchain"
>
<i class="material-icons">trending_up</i>
<a
i18n="@@MINDS__CARDS__ACTIVITY__BOOSTED_LABEL"
[hidden]="activity.boosted_onchain"
>Boosted</a
>
<a
i18n="@@MINDS__CARDS__ACTIVITY__BOOSTED_LABEL_ONCHAIN"
[hidden]="!activity.boosted_onchain"
[routerLink]="['/token']"
>Boosted Onchain</a
>
</div>
<div class="mdl-card__supporting-text is-boosted" *ngIf="isUnlisted()">
<i class="material-icons unlisted">visibility_off</i>
<a i18n>Unlisted</a>
</div>
</a>
<a
[routerLink]="['/newsfeed/', activity.entity_guid]"
......@@ -297,6 +275,8 @@
</a>
</div>
<div class="m-activity__spacer"></div>
<!-- Messages -->
<div
......@@ -320,7 +300,11 @@
</a>
<!-- [innerHtml]="activity.message | tags"
-->
<!-- [modelToWatch]="activity.message"-->
<span
[fittext]="true"
[minFontSize]="16"
[maxFontSize]="20"
class="m-mature-message-content"
[ngClass]="{ 'm-mature-text': attachment.shouldBeBlurred(activity) }"
(click)="
......@@ -393,6 +377,8 @@
#translate
></m-translate>
<div class="m-activity__spacer"></div>
<div
class="minds-editable-container"
*ngIf="
......@@ -497,32 +483,50 @@
<ng-content select="[bottom-content]"></ng-content>
<!-- Action buttons -->
<div class="tabs" *ngIf="!hideTabs && !isPending(activity)">
<!--<div class="tabs" *ngIf="!hideTabs && !isPending(activity)">-->
<!-- <minds-button-thumbs-up [object]="activity"></minds-button-thumbs-up>-->
<!-- <minds-button-thumbs-down [object]="activity"></minds-button-thumbs-down>-->
<!-- <m-wire-button-->
<!-- *ngIf="session.getLoggedInUser().guid != activity.owner_guid"-->
<!-- [object]="activity"-->
<!-- (done)="wireSubmitted($event)"-->
<!-- ></m-wire-button>-->
<!-- <button-->
<!-- class="m-btn m-btn&#45;&#45;action m-btn&#45;&#45;slim minds-boost-button"-->
<!-- *ngIf="-->
<!-- session.getLoggedInUser().guid == activity.owner_guid &&-->
<!-- !isScheduled(activity.time_created)-->
<!-- "-->
<!-- id="boost-actions"-->
<!-- (click)="showBoost()"-->
<!-- >-->
<!-- <span i18n="verb|@@M__ACTION__BOOST">Boost</span>-->
<!-- </button>-->
<!-- <minds-button-comment-->
<!-- [object]="activity"-->
<!-- (click)="openComments()"-->
<!-- ></minds-button-comment>-->
<!-- <minds-button-remind [object]="activity"></minds-button-remind>-->
<!--</div>-->
<!-- action bar and comments -->
<div class="m-activity__actionButtons">
<minds-button-thumbs-up [object]="activity"></minds-button-thumbs-up>
<minds-button-thumbs-down [object]="activity"></minds-button-thumbs-down>
<m-wire-button
<minds-button-remind [object]="activity"></minds-button-remind>
<div
class="m-activity__pay"
*ngIf="session.getLoggedInUser().guid != activity.owner_guid"
[object]="activity"
(done)="wireSubmitted($event)"
></m-wire-button>
<button
class="m-btn m-btn--action m-btn--slim minds-boost-button"
*ngIf="
session.getLoggedInUser().guid == activity.owner_guid &&
!isScheduled(activity.time_created)
"
id="boost-actions"
(click)="showBoost()"
>
<span i18n="verb|@@M__ACTION__BOOST">Boost</span>
</button>
<minds-button-comment
[object]="activity"
(click)="openComments()"
></minds-button-comment>
<minds-button-remind [object]="activity"></minds-button-remind>
<img
[src]="minds.cdn_assets_url + 'assets/icons/pay.png'"
(click)="openWireModal()"
/>
</div>
</div>
<div class="m-activity__commentPoster"></div>
<!-- Activity metrics -->
<div
class="impressions-tag m-activity--metrics m-activity--metrics-wire"
......@@ -562,33 +566,6 @@
#toggle
*ngIf="!hideTabs"
>
<button
class="mdl-button m-pin-button mdl-button--icon mdl-color-text--blue-grey-300"
(click)="togglePin()"
[disabled]="
session.getLoggedInUser().guid != activity.owner_guid || activity.dontPin
"
*ngIf="!activity?.ephemeral"
>
<m-tooltip
icon="turned_in"
*ngIf="activity.pinned"
i18n="@@MINDS__CARDS__ACTIVITY__PINNED_POST"
>
This post is pinned
</m-tooltip>
<m-tooltip
icon="turned_in_not"
*ngIf="
session.getLoggedInUser().guid == activity.owner_guid &&
!activity.pinned &&
!activity.dontPin
"
i18n="@@MINDS__CARDS__ACTIVITY__CLICK_TO_PIN"
>
Click to pin this post to the top of your channel feed
</m-tooltip>
</button>
<m-safe-toggle
*ngIf="showRatingToggle && session.isAdmin()"
[(entity)]="activity"
......
src/app/modules/legacy/components/cards/activity-v2/activity.component.scss
View file @ 6430dd1e
minds-activity-v2.mdl-card,
minds-activity-v2 {
width: auto;
min-height: 0;
max-height: 720px;
min-height: 720px !important;
max-height: 720px !important;
margin-bottom: 16px;
border-radius: 6px;
overflow: visible;
justify-content: space-around;
&.minds-activity-v2__allowOverflow {
max-height: none;
.m-mature-message {
max-height: none;
//.m-mature-message-content {
// max-height: none;
//}
}
}
.m-activity__spacer {
flex-grow: 1;
flex-shrink: 1;
}
.mdl-card__supporting-text {
......@@ -26,7 +40,8 @@ minds-activity-v2 {
}
.mdl-card__supporting-text.message {
margin-top: 26px;
//margin: 26px;
padding: 0 22px;
white-space: pre-line;
word-wrap: break-word;
padding-top: 0;
......@@ -39,6 +54,121 @@ minds-activity-v2 {
.m-owner-block {
position: relative;
//flex-shrink: 0;
//flex-grow: 0;
min-height: 72px;
height: 72px;
max-height: 72px;
.avatar {
img {
width: 37px;
height: 37px;
}
.body {
margin-left: 14px;
a {
font-size: 16px;
line-height: 21px;
color: #5d5d5d;
&.permalink {
font-size: 13px;
line-height: 18px;
color: #b6b6b6;
}
}
}
}
}
m-video {
height: 300px;
}
a.m-activity--image-link {
img {
height: 300px;
background-color: #f5f5f5;
}
}
.m-mature-message {
max-height: 146px;
margin-top: 5px;
.m-read-more--button {
text-align: center;
span {
color: #4a90e2;
}
}
}
.m-activity__actionButtons {
height: 60px;
border-top: 1px solid #eee;
padding: 23px 0;
display: flex;
box-sizing: border-box;
> * {
display: flex;
flex-direction: column;
//flex:auto;
//flex: 1;
text-align: center;
cursor: pointer;
}
minds-button-thumbs-up,
minds-button-thumbs-down,
minds-button-remind {
padding: 0 22px;
a {
&:not(.selected) {
color: #b6b6b6 !important;
}
i,
span {
vertical-align: middle;
font-size: 19px;
line-height: 16px;
}
span {
font-size: 12px;
padding: 0 0 0 8px;
}
}
}
}
.m-activity__pay {
justify-self: flex-end;
align-self: center;
margin-left: auto;
margin-right: 22px;
img {
width: 21px;
height: 19px;
cursor: pointer;
}
}
.m-activity__commentPoster {
height: 91px;
flex-shrink: 0;
background-color: lightblue;
}
.m-owner-block--remind {
......@@ -50,8 +180,6 @@ minds-activity-v2 {
}
.avatar img {
width: 24px;
height: 24px;
object-fit: cover;
}
......@@ -158,24 +286,35 @@ minds-activity-v2 {
img {
width: 100%;
height: 300px;
object-fit: contain;
background-color: #f5f5f5;
}
.meta {
padding: $minds-padding * 2 $minds-padding * 2 0;
padding: 16px 22px 0;
display: block;
text-decoration: none;
width: calc(100% - 32px);
width: auto;
background-color: #fbfbfb;
h2 {
font-size: 15px;
line-height: 20px;
color: #4a4a4a;
}
p {
color: #9b9b9b;
font-size: 13px;
line-height: 18px;
text-overflow: ellipsis;
text-rendering: auto;
white-space: pre-wrap;
overflow: hidden;
max-height: 48px;
margin: 8px 0;
margin: 2px 0;
padding: 0;
line-height: 1.25;
}
p.m-url {
......
src/app/modules/legacy/components/cards/activity-v2/activity.component.ts
View file @ 6430dd1e
import {
Component,
ChangeDetectionStrategy,
ChangeDetectorRef,
EventEmitter,
Component,
ElementRef,
EventEmitter,
Injector,
Input,
ViewChild,
OnInit,
SkipSelf,
Injector,
ViewChild,
} from '@angular/core';
import { Client } from '../../../../../services/api';
......@@ -30,6 +30,7 @@ import { AutocompleteSuggestionsService } from '../../../../suggestions/services
import { ActivityService } from '../../../../../common/services/activity.service';
import { FeaturesService } from '../../../../../services/features.service';
import isMobile from '../../../../../helpers/is-mobile';
import { SignupModalService } from '../../../../modals/signup/service';
@Component({
moduleId: module.id,
......@@ -176,7 +177,8 @@ export class MindsActivityV2 implements OnInit {
public suggestions: AutocompleteSuggestionsService,
protected activityService: ActivityService,
@SkipSelf() injector: Injector,
protected elementRef: ElementRef
protected elementRef: ElementRef,
protected signupModal: SignupModalService
) {
this.clientMetaService.inherit(injector);
......@@ -612,4 +614,28 @@ export class MindsActivityV2 implements OnInit {
'minds-activity-v2__allowOverflow'
);
}
openWireModal() {
if (!this.session.isLoggedIn()) {
this.signupModal.open();
return;
}
const creator = this.overlayModal.create(
WireCreatorComponent,
this.activity,
{
default: this.activity && this.activity.wire_threshold,
onComplete: wire => {
if (this.activity.wire_totals) {
this.activity.wire_totals[wire.currency] = wire.amount;
}
this.wireSubmitted(wire);
},
}
);
creator.present();
}
}
src/app/modules/legacy/legacy.module.ts
View file @ 6430dd1e
......@@ -40,6 +40,7 @@ import { CommentsModule } from '../comments/comments.module';
import { TextInputAutocompleteModule } from '../../common/components/autocomplete';
import { CommentComponentV2 } from '../comments/comment/comment.component';
import { MindsActivityV2 } from './components/cards/activity-v2/activity.component';
import { Ng2FittextModule } from 'ng2-fittext';
@NgModule({
imports: [
......@@ -58,6 +59,7 @@ import { MindsActivityV2 } from './components/cards/activity-v2/activity.compone
PostMenuModule,
CommentsModule,
TextInputAutocompleteModule,
Ng2FittextModule,
],
declarations: [
Activity,
......
src/app/modules/newsfeed/boost-rotator/boost-rotator.component.html
View file @ 6430dd1e
<!--<div class="m-boost-rotator-tools">-->
<!-- <span-->
<!-- i1n="@@BOOST_ROTATOR__SHOWING_BOOSTS"-->
<!-- *ngIf="router.url == '/newsfeed/boost'"-->
<!-- >-->
<!-- Showing boosts-->
<!-- </span>-->
<!-- <div class="m-layout&#45;&#45;spacer"></div>-->
<!-- <ul class="m-boost-rotator-tabs">-->
<!-- <li-->
<!-- routerLink="/newsfeed/boost"-->
<!-- *ngIf="router.url !== '/newsfeed/boost'"-->
<!-- class="m-boostRotator__tab&#45;&#45;boost-feed"-->
<!-- >-->
<!-- <a i18n="@@M__COMMON__BOOSTFEED">Boostfeed</a>-->
<!-- </li>-->
<!-- <ng-container *ngIf="boosts.length > 0; else noBoosts">-->
<!-- <li (click)="prev()">-->
<!-- <i class="material-icons mdl-color-text&#45;&#45;blue-grey-400">chevron_left</i>-->
<!-- </li>-->
<!-- <li (click)="next()">-->
<!-- <i class="material-icons mdl-color-text&#45;&#45;blue-grey-400"-->
<!-- >chevron_right</i-->
<!-- >-->
<!-- </li>-->
<!-- </ng-container>-->
<!-- <ng-template #noBoosts>-->
<!-- <li>-->
<!-- <i style="height: 32px;display: block;"></i>-->
<!-- </li>-->
<!-- </ng-template>-->
<!-- <li class="m-boost-rotator-tabs&#45;&#45;settings">-->
<!-- <m-newsfeed&#45;&#45;dropdown [showBoost]="true"></m-newsfeed&#45;&#45;dropdown>-->
<!-- </li>-->
<!-- </ul>-->
<!--</div>-->
<div class="m-boost-rotator-tools">
<span
i1n="@@BOOST_ROTATOR__SHOWING_BOOSTS"
*ngIf="router.url == '/newsfeed/boost'"
>
Showing boosts
</span>
<div class="m-layout--spacer"></div>
<ul class="m-boost-rotator-tabs">
<li
routerLink="/newsfeed/boost"
*ngIf="router.url !== '/newsfeed/boost'"
class="m-boostRotator__tab--boost-feed"
>
<a i18n="@@M__COMMON__BOOSTFEED">Boostfeed</a>
</li>
<ng-container *ngIf="boosts.length > 0; else noBoosts">
<li (click)="prev()">
<i class="material-icons mdl-color-text--blue-grey-400">chevron_left</i>
</li>
<li (click)="next()">
<i class="material-icons mdl-color-text--blue-grey-400"
>chevron_right</i
>
</li>
</ng-container>
<ng-template #noBoosts>
<li>
<i style="height: 32px;display: block;"></i>
</li>
</ng-template>
<li class="m-boost-rotator-tabs--settings">
<m-newsfeed--dropdown [showBoost]="true"></m-newsfeed--dropdown>
</li>
</ul>
<m-progress-ring
[progress]="75"
[size]="{ w: 20, h: 20, r: 8.5 }"
[cx]="10"
[cy]="10"
></m-progress-ring>
</div>
<ng-container *ngIf="!inProgress">
<div
class="m-newsfeedBoostRotator__leftArrow"
(click)="prev()"
*ngIf="this.currentPosition > 0"
>
<i class="material-icons">
chevron_left
</i>
</div>
<div
class="m-newsfeedBoostRotator__rightArrow"
(click)="next()"
*ngIf="this.currentPosition < this.boosts.length - 1"
>
<i class="material-icons">
chevron_right
</i>
</div>
</ng-container>
<ng-container *ngIf="!disabled">
<minds-activity-v2
......
src/app/modules/newsfeed/boost-rotator/boost-rotator.component.scss
View file @ 6430dd1e
m-newsfeed--boost-rotator {
position: relative;
display: block;
.m-newsfeedBoostRotator__leftArrow,
.m-newsfeedBoostRotator__rightArrow {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
bottom: 50%;
color: rgba(0, 0, 0, 0.4);
background-color: white;
border: 1px solid #d9d9d9;
border-radius: 50%;
width: 42px;
height: 42px;
z-index: 1;
font-size: 26px;
}
.m-newsfeedBoostRotator__leftArrow {
left: -21px;
}
.m-newsfeedBoostRotator__rightArrow {
right: -21px;
}
minds-activity-v2 {
border: 1px solid #4a90e2 !important;
border-radius: 2px !important;
}
}
.m-boost-rotator-item {
transition: opacity 0.5s ease;
opacity: 1;
......@@ -30,9 +67,11 @@
.m-dropdown--spacer {
flex: 1;
}
> label.mdl-switch {
width: 36px;
}
.m-tooltip i {
font-size: 16px;
margin: 0 8px;
......@@ -48,6 +87,12 @@
flex-direction: row;
align-items: center;
.m-progress-ring {
circle {
stroke: #919191;
}
}
.m-boost-rotator-tools-tool {
position: relative;
padding: 8px;
......@@ -87,6 +132,7 @@
m-tooltip {
vertical-align: middle;
}
m-tooltip i {
font-size: 11px;
@include m-theme() {
......@@ -132,18 +178,22 @@
margin-top: -10px;
cursor: pointer;
}
.m-boost-rotator-paused {
margin-top: -8px !important;
margin-right: 16px !important;
&.paused {
animation: pulse 2s linear infinite;
}
button i {
@include m-theme() {
color: themed($m-blue-grey-500);
}
}
}
m-topbar--navigation--options {
padding-right: 8px;
padding-left: 8px;
......@@ -155,6 +205,7 @@
.mdl-menu__item {
text-overflow: initial !important;
}
.selected {
@include m-theme() {
color: themed($m-blue-grey-500) !important;
......@@ -189,6 +240,7 @@
display: block;
width: 100%;
height: 10px;
.m-boost-rotator-progress-inner {
display: block;
height: 100%;
......
src/app/modules/newsfeed/boost-rotator/boost-rotator.component.ts
View file @ 6430dd1e
......@@ -2,7 +2,11 @@ import {
ChangeDetectorRef,
Component,
ElementRef,
HostListener,
Injector,
Input,
OnDestroy,
OnInit,
QueryList,
SkipSelf,
ViewChildren,
......@@ -15,29 +19,24 @@ import { Storage } from '../../../services/storage';
import { Session } from '../../../services/session';
import { Router } from '@angular/router';
import { MindsUser } from '../../../interfaces/entities';
import { Activity } from '../../../modules/legacy/components/cards/activity/activity';
import { Activity } from '../../legacy/components/cards/activity/activity';
import { NewsfeedService } from '../services/newsfeed.service';
import { NewsfeedBoostService } from '../newsfeed-boost.service';
import { SettingsService } from '../../settings/settings.service';
import { FeaturesService } from '../../../services/features.service';
import { BoostedContentService } from '../../../common/services/boosted-content.service';
import { FeedsService } from '../../../common/services/feeds.service';
import { ClientMetaService } from '../../../common/services/client-meta.service';
@Component({
moduleId: module.id,
selector: 'm-newsfeed--boost-rotator',
host: {
'(window:blur)': 'inActive()',
'(window:focus)': 'active()',
'(mouseover)': 'mouseOver()',
'(mouseout)': 'mouseOut()',
},
inputs: ['interval', 'channel'],
providers: [ClientMetaService, FeedsService],
templateUrl: 'boost-rotator.component.html',
})
export class NewsfeedBoostRotatorComponent {
export class NewsfeedBoostRotatorComponent implements OnInit, OnDestroy {
@Input() interval: number = 6;
@Input() channel: MindsUser;
boosts: Array<any> = [];
offset: string = '';
inProgress: boolean = false;
......@@ -46,14 +45,13 @@ export class NewsfeedBoostRotatorComponent {
running: boolean = false;
paused: boolean = false;
windowFocused: boolean = true;
interval: number = 6;
channel: MindsUser;
currentPosition: number = 0;
lastTs: number = Date.now();
minds;
scroll_listener;
rating: number = 2; //default to Safe Mode Off
rating: number = 2; // default to Safe Mode Off
ratingMenuToggle: boolean = false;
plus: boolean = false;
disabled: boolean = false;
......@@ -106,10 +104,14 @@ export class NewsfeedBoostRotatorComponent {
this.paused = this.service.isBoostPaused();
this.feedsService.feed.subscribe(async boosts => {
if (!boosts.length) return;
if (!boosts.length) {
return;
}
this.boosts = [];
for (const boost of boosts) {
if (boost) this.boosts.push(await boost.pipe(first()).toPromise());
if (boost) {
this.boosts.push(await boost.pipe(first()).toPromise());
}
}
if (this.currentPosition >= this.boosts.length) {
this.currentPosition = 0;
......@@ -165,7 +167,9 @@ export class NewsfeedBoostRotatorComponent {
}
start() {
if (this.rotator) window.clearInterval(this.rotator);
if (this.rotator) {
window.clearInterval(this.rotator);
}
this.running = true;
this.rotator = setInterval(e => {
......@@ -177,15 +181,17 @@ export class NewsfeedBoostRotatorComponent {
}
this.next();
//this.recordImpression(this.currentPosition);
// this.recordImpression(this.currentPosition);
}, this.interval * 1000);
}
isVisible() {
const bounds = this.element.nativeElement.getBoundingClientRect();
if (bounds.top > 0) {
//console.log('[rotator]: in view', this.rotator);
if (!this.running) this.start();
// console.log('[rotator]: in view', this.rotator);
if (!this.running) {
this.start();
}
} else {
console.log('[rotator]: out of view', this.rotator);
if (this.running) {
......@@ -196,7 +202,7 @@ export class NewsfeedBoostRotatorComponent {
}
recordImpression(position: number, force: boolean) {
//ensure was seen for at least 1 second
// ensure was seen for at least 1 second
if (
(Date.now() > this.lastTs + 1000 || force) &&
this.boosts[position] &&
......@@ -220,48 +226,54 @@ export class NewsfeedBoostRotatorComponent {
this.windowFocused
);
}
this.lastTs = Date.now();
if (this.boosts[position] && this.boosts[position].boosted_guid)
if (this.boosts[position] && this.boosts[position].boosted_guid) {
window.localStorage.setItem(
'boost-rotator-offset',
this.boosts[position].boosted_guid
);
}
}
@HostListener('window:focus')
active() {
this.windowFocused = true;
this.isVisible();
this.next(); // Show a new boost when we open our window again
}
@HostListener('window:blur')
inActive() {
this.running = false;
this.windowFocused = false;
window.clearInterval(this.rotator);
}
@HostListener('mouseover')
mouseOver() {
this.running = false;
window.clearInterval(this.rotator);
}
@HostListener('mouseout')
mouseOut() {
this.isVisible();
}
prev() {
if (this.currentPosition <= 0) {
this.currentPosition = this.boosts.length - 1;
} else {
this.currentPosition--;
}
this.currentPosition =
this.currentPosition <= 0
? this.boosts.length - 1
: this.currentPosition - 1;
this.recordImpression(this.currentPosition, false);
}
async next() {
//this.activities.toArray()[this.currentPosition].hide();
// this.activities.toArray()[this.currentPosition].hide();
if (this.currentPosition + 1 > this.boosts.length - 1) {
//this.currentPosition = 0;
// this.currentPosition = 0;
try {
this.load();
this.currentPosition++;
......@@ -285,10 +297,12 @@ export class NewsfeedBoostRotatorComponent {
}
ngOnDestroy() {
if (this.rotator) window.clearInterval(this.rotator);
if (this.rotator) {
window.clearInterval(this.rotator);
}
this.scroll.unListen(this.scroll_listener);
for (let subscription of this.subscriptions) {
for (const subscription of this.subscriptions) {
subscription.unsubscribe();
}
}
......
src/assets/icons/pay.png 0 → 100644
View file @ 6430dd1e
src/assets/icons/pay.png

1.95 KB