imported>=海豚= |
imported>=海豚= |
| 第1行： |
第1行： |
| <noinclude>{{BilibiliVideo/doc/copyright}} | | <script> |
| ''' 本Widget不能单独使用'''，请使用{{tl|BilibiliVideo}}！</noinclude><includeonly><!--{if !isset($wgBilibili) || !$wgBilibili}--><!--{assign var="wgBilibili" value=true scope="global"}--><style> | | $(function() { |
| .bilibili-video-container { | | $('#pt-userpage').before($('<li id="pt-avatar"></li>').append(link)); |
| border: 1px solid rgba(170,170,170,0.37);
| | $('.ns-2 #firstHeading').prepend( |
| max-width: 100%;
| | $('<a>').attr({ |
| | href: 'https://hmoegirl.com/Special:Viewavatar?user=' + mw.config.get("wgPageName").replace(/^user:/i, ''), |
| | title: '查看头像' |
| | }).prepend( |
| | $('<img>') |
| | .attr('src', '//hmoegirl.com/extensions/Avatar/avatar.php?user=' + mw.config.get("wgPageName").replace(/^user:/i, '')) |
| | .css({ |
| | width: '1.2em', |
| | height: '1.2em', |
| | 'border-radius': '10px', |
| | padding: '4px' |
| | }) |
| | ) |
| | ); |
| | }); |
| | </script> |
| | <style> |
| | .mw-body-content p { |
| | padding: 3px; |
| | text-align: center; |
| } | | } |
| .bilibili-video-container.exec { | | .mw-widget-dateInputWidget.oo-ui-widget-enabled .mw-widget-dateInputWidget-handle { |
| display: table; | | font-size: 94%; |
| } | | } |
| .bilibili-iframe-container,
| | </style> |
| .bilibili-video-container {
| |
| display: none;
| |
| }
| |
| .bilibili-video-container,
| |
| .bilibili-video-container .bilibili-widescreen,
| |
| .bilibili-video-container iframe {
| |
| max-width: 100%;
| |
| background-color: #fff!important;
| |
| }
| |
| .bilibili-title {
| |
| padding: .2em 6.5em .2em 1em;
| |
| position: relative;
| |
| }
| |
| .bilibili-title a {
| |
| word-break: break-word;
| |
| }
| |
| .bilibili-widescreen {
| |
| position: absolute;
| |
| display: none;
| |
| width: 1em;
| |
| right: calc(-2rem - 1px);
| |
| border: 1px solid rgba(170,170,170,0.37);
| |
| padding: .25rem .5rem;
| |
| line-height: 1.5em;
| |
| top: -2px;
| |
| user-select: none;
| |
| cursor: pointer;
| |
| }
| |
| .onshow .bilibili-widescreen{
| |
| display: block;
| |
| }
| |
| .bilibili-toggle {
| |
| position: absolute;
| |
| top: calc(50% - .5em);
| |
| right: .7em;
| |
| line-height: 1em;
| |
| cursor: pointer;
| |
| padding-left: 1em;
| |
| background-image: url(/skins/Vector/images/search-ltr.png?39f97);
| |
| background-image: linear-gradient(transparent,transparent), url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2213%22%3E%3Cg%20stroke-width%3D%222%22%20stroke%3D%22%236c6c6c%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11.29%2011.71l-4-4%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
| |
| background-image: linear-gradient(transparent,transparent), url(/skins/Vector/images/search-ltr.svg?07752)!ie;
| |
| background-image: -o-linear-gradient(transparent,transparent), url(/skins/Vector/images/search-ltr.png?39f97);
| |
| background-position: left center;
| |
| background-repeat: no-repeat;
| |
| }
| |
| .bilibili-toggle:hover {
| |
| color: #36b;
| |
| }
| |
| .bilibili-video-button,
| |
| .bilibili-video-button:visited {
| |
| display: inline-block;
| |
| margin: 4px 5px;
| |
| padding: 10px 25px;
| |
| font-size: 14px;
| |
| text-align: center;
| |
| color: #fff;
| |
| background: #de698c;
| |
| border-radius: 4px;
| |
| }
| |
| .bilibili-iframe-container {
| |
| padding: 6px;
| |
| position: relative;
| |
| border: 0 solid rgba(170,170,170,0.37);
| |
| border-top-width: 1px;
| |
| }
| |
| .bilibili-video-container:not([data-max-width]) .bilibili-iframe-container {
| |
| max-width: calc(100% - 12px)!important;
| |
| }
| |
| .bilibili-video-container:not([data-max-width]).onshow .bilibili-iframe-container {
| |
| max-height: calc(100% - 27px)!important;
| |
| }
| |
| .bilibili-video-container textarea {
| |
| background: white;
| |
| color: black;
| |
| width: 80%;
| |
| margin: auto;
| |
| }
| |
| .bilibili-iframe-overlay {
| |
| width: 0;
| |
| height: 0;
| |
| padding-top: 30%;
| |
| text-align: center;
| |
| box-sizing: border-box;
| |
| background: rgb(167, 215, 249);
| |
| position: absolute;
| |
| top: 3px;
| |
| left: 6px;
| |
| z-index: 2;
| |
| }
| |
| .bilibili-iframe-retry-link {
| |
| position: absolute;
| |
| top: 10px;
| |
| right: 10px;
| |
| display: none;
| |
| background: white;
| |
| padding: 0px 0.5em;
| |
| }
| |
| </style><script>
| |
| "use strict";
| |
| window.RLQ.push(() => {
| |
| const errMsg = {
| |
| id: '此处填写的id有误，请参考<a href="https://zh.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">模板文档</a>修正……',
| |
| error: "执行出现问题，请复制以下内容并在提问求助区处粘贴寻求帮助：$$$",
| |
| attr: '下方填写的参数 $$$ 有误，请参考<a href="https://zh.moegirl.org.cn/Template:BilibiliVideo#firstHeading" target="_blank">模板文档</a>修正……',
| |
| };
| |
| const sanNode = $(`<${"span/"}>`);
| |
| const genErr = (type, msg = "") => type in errMsg ? `<${"div"} style="font-style: italic; border: 1px dashed red;">BilibiliVideo模板：${errMsg[type].replace("$$$", sanNode.text(msg).html())}<${"/div"}>` : "";
| |
| const injectErrMsgBefore = ($ele, type, msg = "") => $ele.before(genErr(type, msg));
| |
| try {
| |
| const isNaN = Number.isNaN || window.isNaN;
| |
| const cssLengthUnitValidator = (length, defaultValue, callback, paramName, $ele) => {
| |
| if (typeof length !== "string" || length.length === 0) {
| |
| callback(false);
| |
| return defaultValue;
| |
| }
| |
| const parsedNumber = parseFloat(length.replace(/[a-z]+/i, ""));
| |
| if (isNaN(parsedNumber) || parsedNumber <= 0) {
| |
| callback(false);
| |
| injectErrMsgBefore($ele, "attr", paramName);
| |
| return defaultValue;
| |
| }
| |
| if (/^(?:\d+|\d*\.\d+)(?:em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|Q|in|pc|pt|px|%)$/.test(length)) {
| |
| callback(true);
| |
| return length;
| |
| }
| |
| if (/^(?:\d+|\d*\.\d+)$/.test(length)) {
| |
| callback(true);
| |
| return `${length}px`;
| |
| }
| |
| callback(false);
| |
| injectErrMsgBefore($ele, "attr", paramName);
| |
| return defaultValue;
| |
| };
| |
| const fixedNumber = (number) => `${+number < 10 ? "0" : ""}${number}`;
| |
| const secondsParser = (seconds) => `${Math.floor(+seconds / 60)}:${fixedNumber(+seconds % 60)}`;
| |
| const idCorrector = (id) => {
| |
| if (/^(?:av)?\d{1,9}$/i.test(id)) {
| |
| return {
| |
| id: id.replace(/^av/i, ""),
| |
| prefix: {
| |
| href: "av",
| |
| iframe: "aid",
| |
| },
| |
| };
| |
| } else if (/^(?:(?:[bB][vV])?1)?[fZodR9XQDSUm21yCkr6zBqiveYah8bt4xsWpHnJE7jL5VG3guMTKNPAwcF]{9}$/.test(id)
| |
| && /4.1.7..$/.test(id)) {
| |
| return {
| |
| id: id.replace(/^.*([fZodR9XQDSUm21yCkr6zBqiveYah8bt4xsWpHnJE7jL5VG3guMTKNPAwcF]{9})$/i, "1$1"),
| |
| prefix: {
| |
| href: "BV",
| |
| iframe: "bvid",
| |
| },
| |
| };
| |
| }
| |
| return false;
| |
| };
| |
| if (mw.config.get("skin") === "minerva") {
| |
| $(".bilibili-video-container:not(.bilibili-video-initialized)").each((_, ele) => {
| |
| const element = $(ele),
| |
| dataset = ele.dataset;
| |
| element.addClass("bilibili-video-initialized");
| |
| const _id = dataset.id,
| |
| title = dataset.title,
| |
| pagename = dataset.pagename,
| |
| t = parseInt(dataset.t),
| |
| tIsInvalid = isNaN(t) || t <= 0,
| |
| subtitle = dataset.subtitle === "true" ? true : false;
| |
| let page = parseInt(dataset.page);
| |
| if (isNaN(page) || page < 1) {
| |
| page = 1;
| |
| if (typeof dataset.page === "string" && dataset.page !== "") {
| |
| injectErrMsgBefore(element, "attr", "page");
| |
| }
| |
| }
| |
| if ((isNaN(t) || t <= 0) && typeof dataset.t === "string" && dataset.t !== "") {
| |
| injectErrMsgBefore(element, "attr", "t");
| |
| }
| |
| const validation = idCorrector(_id);
| |
| let id,
| |
| prefix;
| |
| if (validation) {
| |
| id = validation.id;
| |
| prefix = validation.prefix;
| |
| } else {
| |
| ele.outerHTML = genErr("id");
| |
| return;
| |
| }
| |
| ele.innerText = "正在加载中，若长时间空白则说明是网络问题……";
| |
| $.ajax({
| |
| url: `https://api.bilibili.com/x/web-interface/view?${prefix.iframe}=${id}&jsonp=jsonp`,
| |
| type: "GET",
| |
| dataType: "jsonp",
| |
| timeout: 10000,
| |
| success: function ({ code, message, data }) {
| |
| if (code !== 0) {
| |
| element.before($("<a/>").addClass("bilibili-video-button").attr("rel", "nofollow noreferrer noopener").attr("href", `https://www.bilibili.com/video/${prefix.href}${id}?p=${page}${tIsInvalid ? "" : `&t=${t}`}`).text((title || prefix.href + id) + (![0, 1].includes(page) && !isNaN(page) ? ` (P${page})` : ""))).remove();
| |
| console.info("Widget:BilibiliVideo", `${prefix.href}${id}`, code, message);
| |
| return;
| |
| }
| |
| const list = data.pages;
| |
| let _page = 1;
| |
| const name = title || (data.title ? data.title : prefix.href + id);
| |
| let index;
| |
| let length;
| |
| if (pagename) {
| |
| for (index = 0, length = list.length; index < length; index++) {
| |
| if (list[index].part !== pagename) { continue; }
| |
| _page = list[index].page;
| |
| break;
| |
| }
| |
| } else { _page = page; }
| |
| index = _page - 1;
| |
| const time = secondsParser(t);
| |
| const button = $("<a/>").addClass("bilibili-video-button").attr("rel", "nofollow noreferrer noopener").attr("href", `https://www.bilibili.com/video/${prefix.href}${id}?p=${_page}${tIsInvalid ? "" : `&t=${t}`}`).text(`${name} [${_page}/${secondsParser(list[index].duration)}]${tIsInvalid ? "" : `[跳转至${time}]`}`);
| |
| if (list[index] !== undefined && list[index].cid !== undefined && subtitle) {
| |
| button.append(`<br>（${_page}、${list[index].part}）`);
| |
| }
| |
| element.before(button).remove();
| |
| },
| |
| error: function () {
| |
| element.before($("<a/>").addClass("bilibili-video-button").attr("rel", "nofollow noreferrer noopener").attr("href", `https://www.bilibili.com/video/${prefix.href}${id}?p=${page}${tIsInvalid ? "" : `&t=${t}`}`).text((title || prefix.href + id) + (![0, 1].includes(page) && !isNaN(page) ? ` (P${page})` : ""))).remove();
| |
| },
| |
| });
| |
| });
| |
| }
| |
| else {
| |
| const global_element = $("#mw-content-text");
| |
| const placeholderToggle = (iframe) => {
| |
| if (iframe.data("displayFlag")) {
| |
| iframe.data("displayFlag", false);
| |
| iframe.data("placeholder").fadeOut(370);
| |
| }
| |
| };
| |
| let lazyLoadObserver;
| |
| if ("IntersectionObserver" in window &&
| |
| "IntersectionObserverEntry" in window &&
| |
| "intersectionRatio" in window.IntersectionObserverEntry.prototype &&
| |
| "isIntersecting" in window.IntersectionObserverEntry.prototype) {
| |
| lazyLoadObserver = new IntersectionObserver((entries) => {
| |
| entries.forEach((entry) => {
| |
| if (entry.isIntersecting) {
| |
| entry.target.src = entry.target.dataset.src;
| |
| setTimeout(() => {
| |
| placeholderToggle($(entry.target));
| |
| }, 13070);
| |
| lazyLoadObserver.unobserve(entry.target);
| |
| }
| |
| });
| |
| });
| |
| } else {
| |
| lazyLoadObserver = {
| |
| observe: (target) => {
| |
| target.src = target.dataset.src;
| |
| setTimeout(() => {
| |
| placeholderToggle($(target));
| |
| }, 13070);
| |
| },
| |
| };
| |
| }
| |
| const iframe_href_base = "https://www.bilibili.com/blackboard/newplayer.html?playlist=true&playlist_order=sequential&musth5=1&noEndPanel=1&crossDomain=1&autoplay=0&";
| |
| const EPSILON = 2.220446049250313e-16,
| |
| rememberWH = function rememberWH(ele) {
| |
| ele.data({ width: ele.width(), height: ele.height() });
| |
| },
| |
| setTureHeight = function setTureHeight(ele) {
| |
| const barHeight = ele.data("height") - ele.data("width") * 9 / 16; //计算标题和播放器控制栏高度
| |
| ele.height(ele.width() * 9 / 16 + barHeight);
| |
| },
| |
| setWH = function setWH(ele) {
| |
| ele.css({ width: "100%", height: "100%" });
| |
| },
| |
| recallWH = function recallWH(ele) {
| |
| ele.width(ele.data("width")).height(ele.data("height"));
| |
| },
| |
| setMaxHeight = function setMaxHeight(container, target) {
| |
| const h = container.outerHeight(true);
| |
| let t = 0;
| |
| container.children().each((_, ele) => {
| |
| t += $(ele).outerHeight(true);
| |
| });
| |
| target.css("max-height", `calc(100% - ${parseInt(t - h + 2 - (Number.EPSILON || EPSILON))}px)`);
| |
| };
| |
| const run = () => {
| |
| $(".bilibili-video-container:not(.exec)").addClass("exec").each((_, ele) => {
| |
| const dataset = ele.dataset,
| |
| _id = dataset.id,
| |
| selfbox = $(ele);
| |
| const validation = idCorrector(_id);
| |
| let id,
| |
| prefix;
| |
| if (validation) {
| |
| id = validation.id;
| |
| prefix = validation.prefix;
| |
| } else {
| |
| ele.outerHTML = genErr("id");
| |
| return;
| |
| }
| |
| let page = parseInt(+(dataset.page || 1));
| |
| if (isNaN(page) || page < 1) {
| |
| page = 1;
| |
| if (typeof dataset.page === "string" && dataset.page !== "") {
| |
| injectErrMsgBefore(selfbox, "attr", "page");
| |
| }
| |
| }
| |
| const pagename = dataset.pagename;
| |
| const title = dataset.title;
| |
| const height = cssLengthUnitValidator(dataset.height, "441px", (isValidated) => isValidated || selfbox.removeAttr("data-height"), "height", selfbox);
| |
| const width = cssLengthUnitValidator(dataset.width, "665px", (isValidated) => isValidated || selfbox.removeAttr("data-width"), "width", selfbox);
| |
| const maxHeight = cssLengthUnitValidator(dataset.maxHeight, "100vh", (isValidated) => isValidated || selfbox.removeAttr("data-max-height"), "maxHeight", selfbox);
| |
| const maxWidth = cssLengthUnitValidator(dataset.maxWidth, "100%", (isValidated) => isValidated || selfbox.removeAttr("data-max-width"), "maxWidth", selfbox);
| |
| const subtitle = dataset.subtitle === "true" ? true : false;
| |
| const t = parseInt(dataset.t);
| |
| const tIsInvalid = isNaN(t) || t <= 0;
| |
| const iframeContainer = selfbox.find(".bilibili-iframe-container");
| |
| const title_text = $("<a/>").attr("rel", "nofollow noreferrer noopener").addClass("external text").attr({
| |
| href: `https://www.bilibili.com/video/${prefix.href}${id}?p=${page}${tIsInvalid ? "" : `&t=${t}`}`,
| |
| target: "_blank",
| |
| }).prependTo(selfbox.find(".bilibili-title"));
| |
| const iframe = $("<iframe/>").attr({
| |
| frameborder: 0,
| |
| scrolling: "no",
| |
| src: "",
| |
| allowfullscreen: true,
| |
| "class": "bilibili-iframe",
| |
| }).css({
| |
| width: width,
| |
| height: height,
| |
| "max-width": maxWidth,
| |
| "max-height": maxHeight,
| |
| });
| |
| if (!tIsInvalid) {
| |
| selfbox.removeAttr("data-auto-expand");
| |
| } else if (typeof dataset.t === "string" && dataset.t !== "") {
| |
| injectErrMsgBefore(selfbox, "attr", "t");
| |
| }
| |
| const time = secondsParser(t);
| |
| title_text.text(`${(title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[视频从${time}开始播放]`)}【视频信息加载中……】`);
| |
| iframeContainer.css({
| |
| width: width,
| |
| height: height,
| |
| "max-width": maxWidth,
| |
| "max-height": maxHeight,
| |
| });
| |
| iframe.appendTo(iframeContainer);
| |
| const div = $("<div/>");
| |
| div.css({
| |
| position: "absolute",
| |
| top: "0",
| |
| left: "0",
| |
| bottom: "0",
| |
| right: "0",
| |
| "z-index": "99",
| |
| display: "flex",
| |
| "align-items": "center",
| |
| background: "rgba(255, 255, 255, .37)",
| |
| });
| |
| $.ajax({
| |
| url: `https://api.bilibili.com/x/web-interface/view?${prefix.iframe}=${id}&jsonp=jsonp`,
| |
| type: "GET",
| |
| dataType: "jsonp",
| |
| timeout: 10000,
| |
| success: function ({ code, message, data }) {
| |
| if (code !== 0) {
| |
| title_text.text((title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[视频从${time}开始播放]`));
| |
| iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`);
| |
| lazyLoadObserver.observe(iframe[0]);
| |
| console.info("Widget:BilibiliVideo", `${prefix.href}${id}`, code, message);
| |
| return;
| |
| }
| |
| const list = data.pages;
| |
| let _page = 1;
| |
| const name = title || (data.title ? data.title : prefix.href + id);
| |
| let index;
| |
| let length;
| |
| if (pagename) {
| |
| for (index = 0, length = list.length; index < length; index++) {
| |
| if (list[index].part !== pagename) { continue; }
| |
| _page = list[index].page;
| |
| break;
| |
| }
| |
| } else { _page = page; }
| |
| index = _page - 1;
| |
| const href = title_text.attr("href");
| |
| if (list[index] !== undefined && list[index].cid !== undefined) {
| |
| iframe.attr("data-src", `${iframe_href_base}${prefix.iframe}=${id}&cid=${list[index].cid}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`);
| |
| title_text.attr("href", href.replace(new RegExp(`\\?p=${page}`, "g"), `?p=${_page}`));
| |
| title_text.text(`${name} [${_page}/${list.length}]${tIsInvalid ? "" : `[视频从${time}开始播放]`}`);
| |
| if (subtitle) { title_text.append(`<br>（${_page}、${list[index].part}）`); }
| |
| } else {
| |
| title_text.text(name + (tIsInvalid ? "" : `[视频从${time}开始播放]`));
| |
| iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${_page}${tIsInvalid ? "" : `&t=${t}`}`);
| |
| }
| |
| lazyLoadObserver.observe(iframe[0]);
| |
| },
| |
| error: function () {
| |
| title_text.text((title || prefix.href + id) + (![0, 1].includes(page) ? ` (P${page})` : "") + (tIsInvalid ? "" : `[视频从${time}开始播放]`));
| |
| iframe.attr("data-src", `${iframe_href_base + prefix.iframe}=${id}&page=${page}${tIsInvalid ? "" : `&t=${t}`}`);
| |
| lazyLoadObserver.observe(iframe[0]);
| |
| },
| |
| });
| |
| $(run);
| |
| mw.hook("wikipage.content").add(run);
| |
| $(window).on("load", run);
| |
| $(window).on("resize", () => {
| |
| $(".bilibili-video-container.onshow.widescreen").each((_, ele) => {
| |
| const selfbox = $(ele);
| |
| selfbox.css("width", selfbox.parent().width() > Math.min(911, global_element.width()) ? "73%" : "100%");
| |
| setTureHeight(selfbox);
| |
| setMaxHeight(selfbox, selfbox.find(".bilibili-iframe-container"));
| |
| });
| |
| });
| |
| }
| |
| } catch (e) {
| |
| /* eslint-disable */
| |
| var msg = genErr("error", navigator.userAgent + " : " + e + " " + e.stack.split("\n")[1].trim());
| |
| $(".bilibili-video-container").each(function (_, ele) {
| |
| ele.outerHTML = msg;
| |
| });
| |
| /* eslint-enable */
| |
| }
| |
| });
| |
| </script><!--{/if}--></includeonly>
| |