src/app/modules/blogs/card/card.ts

@@ -6,7 +6,6 @@ import { ACCESS } from '../../../services/list-options';
 @Component({
  moduleId: module.id,
  selector: 'minds-card-blog',
-
  inputs: ['_blog : object'],
  templateUrl: 'card.html',
 })

src/app/modules/comments/card/comment.component.html

@@ -136,7 +136,7 @@
  >explicit</i
  >
  <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
+ >Click to confirm you are 18+</span
  >
  </span>
  </div>
@@ -169,7 +169,7 @@
  >explicit</i
  >
  <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
+ >Click to confirm you are 18+</span
  >
  </span>
  </div>
@@ -193,6 +193,9 @@
  [torrent]="[
  { res: '360', key: comment.custom_data.guid + '/360.mp4' }
  ]"
+ [shouldPlayInModal]="true"
+ (videoMetadataLoaded)="setVideoDimensions($event)"
+ (mediaModalRequested)="openModal()"
  >
  </m-video>
  </div>
@@ -218,22 +221,21 @@
  >explicit</i
  >
  <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
+ >Click to confirm you are 18+</span
  >
  </span>
  </div>
- <a
- target="_blank"
- [routerLink]="['/media', comment.attachment_guid]"
- *ngIf="comment.attachment_guid"
- >
+ <a *ngIf="comment.attachment_guid">
  <img
  [src]="comment.custom_data[0].src"
- class="mdl-shadow--2dp"
  (error)="
  comment.custom_data[0].src =
  minds.cdn_assets_url + 'assets/logos/medium.png'
  "
+ *ngIf="comment.custom_data"
+ class="mdl-shadow--2dp"
+ (click)="clickedImage()"
+ #batchImage
  />
  </a>
 

src/app/modules/comments/card/comment.component.ts

@@ -8,6 +8,8 @@ import {
  ChangeDetectionStrategy,
  OnChanges,
  Input,
+ ViewChild,
+ ElementRef,
 } from '@angular/core';
 
 import { Session } from '../../../services/session';
@@ -21,6 +23,11 @@ import { CommentsListComponent } from '../list/list.component';
 import { TimeDiffService } from '../../../services/timediff.service';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { FeaturesService } from '../../../services/features.service';
