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

@@ -106,7 +106,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  routerSubscription: Subscription;
 
  @Input('entity') set data(params: MediaModalParams) {
- this.entity = params.entity;
+ this.entity = JSON.parse(JSON.stringify(params.entity)); // deep clone
  this.redirectUrl = params.redirectUrl || null;
  }
 
@@ -139,8 +139,8 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  switch (this.entity.custom_type) {
  case 'video':
  this.contentType = 'video';
- this.entity.width = this.entity.custom_data.width;
- this.entity.height = this.entity.custom_data.height;
+ this.entity.width = this.entity.custom_data.dimensions.width;
+ this.entity.height = this.entity.custom_data.dimensions.height;
  this.entity.thumbnail_src = this.entity.custom_data.thumbnail_src;
  break;
  case 'batch':

src/app/modules/pro/channel/channel.component.html

-<div class="m-pro__channel" *ngIf="channel">
- <div class="m-proChannel__topbar">
- <ng-container *ngIf="!channel.pro_settings.logo_guid; else customLogo">
- <minds-avatar [object]="channel"> </minds-avatar>
- </ng-container>
- <ng-template #customLogo>
- <img
- class="m-proChannelTopbar__logo"
- [src]="channel.pro_settings.logo_image"
- [routerLink]="homeRouterLink"
- />
- </ng-template>
-
- <div class="m-proChannelTopbar__searchBox">
- <m-pro__searchBox
- [(query)]="query"
- (onSearch)="search()"
- (onClearSearch)="clearSearch()"
- ></m-pro__searchBox>
- </div>
-
- <ng-container *ngIf="!collapseNavItems">
- <a
- class="m-proChannelTopbar__navItem"
- [routerLink]="feedRouterLink"
- routerLinkActive="active"
- i18n
- >
- Feed
- </a>
-
- <a
- class="m-proChannelTopbar__navItem"
- [routerLink]="videosRouterLink"
- routerLinkActive="active"
- i18n
- >
- Videos
- </a>
+<div class="m-pro__channel">
+ <ng-container *ngIf="channel">
+ <div class="m-proChannel__topbar">
+ <ng-container *ngIf="!channel.pro_settings.logo_guid; else customLogo">
+ <minds-avatar [object]="channel"> </minds-avatar>
+ </ng-container>
+ <ng-template #customLogo>
+ <img
+ class="m-proChannelTopbar__logo"
+ [src]="channel.pro_settings.logo_image"
+ [routerLink]="homeRouterLink"
+ />
+ </ng-template>
 
- <a
- class="m-proChannelTopbar__navItem"
- [routerLink]="imagesRouterLink"
- routerLinkActive="active"
- i18n
- >
- Images
- </a>
+ <div class="m-proChannelTopbar__searchBox">
+ <m-pro__searchBox
+ [(query)]="query"
+ (onSearch)="search()"
+ (onClearSearch)="clearSearch()"
+ ></m-pro__searchBox>
+ </div>
 
- <a
- class="m-proChannelTopbar__navItem"
- [routerLink]="articlesRouterLink"
- routerLinkActive="active"
- i18n
- >
- Articles
- </a>
+ <ng-container *ngIf="!collapseNavItems">
+ <a
+ class="m-proChannelTopbar__navItem"
+ [routerLink]="feedRouterLink"
+ routerLinkActive="active"
+ i18n
+ >
+ Feed
+ </a>
 
- <a
- class="m-proChannelTopbar__navItem"
- [routerLink]="groupsRouterLink"
- routerLinkActive="active"
- i18n
- >
- Groups
- </a>
+  <a
+  class="m-proChannelTopbar__navItem"
+  [routerLink]="videosRouterLink"
+  routerLinkActive="active"
+  i18n
+  >
+  Videos
+  </a>
 
- <ng-container
- *ngIf="currentUser?.guid != channel.guid; else ownerNavLinks"
- >
- <a class="m-proChannelTopbar__navItem" (click)="wire()" i18n>Wire</a>
+ <a
+ class="m-proChannelTopbar__navItem"
+ [routerLink]="imagesRouterLink"
+ routerLinkActive="active"
+ i18n
+ >
+ Images
+ </a>
 
- <m-pro__subscribeButton></m-pro__subscribeButton>
- </ng-container>
- <ng-template #ownerNavLinks>
  <a
- *ngIf="isProDomain"
  class="m-proChannelTopbar__navItem"
- [href]="proSettingsHref"
- target="root_minds"
+ [routerLink]="articlesRouterLink"
+ routerLinkActive="active"
  i18n
  >
- Settings
+ Articles
  </a>
 
  <a
- *ngIf="!isProDomain"
  class="m-proChannelTopbar__navItem"
- [routerLink]="proSettingsLink"
+ [routerLink]="groupsRouterLink"
+ routerLinkActive="active"
  i18n
  >
- Settings
+ Groups
  </a>
- </ng-template>
- </ng-container>
 
- <m-pro__hamburger-menu
- [(query)]="query"
- (onSearch)="search()"
- (onClearSearch)="clearSearch()"
- ></m-pro__hamburger-menu>
- </div>
+ <ng-container
+ *ngIf="currentUser?.guid != channel.guid; else ownerNavLinks"
+ >
+ <a class="m-proChannelTopbar__navItem" (click)="wire()" i18n>Wire</a>
 
- <div class="m-proChannel__body">
- <div class="m-proChannel__error" *ngIf="error">
- {{ error }}
+ <m-pro__subscribeButton></m-pro__subscribeButton>
+ </ng-container>
+ <ng-template #ownerNavLinks>
+ <a
+ *ngIf="isProDomain"
+ class="m-proChannelTopbar__navItem"
+ [href]="proSettingsHref"
+ target="root_minds"
+ i18n
+ >
+ Settings
+ </a>
+
+ <a
+ *ngIf="!isProDomain"
+ class="m-proChannelTopbar__navItem"
+ [routerLink]="proSettingsLink"
+ i18n
+ >
+ Settings
+ </a>
+ </ng-template>
+ </ng-container>
+
+ <m-pro__hamburger-menu
+ [(query)]="query"
+ (onSearch)="search()"
+ (onClearSearch)="clearSearch()"
+ ></m-pro__hamburger-menu>
  </div>
 
- <router-outlet></router-outlet>
- </div>
+ <div class="m-proChannel__body">
+ <router-outlet></router-outlet>
+ </div>
+
+ <div class="m-proChannel__footer">
+ <m-pro--channel-footer></m-pro--channel-footer>
+ </div>
+ </ng-container>
 
- <div class="m-proChannel__footer">
- <m-pro--channel-footer></m-pro--channel-footer>
+ <div class="m-proChannel__body" *ngIf="error">
+ <div class="m-proChannel__error">
+ {{ error }}
+ </div>
  </div>
 </div>
 

src/app/modules/pro/channel/channel.component.scss

@@ -158,16 +158,15 @@ m-pro--channel {
  }
 
  .m-proChannel__error {
+ width: 100%;
  display: inline-block;
  margin: 16px 0;
  padding: 17px 8px;
- font-size: 40px;
+ font-size: 24px;
  text-align: center;
-
+ text-transform: uppercase;
  background: var(--m-pro--transparent-background-color);
 
- border-radius: 4px;
-
  @include m-theme() {
  color: themed($m-red);
  }

src/app/modules/pro/channel/channel.component.ts

@@ -213,12 +213,23 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
 
  try {
  this.channel = await this.channelService.loadAndAuth(this.username);
+
  this.bindCssVariables();
+ this.shouldOpenWireModal();
  } catch (e) {
  this.error = e.message;
- }
 
- this.shouldOpenWireModal();
+ if (e.message === 'E_NOT_PRO') {
+ if (this.site.isProDomain) {
+ this.error = 'This is not a Minds Pro channel...';
+ } else {
+ this.router.navigate(['/', this.username || ''], {
+ replaceUrl: true,
+ });
+ return;
+ }
+ }
+ }
 
  this.detectChanges();
  }
