(WIP): Media modal - handle video and more (c1965f0f) · Commits · Minds / Minds Frontend

src/app/modules/blockchain/marketing/marketing.component.scss

+1 −1

Original line number	Original line	Diff line number	Diff line
	@@ -155,7 +155,7 @@ m-blockchain--marketing {

	m-video .minds-video-play-icon {		m-video .minds-video-play-icon {
	@include m-theme(){		@include m-theme(){
	text-shadow: 0 0 3px themed($m-grey-900);		text-shadow: 0 0 3px rgba(themed($m-black-always), 0.6);
	}		}
	}		}

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

+4 −3

Original line number	Original line	Diff line number	Diff line
	@@ -173,7 +173,8 @@
	[guid]="activity.custom_data.guid"		[guid]="activity.custom_data.guid"
	[playCount]="activity['play:count']"		[playCount]="activity['play:count']"
	[torrent]="[{ res: '360', key: activity.custom_data.guid + '/360.mp4' }]"		[torrent]="[{ res: '360', key: activity.custom_data.guid + '/360.mp4' }]"
	(triggerMediaModal)="showMediaModal('video')"		(requestedMediaModal)="showMediaModal()"
			(videoMetadataLoaded)="setVideoDimensions($event)"
	#player>		#player>
	<video-ads [player]="player" *ngIf="activity.monetized"></video-ads>		<video-ads [player]="player" *ngIf="activity.monetized"></video-ads>
	</m-video>		</m-video>
	@@ -190,7 +191,7 @@
	</span>		</span>
	</div>		</div>

	<a class="m-activity--image-link" (click)="showMediaModal('image')">		<a class="m-activity--image-link">
	<img [src]="activity.thumbnail_src" (error)="activity.thumbnail_src = null">		<img [src]="activity.thumbnail_src" (error)="activity.thumbnail_src = null">
	</a>		</a>
	</div>		</div>
	@@ -205,7 +206,7 @@
	<span i18n="@@M__COMMON__CONFIRM_18">Click to confirm your are 18+</span>		<span i18n="@@M__COMMON__CONFIRM_18">Click to confirm your are 18+</span>
	</span>		</span>
	</div>		</div>
	<a class="m-activity--image-link" (click)="showMediaModal('image')">		<a class="m-activity--image-link" (click)="showMediaModal()">
	<img [src]="activity.custom_data[0].src" style="width:100%"		<img [src]="activity.custom_data[0].src" style="width:100%"
	(error)="activity.custom_data[0].src = minds.cdn_assets_url + 'assets/logos/placeholder-bulb.jpg'"		(error)="activity.custom_data[0].src = minds.cdn_assets_url + 'assets/logos/placeholder-bulb.jpg'"
	*ngIf="activity.custom_data"		*ngIf="activity.custom_data"

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

+9 −9

Original line number	Original line	Diff line number	Diff line
	@@ -11,7 +11,6 @@ import {
	Injector,		Injector,
	} from '@angular/core';		} from '@angular/core';

	import { Location } from '@angular/common';
	import { Client } from '../../../../../services/api';		import { Client } from '../../../../../services/api';
	import { Session } from '../../../../../services/session';		import { Session } from '../../../../../services/session';
	import { AttachmentService } from '../../../../../services/attachment';		import { AttachmentService } from '../../../../../services/attachment';
	@@ -113,7 +112,6 @@ export class Activity implements OnInit {
	private cd: ChangeDetectorRef,		private cd: ChangeDetectorRef,
	private entitiesService: EntitiesService,		private entitiesService: EntitiesService,
	private router: Router,		private router: Router,
	private location: Location,
	protected blockListService: BlockListService,		protected blockListService: BlockListService,
	protected activityAnalyticsOnViewService: ActivityAnalyticsOnViewService,		protected activityAnalyticsOnViewService: ActivityAnalyticsOnViewService,
	protected newsfeedService: NewsfeedService,		protected newsfeedService: NewsfeedService,
	@@ -436,12 +434,11 @@ export class Activity implements OnInit {
	this.activity.mature_visibility = !this.activity.mature_visibility;		this.activity.mature_visibility = !this.activity.mature_visibility;
	}		}

	detectChanges() {		setVideoDimensions($event) {
	this.cd.markForCheck();		this.activity.custom_data.dimensions = $event.dimensions;
	this.cd.detectChanges();
	}		}

	showMediaModal(subtype: string) {		showMediaModal() {
	// Mobile users go to media page instead of modal		// Mobile users go to media page instead of modal
	if (isMobile()) {		if (isMobile()) {
	this.router.navigate([`/media/${this.activity.entity_guid}`]);		this.router.navigate([`/media/${this.activity.entity_guid}`]);
	@@ -449,11 +446,14 @@ export class Activity implements OnInit {

	this.activity.modal_source_url = this.router.url;		this.activity.modal_source_url = this.router.url;

	// 'image' or 'video'
	this.activity.modal_subtype = subtype;

	this.overlayModal.create(MediaModalComponent, this.activity, {		this.overlayModal.create(MediaModalComponent, this.activity, {
	class: 'm-overlayModal--media'		class: 'm-overlayModal--media'
	}).present();		}).present();

			}

			detectChanges() {
			this.cd.markForCheck();
			this.cd.detectChanges();
	}		}
	}		}

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

+19 −19

Original line number	Original line	Diff line number	Diff line
	@@ -2,9 +2,7 @@ import {
	ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output,		ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output,
	ViewChild		ViewChild
	} from '@angular/core';		} from '@angular/core';
	import { Router } from '@angular/router';
	import { MindsPlayerInterface } from './player.interface';		import { MindsPlayerInterface } from './player.interface';
	import isMobile from '../../../../../helpers/is-mobile';

	@Component({		@Component({
	moduleId: module.id,		moduleId: module.id,
	@@ -38,19 +36,24 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
	@Output() onPause: EventEmitter<HTMLVideoElement> = new EventEmitter();		@Output() onPause: EventEmitter<HTMLVideoElement> = new EventEmitter();
	@Output() onEnd: EventEmitter<HTMLVideoElement> = new EventEmitter();		@Output() onEnd: EventEmitter<HTMLVideoElement> = new EventEmitter();
	@Output() onError: EventEmitter<{ player: HTMLVideoElement, e }> = new EventEmitter();		@Output() onError: EventEmitter<{ player: HTMLVideoElement, e }> = new EventEmitter();
	@Output() triggerMediaModal: EventEmitter<any> = new EventEmitter();		@Output() onCanPlay: EventEmitter<any> = new EventEmitter();
			@Output() onLoadedMetadata: EventEmitter<any> = new EventEmitter();
			@Output() onLoadedData: EventEmitter<any> = new EventEmitter();
			@Output() requestedMediaModal: EventEmitter<any> = new EventEmitter();

	loading: boolean = false;		loading: boolean = false;
	isModal: boolean = false;

	constructor(		constructor(
	protected cd: ChangeDetectorRef,		protected cd: ChangeDetectorRef,
	private router: Router,
	) { }		) { }

	protected _emitPlay = () => this.onPlay.emit(this.getPlayer());		protected _emitPlay = () => this.onPlay.emit(this.getPlayer());
	protected _emitPause = () => this.onPause.emit(this.getPlayer());		protected _emitPause = () => this.onPause.emit(this.getPlayer());
	protected _emitEnd = () => this.onEnd.emit(this.getPlayer());		protected _emitEnd = () => this.onEnd.emit(this.getPlayer());
	protected _emitError = e => this.onError.emit({ player: this.getPlayer(), e });		protected _emitError = e => this.onError.emit({ player: this.getPlayer(), e });
			protected _emitCanPlay = () => this.onCanPlay.emit(this.getPlayer());
			protected _emitLoadedMetadata = () => this.onLoadedMetadata.emit(this.getPlayer());
			protected _emitLoadedData = () => this.onLoadedData.emit(this.getPlayer());

	protected _canPlayThrough = () => {		protected _canPlayThrough = () => {
	this.loading = false;		this.loading = false;
	@@ -58,7 +61,7 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
	};		};

	protected _dblClick = () => {		protected _dblClick = () => {
	this.requestFullScreen();		this.requestedMediaModal.emit();
	};		};

	protected _onPlayerError = e => {		protected _onPlayerError = e => {
	@@ -81,9 +84,11 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
	player.addEventListener('ended', this._emitEnd);		player.addEventListener('ended', this._emitEnd);
	player.addEventListener('error', this._onPlayerError);		player.addEventListener('error', this._onPlayerError);
	player.addEventListener('canplaythrough', this._canPlayThrough);		player.addEventListener('canplaythrough', this._canPlayThrough);
			player.addEventListener('canplay', this._emitCanPlay);
			player.addEventListener('loadedmetadata', this._emitLoadedMetadata);
			player.addEventListener('loadeddata', this._emitLoadedData);

	this.loading = true;		this.loading = true;
	this.isModal = document.body.classList.contains('m-overlay-modal--shown');
	}		}

	ngOnDestroy() {		ngOnDestroy() {
	@@ -96,6 +101,9 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
	player.removeEventListener('ended', this._emitEnd);		player.removeEventListener('ended', this._emitEnd);
	player.removeEventListener('error', this._onPlayerError);		player.removeEventListener('error', this._onPlayerError);
	player.removeEventListener('canplaythrough', this._canPlayThrough);		player.removeEventListener('canplaythrough', this._canPlayThrough);
			player.removeEventListener('canplay', this._emitCanPlay);
			player.removeEventListener('loadedmetadata', this._emitLoadedMetadata);
			player.removeEventListener('loadeddata', this._emitLoadedData);
	}		}
	}		}

	@@ -172,21 +180,13 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
	return {};		return {};
	}		}

			requestMediaModal() {
			this.requestedMediaModal.emit();
			}

	detectChanges() {		detectChanges() {
	this.cd.markForCheck();		this.cd.markForCheck();
	this.cd.detectChanges();		this.cd.detectChanges();
	}		}

	requestMediaModal() {
	// Don't reopen modal if you're already on it
	if ( this.isModal ) {
	this.toggle();
	}

	// Mobile users go to media page instead of modal
	if (isMobile()) {
	this.router.navigate([`/media/${this.guid}`]);
	}
	this.triggerMediaModal.emit();
	}
	}		}

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

