Bilibili-Evolved/video/view-cover/view-cover.js
2019-05-28 11:59:05 +08:00

155 lines
5.4 KiB
JavaScript

import { VideoInfo } from "../video-info";
import { getFriendlyTitle } from "../title";
class ImageViewer
{
constructor(url)
{
this.url = url;
if (document.querySelector(".image-viewer") === null)
{
this.createContainer();
}
this.viewer = document.querySelector(".image-viewer-container");
this.downloadImage();
addSettingsListener("filenameFormat", () =>
{
this.viewer.querySelector(".download")
.setAttribute("download", this.filename);
});
}
createContainer()
{
document.body.insertAdjacentHTML("beforeend", resources.import("imageViewerHtml"));
document.querySelector(".image-viewer-container .close").addEventListener("click", () => this.hide());
resources.applyStyle("imageViewerStyle");
}
downloadImage()
{
document.querySelector("#view-cover").style.display = this.url ? "flex" : "none";
if (this.url === "")
{
return;
}
const xhr = new XMLHttpRequest();
xhr.open("GET", this.url.replace("http:", "https:"), true);
xhr.responseType = "blob";
xhr.onload = () =>
{
const title = getFriendlyTitle();
const data = URL.createObjectURL(xhr.response);
if (this.imageData)
{
URL.revokeObjectURL(this.imageData);
}
this.imageData = data;
const link = this.viewer.querySelector(".download");
link.setAttribute("href", data);
link.setAttribute("download", this.filename);
this.viewer.querySelector(".copy-link").addEventListener("click", () => GM_setClipboard(this.url));
this.viewer.querySelector(".new-tab").setAttribute("href", this.url);
this.viewer.querySelector(".image").src = data;
};
xhr.send();
}
show()
{
this.viewer.classList.add("opened");
}
hide()
{
this.viewer.classList.remove("opened");
}
get filename()
{
return getFriendlyTitle() + this.url.substring(this.url.lastIndexOf("."));
}
}
export default (() =>
{
if (document.querySelector("meta[itemprop='image'],meta[property='og:image']") !== null)
{
return {
widget: {
content: /*html*/`
<button
class="gui-settings-flat-button"
id="view-cover">
<i class="icon-view"></i>
<span>查看封面</span>
</button>`,
condition: async () =>
{
const aid = await SpinQuery.select(() => (unsafeWindow || window).aid);
return Boolean(aid);
},
success: async () =>
{
async function getUrl()
{
const aid = (unsafeWindow || window).aid;
const videoInfo = new VideoInfo(aid);
try
{
await videoInfo.fetchInfo();
}
catch (error)
{
return "";
}
return videoInfo.coverUrl;
};
let imageViewer = new ImageViewer(await getUrl());
document.querySelector("#view-cover").addEventListener("click", () =>
{
imageViewer.show();
});
const updateImage = async () =>
{
imageViewer = new ImageViewer(await getUrl());
};
Observer.videoChange(updateImage);
},
},
};
}
else
{
return {
widget: {
content: /*html*/`
<button
class="gui-settings-flat-button"
id="view-cover">
<i class="icon-view"></i>
<span>查看封面</span>
</button>`,
condition: async () =>
{
const coverLink = await SpinQuery.select(() => document.querySelector(".header-info-ctnr .room-cover"));
return Boolean(coverLink);
},
success: async () =>
{
const coverLink = document.querySelector(".header-info-ctnr .room-cover");
const match = coverLink
.getAttribute("href")
.match(/space\.bilibili\.com\/([\d]+)/);
if (match && match[1])
{
const uid = match[1];
const url = `https://api.live.bilibili.com/room/v1/Room/getRoomInfoOld?mid=${uid}`;
const json = await Ajax.getJson(url);
const coverUrl = json.data.cover;
const imageViewer = new ImageViewer(coverUrl);
document.querySelector("#view-cover").addEventListener("click", () =>
{
imageViewer.show();
});
}
},
},
};
}
})();