Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrading to Angular 9 #37

Open
Eraldo opened this issue Feb 13, 2020 · 1 comment
Open

Upgrading to Angular 9 #37

Eraldo opened this issue Feb 13, 2020 · 1 comment

Comments

@Eraldo
Copy link

Eraldo commented Feb 13, 2020

I am trying to upgrade to Angular 8 but received the following warnings:

Package "ngx-embed-video" has an incompatible peer dependency to "@angular/core" (requires "^6.0.0" (extended), would install "9.0.1").
Package "ngx-embed-video" has an incompatible peer dependency to "@angular/common" (requires "^6.0.0" (extended), would install "9.0.1").

related to issue #30.

Compile trace states: "please contact the library authors"

ERROR in node_modules/ngx-embed-video/dist/index.d.ts:4:23 - error NG6005: 
EmbedVideo.forRoot returns a ModuleWithProviders type without a generic type argument. 
Please add a generic type argument to the ModuleWithProviders type. 
If this occurrence is in library code you don't control, 
  please contact the library authors.
    4     static forRoot(): ModuleWithProviders;
@queejie
Copy link

queejie commented Aug 5, 2020

For us, it would not allow our production builds to run. I'm not sure why. But we have just included the code as a local service, and it works. Here is the local service code, in case anyone is interested:
`/**

  • This code originally from https://www.npmjs.com/package/ngx-embed-video.
  • The way it was packaged, however, caused run problems on production builds, possibly to do with not being compatible with Ivy
  • in the most recent versions of angular.
  • The code was cleaned up to work with stricter tslint settings, consistent identifier naming,
  • and to add alts to images for WCAG compliance.
    */
    import {Injectable} from '@angular/core';
    import {HttpClient} from '@angular/common/http';
    import {DomSanitizer} from '@angular/platform-browser';
    import {map} from 'rxjs/operators';

@Injectable()
export class EmbedService {
private validYouTubeOptions = [
'default',
'mqdefault',
'hqdefault',
'sddefault',
'maxresdefault'
];
private validVimeoOptions = [
'thumbnail_small',
'thumbnail_medium',
'thumbnail_large'
];
private validDailyMotionOptions = [
'thumbnail_60_url',
'thumbnail_120_url',
'thumbnail_180_url',
'thumbnail_240_url',
'thumbnail_360_url',
'thumbnail_480_url',
'thumbnail_720_url',
'thumbnail_1080_url'
];

constructor(private http: HttpClient, private sanitizer: DomSanitizer) {
}

public embed(url: any, options?: any): any {
	let id;
	url = new URL(url);
	id = this.detectYoutube(url);
	if (id) {
		return this.embedYouTube(id, options);
	}
	id = this.detectVimeo(url);
	if (id) {
		return this.embedVimeo(id, options);
	}
	id = this.detectDailymotion(url);
	if (id) {
		return this.embedDailyMotion(id, options);
	}
}

public embedYouTube(id: string, options?: any): string {
	options = this.parseOptions(options);

	return this.sanitizeIframe('<iframe src="https://www.youtube.com/embed/'
		+ id + options.query + '"' + options.attr
		+ ' frameborder="0" allowfullscreen></iframe>');
}

public embedVimeo(id: string, options?: any): string {
	options = this.parseOptions(options);
	return this.sanitizeIframe('<iframe src="https://player.vimeo.com/video/'
		+ id + options.query + '"' + options.attr
		+ ' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
}

public embedDailyMotion(id: string, options?: any): string {
	options = this.parseOptions(options);
	return this.sanitizeIframe('<iframe src="https://www.dailymotion.com/embed/video/'
		+ id + options.query + '"' + options.attr
		+ ' frameborder="0" allowfullscreen></iframe>');
}

public embedImage(url: any, options?: any): any {
	let id;
	url = new URL(url);
	id = this.detectYoutube(url);
	if (id) {
		return this.embedYoutubeImage(id, options);
	}
	id = this.detectVimeo(url);
	if (id) {
		return this.embedVimeoImage(id, options);
	}
	id = this.detectDailymotion(url);
	if (id) {
		return this.embedDailymotionImage(id, options);
	}
}

private embedYoutubeImage(id: string, options?: any): any {
	if (typeof options === 'function') {
		options = {};
	}
	options = options || {};
	options.image = this.validYouTubeOptions.indexOf(options.image) > 0 ? options.image : 'default';
	const src = 'https://img.youtube.com/vi/' + id + '/' + options.image + '.jpg';
	const result = {
		link: src,
		html: '<img src="' + src + '" alt="Video cover image."/>'
	};
	return new Promise((resolve) => {
		resolve(result);
	});
}

private embedVimeoImage(id: string, options?: any): any {
	if (typeof options === 'function') {
		options = {};
	}

	options = options || {};

	options.image = this.validVimeoOptions.indexOf(options.image) >= 0 ? options.image : 'thumbnail_large';

	return this.http.get('https://vimeo.com/api/v2/video/' + id + '.json').pipe(map((res: any) => {
		return {
			link: res[0][options.image],
			html: '<img src="' + res[0][options.image] + '" alt="Video cover image."/>'
		};
	}))
			   .toPromise()
			   .catch(error => console.log(error));
}

private embedDailymotionImage(id: string, options?: any): any {
	if (typeof options === 'function') {
		options = {};
	}

	options = options || {};

	options.image = this.validDailyMotionOptions.indexOf(options.image) >= 0 ? options.image : 'thumbnail_480_url';

	return this.http.get('https://api.dailymotion.com/video/' + id + '?fields=' + options.image)
			   .pipe(map((res: any) => {
				   return {
					   link: res[options.image],
					   html: '<img src="' + res[options.image] + '" alt="Video cover image."/>'
				   };
			   }))
			   .toPromise()
			   .catch(error => console.log(error));
}

private parseOptions(options: any): any {
	let queryString = '';
	let attributes = '';

	if (options && options.hasOwnProperty('query')) {
		queryString = '?' + this.serializeQuery(options.query);
	}
	if (options && options.hasOwnProperty('attr')) {
		const temp: any[] = [];
		Object.keys(options.attr).forEach((key) => {
			temp.push(key + '="' + (options.attr[key]) + '"');
		});
		attributes = ' ' + temp.join(' ');
	}
	return {
		query: queryString,
		attr: attributes
	};
}

private serializeQuery(query: any): any {
	const queryString: any = [];
	for (const p in query) {
		if (query.hasOwnProperty(p)) {
			queryString.push(encodeURIComponent(p) + '=' + encodeURIComponent(query[p]));
		}
	}
	return queryString.join('&');
}

private sanitizeIframe(iframe: string): any {
	return this.sanitizer.bypassSecurityTrustHtml(iframe);
}

private detectVimeo(url: any): string {
	return (url.hostname === 'vimeo.com') ? url.pathname.split('/')[1] : null;
}

private detectYoutube(url: any): string {
	if (url.hostname.indexOf('youtube.com') > -1) {
		return url.search.split('=')[1];
	}
	if (url.hostname === 'youtu.be') {
		return url.pathname.split('/')[1];
	}
	return '';
}

private detectDailymotion(url: any): string {
	if (url.hostname.indexOf('dailymotion.com') > -1) {
		return url.pathname.split('/')[2].split('_')[0];
	}
	if (url.hostname === 'dai.ly') {
		return url.pathname.split('/')[1];
	}
	return '';
}

}
`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants