@deepakhb2/ngx-embed-video
Version:
> Get embed code for embedding youtube/vimeo/dailymotion/\* video in websites from URL or ID in Angular 7+ (Tested on 9/10). > Currently supports YouTube, Vimeo and Dailymotion. Feel free to make pull request to add others!
225 lines (218 loc) • 7.2 kB
JavaScript
import { Injectable, Component, NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';
import { map } from 'rxjs/operators';
class NgxEmbedVideoService {
constructor(http, sanitizer) {
this.http = http;
this.sanitizer = sanitizer;
this.validYouTubeOptions = [
'default',
'mqdefault',
'hqdefault',
'sddefault',
'maxresdefault'
];
this.validVimeoOptions = [
'thumbnail_small',
'thumbnail_medium',
'thumbnail_large'
];
this.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'
];
}
embed(url, options) {
let id;
url = new URL(url);
id = this.detectYoutube(url);
if (id) {
return this.embed_youtube(id, options);
}
id = this.detectVimeo(url);
if (id) {
return this.embed_vimeo(id, options);
}
id = this.detectDailymotion(url);
if (id) {
return this.embed_dailymotion(id, options);
}
}
embed_youtube(id, options) {
options = this.parseOptions(options);
return this.sanitize_iframe('<iframe src="https://www.youtube.com/embed/'
+ id + options.query + '"' + options.attr
+ ' frameborder="0" allowfullscreen></iframe>');
}
embed_vimeo(id, options) {
options = this.parseOptions(options);
return this.sanitize_iframe('<iframe src="https://player.vimeo.com/video/'
+ id + options.query + '"' + options.attr
+ ' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
}
embed_dailymotion(id, options) {
options = this.parseOptions(options);
return this.sanitize_iframe('<iframe src="https://www.dailymotion.com/embed/video/'
+ id + options.query + '"' + options.attr
+ ' frameborder="0" allowfullscreen></iframe>');
}
embed_image(url, options) {
let id;
url = new URL(url);
id = this.detectYoutube(url);
if (id) {
return this.embed_youtube_image(id, options);
}
id = this.detectVimeo(url);
if (id) {
return this.embed_vimeo_image(id, options);
}
id = this.detectDailymotion(url);
if (id) {
return this.embed_dailymotion_image(id, options);
}
}
embed_youtube_image(id, options) {
if (typeof options === 'function') {
options = {};
}
options = options || {};
options.image = this.validYouTubeOptions.indexOf(options.image) > 0 ? options.image : 'default';
let src = 'https://img.youtube.com/vi/' + id + '/' + options.image + '.jpg';
let result = {
link: src,
html: '<img src="' + src + '"/>'
};
return new Promise((resolve) => {
resolve(result);
});
}
embed_vimeo_image(id, options) {
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) => {
return {
'link': res[0][options.image],
'html': '<img src="' + res[0][options.image] + '"/>'
};
}))
.toPromise()
.catch(error => console.log(error));
}
embed_dailymotion_image(id, options) {
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) => {
return {
'link': res[options.image],
'html': '<img src="' + res[options.image] + '"/>'
};
}))
.toPromise()
.catch(error => console.log(error));
}
parseOptions(options) {
let queryString = '', attributes = '';
if (options && options.hasOwnProperty('query')) {
queryString = '?' + this.serializeQuery(options.query);
}
if (options && options.hasOwnProperty('attr')) {
let temp = [];
Object.keys(options.attr).forEach(function (key) {
temp.push(key + '="' + (options.attr[key]) + '"');
});
attributes = ' ' + temp.join(' ');
}
return {
query: queryString,
attr: attributes
};
}
serializeQuery(query) {
let queryString = [];
for (let p in query) {
if (query.hasOwnProperty(p)) {
queryString.push(encodeURIComponent(p) + '=' + encodeURIComponent(query[p]));
}
}
return queryString.join('&');
}
sanitize_iframe(iframe) {
return this.sanitizer.bypassSecurityTrustHtml(iframe);
}
detectVimeo(url) {
return (url.hostname === 'vimeo.com') ? url.pathname.split('/')[1] : null;
}
detectYoutube(url) {
if (url.hostname.indexOf('youtube.com') > -1) {
return url.search.split('=')[1];
}
if (url.hostname === 'youtu.be') {
return url.pathname.split('/')[1];
}
return '';
}
detectDailymotion(url) {
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 '';
}
}
NgxEmbedVideoService.decorators = [
{ type: Injectable }
];
NgxEmbedVideoService.ctorParameters = () => [
{ type: HttpClient },
{ type: DomSanitizer }
];
class NgxEmbedVideoComponent {
constructor() { }
ngOnInit() {
}
}
NgxEmbedVideoComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-ngx-embed-video',
template: `
<p>
ngx-embed-video works!
</p>
`
},] }
];
NgxEmbedVideoComponent.ctorParameters = () => [];
class NgxEmbedVideoModule {
}
NgxEmbedVideoModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgxEmbedVideoComponent],
imports: [],
exports: [NgxEmbedVideoComponent]
},] }
];
/*
* Public API Surface of ngx-embed-video
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxEmbedVideoComponent, NgxEmbedVideoModule, NgxEmbedVideoService };
//# sourceMappingURL=deepakhb2-ngx-embed-video.js.map