Commit fbb98f32 authored by Ben Hayward's avatar Ben Hayward

Added i18n support to mature overlay

1 merge request!768Group explicit overlay #2402
Pipeline #117643804 running with stages
<div class="m-channel--explicit-overlay--container" *ngIf="!hidden">
<div class="m-channel--explicit-overlay--content">
<h3>This {{ type }} contains content that is NSFW</h3>
<h3>{{ message }}</h3>
<div
class="m-btn m-btn--slim m-btn--action m-channel--explicit-overlay--action"
(click)="disableFilter()"
......
......@@ -24,6 +24,8 @@ export class ExplicitOverlayComponent {
}
}
@Input() message: string;
constructor(
public session: Session,
public storage: Storage,
......
......@@ -154,4 +154,8 @@
</section>
</div>
<m-explicit-overlay [entity]="user"></m-explicit-overlay>
<m-explicit-overlay
[entity]="user"
message="This channel contains content that is NSFW"
i18n-message
></m-explicit-overlay>
......@@ -23,7 +23,6 @@ import { ChannelComponent } from './channel.component';
import { ChannelsTileComponent } from './tile/tile.component';
import { PosterModule } from '../newsfeed/poster/poster.module';
import { NewsfeedModule } from '../newsfeed/newsfeed.module';
import { ExplicitOverlayComponent } from './explicit-overlay/overlay.component';
import { HashtagsModule } from '../hashtags/hashtags.module';
import { ChannelSortedComponent } from './sorted/sorted.component';
import { ChannelSortedModuleComponent } from './sorted/module.component';
......@@ -59,7 +58,6 @@ const routes: Routes = [
ChannelsTileComponent,
ChannelFeedComponent,
ChannelSidebar,
ExplicitOverlayComponent,
ChannelSortedComponent,
ChannelSortedModuleComponent,
],
......
<div class="m-channel--explicit-overlay--container" *ngIf="!hidden">
<div class="m-channel--explicit-overlay--content">
<h3>
This channel contains content that is NSFW
</h3>
<div
class="m-btn m-btn--slim m-btn--action m-channel--explicit-overlay--action"
(click)="disableFilter()"
>
View
</div>
</div>
</div>
.m-channel--explicit-overlay--container {
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
position: fixed;
top: 53px;
left: 0;
width: 100%;
height: calc(100% - 53px);
@include m-theme() {
color: themed($m-grey-900);
background-color: rgba(themed($m-white), 0.99);
}
user-select: none;
.m-channel--explicit-overlay--content {
max-width: 1280px;
width: 100%;
text-align: center;
font-weight: 300;
font-size: 24px;
line-height: 1.5em;
h3 {
letter-spacing: 0.75px;
font-weight: 600;
@include m-theme() {
color: themed($m-grey-800);
}
}
.m-channel--explicit-overlay--action {
text-transform: uppercase;
letter-spacing: 2.5px;
width: 100px;
margin: auto;
/* font-size: 22px; */
margin-top: 16px;
font-weight: 600;
}
}
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ExplicitOverlayComponent } from './overlay.component';
import { Session } from '../../../services/session';
import { sessionMock } from '../../../../tests/session-mock.spec';
import { Storage } from '../../../services/storage';
import { Router } from '@angular/router';
import { storageMock } from '../../../../tests/storage-mock.spec';
import { ConfigsService } from '../../../common/services/configs.service';
import { MockService } from '../../../utils/mock';
let routerMock = new (function() {
this.navigate = jasmine.createSpy('navigate');
})();
describe('OverlayComponent', () => {
let comp: ExplicitOverlayComponent;
let fixture: ComponentFixture<ExplicitOverlayComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ExplicitOverlayComponent],
imports: [],
providers: [
{ provide: Storage, useValue: storageMock },
{ provide: Session, useValue: sessionMock },
{ provide: Router, useValue: routerMock },
{ provide: ConfigsService, useValue: MockService(ConfigsService) },
],
}).compileComponents();
}));
beforeEach(done => {
jasmine.MAX_PRETTY_PRINT_DEPTH = 10;
jasmine.clock().uninstall();
jasmine.clock().install();
fixture = TestBed.createComponent(ExplicitOverlayComponent);
comp = fixture.componentInstance;
comp.hidden = true;
fixture.detectChanges();
if (fixture.isStable()) {
done();
} else {
fixture.whenStable().then(() => {
done();
});
}
});
afterEach(() => {
jasmine.clock().uninstall();
});
it('should not show overlay when mature visibility is set', () => {
comp.channel = {
mature_visibility: true,
};
comp.showOverlay();
fixture.detectChanges();
expect(comp.hidden).toBeTruthy();
});
it('should overlay when channel is mature', () => {
comp._channel = {
is_mature: true,
};
comp.showOverlay();
fixture.detectChanges();
expect(comp.hidden).toBeFalsy();
});
it('should overlay when channel is nsfw for one reason', () => {
comp._channel = {
nsfw: [1],
};
comp.showOverlay();
fixture.detectChanges();
expect(comp.hidden).toBeFalsy();
});
it('should overlay when channel is nsfw for multiple reason', () => {
comp._channel = {
nsfw: [1, 2, 3],
};
comp.showOverlay();
fixture.detectChanges();
expect(comp.hidden).toBeFalsy();
});
it('should overlay not show overlay if channel is not nsfw, mature and no mature_visibility', () => {
comp._channel = {
mature_visibility: false,
is_mature: false,
nsfw: [],
};
comp.showOverlay();
fixture.detectChanges();
expect(comp.hidden).toBeTruthy();
});
it('should not register undefined values as a false positive, and show the overlay', () => {
comp._channel = {
mature_visibility: undefined,
is_mature: undefined,
nsfw: undefined,
};
comp.showOverlay();
fixture.detectChanges();
expect(comp.hidden).toBeTruthy();
});
});
import { Component, Input } from '@angular/core';
import { Session } from '../../../services/session';
import { Router } from '@angular/router';
import { Storage } from '../../../services/storage';
import { ConfigsService } from '../../../common/services/configs.service';
@Component({
selector: 'm-channel--explicit-overlay',
templateUrl: 'overlay.component.html',
})
export class ExplicitOverlayComponent {
readonly siteUrl: string;
public hidden = true;
public _channel: any;
@Input() set channel(value: any) {
this._channel = value;
this.showOverlay();
}
constructor(
public session: Session,
public storage: Storage,
public router: Router,
configs: ConfigsService
) {
this.siteUrl = configs.get('site_url');
}
login() {
this.storage.set('redirect', this.siteUrl + this._channel.username);
this.router.navigate(['/login']);
}
/**
* Disables overlay screen, revealing channel.
*/
protected disableFilter(): void {
this._channel.mature_visibility = true;
this.hidden = true;
}
/**
* Determines whether the channel overlay should be shown
* over the a channel.
*/
public showOverlay(): void {
if (!this._channel) {
return;
}
if (this._channel.mature_visibility) {
this.hidden = true;
} else if (this._channel.is_mature) {
this.hidden = false;
} else if (this._channel.nsfw && this._channel.nsfw.length > 0) {
this.hidden = false;
} else {
this.hidden = true;
}
}
}
......@@ -13,7 +13,11 @@
<router-outlet></router-outlet>
</div>
<m-explicit-overlay [entity]="group"></m-explicit-overlay>
<m-explicit-overlay
[entity]="group"
message="This group contains content that is NSFW"
i18n-message
></m-explicit-overlay>
<div
class="m-group__grid"
......
Please register or to comment