Skip to content

Commit c5ed2f1

Browse files
ritz078ritz078
committed
feat(play): Added the function to play youtube and vimeo videos.
1 parent 287b56d commit c5ed2f1

12 files changed

Lines changed: 101 additions & 92 deletions

File tree

‎src/embed.es6‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ import Twitter from './modules/twitter/twitter.es6';
3232
import Audio from './modules/audio/audio.es6';
3333
import Image from './modules/image/image.es6';
3434

35+
import helper from './modules/video/helper.es6';
36+
3537
(function() {
3638

3739
var defaultOptions = {
@@ -117,6 +119,7 @@ import Image from './modules/image/image.es6';
117119
render(result) {
118120
this.options.element.innerHTML = result;
119121
twttr.widgets.load(this.options.element);
122+
helper.play('ejs-video-thumb', this.options);
120123
this.options.afterEmbedJSApply();
121124
}
122125
}

‎src/modules/base.es6‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,6 @@ class Base{
77
this.embeds = embeds;
88
}
99

10-
dimensions() {
11-
let options = this.options;
12-
let dimensions = {
13-
width: options.videoWidth,
14-
height: options.videoHeight
15-
};
16-
if (options.videoHeight && options.videoWidth) {
17-
return dimensions;
18-
} else if (options.videoHeight) {
19-
dimensions.width = ((options.videoHeight) / 390) * 640;
20-
return dimensions;
21-
} else if (options.videoWidth) {
22-
dimensions.height = ((dimensions.width) / 640) * 390;
23-
return dimensions;
24-
} else {
25-
[dimensions.width, dimensions.height] = [640, 390];
26-
return dimensions;
27-
}
28-
}
29-
3010
process(){
3111
let match;
3212
while((match = utils.matches(this.regex, this.input)) !== null){

‎src/modules/image/flickr.es6‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ class Flickr extends Base{
99
}
1010

1111
template(match){
12-
let dimensions = this.dimensions();
12+
let dimensions = utils.dimensions(this.options);
1313
let template =
1414
`<div class="ejs-embed">
1515
<div class="ne-image-wrapper">

‎src/modules/utils.es6‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,25 @@ var utils = {
8686

8787
ifEmbed: function(options, service){
8888
return ((options.excludeEmbed.indexOf(service) == -1) && (options.excludeEmbed !== 'all'));
89+
},
90+
91+
dimensions: (options) => {
92+
let dimensions = {
93+
width: options.videoWidth,
94+
height: options.videoHeight
95+
};
96+
if (options.videoHeight && options.videoWidth) {
97+
return dimensions;
98+
} else if (options.videoHeight) {
99+
dimensions.width = ((options.videoHeight) / 390) * 640;
100+
return dimensions;
101+
} else if (options.videoWidth) {
102+
dimensions.height = ((dimensions.width) / 640) * 390;
103+
return dimensions;
104+
} else {
105+
[dimensions.width, dimensions.height] = [640, 390];
106+
return dimensions;
107+
}
89108
}
90109
};
91110

‎src/modules/video/dailymotion.es6‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import utils from '../utils.es6';
12
import Base from '../base.es6';
23

34
class Dailymotion extends Base{
@@ -7,7 +8,7 @@ class Dailymotion extends Base{
78
}
89

910
template(match){
10-
let dimensions = this.dimensions();
11+
let dimensions = utils.dimensions(this.options);
1112
let id = match.split('/')[2];
1213
let template =
1314
`<div class="ejs-video">

‎src/modules/video/helper.es6‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import utils from '../utils.es6';
2+
3+
var helper = {
4+
play: (className, options) => {
5+
let classes = document.getElementsByClassName(className);
6+
for (let i = 0; i < classes.length; i++) {
7+
classes[i].addEventListener('click', function() {
8+
let url = this.getAttribute('data-ejs-url');
9+
let template = helper.template(url, options);
10+
this.parentNode.parentNode.innerHTML = template;
11+
}, false);
12+
}
13+
},
14+
15+
template: (url, options) => {
16+
let dimensions = utils.dimensions(options);
17+
let template =
18+
`<div class="ejs-video-player">
19+
<iframe src="${url}" frameBorder="0" width="${dimensions.width}" height="${dimensions.height}"></iframe>
20+
</div>`;
21+
return template;
22+
},
23+
24+
detailsTemplate: (data, embedUrl) => {
25+
var template =
26+
`<div class="ejs-video">
27+
<div class="ejs-video-preview">
28+
<div class="ejs-video-thumb" data-ejs-url="${embedUrl}">
29+
<img src="${data.thumbnail}" alt="${data.host}/${data.id}"/>
30+
<i class="fa fa-play-circle-o"></i>
31+
</div>
32+
<div class="ejs-video-detail">
33+
<div class="ejs-video-title">
34+
<a href="${data.url}">${data.title}</a>
35+
</div>
36+
<div class="ejs-video-desc">${data.description}</div>
37+
<div class="ejs-video-stats">
38+
<span><i class="fa fa-eye"></i>${data.views}</span>
39+
<span><i class="fa fa-heart"></i>${data.likes}</span>
40+
</div>
41+
</div>
42+
</div>
43+
</div>`;
44+
return template;
45+
}
46+
}
47+
48+
module.exports = helper;

‎src/modules/video/liveleak.es6‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import utils from '../utils.es6';
12
import base from '../base.es6';
23

34
class LiveLeak extends base{
@@ -7,7 +8,7 @@ class LiveLeak extends base{
78
}
89

910
template(match){
10-
var dimensions = this.dimensions();
11+
var dimensions = utils.dimensions(this.options);
1112
let template =
1213
`<div class="ejs-video">
1314
<iframe src="http://www.liveleak.com/e/${match.split('=')[1]}" height="${dimensions.height}" width="${dimensions.width}"></iframe>

‎src/modules/video/ted.es6‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import utils from '../utils.es6';
12
import Base from '../base.es6';
23

34
class Ted extends Base{
@@ -7,7 +8,7 @@ class Ted extends Base{
78
}
89

910
template(id){
10-
let dimensions = this.dimensions();
11+
let dimensions = utils.dimensions(this.options);
1112
var template =
1213
`<div class="ejs-embed">
1314
<iframe src="http://embed.ted.com/talks/${id.split('/')[2]}.html" height="${dimensions.height}" width="${dimensions.width}"></iframe>

‎src/modules/video/ustream.es6‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import utils from '../utils.es6';
12
import Base from '../base.es6';
23

34
class Ustream extends Base{
@@ -9,7 +10,7 @@ class Ustream extends Base{
910
template(match){
1011
let id = match.split('/');
1112
id.splice(1, 0, 'embed');
12-
let dimensions = this.dimensions();
13+
let dimensions = utils.dimensions(this.options);
1314
let template =
1415
`<div class="ejs-embed">
1516
<iframe src="//www.${id.join('/')}" height="${dimensions.height}" width="${dimensions.width}"></iframe>',

‎src/modules/video/video.es6‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,18 @@ class Video {
1717
}
1818

1919
async process() {
20-
try {
21-
let input = this.input;
22-
let output = this.output;
23-
let embeds = this.embeds;
24-
embeds = utils.ifEmbed(this.options, 'ted') ? (new Ted(input, this.options, embeds).process()) : output;
25-
embeds = utils.ifEmbed(this.options, 'dailymotion') ? (new Dailymotion(input, this.options, embeds).process()) : output;
26-
embeds = utils.ifEmbed(this.options, 'ustream') ? (new Ustream(input, this.options, embeds).process()) : output;
27-
embeds = utils.ifEmbed(this.options, 'liveleak') ? (new LiveLeak(input, this.options, embeds).process()) : output;
28-
embeds = utils.ifEmbed(this.options, 'vine') ? (new Vine(input, this.options, embeds).process()) : output;
29-
embeds = utils.ifEmbed(this.options, 'youtube') ? await (new Youtube(input, this.options, embeds).process()) : output;
30-
embeds = utils.ifEmbed(this.options, 'vimeo') ? await (new Vimeo(input, this.options, embeds).process()) : output;
20+
let input = this.input;
21+
let output = this.output;
22+
let embeds = this.embeds;
23+
embeds = utils.ifEmbed(this.options, 'ted') ? (new Ted(input, this.options, embeds).process()) : output;
24+
embeds = utils.ifEmbed(this.options, 'dailymotion') ? (new Dailymotion(input, this.options, embeds).process()) : output;
25+
embeds = utils.ifEmbed(this.options, 'ustream') ? (new Ustream(input, this.options, embeds).process()) : output;
26+
embeds = utils.ifEmbed(this.options, 'liveleak') ? (new LiveLeak(input, this.options, embeds).process()) : output;
27+
embeds = utils.ifEmbed(this.options, 'vine') ? (new Vine(input, this.options, embeds).process()) : output;
28+
embeds = utils.ifEmbed(this.options, 'youtube') ? await (new Youtube(input, this.options, embeds).process()) : output;
29+
embeds = utils.ifEmbed(this.options, 'vimeo') ? await (new Vimeo(input, this.options, embeds).process()) : output;
3130

32-
33-
return [output, embeds];
34-
} catch (error) {
35-
console.log(error);
36-
}
31+
return [output, embeds];
3732
}
3833
}
3934

0 commit comments

Comments
 (0)