mirror of https://github.com/IoTcat/ushio-img.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
201 lines
5.6 KiB
201 lines
5.6 KiB
// ========================================================================== |
|
// |
|
// Media |
|
// Adds additional media type support |
|
// |
|
// ========================================================================== |
|
(function($) { |
|
"use strict"; |
|
|
|
// Formats matching url to final form |
|
|
|
var format = function(url, rez, params) { |
|
if (!url) { |
|
return; |
|
} |
|
|
|
params = params || ""; |
|
|
|
if ($.type(params) === "object") { |
|
params = $.param(params, true); |
|
} |
|
|
|
$.each(rez, function(key, value) { |
|
url = url.replace("$" + key, value || ""); |
|
}); |
|
|
|
if (params.length) { |
|
url += (url.indexOf("?") > 0 ? "&" : "?") + params; |
|
} |
|
|
|
return url; |
|
}; |
|
|
|
// Object containing properties for each media type |
|
|
|
var defaults = { |
|
youtube: { |
|
matcher: /(youtube\.com|youtu\.be|youtube\-nocookie\.com)\/(watch\?(.*&)?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*))(.*)/i, |
|
params: { |
|
autoplay: 1, |
|
autohide: 1, |
|
fs: 1, |
|
rel: 0, |
|
hd: 1, |
|
wmode: "transparent", |
|
enablejsapi: 1, |
|
html5: 1 |
|
}, |
|
paramPlace: 8, |
|
type: "iframe", |
|
url: "//www.youtube.com/embed/$4", |
|
thumb: "//img.youtube.com/vi/$4/hqdefault.jpg" |
|
}, |
|
|
|
vimeo: { |
|
matcher: /^.+vimeo.com\/(.*\/)?([\d]+)(.*)?/, |
|
params: { |
|
autoplay: 1, |
|
hd: 1, |
|
show_title: 1, |
|
show_byline: 1, |
|
show_portrait: 0, |
|
fullscreen: 1, |
|
api: 1 |
|
}, |
|
paramPlace: 3, |
|
type: "iframe", |
|
url: "//player.vimeo.com/video/$2" |
|
}, |
|
|
|
instagram: { |
|
matcher: /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i, |
|
type: "image", |
|
url: "//$1/p/$2/media/?size=l" |
|
}, |
|
|
|
// Examples: |
|
// http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16 |
|
// https://www.google.com/maps/@37.7852006,-122.4146355,14.65z |
|
// https://www.google.com/maps/@52.2111123,2.9237542,6.61z?hl=en |
|
// https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572 |
|
gmap_place: { |
|
matcher: /(maps\.)?google\.([a-z]{2,3}(\.[a-z]{2})?)\/(((maps\/(place\/(.*)\/)?\@(.*),(\d+.?\d+?)z))|(\?ll=))(.*)?/i, |
|
type: "iframe", |
|
url: function(rez) { |
|
return ( |
|
"//maps.google." + |
|
rez[2] + |
|
"/?ll=" + |
|
(rez[9] ? rez[9] + "&z=" + Math.floor(rez[10]) + (rez[12] ? rez[12].replace(/^\//, "&") : "") : rez[12] + "").replace(/\?/, "&") + |
|
"&output=" + |
|
(rez[12] && rez[12].indexOf("layer=c") > 0 ? "svembed" : "embed") |
|
); |
|
} |
|
}, |
|
|
|
// Examples: |
|
// https://www.google.com/maps/search/Empire+State+Building/ |
|
// https://www.google.com/maps/search/?api=1&query=centurylink+field |
|
// https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393 |
|
gmap_search: { |
|
matcher: /(maps\.)?google\.([a-z]{2,3}(\.[a-z]{2})?)\/(maps\/search\/)(.*)/i, |
|
type: "iframe", |
|
url: function(rez) { |
|
return "//maps.google." + rez[2] + "/maps?q=" + rez[5].replace("query=", "q=").replace("api=1", "") + "&output=embed"; |
|
} |
|
} |
|
}; |
|
|
|
$(document).on("objectNeedsType.fb", function(e, instance, item) { |
|
var url = item.src || "", |
|
type = false, |
|
media, |
|
thumb, |
|
rez, |
|
params, |
|
urlParams, |
|
paramObj, |
|
provider; |
|
|
|
media = $.extend(true, {}, defaults, item.opts.media); |
|
|
|
// Look for any matching media type |
|
$.each(media, function(providerName, providerOpts) { |
|
rez = url.match(providerOpts.matcher); |
|
|
|
if (!rez) { |
|
return; |
|
} |
|
|
|
type = providerOpts.type; |
|
provider = providerName; |
|
paramObj = {}; |
|
|
|
if (providerOpts.paramPlace && rez[providerOpts.paramPlace]) { |
|
urlParams = rez[providerOpts.paramPlace]; |
|
|
|
if (urlParams[0] == "?") { |
|
urlParams = urlParams.substring(1); |
|
} |
|
|
|
urlParams = urlParams.split("&"); |
|
|
|
for (var m = 0; m < urlParams.length; ++m) { |
|
var p = urlParams[m].split("=", 2); |
|
|
|
if (p.length == 2) { |
|
paramObj[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " ")); |
|
} |
|
} |
|
} |
|
|
|
params = $.extend(true, {}, providerOpts.params, item.opts[providerName], paramObj); |
|
|
|
url = |
|
$.type(providerOpts.url) === "function" ? providerOpts.url.call(this, rez, params, item) : format(providerOpts.url, rez, params); |
|
|
|
thumb = |
|
$.type(providerOpts.thumb) === "function" ? providerOpts.thumb.call(this, rez, params, item) : format(providerOpts.thumb, rez); |
|
|
|
if (providerName === "youtube") { |
|
url = url.replace(/&t=((\d+)m)?(\d+)s/, function(match, p1, m, s) { |
|
return "&start=" + ((m ? parseInt(m, 10) * 60 : 0) + parseInt(s, 10)); |
|
}); |
|
} else if (providerName === "vimeo") { |
|
url = url.replace("&%23", "#"); |
|
} |
|
|
|
return false; |
|
}); |
|
|
|
// If it is found, then change content type and update the url |
|
|
|
if (type) { |
|
if (!item.opts.thumb && !(item.opts.$thumb && item.opts.$thumb.length)) { |
|
item.opts.thumb = thumb; |
|
} |
|
|
|
if (type === "iframe") { |
|
item.opts = $.extend(true, item.opts, { |
|
iframe: { |
|
preload: false, |
|
attr: { |
|
scrolling: "no" |
|
} |
|
} |
|
}); |
|
} |
|
|
|
$.extend(item, { |
|
type: type, |
|
src: url, |
|
origSrc: item.src, |
|
contentSource: provider, |
|
contentType: type === "image" ? "image" : provider == "gmap_place" || provider == "gmap_search" ? "map" : "video" |
|
}); |
|
} else if (url) { |
|
item.type = item.opts.defaultType; |
|
} |
|
}); |
|
})(window.jQuery || jQuery);
|
|
|