@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!
234 lines (225 loc) • 9.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs/operators')) :
typeof define === 'function' && define.amd ? define('@deepakhb2/ngx-embed-video', ['exports', '@angular/core', '@angular/common/http', '@angular/platform-browser', 'rxjs/operators'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.deepakhb2 = global.deepakhb2 || {}, global.deepakhb2['ngx-embed-video'] = {}), global.ng.core, global.ng.common.http, global.ng.platformBrowser, global.rxjs.operators));
}(this, (function (exports, core, http, platformBrowser, operators) { 'use strict';
var NgxEmbedVideoService = /** @class */ (function () {
function NgxEmbedVideoService(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'
];
}
NgxEmbedVideoService.prototype.embed = function (url, options) {
var 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);
}
};
NgxEmbedVideoService.prototype.embed_youtube = function (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>');
};
NgxEmbedVideoService.prototype.embed_vimeo = function (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>');
};
NgxEmbedVideoService.prototype.embed_dailymotion = function (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>');
};
NgxEmbedVideoService.prototype.embed_image = function (url, options) {
var 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);
}
};
NgxEmbedVideoService.prototype.embed_youtube_image = function (id, options) {
if (typeof options === 'function') {
options = {};
}
options = options || {};
options.image = this.validYouTubeOptions.indexOf(options.image) > 0 ? options.image : 'default';
var src = 'https://img.youtube.com/vi/' + id + '/' + options.image + '.jpg';
var result = {
link: src,
html: '<img src="' + src + '"/>'
};
return new Promise(function (resolve) {
resolve(result);
});
};
NgxEmbedVideoService.prototype.embed_vimeo_image = function (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(operators.map(function (res) {
return {
'link': res[0][options.image],
'html': '<img src="' + res[0][options.image] + '"/>'
};
}))
.toPromise()
.catch(function (error) { return console.log(error); });
};
NgxEmbedVideoService.prototype.embed_dailymotion_image = function (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(operators.map(function (res) {
return {
'link': res[options.image],
'html': '<img src="' + res[options.image] + '"/>'
};
}))
.toPromise()
.catch(function (error) { return console.log(error); });
};
NgxEmbedVideoService.prototype.parseOptions = function (options) {
var queryString = '', attributes = '';
if (options && options.hasOwnProperty('query')) {
queryString = '?' + this.serializeQuery(options.query);
}
if (options && options.hasOwnProperty('attr')) {
var temp_1 = [];
Object.keys(options.attr).forEach(function (key) {
temp_1.push(key + '="' + (options.attr[key]) + '"');
});
attributes = ' ' + temp_1.join(' ');
}
return {
query: queryString,
attr: attributes
};
};
NgxEmbedVideoService.prototype.serializeQuery = function (query) {
var queryString = [];
for (var p in query) {
if (query.hasOwnProperty(p)) {
queryString.push(encodeURIComponent(p) + '=' + encodeURIComponent(query[p]));
}
}
return queryString.join('&');
};
NgxEmbedVideoService.prototype.sanitize_iframe = function (iframe) {
return this.sanitizer.bypassSecurityTrustHtml(iframe);
};
NgxEmbedVideoService.prototype.detectVimeo = function (url) {
return (url.hostname === 'vimeo.com') ? url.pathname.split('/')[1] : null;
};
NgxEmbedVideoService.prototype.detectYoutube = function (url) {
if (url.hostname.indexOf('youtube.com') > -1) {
return url.search.split('=')[1];
}
if (url.hostname === 'youtu.be') {
return url.pathname.split('/')[1];
}
return '';
};
NgxEmbedVideoService.prototype.detectDailymotion = function (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 '';
};
return NgxEmbedVideoService;
}());
NgxEmbedVideoService.decorators = [
{ type: core.Injectable }
];
NgxEmbedVideoService.ctorParameters = function () { return [
{ type: http.HttpClient },
{ type: platformBrowser.DomSanitizer }
]; };
var NgxEmbedVideoComponent = /** @class */ (function () {
function NgxEmbedVideoComponent() {
}
NgxEmbedVideoComponent.prototype.ngOnInit = function () {
};
return NgxEmbedVideoComponent;
}());
NgxEmbedVideoComponent.decorators = [
{ type: core.Component, args: [{
selector: 'lib-ngx-embed-video',
template: "\n <p>\n ngx-embed-video works!\n </p>\n "
},] }
];
NgxEmbedVideoComponent.ctorParameters = function () { return []; };
var NgxEmbedVideoModule = /** @class */ (function () {
function NgxEmbedVideoModule() {
}
return NgxEmbedVideoModule;
}());
NgxEmbedVideoModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [NgxEmbedVideoComponent],
imports: [],
exports: [NgxEmbedVideoComponent]
},] }
];
/*
* Public API Surface of ngx-embed-video
*/
/**
* Generated bundle index. Do not edit.
*/
exports.NgxEmbedVideoComponent = NgxEmbedVideoComponent;
exports.NgxEmbedVideoModule = NgxEmbedVideoModule;
exports.NgxEmbedVideoService = NgxEmbedVideoService;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=deepakhb2-ngx-embed-video.umd.js.map