src/app/common/common.module.ts

@@ -112,6 +112,7 @@ import { SiteService } from './services/site.service';
 import { MarketingComponent } from './components/marketing/marketing.component';
 import { MarketingFooterComponent } from './components/marketing/footer.component';
 import { ToggleComponent } from './components/toggle/toggle.component';
+import { MarketingAsFeaturedInComponent } from './components/marketing/as-featured-in.component';
 
 @NgModule({
  imports: [
@@ -213,6 +214,7 @@ import { ToggleComponent } from './components/toggle/toggle.component';
  ToggleComponent,
  MarketingComponent,
  MarketingFooterComponent,
+ MarketingAsFeaturedInComponent,
  ],
  exports: [
  MINDS_PIPES,
@@ -302,6 +304,7 @@ import { ToggleComponent } from './components/toggle/toggle.component';
  DraggableListComponent,
  ToggleComponent,
  MarketingComponent,
+ MarketingAsFeaturedInComponent,
  ],
  providers: [
  SiteService,

src/app/common/components/editors/plugins/embed-image.plugin.ts

@@ -247,7 +247,9 @@ export class EmbedImage {
 
  if ($image.tagName === 'SPAN') {
  $image = $image.parentNode.querySelector('img');
- } else if ($image.tagName !== 'IMG') {
+ }
+
+ if (!$image || $image.tagName !== 'IMG') {
  return;
  }
 

src/app/common/components/marketing/as-featured-in.component.html

+<div class="m-marketing__asFeaturedIn">
+ <div class="m-marketingAsFeaturedIn__title" i18n>
+ As featured in
+ </div>
+
+ <ul>
+ <li class="m-marketingAsFeaturedIn__item--bigger">
+ <img [src]="cdnAssetsUrl + 'assets/marketing/bbc.png'" alt="BBC" />
+ </li>
+ <li>
+ <img
+ [src]="cdnAssetsUrl + 'assets/marketing/foxnews.png'"
+ alt="Fox News"
+ />
+ </li>
+ <li>
+ <img [src]="cdnAssetsUrl + 'assets/marketing/forbes.png'" alt="Forbes" />
+ </li>
+ <li>
+ <img
+ [src]="cdnAssetsUrl + 'assets/marketing/techcrunch.png'"
+ alt="TechCrunch"
+ />
+ </li>
+ <li>
+ <img
+ [src]="cdnAssetsUrl + 'assets/marketing/reuters.png'"
+ alt="Reuters"
+ />
+ </li>
+ <li>
+ <img [src]="cdnAssetsUrl + 'assets/marketing/wired.png'" alt="Wired" />
+ </li>
+ <li>
+ <img
+ [src]="cdnAssetsUrl + 'assets/marketing/tjre.png'"
+ alt="The Joe Rogan Experience"
+ />
+ </li>
+ </ul>
+</div>

src/app/common/components/marketing/as-featured-in.component.scss

+@import '../../../foundation/grid-values';
+
+.m-marketing__asFeaturedIn {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 1084px;
+ margin: 40px auto 0;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ display: block;
+ margin: 20px 0 45px;
+ padding: 0 12px;
+ }
+
+ .m-marketingAsFeaturedIn__title {
+ margin-right: 96px;
+
+ @include m-theme() {
+ color: themed($m-grey-400);
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ text-align: center;
+ margin: 0 0 20px;
+ }
+ }
+
+ ul {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ > li {
+ img {
+ width: 55px;
+ height: 55px;
+ object-fit: contain;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ width: 40px;
+ height: 40px;
+ }
+ }
+
+ &.m-marketingAsFeaturedIn__item--bigger {
+ img {
+ width: 96px;
+ height: 96px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ width: 40px;
+ height: 40px;
+ }
+ }
+ }
+ }
+ }
+}

src/app/common/components/marketing/as-featured-in.component.ts

+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+ selector: 'm-marketing__asFeaturedIn',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: 'as-featured-in.component.html',
+})
+export class MarketingAsFeaturedInComponent {
+ readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+}

src/app/common/components/marketing/marketing.component.html

@@ -3,6 +3,8 @@
  <ng-content select=".m-marketing__main"></ng-content>
  </div>
 
+ <ng-content select="[slot=2]"></ng-content>
+
  <div class="m-marketing__sep" *ngIf="bodyWrapper?.children?.length > 0"></div>
 
  <div class="m-marketing__extrasWrapper" #bodyWrapper>

src/app/foundation/positional.scss

