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.
241 lines
9.4 KiB
241 lines
9.4 KiB
WMarkDown.Multimedia = function(wmarkdown){
|
|
|
|
const self = this;
|
|
let started = false;
|
|
|
|
const construct = () => {};
|
|
|
|
const error = (element, type) => {
|
|
|
|
element.parentNode.setAttribute("data-status", "error");
|
|
element.parentNode.setAttribute("data-error-type", type);
|
|
|
|
return null;
|
|
};
|
|
|
|
this.image_try_next = (element, event) => {
|
|
if(!element.hasAttribute("data-i") || !element.hasAttribute("data-src"))
|
|
return error(element, "no_data");
|
|
|
|
let images;
|
|
|
|
try{
|
|
if(!(images = JSON.parse(atob(element.getAttribute("data-src")))))
|
|
return error(element, "no_json");
|
|
}catch(exception){
|
|
console.error(exception);
|
|
return error(element, "exception");
|
|
};
|
|
|
|
const i = Number(element.getAttribute("data-i"));
|
|
|
|
if(isNaN(i))
|
|
return error(element, "i_is_nan");
|
|
if(i >= images.length)
|
|
return error(element, "ended")
|
|
|
|
const image = new Image();
|
|
|
|
image.src = images[i];
|
|
image.onload = () => {
|
|
|
|
const anchor = element.parentNode.querySelector("a");
|
|
|
|
element.setAttribute("src", images[i]);
|
|
element.parentNode.setAttribute("data-status", "loaded");
|
|
element.parentNode.querySelector(".image-style").style.backgroundImage = "url('" + images[i] + "')";
|
|
|
|
if(anchor){
|
|
anchor.setAttribute("href", images[i]);
|
|
anchor.innerText = images[i];
|
|
};
|
|
|
|
};
|
|
image.onerror = () => {
|
|
element.setAttribute("data-i", i + 1);
|
|
self.image_try_next(element, event);
|
|
};
|
|
|
|
};
|
|
|
|
this.video_try_next = (element, event) => {
|
|
if(!element.hasAttribute("data-i") || !element.hasAttribute("data-src"))
|
|
return error(element, "no_data");
|
|
|
|
let videos;
|
|
|
|
try{
|
|
if(!(videos = JSON.parse(atob(element.getAttribute("data-src")))))
|
|
return error(element, "no_json");
|
|
}catch(exception){
|
|
console.error(exception);
|
|
return error(element, "exception");
|
|
};
|
|
|
|
const i = Number(element.getAttribute("data-i"));
|
|
|
|
if(isNaN(i))
|
|
return error(element, "i_is_nan");
|
|
if(i >= videos.length)
|
|
return error(element, "ended")
|
|
|
|
const video = document.createElement("video");
|
|
|
|
video.src = videos[i];
|
|
video.onloadstart = () => {
|
|
element.setAttribute("src", videos[i]);
|
|
wmarkdown.get_mime(videos[i], mime => element.setAttribute("type", mime));
|
|
with(element.parentNode.querySelector("a")){
|
|
setAttribute("href", videos[i]);
|
|
innerText = videos[i];
|
|
};
|
|
element.parentNode.setAttribute("data-status", "loaded");
|
|
video.remove();
|
|
};
|
|
video.onerror = () => {
|
|
element.setAttribute("data-i", i + 1);
|
|
self.image_try_next(element, event);
|
|
video.remove();
|
|
};
|
|
|
|
};
|
|
|
|
this.audio_try_next = (element, event) => {
|
|
if(!element.hasAttribute("data-i") || !element.hasAttribute("data-src"))
|
|
return error(element, "no_data");
|
|
|
|
let audios;
|
|
|
|
try{
|
|
if(!(audios = JSON.parse(atob(element.getAttribute("data-src")))))
|
|
return error(element, "no_json");
|
|
}catch(exception){
|
|
console.error(exception);
|
|
return error(element, "exception");
|
|
};
|
|
|
|
const i = Number(element.getAttribute("data-i"));
|
|
|
|
if(isNaN(i))
|
|
return error(element, "i_is_nan");
|
|
if(i >= audios.length)
|
|
return error(element, "ended")
|
|
|
|
const audio = new Audio();
|
|
|
|
audio.src = audios[i];
|
|
audio.onloadstart = () => {
|
|
element.setAttribute("src", audios[i]);
|
|
wmarkdown.get_mime(audios[i], mime => element.setAttribute("type", mime));
|
|
with(element.parentNode.querySelector("a")){
|
|
setAttribute("href", audios[i]);
|
|
innerText = audios[i];
|
|
};
|
|
element.parentNode.setAttribute("data-status", "loaded");
|
|
};
|
|
audio.onerror = () => {
|
|
element.setAttribute("data-i", i + 1);
|
|
self.image_try_next(element, event);
|
|
};
|
|
|
|
};
|
|
|
|
const embed_try = embed => {
|
|
if(!embed.hasAttribute("data-platform") || !embed.hasAttribute("data-id"))
|
|
return;
|
|
embed.setAttribute("data-status", "mounted");
|
|
|
|
switch(embed.getAttribute("data-platform")){
|
|
case "youtube":
|
|
with(embed.appendChild(document.createElement("iframe"))){
|
|
setAttribute("src", "https://www.youtube.com/embed/" + embed.getAttribute("data-id"));
|
|
setAttribute("title", "YouTube video player");
|
|
setAttribute("frameborder", 0);
|
|
setAttribute("style", "position:absolute;top:0em;left:0em;width:100%;height:100%;");
|
|
setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
|
|
setAttribute("allowfullscreen", true);
|
|
};
|
|
break;
|
|
case "vimeo":
|
|
with(embed.appendChild(document.createElement("iframe"))){
|
|
setAttribute("src", "https://player.vimeo.com/video/" + embed.getAttribute("data-id"));
|
|
setAttribute("frameborder", 0);
|
|
setAttribute("style", "position:absolute;top:0em;left:0em;width:100%;height:100%;");
|
|
setAttribute("allow", "autoplay; fullscreen; picture-in-picture");
|
|
setAttribute("allowfullscreen", true);
|
|
};
|
|
break;
|
|
case "facebook":
|
|
// <iframe src="https://www.facebook.com/plugins/video.php?height=314&830479191217676%2F&show_text=false&width=560" allowFullScreen="true"></iframe>
|
|
// <iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fzorman.videos.7%2Fvideos%2F830479191217676%2F&show_text=false&width=560" width="560" height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
|
|
// https://www.facebook.com/gaming/497870250231404/videos/830479191217676/
|
|
with(embed.appendChild(document.createElement("iframe"))){
|
|
setAttribute("src", "https://www.facebook.com/video.php?v=" + embed.getAttribute("data-id"));
|
|
setAttribute("style", "position:absolute;top:0em;left:0em;width:100%;height:100%;border:none;overflow:hidden;");
|
|
setAttribute("scrolling", "no");
|
|
setAttribute("frameborder", 0);
|
|
setAttribute("allow", "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share");
|
|
setAttribute("allowfullscreen", true);
|
|
};
|
|
break;
|
|
case "twitch":
|
|
// <iframe src="https://player.twitch.tv/?video=1025807282&parent=www.example.com" scrolling="no" height="378" width="620"></iframe>
|
|
// https://www.twitch.tv/videos/1025807282
|
|
with(embed.appendChild(document.createElement("iframe"))){
|
|
setAttribute("src", "https://player.twitch.tv/?video=" + embed.getAttribute("data-id") + "&parent=wmarkdown.k3y.pw");
|
|
setAttribute("style", "position:absolute;top:0em;left:0em;width:100%;height:100%;");
|
|
setAttribute("scrolling", "no");
|
|
setAttribute("frameborder", 0);
|
|
setAttribute("allow", "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share");
|
|
setAttribute("allowfullscreen", true);
|
|
};
|
|
break;
|
|
};
|
|
|
|
};
|
|
|
|
const execute_in_range = (item, range, callback) => {
|
|
|
|
const y = item.getBoundingClientRect().y;
|
|
|
|
if(y < range && y > -range){
|
|
item.setAttribute("data-status", "loading");
|
|
callback();
|
|
};
|
|
|
|
};
|
|
|
|
this.on_scroll = (event) => {
|
|
|
|
const range = wmarkdown.item_self.querySelector(".content").offsetHeight * wmarkdown.settings("onload_media_range");
|
|
|
|
wmarkdown.item_self.querySelectorAll(".multimedia-box>[data-status=unloaded]").forEach(item => execute_in_range(item, range, () => {
|
|
|
|
const media = item.querySelector("audio[onerror]") || item.querySelector("[onerror]");
|
|
|
|
media.onerror(media);
|
|
|
|
}));
|
|
|
|
wmarkdown.item_self.querySelectorAll(".multimedia-box>[data-type=embed]>[data-status=unmounted]").forEach(item => execute_in_range(item, range, () => embed_try(item)));
|
|
|
|
};
|
|
|
|
this.start = () => {
|
|
|
|
if(started)
|
|
return;
|
|
started = true;
|
|
|
|
const content = wmarkdown.item_self.querySelector(".content");
|
|
|
|
self.on_scroll(null);
|
|
wmarkdown.item_self.querySelector(".content").addEventListener("scroll", self.on_scroll);
|
|
|
|
};
|
|
|
|
this.go = (element, event) => window.open(element.querySelector("[src]").getAttribute("src"), "_blank");
|
|
|
|
construct();
|
|
|
|
};
|
|
|