Commit 855a4229 authored by Olivia Madrid's avatar Olivia Madrid

(feat): more linting insanity

1 merge request!530WIP: Agnostic media modal
Pipeline #79363917 failed with stages
in 5 minutes and 16 seconds
......@@ -24,7 +24,7 @@ export class BlogCard {
public attachment: AttachmentService,
private router: Router,
protected featuresService: FeaturesService,
private overlayModal: OverlayModalService,
private overlayModal: OverlayModalService
) {
this.minds = window.Minds;
}
......@@ -36,7 +36,9 @@ export class BlogCard {
}
showMediaModal() {
const route = this.blog.route ? `/${this.blog.route}` : `/blog/view${this.blog.guid}`;
const route = this.blog.route
? `/${this.blog.route}`
: `/blog/view${this.blog.guid}`;
const isNotTablet = Math.min(screen.width, screen.height) < 768;
if (isMobile() && isNotTablet) {
......@@ -50,10 +52,11 @@ export class BlogCard {
} else {
this.blog.modal_source_url = this.router.url;
this.overlayModal.create(MediaModalComponent, this.blog, {
class: 'm-overlayModal--media'
}).present();
this.overlayModal
.create(MediaModalComponent, this.blog, {
class: 'm-overlayModal--media',
})
.present();
}
}
}
......@@ -9,10 +9,9 @@ import {
OnChanges,
Input,
ViewChild,
ElementRef
ElementRef,
} from '@angular/core';
import { Session } from '../../../services/session';
import { Upload } from '../../../services/api/upload';
import { Client } from '../../../services/api/client';
......@@ -99,7 +98,7 @@ export class CommentComponent implements OnChanges {
private cd: ChangeDetectorRef,
private router: Router,
private timeDiffService: TimeDiffService,
protected featuresService: FeaturesService,
protected featuresService: FeaturesService
) {}
ngOnInit() {
......@@ -342,7 +341,10 @@ export class CommentComponent implements OnChanges {
this.router.navigate([pageUrl]);
return;
} else {
if (this.comment.custom_data[0].width === '0' || this.comment.custom_data[0].height === '0') {
if (
this.comment.custom_data[0].width === '0' ||
this.comment.custom_data[0].height === '0'
) {
this.setImageDimensions();
}
this.openModal();
......@@ -352,9 +354,10 @@ export class CommentComponent implements OnChanges {
openModal() {
this.comment.modal_source_url = this.router.url;
this.overlayModal.create(MediaModalComponent, this.comment, {
class: 'm-overlayModal--media'
}).present();
this.overlayModal
.create(MediaModalComponent, this.comment, {
class: 'm-overlayModal--media',
})
.present();
}
}
......@@ -98,7 +98,7 @@ export class CommentComponentV2 implements OnChanges {
private timeDiffService: TimeDiffService,
private el: ElementRef,
private router: Router,
protected featuresService: FeaturesService,
protected featuresService: FeaturesService
) {}
ngOnInit() {
......@@ -350,7 +350,10 @@ export class CommentComponentV2 implements OnChanges {
this.router.navigate([pageUrl]);
return;
} else {
if (this.comment.custom_data[0].width === '0' || this.comment.custom_data[0].height === '0') {
if (
this.comment.custom_data[0].width === '0' ||
this.comment.custom_data[0].height === '0'
) {
this.setImageDimensions();
}
this.openModal();
......@@ -360,9 +363,10 @@ export class CommentComponentV2 implements OnChanges {
openModal() {
this.comment.modal_source_url = this.router.url;
this.overlayModal.create(MediaModalComponent, this.comment, {
class: 'm-overlayModal--media'
}).present();
this.overlayModal
.create(MediaModalComponent, this.comment, {
class: 'm-overlayModal--media',
})
.present();
}
}
......@@ -210,9 +210,7 @@
i18n-title="@@M__COMMON__MATURE_CONTENT"
>explicit</i
>
<span i18n="@@M__COMMON__CONFIRM_18"
>Click to confirm you 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 you are 18+</span
>
<span i18n="@@M__COMMON__CONFIRM_18">Click to confirm you are 18+</span>
</span>
</div>
......@@ -321,9 +317,7 @@
i18n-title="@@M__COMMON__MATURE_CONTENT"
>explicit</i
>
<span i18n="@@M__COMMON__CONFIRM_18"
>Click to confirm you 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 you are 18+</span
>
<span i18n="@@M__COMMON__CONFIRM_18">Click to confirm you are 18+</span>
</span>
</div>
<a class="m-activity--image-link">
......
......@@ -90,7 +90,10 @@
>
<div class="m-mediaModal__overlayTitleWrapper">
<!-- TITLE -->
<span class="m-mediaModal__overlayTitle m-mediaModal__overlayTitle--notFullscreen" *ngIf="!isFullscreen">
<span
class="m-mediaModal__overlayTitle m-mediaModal__overlayTitle--notFullscreen"
*ngIf="!isFullscreen"
>
<a
[routerLink]="[pageUrl]"
(click)="$event.stopPropagation()"
......@@ -258,7 +261,12 @@
<div
class="m-mediaModal__message mdl-card__supporting-text"
m-read-more
*ngIf=" this.contentType !== 'blog' && (this.entity.title || this.entity.message || this.entity.description)"
*ngIf="
this.contentType !== 'blog' &&
(this.entity.title ||
this.entity.message ||
this.entity.description)
"
[maxHeightAllowed]="136"
>
<span
......
......@@ -64,7 +64,6 @@ m-overlay-modal {
display: inline-block;
text-align: left;
.m-mediaModal__theater {
position: relative;
z-index: 9999996;
......@@ -164,14 +163,13 @@ m-overlay-modal {
max-width: 100%;
}
.m-actions-block, m-comments__tree {
.m-actions-block,
m-comments__tree {
display: none;
}
}
}
.m-mediaModal__overlayContainer {
left: 0;
line-height: 1.28;
......
......@@ -117,7 +117,10 @@ export class MediaModalComponent implements OnInit, OnDestroy {
switch (this.entity.type) {
case 'activity':
this.title = this.entity.message || this.entity.title || `${this.entity.ownerObj.name}'s post`;
this.title =
this.entity.message ||
this.entity.title ||
`${this.entity.ownerObj.name}'s post`;
this.entity.guid = this.entity.entity_guid || this.entity.guid;
this.thumbnail = `${this.minds.cdn_url}fs/v1/thumbnail/${this.entity.entity_guid}/xlarge`;
switch (this.entity.custom_type) {
......@@ -146,8 +149,13 @@ export class MediaModalComponent implements OnInit, OnDestroy {
}
break;
case 'comment':
this.contentType = this.entity.custom_type === 'video' ? 'video' : 'image';
this.title = this.entity.message || this.entity.title || this.entity.description || `${this.entity.ownerObj.name}'s post`;
this.contentType =
this.entity.custom_type === 'video' ? 'video' : 'image';
this.title =
this.entity.message ||
this.entity.title ||
this.entity.description ||
`${this.entity.ownerObj.name}'s post`;
this.entity.guid = this.entity.attachment_guid;
this.entity.entity_guid = this.entity.attachment_guid;
this.thumbnail = `${this.minds.cdn_url}fs/v1/thumbnail/${this.entity.attachment_guid}/xlarge`;
......@@ -157,7 +165,9 @@ export class MediaModalComponent implements OnInit, OnDestroy {
if (this.contentType !== 'blog') {
this.pageUrl = `/media/${this.entity.entity_guid}`;
} else {
this.pageUrl = this.entity.route ? `/${this.entity.route}` : `/blog/view${this.entity.guid}`;
this.pageUrl = this.entity.route
? `/${this.entity.route}`
: `/blog/view${this.entity.guid}`;
}
this.boosted = this.entity.boosted || this.entity.p2p_boosted || false;
......@@ -169,9 +179,12 @@ export class MediaModalComponent implements OnInit, OnDestroy {
this.ownerIconTime = this.entity.ownerObj.icontime;
}
this.isTablet = isMobileOrTablet() && Math.min(screen.width, screen.height) >= 768;
this.isTablet =
isMobileOrTablet() && Math.min(screen.width, screen.height) >= 768;
this.analyticsService.send('pageview', {url: `${this.pageUrl}?ismodal=true`});
this.analyticsService.send('pageview', {
url: `${this.pageUrl}?ismodal=true`,
});
// * LOCATION & ROUTING * -----------------------------------------------------------------------------------
// Change the url to point to media page so user can easily share link
......@@ -197,7 +210,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
// * DIMENSION CALCULATIONS * ---------------------------------------------------------------------
switch (this.contentType){
switch (this.contentType) {
case 'video':
this.entityWidth = this.entity.custom_data.dimensions.width;
this.entityHeight = this.entity.custom_data.dimensions.height;
......@@ -223,15 +236,22 @@ export class MediaModalComponent implements OnInit, OnDestroy {
calculateDimensions() {
if (!this.isFullscreen) {
if (this.contentType === 'blog') {
this.mediaHeight = Math.max(this.minStageHeight, window.innerHeight - this.padding * 2);
this.mediaWidth = Math.max(this.minStageWidth, window.innerWidth - this.contentWidth - this.padding * 2);
this.mediaHeight = Math.max(
this.minStageHeight,
window.innerHeight - this.padding * 2
);
this.mediaWidth = Math.max(
this.minStageWidth,
window.innerWidth - this.contentWidth - this.padding * 2
);
this.stageHeight = this.mediaHeight;
this.stageWidth = this.mediaWidth;
this.modalWidth = this.stageWidth + this.contentWidth;
if (this.isLoading) { this.isLoaded(); }
if (this.isLoading) {
this.isLoaded();
}
return;
}
......@@ -239,7 +259,10 @@ export class MediaModalComponent implements OnInit, OnDestroy {
this.setHeightsAsTallAsPossible();
// After heights are set, check that scaled width isn't too wide or narrow
this.maxStageWidth = Math.max(window.innerWidth - this.contentWidth + (this.padding * 2), this.minStageWidth);
this.maxStageWidth = Math.max(
window.innerWidth - this.contentWidth + this.padding * 2,
this.minStageWidth
);
if (this.mediaWidth >= this.maxStageWidth) {
// Too wide :(
......@@ -275,14 +298,16 @@ export class MediaModalComponent implements OnInit, OnDestroy {
return;
case 'image':
// For images, set mediaHeight as tall as possible but not taller than instrinsic height
this.mediaHeight = this.entityHeight < windowHeight ? this.entityHeight : windowHeight;
this.mediaHeight =
this.entityHeight < windowHeight ? this.entityHeight : windowHeight;
break;
case 'video':
// It's ok if videos are taller than intrinsic height
this.mediaHeight = windowHeight;
}
this.mediaWidth = this.contentType === 'blog' ? windowWidth : this.scaleWidth();
this.mediaWidth =
this.contentType === 'blog' ? windowWidth : this.scaleWidth();
if (this.mediaWidth > windowWidth) {
// Width was too wide, need to rescale heights so width fits
......
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