+.mf-jumpAnchor {
+ // used for element.scrollIntoView targets
+ position: relative;
+ top: 0;
+ width: 0;
+ height: 0;
+ visibility: hidden;
+
+ m-body.has-v2-navbar & {
+ top: -52px;
+ }
+}

src/app/helpers/currency.ts

+export type Currency = 'usd' | 'tokens';
+
+export const tokenRate = 4;
+
+// TODO: Move to an async service
+
+export default function currency(tokens: number, currency: Currency): string {
+ switch (currency) {
+ case 'usd':
+ return `$${(tokens / tokenRate).toLocaleString()}`;
+ case 'tokens':
+ return `${tokens.toLocaleString()} tokens`;
+ }
+}

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

@@ -184,7 +184,10 @@
  [src]="[
  {
  res: '360',
- uri: 'api/v1/media/' + comment.custom_data.guid + '/play',
+ uri:
+ 'api/v1/media/' +
+ comment.custom_data.guid +
+ '/play?s=comment',
  type: 'video/mp4'
  }
  ]"

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

@@ -296,7 +296,7 @@
  height="300px"
  [muted]="false"
  [poster]="activity.custom_data.thumbnail_src"
- [src]="[{ 'res': '360', 'uri': 'api/v1/media/' + activity.custom_data.guid + '/play', 'type': 'video/mp4' }]"
+ [src]="[{ 'res': '360', 'uri': 'api/v1/media/' + activity.custom_data.guid + '/play?s=activity', 'type': 'video/mp4' }]"
  [guid]="activity.custom_data.guid"
  [playCount]="activity['play:count']"
  [torrent]="[{ res: '360', key: activity.custom_data.guid + '/360.mp4' }]"

src/app/modules/media/components/video/players/direct-http.component.ts

@@ -115,11 +115,11 @@ export class MindsVideoDirectHttpPlayer
  return this.player.nativeElement;
  }
 
- play() {
+ async play() {
  const player = this.getPlayer();
 
  try {
- player.play();
+ await player.play();
  } catch (e) {
  console.log(e);
  }
@@ -135,11 +135,11 @@ export class MindsVideoDirectHttpPlayer
  }
  }
 