+15 −14

Original line number	Original line	Diff line number	Diff line
	@@ -3,12 +3,10 @@ import {
	ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output,		ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output,
	ViewChild		ViewChild
	} from '@angular/core';		} from '@angular/core';
	import { Router } from '@angular/router';
	import { MindsPlayerInterface } from './player.interface';		import { MindsPlayerInterface } from './player.interface';
	import { WebtorrentService } from '../../../../webtorrent/webtorrent.service';		import { WebtorrentService } from '../../../../webtorrent/webtorrent.service';
	import { Client } from '../../../../../services/api/client';		import { Client } from '../../../../../services/api/client';
	import base64ToBlob from '../../../../../helpers/base64-to-blob';		import base64ToBlob from '../../../../../helpers/base64-to-blob';
	import isMobile from '../../../../../helpers/is-mobile';

	@Component({		@Component({
	moduleId: module.id,		moduleId: module.id,
	@@ -41,7 +39,10 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
	@Output() onPause: EventEmitter<HTMLVideoElement> = new EventEmitter();		@Output() onPause: EventEmitter<HTMLVideoElement> = new EventEmitter();
	@Output() onEnd: EventEmitter<HTMLVideoElement> = new EventEmitter();		@Output() onEnd: EventEmitter<HTMLVideoElement> = new EventEmitter();
	@Output() onError: EventEmitter<{ player, e }> = new EventEmitter();		@Output() onError: EventEmitter<{ player, e }> = new EventEmitter();
	@Output() triggerMediaModal: EventEmitter<any> = new EventEmitter();		@Output() onCanPlay: EventEmitter<any> = new EventEmitter();
			@Output() onLoadedMetadata: EventEmitter<any> = new EventEmitter();
			@Output() onLoadedData: EventEmitter<any> = new EventEmitter();
			@Output() requestedMediaModal: EventEmitter<any> = new EventEmitter();

	initialized: boolean = false;		initialized: boolean = false;
	loading: boolean = false;		loading: boolean = false;
	@@ -66,13 +67,15 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
	protected cd: ChangeDetectorRef,		protected cd: ChangeDetectorRef,
	protected client: Client,		protected client: Client,
	protected webtorrent: WebtorrentService,		protected webtorrent: WebtorrentService,
	private router: Router,
	) { }		) { }

	protected _emitPlay = () => this.onPlay.emit(this.getPlayer());		protected _emitPlay = () => this.onPlay.emit(this.getPlayer());
	protected _emitPause = () => this.onPause.emit(this.getPlayer());		protected _emitPause = () => this.onPause.emit(this.getPlayer());
	protected _emitEnd = () => this.onEnd.emit(this.getPlayer());		protected _emitEnd = () => this.onEnd.emit(this.getPlayer());
	protected _emitError = e => this.onError.emit({ player: this.getPlayer(), e});		protected _emitError = e => this.onError.emit({ player: this.getPlayer(), e});
			protected _emitCanPlay = () => this.onCanPlay.emit(this.getPlayer());
			protected _emitLoadedMetadata = () => this.onLoadedMetadata.emit(this.getPlayer());
			protected _emitLoadedData = () => this.onLoadedData.emit(this.getPlayer());

	protected _canPlayThrough = () => {		protected _canPlayThrough = () => {
	this.loading = false;		this.loading = false;
	@@ -136,6 +139,9 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
	player.addEventListener('ended', this._emitEnd);		player.addEventListener('ended', this._emitEnd);
	player.addEventListener('error', this._onPlayerError);		player.addEventListener('error', this._onPlayerError);
	player.addEventListener('canplaythrough', this._canPlayThrough);		player.addEventListener('canplaythrough', this._canPlayThrough);
			player.addEventListener('canplay', this._emitCanPlay);
			player.addEventListener('loadedmetadata', this._emitLoadedMetadata);
			player.addEventListener('loadeddata', this._emitLoadedData);

	this.infoTimer$ = setInterval(this._refreshInfo, 1000);		this.infoTimer$ = setInterval(this._refreshInfo, 1000);
	this.isModal = document.body.classList.contains('m-overlay-modal--shown');		this.isModal = document.body.classList.contains('m-overlay-modal--shown');
	@@ -165,6 +171,9 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
	player.removeEventListener('ended', this._emitEnd);		player.removeEventListener('ended', this._emitEnd);
	player.removeEventListener('error', this._onPlayerError);		player.removeEventListener('error', this._onPlayerError);
	player.removeEventListener('canplaythrough', this._canPlayThrough);		player.removeEventListener('canplaythrough', this._canPlayThrough);
			player.removeEventListener('canplay', this._emitCanPlay);
			player.removeEventListener('loadedmetadata', this._emitLoadedMetadata);
			player.removeEventListener('loadeddata', this._emitLoadedData);
	}		}
	}		}

	@@ -360,16 +369,8 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
	this.torrentReady = false;		this.torrentReady = false;
	}		}
	}		}
	requestMediaModal() {
	// Don't reopen modal if you're already on it
	if ( this.isModal ) {
	this.toggle();
	}

	// Mobile users go to media page instead of modal		requestMediaModal() {
	if (isMobile()) {		this.requestedMediaModal.emit();
	this.router.navigate([`/media/${this.guid}`]);
	}
	this.triggerMediaModal.emit();
	}		}
	}		}