Commit 11b45c0e authored by Olivia Madrid's avatar Olivia Madrid

apply different paywalls for different content types

parent 42d90516
Pipeline #150787957 failed with stages
in 6 minutes and 28 seconds
......@@ -175,6 +175,7 @@ import { AccordionPaneComponent } from './components/accordion/accordion-pane.co
import { StickySidebarDirective } from './components/sticky-sidebar/sticky-sidebar.directive';
import { RemindComposerModalComponent } from '../modules/modals/remind-composer-v2/reminder-composer.component';
import { LanguageModule } from '../modules/language/language.module';
import { PaywallBadgeComponent } from './components/paywall-badge/paywall-badge.component';
const routes: Routes = [
{
......@@ -327,6 +328,7 @@ const routes: Routes = [
AccordionComponent,
AccordionPaneComponent,
StickySidebarDirective,
PaywallBadgeComponent,
],
exports: [
MINDS_PIPES,
......@@ -458,6 +460,7 @@ const routes: Routes = [
AccordionComponent,
AccordionPaneComponent,
StickySidebarDirective,
PaywallBadgeComponent,
],
providers: [
SiteService,
......
<div
class="m-paywallBadge"
[ngClass]="{ isPlus: paywallType === 'plus', isPPV: paywallType === 'ppv' }"
>
<i *ngIf="paywallType !== 'plus'" class="material-icons">lock</i>
<span *ngIf="paywallType === 'plus'">PLUS</span>
<span *ngIf="paywallType === 'tier'">Members Only</span>
</div>
.m-paywallBadge {
position: absolute;
display: flex;
align-items: center;
top: 12px;
right: 24px;
border-radius: 3px;
padding: 4px 5px;
font-size: 12px;
line-height: 12px;
font-weight: 500;
z-index: 2;
@include m-theme() {
color: themed($m-white);
background-color: themed($m-textColor--secondary);
box-shadow: 0 1px 3px 0 rgba(themed($m-black-always), 0.3);
}
&.isPlus {
@include m-theme() {
background-color: themed($m-alert);
}
}
&.isPPV {
padding: 4px 4px;
i {
margin: 0 -1 0 0;
}
}
i {
font-size: 11px;
line-height: 12px;
margin-right: 3px;
margin-left: -2px;
}
}
import { Component, Input } from '@angular/core';
@Component({
selector: 'm-paywallBadge',
templateUrl: './paywall-badge.component.html',
})
export class PaywallBadgeComponent {
@Input() paywallType: 'plus' | 'tier' | 'ppv' = 'ppv';
constructor() {}
}
/**
* Determine the entity's media content type
*/
export default function getEntityContentType(
entity
): 'image' | 'video' | 'blog' | 'status' {
const e = entity;
if (e.perma_url && (e.entity_guid || (e.subtype && e.subtype === 'blog'))) {
return 'blog';
}
if (e.custom_type && e.custom_type === 'video') {
return 'video';
}
if (e.custom_type && e.custom_type === 'batch') {
return 'image';
}
return 'status';
}
......@@ -47,10 +47,6 @@ export class ChartV2Component implements OnInit, OnDestroy {
this._interval = value;
if (value && this.init) {
//redraw chart
if (this.isDark) {
this.setData();
this.setLayout();
}
this.initPlot();
}
}
......@@ -133,7 +129,6 @@ export class ChartV2Component implements OnInit, OnDestroy {
// * PREPARE PLOT -----------------------------
initPlot() {
console.log('888 initPlot', this.isDark);
this.pointsPerSegment = this.segments[0].buckets.length;
const yLowerBound = this.getLowerBound(this.segments[0].buckets);
......
......@@ -15,7 +15,6 @@
<m-activity__menu (deleted)="delete()"></m-activity__menu>
</ng-container>
</m-activity__ownerBlock>
<m-activity__content
*ngIf="service.shouldShowContent$ | async"
[allowAutoplayOnScroll]="allowAutoplayOnScroll"
......@@ -25,10 +24,6 @@
<m-activity__nsfwConsent *ngIf="service.shouldShowNsfwConsent$ | async">
</m-activity__nsfwConsent>
<m-activity__paywall
*ngIf="service.shouldShowPaywall$ | async"
></m-activity__paywall>
<m-activity__toolbar
*ngIf="service.displayOptions.showToolbar"
></m-activity__toolbar>
......
......@@ -28,7 +28,6 @@ import { ClientMetaService } from '../../../common/services/client-meta.service'
import { ElementVisibilityService } from '../../../common/services/element-visibility.service';
import { NewsfeedService } from '../services/newsfeed.service';
import { map } from 'rxjs/operators';
import { TranslationService } from '../../../services/translation';
@Component({
selector: 'm-activity',
......@@ -101,8 +100,7 @@ export class ActivityComponent implements OnInit, AfterViewInit, OnDestroy {
@SkipSelf() private injector: Injector,
private clientMetaService: ClientMetaService,
private elementVisibilityService: ElementVisibilityService,
private newsfeedService: NewsfeedService,
private translationService: TranslationService
private newsfeedService: NewsfeedService
) {}
ngOnInit() {
......@@ -161,9 +159,4 @@ export class ActivityComponent implements OnInit, AfterViewInit, OnDestroy {
delete() {
this.deleted.emit(this.service.entity$.value);
}
translate() {
console.log('translate selected');
// this.showTranslation
}
}
......@@ -42,6 +42,7 @@ export type ActivityEntity = {
url?: string;
urn?: string;
boosted_guid?: string;
content_type: string;
};
// Constants of blocks
......@@ -119,15 +120,11 @@ export class ActivityService {
);
/**
* We do not render the contents if nsfw (and no consent) or
* a paywall is in place
* We do not render the contents if nsfw (and no consent)
*/
shouldShowContent$: Observable<boolean> = combineLatest(
this.entity$,
this.shouldShowNsfwConsent$
).pipe(
map(([entity, shouldShowNsfwContsent]: [ActivityEntity, boolean]) => {
return !shouldShowNsfwContsent && !entity.paywall;
shouldShowContent$: Observable<boolean> = this.shouldShowNsfwConsent$.pipe(
map((shouldShowNsfwConsent: boolean) => {
return !shouldShowNsfwConsent;
})
);
......
<m-paywallBadge
*ngIf="!!entity.paywall || entity.paywall_unlocked"
></m-paywallBadge>
<m-activity__paywall
*ngIf="service.shouldShowPaywall$ | async"
></m-activity__paywall>
<div class="m-activityContent__fixedHeightSpacer" *ngIf="isTextOnly"></div>
<div
#messageEl
......@@ -13,6 +19,7 @@
<span [innerHtml]="message | tags"></span>
<m-read-more--button [v2]="true"></m-read-more--button>
</div>
<!-- TODO use this for remind translations -->
<!-- (onTranslateInit)="propagateTranslation($event)" -->
<m-translate
*mIfBrowser
......
m-activity__content {
display: block;
width: 100%;
position: relative;
}
.m-activity--fixedHeight {
m-activity__content {
flex: 1;
// overflow: hidden;
display: flex;
flex-direction: column;
height: auto;
......
<div
class="m-wire--lock-screen"
[ngClass]="{ textOnly: contentType === 'status' }"
(click)="unlock()"
*ngIf="entity.wire_threshold"
[ngClass]="{ isStatus: contentType === 'status' }"
(click)="unlock($event)"
*ngIf="entity.wire_threshold && init"
>
<!-- ------------------------------ -->
<!-- THUMBNAIL (blurred for images) -->
<!-- OVERLAY -->
<!-- ------------------------------ -->
<div
class="m-wire--lock-screen-overlay"
[style.backgroundImage]="getBackground()"
*ngIf="showSubmittedInfo && hasTeaser"
></div>
<!-- ------------------------------ -->
<!-- BADGE -->
<!-- ------------------------------ -->
<div class="m-wire--lock-screen-badge">
<i class="material-icons">lock</i>
<span>Locked</span>
</div>
<!-- ------------------------------ -->
<!-- THRESHOLD/TIER REQUIREMENTS -->
<!-- ------------------------------ -->
<ng-container *ngIf="contentType === 'image' || contentType === 'status'">
<ng-container *ngIf="!showSubmittedInfo">
<h5 class="m-wire--lock-screen--message">
<ng-container i18n="@@WIRE__LOCK_SCREEN__CAN_ONLY_BE_SEEN_TITLE_PART"
>This post can only be seen by supporters who wire</ng-container
>
<ng-container
*ngIf="entity?.wire_threshold?.type == 'money'"
i18n="@@WIRE__LOCK_SCREEN__OVER_USD_PER_MONTH"
>
over
{{ entity.wire_threshold.min | currency: 'USD':true:'1.0-0' }}/month
</ng-container>
<ng-container *ngIf="!showSubmittedInfo && !hasTeaser">
<h5 class="m-wire--lock-screen--message">
<ng-container i18n="@@WIRE__LOCK_SCREEN__CAN_ONLY_BE_SEEN_TITLE_PART"
>This post can only be seen by supporters who wire</ng-container
>
<ng-container
*ngIf="entity?.wire_threshold?.type == 'points'"
i18n="@@WIRE__LOCK_SCREEN__OVER_POINTS_PER_MONTH"
>
over {{ entity.wire_threshold.min | number }} points/month
</ng-container>
<ng-container
*ngIf="entity?.wire_threshold?.type == 'money'"
i18n="@@WIRE__LOCK_SCREEN__OVER_USD_PER_MONTH"
>
over
{{ entity.wire_threshold.min | currency: 'USD':true:'1.0-0' }}/month
</ng-container>
<ng-container
*ngIf="entity?.wire_threshold?.type == 'tokens'"
i18n="@@WIRE__LOCK_SCREEN__OVER_TOKENS_PER_MONTH"
>
over {{ entity.wire_threshold.min | number }} Tokens/month
</ng-container>
<ng-container
*ngIf="entity?.wire_threshold?.type == 'points'"
i18n="@@WIRE__LOCK_SCREEN__OVER_POINTS_PER_MONTH"
>
over {{ entity.wire_threshold.min | number }} points/month
</ng-container>
<ng-container
*ngIf="entity?.ownerObj?.username"
i18n="@@WIRE__LOCK_SCREEN__TO_USERNAME_PART"
>
to @{{ entity.ownerObj.username }}
</ng-container>
</h5></ng-container
>
<!-- ------------------------------ -->
<!-- PAYMENT IS PROCESSING -->
<!-- ------------------------------ -->
<h5 class="m-wire--lock-screen--message">
<ng-container
*ngIf="showSubmittedInfo"
i18n="@@WIRE__LOCK_SCREEN__RECEIVED_TIMEOUT_LABEL"
*ngIf="entity?.wire_threshold?.type == 'tokens'"
i18n="@@WIRE__LOCK_SCREEN__OVER_TOKENS_PER_MONTH"
>
We've received your transaction. Please try unlocking this post after it
gets processed. We estimate it may take around 5 minutes.</ng-container
over {{ entity.wire_threshold.min | number }} Tokens/month
</ng-container>
<ng-container
*ngIf="entity?.ownerObj?.username"
i18n="@@WIRE__LOCK_SCREEN__TO_USERNAME_PART"
>
to @{{ entity.ownerObj.username }}
</ng-container>
</h5>
<!-- ------------------------------ -->
<!-- ------------------------------ -->
</ng-container>
<!-- ------------------------------ -->
<!-- ONCHAIN PAYMENT IS PROCESSING -->
<!-- ------------------------------ -->
<h5 class="m-wire--lock-screen--message">
<ng-container
*ngIf="showSubmittedInfo"
i18n="@@WIRE__LOCK_SCREEN__RECEIVED_TIMEOUT_LABEL"
>
We've received your transaction. Please try unlocking this post after it
gets processed. We estimate it may take around 5 minutes.</ng-container
>
</h5>
</div>
m-wire--lock-screen {
display: flex;
flex-flow: column nowrap;
position: relative;
}
.m-wire--lock-screen {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
position: relative;
min-height: 300px;
cursor: pointer;
@include m-theme() {
color: themed($m-white);
}
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
> * {
z-index: 1;
}
&.textOnly {
.m-wire--lock-screen {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
z-index: 0;
cursor: pointer;
@include m-theme() {
color: themed($m-textColor--secondary);
border-top: 1px solid themed($m-borderColor--tertiary);
color: themed($m-white);
}
> * {
z-index: 1;
}
.m-wire--lock-screen--message {
&.isStatus {
// min-height: 100px;
@include m-theme() {
text-shadow: 0 0 0 rgba(themed($m-black-always), 0);
color: themed($m-textColor--secondary);
border-top: 1px solid themed($m-borderColor--tertiary);
background-color: themed($m-white);
}
.m-wire--lock-screen--message {
@include m-theme() {
text-shadow: 0 0 0 rgba(themed($m-black-always), 0);
}
}
}
}
.m-wire--lock-screen-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
@include m-theme() {
background-color: themed($m-white);
}
}
.m-wire--lock-screen-badge {
position: absolute;
display: flex;
align-items: center;
top: 12px;
right: 24px;
border-radius: 3px;
padding: 4px 5px;
font-size: 12px;
line-height: 12px;
font-weight: 500;
@include m-theme() {
color: themed($m-white);
background-color: themed($m-textColor--secondary);
box-shadow: 0 1px 3px 0 rgba(themed($m-black-always), 0.3);
}
i {
font-size: 11px;
line-height: 12px;
margin-right: 3px;
margin-left: -2px;
background-color: rgba(themed($m-black-always), 0.4);
}
}
......@@ -75,7 +53,7 @@ m-wire--lock-screen {
font-size: inherit;
line-height: 20px;
@include m-theme() {
text-shadow: 0 0 2px rgba(themed($m-black-always), 0.4);
text-shadow: 0 0 2px rgba(themed($m-black-always), 0.6);
}
}
}
......@@ -12,6 +12,7 @@ import { Session } from '../../../services/session';
import { SignupModalService } from '../../modals/signup/service';
import { ConfigsService } from '../../../common/services/configs.service';
import { WireModalService } from '../wire-modal.service';
import getEntityContentType from '../../../helpers/entity-content-type';
@Component({
moduleId: module.id,
......@@ -25,10 +26,13 @@ export class WireLockScreenComponent implements OnInit {
@Input() preview: any;
init: boolean = false;
showSubmittedInfo: boolean = false;
inProgress: boolean = false;
contentType: string;
isGif: boolean = false;
hasTeaser: boolean = false;
paywallType: 'plus' | 'tier' | 'ppv' = 'ppv';
tierName: string | null;
constructor(
public session: Session,
......@@ -40,28 +44,28 @@ export class WireLockScreenComponent implements OnInit {
) {}
ngOnInit() {
this.contentType = this.getContentType();
}
getContentType(): string {
if (!this.entity) {
return '';
}
const e = this.entity;
if (e.perma_url && e.entity_guid) {
return 'blog';
}
if (e.custom_type === 'video') {
return 'video';
return;
}
if (e.custom_type === 'batch') {
// TODOOJM custom_data[0].gif
return 'image';
this.contentType = getEntityContentType(this.entity);
if (this.contentType === 'video' || this.contentType === 'blog') {
this.hasTeaser = true;
}
return 'status';
this.getPaywallType();
this.init = true;
this.detectChanges();
}
// This is temporary until we get this.entity.support_tier
getPaywallType(): void {
// this.paywallType = 'plus';
// this.paywallType = 'tier';
this.paywallType = 'ppv';
}
unlock() {
unlock($event) {
$event.stopPropagation();
if (this.preview) {
return;
}
......@@ -121,25 +125,6 @@ export class WireLockScreenComponent implements OnInit {
return this.entity.ownerObj.guid === this.session.getLoggedInUser().guid;
}
getBackground() {
if (!this.entity || this.contentType === 'status') {
return null;
}
let image;
if (this.contentType === 'image') {
image =
this.configs.get('cdn_assets_url') +
// 'fs/v1/paywall/preview/' +
'fs/v1/thumbnail/' +
this.entity.guid;
// +
// '/xlarge'
}
return `url(${image})`;
}
private detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment