angular-embed-video
Version:
> Get embed code for embedding youtube/vimeo/dailymotion/\* video in websites from URL or ID in Angular 6+. > Currently supports YouTube, Vimeo and Dailymotion. Feel free to make pull request to add others!
217 lines (211 loc) • 8.61 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, NgModule } from '@angular/core';
import { map } from 'rxjs/operators';
import * as i1 from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import * as i2 from '@angular/platform-browser';
class AngularEmbedVideoService {
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.includes(options.image) ? options.image : 'default';
let src = 'https://img.youtube.com/vi/' + id + '/' + options.image + '.jpg';
let result = {
link: src,
html: '<img src="' + src + '"/>'
};
return Promise.resolve(result).then(value => value);
}
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) {
let video_id = url.search.split('v=')[1];
const ampersandPosition = video_id.indexOf('&');
if (ampersandPosition != -1) {
video_id = video_id.substring(0, ampersandPosition);
}
return video_id;
}
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 '';
}
}
AngularEmbedVideoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.3", ngImport: i0, type: AngularEmbedVideoService, deps: [{ token: i1.HttpClient }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable });
AngularEmbedVideoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.3", ngImport: i0, type: AngularEmbedVideoService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.3", ngImport: i0, type: AngularEmbedVideoService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.DomSanitizer }]; } });
class AngularEmbedVideoModule {
}
AngularEmbedVideoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.3", ngImport: i0, type: AngularEmbedVideoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AngularEmbedVideoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.3", ngImport: i0, type: AngularEmbedVideoModule, imports: [HttpClientModule] });
AngularEmbedVideoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.3", ngImport: i0, type: AngularEmbedVideoModule, providers: [AngularEmbedVideoService], imports: [[HttpClientModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.3", ngImport: i0, type: AngularEmbedVideoModule, decorators: [{
type: NgModule,
args: [{
imports: [HttpClientModule],
providers: [AngularEmbedVideoService]
}]
}] });
/*
* Public API Surface of angular-embed-video
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularEmbedVideoModule, AngularEmbedVideoService };
//# sourceMappingURL=angular-embed-video.js.map