@@ -228,12 +239,12 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
 
  try {
  this.channel = await this.channelService.reload(this.username);
+
+ this.shouldOpenWireModal();
  } catch (e) {
  this.error = e.message;
  }
 
- this.shouldOpenWireModal();
-
  this.detectChanges();
  }
 

src/app/modules/pro/channel/channel.service.ts

@@ -74,7 +74,7 @@ export class ProChannelService implements OnDestroy {
  this.isLoggedIn$.unsubscribe();
  }
 
- async loadAndAuth(id: string) {
+ async loadAndAuth(id: string): Promise<MindsUser> {
  try {
  this.currentChannel = void 0;
 
@@ -100,9 +100,9 @@ export class ProChannelService implements OnDestroy {
  return this.currentChannel;
  } catch (e) {
  if (e.status === 0) {
- throw new Error('Network error');
+ throw new Error('Connectivity error. Are you offline?');
  } else {
- throw new Error('Error loading channel');
+ throw new Error(e.message || 'There was an issue loading this channel');
  }
  }
  }

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

@@ -117,8 +117,7 @@ export class ProTileComponent {
  }
 
  if (this.getEntityType(this.entity) === 'object:video') {
- this.entity.width = this.videoDimensions.width;
- this.entity.height = this.videoDimensions.height;
+ this.entity.dimensions = this.videoDimensions;
  } else if (this.getEntityType(this.entity) === 'object:image') {
  // Image
  // Set image dimensions if they're not already there