2017-01-05 19:53:40 +01:00
|
|
|
/**
|
2017-01-11 12:00:50 +01:00
|
|
|
* Video plugin by gohabereg
|
2017-01-05 19:53:40 +01:00
|
|
|
* @version 1.0.0
|
|
|
|
*/
|
2017-01-11 12:00:50 +01:00
|
|
|
var videoTool = {
|
2017-01-05 19:53:40 +01:00
|
|
|
|
|
|
|
make : function(data, isInternal) {
|
|
|
|
|
2017-01-12 14:56:06 +01:00
|
|
|
if (!data.video_id)
|
2017-01-05 19:53:40 +01:00
|
|
|
return;
|
|
|
|
|
2017-01-12 14:56:06 +01:00
|
|
|
var html = videoTool.content.getHtmlWithVideoId(data.service, data.video_id),
|
|
|
|
block = videoTool.content.makeElementFromHtml(html);
|
2017-01-05 19:53:40 +01:00
|
|
|
|
2017-01-12 14:56:06 +01:00
|
|
|
block.dataset.id = data.video_id;
|
|
|
|
block.dataset.videoSeirvice = data.service;
|
2017-01-05 19:53:40 +01:00
|
|
|
|
|
|
|
if (isInternal) {
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
|
|
|
/** Render block */
|
2017-01-12 14:56:06 +01:00
|
|
|
videoTool.content.render(block);
|
2017-01-05 19:53:40 +01:00
|
|
|
|
|
|
|
}, 200);
|
|
|
|
}
|
|
|
|
|
2017-01-12 14:56:06 +01:00
|
|
|
return block;
|
2017-01-05 19:53:40 +01:00
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Saving JSON output.
|
|
|
|
* Upload data via ajax
|
|
|
|
*/
|
|
|
|
save : function(blockContent) {
|
|
|
|
|
|
|
|
var data;
|
|
|
|
|
|
|
|
if (!blockContent)
|
|
|
|
return;
|
|
|
|
|
|
|
|
data = {
|
2017-01-12 14:56:06 +01:00
|
|
|
video_id: blockContent.dataset.id,
|
|
|
|
service: blockContent.dataset.videoService
|
2017-01-05 19:53:40 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
return data;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Render data
|
|
|
|
*/
|
|
|
|
render : function(data) {
|
2017-01-11 12:00:50 +01:00
|
|
|
return videoTool.make(data);
|
2017-01-12 14:56:06 +01:00
|
|
|
},
|
|
|
|
|
2017-01-05 19:53:40 +01:00
|
|
|
|
|
|
|
};
|
|
|
|
|
2017-01-11 12:00:50 +01:00
|
|
|
videoTool.content = {
|
2017-01-05 19:53:40 +01:00
|
|
|
|
|
|
|
render: function (content) {
|
2017-01-11 12:00:50 +01:00
|
|
|
codex.content.switchBlock(codex.content.currentNode, content, 'video');
|
2017-01-05 19:53:40 +01:00
|
|
|
|
|
|
|
var blockContent = codex.content.currentNode.childNodes[0];
|
2017-01-11 12:00:50 +01:00
|
|
|
blockContent.classList.add('video__loader');
|
2017-01-05 19:53:40 +01:00
|
|
|
|
|
|
|
setTimeout(function(){
|
2017-01-11 12:00:50 +01:00
|
|
|
blockContent.classList.remove('video__loader');
|
|
|
|
}, 1000);
|
|
|
|
|
2017-01-05 19:53:40 +01:00
|
|
|
},
|
|
|
|
|
2017-01-12 14:56:06 +01:00
|
|
|
getHtmlWithVideoId: function (type, id) {
|
|
|
|
return videoTool.content.services[type].html.replace("<%= remote_id %>", id);
|
|
|
|
},
|
2017-01-05 19:53:40 +01:00
|
|
|
|
2017-01-12 14:56:06 +01:00
|
|
|
makeElementFromHtml: function(html) {
|
|
|
|
var wrapper = document.createElement('DIV');
|
|
|
|
wrapper.innerHTML = html;
|
|
|
|
return wrapper.firstElementChild;
|
|
|
|
},
|
2017-01-05 19:53:40 +01:00
|
|
|
|
2017-01-12 14:56:06 +01:00
|
|
|
services: {
|
|
|
|
vimeo: {
|
|
|
|
regex: /(?:http[s]?:\/\/)?(?:www.)?vimeo\.co(?:.+\/([^\/]\d+)(?:#t=[\d]+)?s?$)/,
|
|
|
|
html: "<iframe src=\"https://player.vimeo.com/video/<%= remote_id %>?title=0&byline=0\" width=\"580\" height=\"320\" frameborder=\"0\"></iframe>"
|
|
|
|
},
|
|
|
|
youtube: {
|
|
|
|
regex: /^.*(?:(?:youtu\.be\/)|(?:youtube\.com)\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*)(?:[\?\&]t\=(\d*)|)/,
|
|
|
|
html: "<iframe src=\"https://www.youtube.com/embed/<%= remote_id %>\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>",
|
|
|
|
timestamp: '?t='
|
|
|
|
},
|
|
|
|
coub: {
|
|
|
|
regex: /https?:\/\/coub\.com\/view\/([^\/\?\&]+)/,
|
|
|
|
html: "<iframe src=\"//coub.com/embed/<%= remote_id %>\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>"
|
|
|
|
},
|
|
|
|
vine: {
|
|
|
|
regex: /https?:\/\/vine\.co\/v\/([^\/\?\&]+)/,
|
|
|
|
html: "<iframe src=\"https://vine.co/v/<%= remote_id %>/embed/simple/\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>"
|
|
|
|
},
|
|
|
|
vk: {
|
|
|
|
regex: /https?:\/\/vk\.com\/.*(?:video)([-_0-9]+)/,
|
2017-01-12 16:19:22 +01:00
|
|
|
html: "<iframe src=\"//vk.com/video_ext.php?id=<%= remote_id %>\" width=\"853\" height=\"480\" frameborder=\"0\" allowfullscreen></iframe>"
|
2017-01-12 14:56:06 +01:00
|
|
|
},
|
|
|
|
imgur: {
|
|
|
|
regex: /https?:\/\/(?:i\.)?imgur\.com.*\/([a-zA-Z0-9]+)(?:\.gifv)?/,
|
2017-01-12 16:19:22 +01:00
|
|
|
html: "<iframe allowfullscreen=\"true\" scrolling=\"no\" src=\"http://imgur.com/<%= remote_id %>/embed\" id=\"imgur-embed-iframe-pub-<%= remote_id %>\" class=\"imgur-embed-iframe-pub\" style=\"height: 500px; width: 540px; border: 1px solid #000\"></iframe>"
|
2017-01-12 14:56:06 +01:00
|
|
|
},
|
|
|
|
gfycat: {
|
|
|
|
regex: /https?:\/\/gfycat\.com(?:\/detail)?\/([a-zA-Z]+)/,
|
|
|
|
html: "<iframe src='https://gfycat.com/ifr/<%= remote_id %>' frameborder='0' scrolling='no' width='580' height='436' allowfullscreen ></iframe>",
|
|
|
|
}
|
2017-01-05 19:53:40 +01:00
|
|
|
}
|
|
|
|
};
|
2017-01-12 14:56:06 +01:00
|
|
|
|
|
|
|
videoTool.urlPastedCallbacks = {
|
|
|
|
generalCallback: function(url, pattern) {
|
|
|
|
|
|
|
|
var id = pattern.regex.exec(url)[1];
|
|
|
|
|
|
|
|
var data = {
|
|
|
|
video_id: id,
|
|
|
|
service: pattern.type
|
|
|
|
};
|
|
|
|
|
|
|
|
videoTool.make(data, true);
|
|
|
|
}
|
|
|
|
};
|