- toggle() {
+ async toggle() {
  const player = this.getPlayer();
 
  if (player.paused) {
- this.play();
+ await this.play();
  } else {
  this.pause();
  }

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

 <ng-container *ngIf="current">
  <m-video--direct-http-player
- *ngIf="current.type === 'direct-http'"
+ *ngIf="current.type === 'direct-http' || true"
  class="m-video--player"
  [src]="current.src"
  [poster]="poster"
@@ -18,7 +18,7 @@
  ></m-video--direct-http-player>
 
  <m-video--torrent-player
- *ngIf="current.type === 'torrent'"
+ *ngIf="current.type === 'torrent' && false"
  class="m-video--player"
  [src]="current.src"
  [poster]="poster"
@@ -39,7 +39,7 @@
  <i
  *ngIf="
  (!playerRef.isPlaying() && !playerRef.isLoading()) ||
- (isActivity && metadataLoaded && !playerRef.isPlaying())
+ (shouldPlayInModal && !playerRef.isPlaying())
  "
  class="material-icons minds-video-play-icon"
  (click)="clickedVideo()"

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

@@ -435,9 +435,9 @@ export class MindsVideoComponent implements OnDestroy {
  }
 
  clickedVideo() {
- if (!this.metadataLoaded) {
- return;
- }
+ // if (!this.metadataLoaded) {
+ //  return;
+ // }
 
  const isNotTablet = Math.min(screen.width, screen.height) < 768;
 

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

@@ -56,7 +56,7 @@
  [src]="[
  {
  res: '360',
- uri: 'api/v1/media/' + entity.entity_guid + '/play',
+ uri: 'api/v1/media/' + entity.entity_guid + '/play?s=modal',
  type: 'video/mp4'
  }
  ]"

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

@@ -170,6 +170,11 @@ m-overlay-modal {
  m-video {
  position: static;
 
+ video {
+ width: 100%;
+ height: 100%;
+ }
+
  .minds-video-bar-full {
  .m-video--progress-bar {
  padding-right: 0;

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

@@ -151,8 +151,12 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  switch (this.entity.custom_type) {
  case 'video':
  this.contentType = 'video';
- this.entity.width = this.entity.custom_data.dimensions.width;
- this.entity.height = this.entity.custom_data.dimensions.height;
+ this.entity.width = this.entity.custom_data.dimensions
+ ? this.entity.custom_data.dimensions.width
+ : 1280;
+ this.entity.height = this.entity.custom_data.dimensions
+ ? this.entity.custom_data.dimensions.height
+ : 720;
  this.entity.thumbnail_src = this.entity.custom_data.thumbnail_src;
  break;
  case 'batch':

src/app/modules/messenger/sounds/service.ts

@@ -13,7 +13,7 @@ export class MessengerSounds {
  };
 
  play(sound: string) {
- if (this.canPlay()) this.sounds[sound].play();
+ // if (this.canPlay()) this.sounds[sound].play();
  }
 
  canPlay() {

src/app/modules/pro/channel/tiles/media/tile.component.html

@@ -12,7 +12,7 @@
  [src]="[
  {
  res: '360',
- uri: 'api/v1/media/' + entity.guid + '/play',
+ uri: 'api/v1/media/' + entity.guid + '/play?s=tile',
  type: 'video/mp4'
  }
  ]"

src/app/modules/upgrades/buy-tokens.component.scss

@@ -7,8 +7,8 @@ m-upgrades__buyTokens {
 
  .m-upgradesBuyTokens__wrapper {
  padding: 40px 60px 60px;
- background: url('http://placekitten.com/591/362') no-repeat right center
- #726061;
+ background: url('<%= APP_CDN %>/assets/marketing/buytokens_bg.jpg')
+ no-repeat right center #726061;
  background-size: contain;
  color: #ffffff;
 

src/app/modules/upgrades/buy-tokens.component.ts

@@ -5,4 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'buy-tokens.component.html',
 })
-export class BuyTokensComponent {}
+export class BuyTokensComponent {
+ readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+}

src/app/modules/upgrades/upgrade-options.component.html

@@ -4,7 +4,7 @@
 
  <div class="m-upgradesUpgradeOptionsHeader__toggleContainer">
  <div class="m-upgradesUpgradeOptionsHeader__toggle">
- <span class="">Yearly</span>
+ <span>Yearly</span>
  <span
  ><m-toggle
  [(mModel)]="interval"
@@ -12,10 +12,10 @@
  rightValue="monthly"
  ></m-toggle
  ></span>
- <span class="">Monthly</span>
+ <span>Monthly</span>
  </div>
  <div class="m-upgradesUpgradeOptionsHeader__toggle">
- <span class="">USD</span>
+ <span>USD</span>
  <span
  ><m-toggle
  [(mModel)]="currency"
@@ -23,7 +23,7 @@
  rightValue="tokens"
  ></m-toggle
  ></span>
- <span class="">Tokens</span>
+ <span>Tokens</span>
  </div>
  </div>
  </div>
@@ -53,24 +53,33 @@
  </ul>
 
  <p>
- <a class="m-upgradesUpgradeOptionsPlan__moreInfo" routerLink="/plus"
- >More info</a
+ <a
+ class="m-upgradesUpgradeOptionsPlan__moreInfo"
+ [routerLink]="plusRouterLink"
  >
+ More info
+ </a>
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
  <p class="m-upgradesUpgradeOptionsPlan__pricing">
- <span>$5</span> per month
+ <span>{{ plusPricing.amount }}</span> per month
  </p>
 
- <p class="m-upgradesUpgradeOptionsPlan__offer">
- $7 per month
+ <p
+ class="m-upgradesUpgradeOptionsPlan__offer"
+ *ngIf="plusPricing.offerFrom"
+ >
+ {{ plusPricing.offerFrom }} per month
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
- <a class="mf-button m-upgradesUpgradeOptionsPlan__action">
+ <a
+ class="mf-button m-upgradesUpgradeOptionsPlan__action"
+ [routerLink]="plusRouterLink"
+ >
  Upgrade to Plus
  </a>
  </div>
@@ -99,24 +108,33 @@
  </ul>
 
  <p>
- <a class="m-upgradesUpgradeOptionsPlan__moreInfo" routerLink="/pro"
- >More info</a
+ <a
+ class="m-upgradesUpgradeOptionsPlan__moreInfo"
+ [routerLink]="proRouterLink"
  >
+ More info
+ </a>
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
  <p class="m-upgradesUpgradeOptionsPlan__pricing">
- <span>$50</span> per month
+ <span>{{ proPricing.amount }}</span> per month
  </p>
 
- <p class="m-upgradesUpgradeOptionsPlan__offer">
- $60 per month
+ <p
+ class="m-upgradesUpgradeOptionsPlan__offer"
+ *ngIf="proPricing.offerFrom"
+ >
+ {{ proPricing.offerFrom }} per month
  </p>
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
- <a class="mf-button m-upgradesUpgradeOptionsPlan__action">
+ <a
+ class="mf-button m-upgradesUpgradeOptionsPlan__action"
+ [routerLink]="proRouterLink"
+ >
  Upgrade to Pro
  </a>
  </div>
@@ -145,7 +163,9 @@
  </ul>
 
  <p>
- <a class="m-upgradesUpgradeOptionsPlan__moreInfo" href="#">More info</a>
+ <a class="m-upgradesUpgradeOptionsPlan__moreInfo" routerLink="/node">
+ More info
+ </a>
  </p>
  </div>
 
@@ -156,7 +176,10 @@
  </div>
 
  <div class="m-upgradesUpgradeOptionsPlan__row">
- <a class="mf-button m-upgradesUpgradeOptionsPlan__action">
+ <a
+ class="mf-button m-upgradesUpgradeOptionsPlan__action"
+ routerLink="/node"
+ >
  Contact us
  </a>
  </div>

src/app/modules/upgrades/upgrade-options.component.ts

 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import currency, { Currency } from '../../helpers/currency';
+
+type UpgradeOptionInterval = 'yearly' | 'monthly';
+
+type UpgradeOptionCurrency = Currency;
 
 @Component({
  selector: 'm-upgrades__upgradeOptions',
@@ -6,6 +11,43 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  templateUrl: 'upgrade-options.component.html',
 })
 export class UpgradeOptionsComponent {
- interval: string = 'yearly';
- currency: string = 'tokens';
+ interval: UpgradeOptionInterval = 'yearly';
+
+ currency: UpgradeOptionCurrency = 'tokens';
+
+ get plusRouterLink() {
+ return ['/plus', { i: this.interval, c: this.currency }];
+ }
+
+ get proRouterLink() {
+ return ['/pro', { i: this.interval, c: this.currency }];
+ }
+
+ get plusPricing() {
+ if (this.interval === 'yearly') {
+ return {
+ amount: currency(20, this.currency),
+ offerFrom: currency(28, this.currency),
+ };
+ } else if (this.interval === 'monthly') {
+ return {
+ amount: currency(28, this.currency),
+ offerFrom: null,
+ };
+ }
+ }
+
+ get proPricing() {
+ if (this.interval === 'yearly') {
+ return {
+ amount: currency(200, this.currency),
+ offerFrom: currency(240, this.currency),
+ };
+ } else if (this.interval === 'monthly') {
+ return {
+ amount: currency(240, this.currency),
+ offerFrom: null,
+ };
+ }
+ }
 }

src/app/modules/upgrades/upgrades.component.html

@@ -2,7 +2,7 @@
  <div class="m-marketing__main m-marketing__section--style-1">
  <div class="m-marketing__wrapper">
  <h1 class="m-marketing--title__bigger-title" i18n>
- Upgrade you Minds experience
+ Upgrade your Minds experience
  </h1>
 
  <p class="m-marketing__description" i18n>
@@ -16,13 +16,20 @@
  <li>Aperiam laudantium nemo non soluta.</li>
  </ul>
 
- <a class="mf-button mf-button--hollow m-marketing--hideMobile" i18n>
+ <a
+ class="mf-button mf-button--hollow m-marketing--hideMobile"
+ (click)="upgradeNow(); $event.preventDefault()"
+ i18n
+ >
  Upgrade now
  </a>
  </div>
  </div>
 
+ <m-marketing__asFeaturedIn slot="2"></m-marketing__asFeaturedIn>
+
  <div class="m-marketing__extras">
+ <div class="mf-jumpAnchor" #upgradeOptionsAnchor></div>
  <m-upgrades__upgradeOptions></m-upgrades__upgradeOptions>
  </div>
 

src/app/modules/upgrades/upgrades.component.ts

-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ ElementRef,
+ ViewChild,
+} from '@angular/core';
 
 @Component({
  selector: 'm-upgrades',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'upgrades.component.html',
 })
-export class UpgradesComponent {}
+export class UpgradesComponent {
+ @ViewChild('upgradeOptionsAnchor', { static: false })
+ readonly upgradeOptionsAnchor: ElementRef;
+
+ upgradeNow() {
+ if (this.upgradeOptionsAnchor.nativeElement) {
+ this.upgradeOptionsAnchor.nativeElement.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ inline: 'nearest',
+ });
+ }
+ }
+}