+import { MindsVideoComponent } from '../../media/components/video/video.component';
+import { MediaModalComponent } from '../../media/modal/modal.component';
+import isMobile from '../../../helpers/is-mobile';
 
 @Component({
  moduleId: module.id,
@@ -73,6 +80,11 @@ export class CommentComponent implements OnChanges {
  translationInProgress: boolean;
  translateToggle: boolean = false;
  commentAge$: Observable<number>;
+
+ videoDimensions: Array<any> = null;
+ @ViewChild('player', { static: false }) player: MindsVideoComponent;
+ @ViewChild('batchImage', { static: false }) batchImage: ElementRef;
+
  @Input() canEdit: boolean = false;
 
  @Output() onReply = new EventEmitter();
@@ -84,7 +96,9 @@ export class CommentComponent implements OnChanges {
  public translationService: TranslationService,
  private overlayModal: OverlayModalService,
  private cd: ChangeDetectorRef,
- private timeDiffService: TimeDiffService
+ private router: Router,
+ private timeDiffService: TimeDiffService,
+ protected featuresService: FeaturesService
  ) {}
 
  ngOnInit() {
@@ -300,4 +314,50 @@ export class CommentComponent implements OnChanges {
  this.cd.detectChanges();
  }
  }
+
+ // * ATTACHMENT MEDIA MODAL * ---------------------------------------------------------------------
+
+ setVideoDimensions($event) {
+ this.videoDimensions = $event.dimensions;
+ this.comment.custom_data.dimensions = this.videoDimensions;
+ }
+
+ setImageDimensions() {
+ const img: HTMLImageElement = this.batchImage.nativeElement;
+ this.comment.custom_data[0].width = img.naturalWidth;
+ this.comment.custom_data[0].height = img.naturalHeight;
+ }
+
+ clickedImage() {
+ const isNotTablet = Math.min(screen.width, screen.height) < 768;
+ const pageUrl = `/media/${this.comment.entity_guid}`;
+
+ if (isMobile() && isNotTablet) {
+ this.router.navigate([pageUrl]);
+ return;
+ }
+
+ if (!this.featuresService.has('media-modal')) {
+ this.router.navigate([pageUrl]);
+ return;
+ } else {
+ if (
+ this.comment.custom_data[0].width === '0' ||
+ this.comment.custom_data[0].height === '0'
+ ) {
+ this.setImageDimensions();
+ }
+ this.openModal();
+ }
+ }
+
+ openModal() {
+ this.comment.modal_source_url = this.router.url;
+
+ this.overlayModal
+ .create(MediaModalComponent, this.comment, {
+ class: 'm-overlayModal--media',
+ })
+ .present();
+ }
 }

src/app/modules/comments/comment/comment.component.html

@@ -138,7 +138,7 @@
  >explicit</i
  >
  <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
+ >Click to confirm you are 18+</span
  >
  </span>
  </div>
@@ -171,7 +171,7 @@
  >explicit</i
  >
  <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
+ >Click to confirm you are 18+</span
  >
  </span>
  </div>
@@ -196,6 +196,9 @@
  [torrent]="[
  { res: '360', key: comment.custom_data.guid + '/360.mp4' }
  ]"
+ [shouldPlayInModal]="true"
+ (videoMetadataLoaded)="setVideoDimensions($event)"
+ (mediaModalRequested)="openModal()"
  >
  </m-video>
  </div>
@@ -221,22 +224,21 @@
  >explicit</i
  >
  <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
+ >Click to confirm you are 18+</span
  >
  </span>
  </div>
- <a
- target="_blank"
- [routerLink]="['/media', comment.attachment_guid]"
- *ngIf="comment.attachment_guid"
- >
+ <a *ngIf="comment.attachment_guid">
  <img
  [src]="comment.custom_data[0].src"
- class="mdl-shadow--2dp"
  (error)="
  comment.custom_data[0].src =
  minds.cdn_assets_url + 'assets/logos/medium.png'
  "
+ *ngIf="comment.custom_data"
+ class="mdl-shadow--2dp"
+ (click)="clickedImage()"
+ #batchImage
  />
  </a>
 

src/app/modules/comments/comment/comment.component.ts

@@ -8,6 +8,7 @@ import {
  ChangeDetectionStrategy,
  OnChanges,
  Input,
+ ViewChild,
  ElementRef,
 } from '@angular/core';
 
@@ -22,6 +23,11 @@ import { CommentsListComponent } from '../list/list.component';
 import { TimeDiffService } from '../../../services/timediff.service';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { FeaturesService } from '../../../services/features.service';
+import { MindsVideoComponent } from '../../media/components/video/video.component';
+import { MediaModalComponent } from '../../media/modal/modal.component';
+import isMobile from '../../../helpers/is-mobile';
 
 @Component({
  selector: 'm-comment',
@@ -71,6 +77,11 @@ export class CommentComponentV2 implements OnChanges {
  translationInProgress: boolean;
  translateToggle: boolean = false;
  commentAge$: Observable<number>;
+
+ videoDimensions: Array<any> = null;
+ @ViewChild('player', { static: false }) player: MindsVideoComponent;
+ @ViewChild('batchImage', { static: false }) batchImage: ElementRef;
+
  @Input() canEdit: boolean = false;
  @Input() canDelete: boolean = false;
  @Input() hideToolbar: boolean = false;
@@ -85,7 +96,9 @@ export class CommentComponentV2 implements OnChanges {
  private overlayModal: OverlayModalService,
  private cd: ChangeDetectorRef,
  private timeDiffService: TimeDiffService,
- private el: ElementRef
+ private el: ElementRef,
+ private router: Router,
+ protected featuresService: FeaturesService
  ) {}
 
  ngOnInit() {
@@ -310,4 +323,50 @@ export class CommentComponentV2 implements OnChanges {
  this.cd.detectChanges();
  }
  }
+
+ // * ATTACHMENT MEDIA MODAL * ---------------------------------------------------------------------
+
+ setVideoDimensions($event) {
+ this.videoDimensions = $event.dimensions;
+ this.comment.custom_data.dimensions = this.videoDimensions;
+ }
+
+ setImageDimensions() {
+ const img: HTMLImageElement = this.batchImage.nativeElement;
+ this.comment.custom_data[0].width = img.naturalWidth;
+ this.comment.custom_data[0].height = img.naturalHeight;
+ }
+
+ clickedImage() {
+ const isNotTablet = Math.min(screen.width, screen.height) < 768;
+ const pageUrl = `/media/${this.comment.entity_guid}`;
+
+ if (isMobile() && isNotTablet) {
+ this.router.navigate([pageUrl]);
+ return;
+ }
+
+ if (!this.featuresService.has('media-modal')) {
+ this.router.navigate([pageUrl]);
+ return;
+ } else {
+ if (
+ this.comment.custom_data[0].width === '0' ||
+ this.comment.custom_data[0].height === '0'
+ ) {
+ this.setImageDimensions();
+ }
+ this.openModal();
+ }
+ }
+
+ openModal() {
+ this.comment.modal_source_url = this.router.url;
+
+ this.overlayModal
+ .create(MediaModalComponent, this.comment, {
+ class: 'm-overlayModal--media',
+ })
+ .present();
+ }
 }

src/app/modules/legacy/components/cards/activity/activity.html

@@ -210,9 +210,7 @@
  i18n-title="@@M__COMMON__MATURE_CONTENT"
  >explicit</i
  >
- <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
- >
+ <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm you are 18+</span>
  </span>
  </div>
  <minds-rich-embed [src]="activity" [maxheight]="480"></minds-rich-embed>
@@ -283,9 +281,7 @@
  i18n-title="@@M__COMMON__MATURE_CONTENT"
  >explicit</i
  >
- <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
- >
+ <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm you are 18+</span>
  </span>
  </div>
 
@@ -298,9 +294,9 @@
  [guid]="activity.custom_data.guid"
  [playCount]="activity['play:count']"
  [torrent]="[{ res: '360', key: activity.custom_data.guid + '/360.mp4' }]"
- [isActivity]="true"
+ [shouldPlayInModal]="true"
  (videoMetadataLoaded)="setVideoDimensions($event)"
- (mediaModalRequested)="clickedVideo()"
+ (mediaModalRequested)="openModal()"
  #player
  >
  <video-ads [player]="player" *ngIf="activity.monetized"></video-ads>
@@ -321,9 +317,7 @@
  i18n-title="@@M__COMMON__MATURE_CONTENT"
  >explicit</i
  >
- <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
- >
+ <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm you are 18+</span>
  </span>
  </div>
 
@@ -349,9 +343,7 @@
  i18n-title="@@M__COMMON__MATURE_CONTENT"
  >explicit</i
  >
- <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
- >
+ <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm you are 18+</span>
  </span>
  </div>
  <a class="m-activity--image-link">

src/app/modules/legacy/components/cards/activity/activity.ts

@@ -502,6 +502,7 @@ export class Activity implements OnInit {
 
  setVideoDimensions($event) {
  this.videoDimensions = $event.dimensions;
+ this.activity.custom_data.dimensions = this.videoDimensions;
  }
 
  setImageDimensions() {
@@ -511,18 +512,18 @@ export class Activity implements OnInit {
  }
 
  clickedImage() {
- // Check if is mobile (not tablet)
- if (isMobile() && Math.min(screen.width, screen.height) < 768) {
- this.goToMediaPage();
+ const isNotTablet = Math.min(screen.width, screen.height) < 768;
+ const pageUrl = `/media/${this.activity.entity_guid}`;
+
+ if (isMobile() && isNotTablet) {
+ this.router.navigate([pageUrl]);
  return;
  }
 
  if (!this.featuresService.has('media-modal')) {
- // Non-canary
- this.goToMediaPage();
+ this.router.navigate([pageUrl]);
  return;
  } else {
- // Canary
  if (
  this.activity.custom_data[0].width === '0' ||
  this.activity.custom_data[0].height === '0'
@@ -533,13 +534,6 @@ export class Activity implements OnInit {
  }
  }
 
- clickedVideo() {
- // Already filtered out mobile users/non-canary in video.component.ts
- // So this is just applicable to desktop/tablet in canary and should always show modal
- this.activity.custom_data.dimensions = this.videoDimensions;
- this.openModal();
- }
-
  openModal() {
  this.activity.modal_source_url = this.router.url;
 
@@ -550,10 +544,6 @@ export class Activity implements OnInit {
  .present();
  }
 
- goToMediaPage() {
- this.router.navigate([`/media/${this.activity.entity_guid}`]);
- }
-
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();

src/app/modules/legacy/components/cards/remind/remind.ts

@@ -166,6 +166,7 @@ export class Remind {
 
  setVideoDimensions($event) {
  this.videoDimensions = $event.dimensions;
+ this.activity.custom_data.dimensions = this.videoDimensions;
  }
 
  setImageDimensions() {
@@ -175,14 +176,15 @@ export class Remind {
  }
 
  clickedImage() {
- // Check if is mobile (not tablet)
- if (isMobile() && Math.min(screen.width, screen.height) < 768) {
- this.goToMediaPage();
+ const isNotTablet = Math.min(screen.width, screen.height) < 768;
+ const pageUrl = `/media/${this.activity.entity_guid}`;
+
+ if (isMobile() && isNotTablet) {
+ this.router.navigate([pageUrl]);
  }
 
  if (!this.featuresService.has('media-modal')) {
- // Non-canary
- this.goToMediaPage();
+ this.router.navigate([pageUrl]);
  } else {
  // Canary
  if (
@@ -195,13 +197,6 @@ export class Remind {
  }
  }
 
- clickedVideo() {
- // Already filtered out mobile users/non-canary in video.component.ts
- // So this is just applicable to desktop/tablet in canary and should always show modal
- this.activity.custom_data.dimensions = this.videoDimensions;
- this.openModal();
- }
-
  openModal() {
  this.activity.modal_source_url = this.router.url;
 
@@ -211,8 +206,4 @@ export class Remind {
  })
  .present();
  }
-
- goToMediaPage() {
- this.router.navigate([`/media/${this.activity.entity_guid}`]);
- }
 }

src/app/modules/media/components/video/video.component.spec.ts

@@ -214,7 +214,7 @@ describe('MindsVideo', () => {
  // video.src = 'thisisavideo.mp4';
  const video = new HTMLVideoElementMock();
  comp.playerRef.getPlayer = () => <any>video;
- comp.isActivity = false;
+ comp.shouldPlayInModal = false;
  comp.showControls = true;
 
  fixture.detectChanges(); // re-render

src/app/modules/media/components/video/video.component.ts

@@ -64,9 +64,8 @@ export class MindsVideoComponent implements OnDestroy {
  @Input() log: string | number;
  @Input() muted: boolean = false;
  @Input() poster: string = '';
- @Input() isActivity: boolean = false;
  @Input() isModal: boolean = false;
- // @Input() isTheatre: boolean = false;
+ @Input() shouldPlayInModal: boolean = false;
 
  @Output('finished') finished: EventEmitter<any> = new EventEmitter();
 
@@ -217,7 +216,7 @@ export class MindsVideoComponent implements OnDestroy {
  }
 
  onMouseEnter() {
- if (this.isActivity && this.featuresService.has('media-modal')) {
+ if (this.shouldPlayInModal && this.featuresService.has('media-modal')) {
  return;
  }
  if (this.videoMetadataLoaded) {
@@ -230,7 +229,7 @@ export class MindsVideoComponent implements OnDestroy {
  onMouseLeave() {
  if (
  this.featuresService.has('media-modal') &&
- (this.stageHover || this.isActivity)
+ (this.stageHover || this.shouldPlayInModal)
  ) {
  return;
  }
@@ -440,13 +439,15 @@ export class MindsVideoComponent implements OnDestroy {
  return;
  }
 
- if (isMobile() && Math.min(screen.width, screen.height) < 768) {
+ const isNotTablet = Math.min(screen.width, screen.height) < 768;
+
+ if (isMobile() && isNotTablet) {
  this.isMobile = true;
  this.toggle();
  return;
  }
 
- if (this.isActivity && this.featuresService.has('media-modal')) {
+ if (this.shouldPlayInModal && this.featuresService.has('media-modal')) {
  this.mediaModalRequested.emit();
  return;
  }

src/app/modules/media/media.module.ts

@@ -28,6 +28,7 @@ import { MediaModalComponent } from './modal/modal.component';
 import { ThumbnailSelectorComponent } from './components/thumbnail-selector.component';
 import { CommentsModule } from '../comments/comments.module';
 import { HashtagsModule } from '../hashtags/hashtags.module';
+import { BlogModule } from '../blogs/blog.module';
 
 const routes: Routes = [
  { path: 'media/videos/:filter', component: MediaVideosListComponent },
@@ -60,6 +61,7 @@ const routes: Routes = [
  PostMenuModule,
  VideoModule,
  HashtagsModule,
+ BlogModule,
  ],
  declarations: [
  MediaVideosListComponent,

src/app/modules/media/media.scss

@@ -603,7 +603,9 @@ m-media--grid {
 
 .m-comment__attachment {
  img,
- minds-video {
+ minds-video,
+ m-video {
  max-width: 50%;
+ cursor: pointer;
  }
 }

src/app/modules/media/modal/modal.component.html

@@ -5,7 +5,6 @@
  [style.width]="modalWidth + 'px'"
  [style.height]="stageHeight + 'px'"
  >
- <!-- The stageWrapper is the element that goes into fullscreen -->
  <div
  class="m-mediaModal__stageWrapper"
  [style.width]="stageWidth + 'px'"
@@ -23,8 +22,8 @@
  <div class="m-mediaModal__stage">
  <!-- MEDIA: IMAGE -->
  <div
- class="m-mediaModal__mediaWrapper m-mediaModal__mediaWrapper--image"
- *ngIf="!isVideo"
+ class="m-mediaModal__mediaWrapper"
+ *ngIf="contentType === 'image'"
  [style.width]="mediaWidth + 'px'"
  [style.height]="mediaHeight + 'px'"
  [@slowFadeAnimation]="isLoading ? 'out' : 'in'"
@@ -40,8 +39,8 @@
 
  <!-- MEDIA: VIDEO -->
  <div
- class="m-mediaModal__mediaWrapper m-mediaModal__mediaWrapper--video"
- *ngIf="isVideo"
+ class="m-mediaModal__mediaWrapper"
+ *ngIf="contentType === 'video'"
  [style.width]="mediaWidth + 'px'"
  [style.height]="mediaHeight + 'px'"
  >
@@ -72,6 +71,17 @@
  </m-video>
  </div>
 
+ <!-- MEDIA: BLOG -->
+ <div
+ class="m-mediaModal__mediaWrapper m-mediaModal__mediaWrapper--blog"
+ *ngIf="contentType === 'blog'"
+ [style.width]="mediaWidth + 'px'"
+ [style.height]="mediaHeight + 'px'"
+ [@slowFadeAnimation]="isLoading ? 'out' : 'in'"
+ >
+ <m-blog-view [blog]="entity"></m-blog-view>
+ </div>
+
  <!-- OVERLAY -->
  <div
  class="m-mediaModal__overlayContainer"
@@ -85,7 +95,7 @@
  *ngIf="!isFullscreen"
  >
  <a
- [routerLink]="['/media', entity.entity_guid]"
+ [routerLink]="[pageUrl]"
  (click)="$event.stopPropagation()"
  >{{ title }}</a
  >
@@ -116,7 +126,7 @@
  </a>
  <div class="m-mediaModal__overlayTitleSeparator"></div>
  <a
- [routerLink]="['/media', entity.entity_guid]"
+ [routerLink]="[pageUrl]"
  (click)="$event.stopPropagation()"
  >{{ title }}</a
  >
@@ -212,7 +222,7 @@
  </a>
  <!-- PERMALINK -->
  <a
- [routerLink]="['/newsfeed', permalinkGuid]"
+ [routerLink]="[pageUrl]"
  class="permalink m-ownerBlock__permalink"
  >
  <span class="m-ownerBlock__permalinkDate">{{
@@ -251,12 +261,17 @@
  <div
  class="m-mediaModal__message mdl-card__supporting-text"
  m-read-more
- *ngIf="hasMessage"
+ *ngIf="
+ this.contentType !== 'blog' &&
+ (this.entity.title ||
+ this.entity.message ||
+ this.entity.description)
+ "
  [maxHeightAllowed]="136"
  >
  <span
  class="m-mature-message-content"
- [innerHtml]="message | tags"
+ [innerHtml]="title | tags"
  >
  </span>
  <m-read-more--button></m-read-more--button>
@@ -264,17 +279,17 @@
  <!-- ACTION BUTTONS -->
  <div class="m-mediaModal__actionButtonsWrapper">
  <div class="m-mediaModal__actionButtonsRow m-action-tabs">
- <m-wire-button
- *ngIf="session.getLoggedInUser().guid != entity.owner_guid"
- [object]="entity"
- (done)="wireSubmitted($event)"
- ></m-wire-button>
  <minds-button-thumbs-up
  [object]="entity"
  ></minds-button-thumbs-up>
  <minds-button-thumbs-down
  [object]="entity"
  ></minds-button-thumbs-down>
+ <m-wire-button
+ *ngIf="session.getLoggedInUser().guid != entity.owner_guid"
+ [object]="entity"
+ (done)="wireSubmitted($event)"
+ ></m-wire-button>
  <minds-button-remind [object]="entity"></minds-button-remind>
  </div>
  </div>

src/app/modules/media/modal/modal.component.scss

@@ -70,7 +70,6 @@ m-overlay-modal {
  @include m-theme() {
  box-shadow: 0 12px 24px rgba(themed($m-black-always), 0.3);
  }
- // .m-mediaModal {} // has inline width/height
  }
  }
  }
@@ -88,7 +87,6 @@ m-overlay-modal {
 }
 
 .m-mediaModal__stageWrapper {
- // Has inline width/line-height
  float: left;
  height: 100%;
  min-height: 480px;
@@ -104,23 +102,19 @@ m-overlay-modal {
 .m-mediaModal__stage {
  display: flex;
  align-items: center;
- font-size: 0;
  height: 100%;
  min-height: 402px;
  position: relative;
- text-align: center;
  width: 100%;
 }
 
 .m-mediaModal__mediaWrapper {
- // Has inline width/height
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
 
  .m-mediaModal__media--image,
  m-video {
- // Has inline width/height
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
@@ -158,6 +152,22 @@ m-overlay-modal {
  }
  }
  }
+
+ &.m-mediaModal__mediaWrapper--blog {
+ overflow-x: hidden;
+ overflow-y: scroll;
+ line-height: 1.58 !important;
+ text-align: left;
+
+ .m-blog--image > img {
+ max-width: 100%;
+ }
+
+ .m-actions-block,
+ m-comments__tree {
+ display: none;
+ }
+ }
 }
 
 .m-mediaModal__overlayContainer {
@@ -492,8 +502,14 @@ m-overlay-modal {
  }
 }
 
-.m-mediaModal__message a {
- text-decoration: none;
+.m-mediaModal__message {
+ span {
+ white-space: pre-line;
+ word-wrap: break-word;
+ }
+ a {
+ text-decoration: none;
+ }
 }
 
 .m-mediaModal__actionButtonsWrapper {

src/app/modules/media/view/view.component.html

@@ -68,7 +68,7 @@
  >explicit</i
  >
  <span i18n="@@M__COMMON__CONFIRM_18"
- >Click to confirm your are 18+</span
+ >Click to confirm you are 18+</span
  >
  </span>
  </div>

src/app/modules/notifications/flyout.component.scss

@@ -45,6 +45,7 @@ m-notifications--flyout {
  max-height: calc(95vh - 200px);
  overflow-y: scroll;
  padding: 0;
+ white-space: pre-line;
 
  .mdl-cell--12-col {
  padding: 0;

src/locale/Default.xliff

@@ -996,7 +996,7 @@
  </trans-unit>
  <trans-unit id="MINDS__TOPBAR__FAQ" datatype="html">
  <source>
- FAQ 
+ FAQ
  </source>
  <context-group purpose="location">
  <context context-type="sourcefile">app/common/layout/topbar/topbar.component.ts</context>
@@ -1888,7 +1888,7 @@
  </context-group>
  </trans-unit>
  <trans-unit id="M__COMMON__CONFIRM_18" datatype="html">
- <source>Click to confirm your are 18+</source>
+ <source>Click to confirm you are 18+</source>
  <context-group purpose="location">
  <context context-type="sourcefile">app/modules/legacy/components/cards/activity/activity.ts</context>
  <context context-type="linenumber">86</context>
@@ -3228,7 +3228,7 @@
  </trans-unit>
  <trans-unit id="WIRE__CHANNEL__OVERVIEW__BREAKDOWN_LINK_TOOLTIP" datatype="html">
  <source>
- See a breakdown of all your Wires in your wallet 
+ See a breakdown of all your Wires in your wallet
  </source>
  <context-group purpose="location">
  <context context-type="sourcefile">app/modules/wire/channel/overview/overview.component.ts</context>
@@ -7838,7 +7838,7 @@
  </trans-unit>
  <trans-unit id="MINDS__HOME__HOMEPAGE__LAUNCH_CTA" datatype="html">
  <source>
- We are an open source and decentralized platform 
+ We are an open source and decentralized platform
  for Internet freedom. Get paid in crypto for your contributions
  to the community.
  </source>

src/locale/Minds.es.xliff

@@ -2463,7 +2463,7 @@
  <target>Ver más</target>
  </trans-unit>
  <trans-unit id="M__COMMON__CONFIRM_18">
- <source>Click to confirm your are 18+</source>
+ <source>Click to confirm you are 18+</source>
  <target>Haz clic para confirmar que eres mayor de 18 años</target>
  </trans-unit>
  <trans-unit id="M__COMMON__VIEWS_WITH_COUNT">

src/locale/Minds.vi.xliff

@@ -2539,7 +2539,7 @@
  <target>Xem thêm</target>
  </trans-unit>
  <trans-unit id="M__COMMON__CONFIRM_18">
- <source>Click to confirm your are 18+</source>
+ <source>Click to confirm you are 18+</source>
  <target>Nhấn để xác nhận bạn trên 18 tuổi</target>
  </trans-unit>
  <trans-unit id="M__COMMON__VIEWS_WITH_COUNT">