Improve UI

This commit is contained in:
the1812 2018-10-26 13:23:33 +08:00
parent efe0921e77
commit fc8e111435
8 changed files with 16 additions and 17 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
(()=>{return(e,t)=>{const o=(unsafeWindow||window).aid;const s=(unsafeWindow||window).cid;if(o===undefined||s===undefined){return}class n{constructor(e,t,o){this.quality=e;this.internalName=t;this.displayName=o}async downloadInfo(){const e=new i(this);await e.fetchVideoInfo();return e}static get availableFormats(){return new Promise((e,t)=>{const a=`https://api.bilibili.com/x/player/playurl?avid=${o}&cid=${s}&otype=json`;const i=new XMLHttpRequest;i.addEventListener("load",()=>{const t=JSON.parse(i.responseText).data;const o=t.accept_quality;const s=t.accept_format.split(",");const a=t.accept_description;const r=[];while(o.length>0){const e=new n(o.pop(),s.pop(),a.pop());r.push(e)}e(r)});i.addEventListener("error",()=>t(`获取清晰度信息失败.`));i.withCredentials=true;i.open("GET",a);i.send()})}}class a{constructor(e,t,o,s){this.length=e;this.size=t;this.url=o;this.backupUrls=s}}class i{constructor(e,t){this.format=e;this.fragments=t||[];this.progress=null;this.loaded=0;this.totalSize=null}fetchVideoInfo(){return new Promise((e,t)=>{const n=`https://api.bilibili.com/x/player/playurl?avid=${o}&cid=${s}&qn=${this.format.quality}&otype=json`;const i=new XMLHttpRequest;i.addEventListener("load",()=>{const o=JSON.parse(i.responseText.replace(/http:/g,"https:")).data;if(o.quality!==this.format.quality){t("获取下载链接失败, 请确认当前账号有下载权限后重试.")}const s=o.durl;this.fragments=s.map(e=>new a(e.length,e.size,e.url,e.backup_url));e(this.fragments)});i.withCredentials=true;i.open("GET",n);i.send()})}downloadUrl(e){return new Promise((t,o)=>{const s=new XMLHttpRequest;s.open("GET",e);s.responseType="arraybuffer";s.withCredentials=false;s.addEventListener("progress",e=>{this.progress&&this.progress((this.loaded+e.loaded)/this.totalSize)});s.addEventListener("load",()=>{if(s.status===200){t(s.response)}else{o(`请求失败.`)}});s.addEventListener("error",()=>{o(`下载失败.`)});s.send()})}copyUrl(){const e=this.fragments.map(e=>e.url).reduce((e,t)=>e+"\r\n"+t);GM_setClipboard(e,"text")}async download(){const e=[];this.loaded=0;this.totalSize=this.fragments.map(e=>e.size).reduce((e,t)=>e+t);for(const t of this.fragments){const o=await this.downloadUrl(t.url);this.loaded+=t.size;e.push(o)}if(e.length<1){throw new Error("下载失败.")}let t=null;let o=null;const s=e=>(e||this.fragments[0]).url.indexOf(".flv")!==-1?".flv":".mp4";if(e.length===1){const[n]=e;t=new Blob([n],{type:s()===".flv"?"video/x-flv":"video/mp4"});o=document.title.replace("_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili","")+s()}else{const n=new JSZip;const a=document.title.replace("_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili","");e.forEach((e,t)=>{n.file(`${a} - ${t+1}${s(this.fragments[t])}`,e)});t=await n.generateAsync({type:"blob"});o=a+".zip"}const n=URL.createObjectURL(t);const a=$("a#video-complete").attr("href");if(a){URL.revokeObjectURL(a)}this.progress&&this.progress(0);return{url:n,filename:o}}}return{settingsWidget:{category:"视频与直播",content:t.data.downloadVideoDom.text,success:()=>{n.availableFormats.then(e=>{let[o]=e;const s=()=>o.downloadInfo().catch(e=>{$(".download-video-panel").addClass("error");$(".video-error").text(e)});async function n(){if(!o){return}$(".download-video-panel").removeClass("action").addClass("progress");const e=await s();e.progress=(e=>{$(".download-progress-value").text(`${fixed(e*100)}`);$(".download-progress-foreground").css("transform",`scaleX(${e})`)});const t=await e.download();const n=document.getElementById("video-complete");n.setAttribute("href",t.url);n.setAttribute("download",t.filename);n.click();$(".download-video-panel").removeClass("opened").removeClass("progress").addClass("quality")}async function a(){if(!o){return}const e=await s();e.copyUrl();$(".download-video-panel").removeClass("opened").removeClass("action").addClass("quality")}$(".video-action>#video-action-download").on("click",n);$(".video-action>#video-action-copy").on("click",a);e.forEach(e=>{$(`<li>${e.displayName}</li>`).on("click",()=>{o=e;$(".download-video-panel").removeClass("quality").addClass("action")}).prependTo("ol.video-quality")});t.applyStyle("downloadVideoStyle");$("#download-video").on("click",()=>{$(".download-video-panel").toggleClass("opened")}).parent().removeClass("hidden")});$(".video-error").on("click",()=>{$(".video-error").text("");$(".download-video-panel").removeClass("error").removeClass("progress").addClass("quality")})}}}}})();
(()=>{return(e,t)=>{const o=(unsafeWindow||window).aid;const s=(unsafeWindow||window).cid;if(o===undefined||s===undefined){return}class n{constructor(e,t,o){this.quality=e;this.internalName=t;this.displayName=o}async downloadInfo(){const e=new i(this);await e.fetchVideoInfo();return e}static get availableFormats(){return new Promise((e,t)=>{const a=`https://api.bilibili.com/x/player/playurl?avid=${o}&cid=${s}&otype=json`;const i=new XMLHttpRequest;i.addEventListener("load",()=>{const t=JSON.parse(i.responseText).data;const o=t.accept_quality;const s=t.accept_format.split(",");const a=t.accept_description;const r=[];while(o.length>0){const e=new n(o.pop(),s.pop(),a.pop());r.push(e)}e(r)});i.addEventListener("error",()=>t(`获取清晰度信息失败.`));i.withCredentials=true;i.open("GET",a);i.send()})}}class a{constructor(e,t,o,s){this.length=e;this.size=t;this.url=o;this.backupUrls=s}}class i{constructor(e,t){this.format=e;this.fragments=t||[];this.progress=null;this.loaded=0;this.totalSize=null}fetchVideoInfo(){return new Promise((e,t)=>{const n=`https://api.bilibili.com/x/player/playurl?avid=${o}&cid=${s}&qn=${this.format.quality}&otype=json`;const i=new XMLHttpRequest;i.addEventListener("load",()=>{const o=JSON.parse(i.responseText.replace(/http:/g,"https:")).data;if(o.quality!==this.format.quality){t("获取下载链接失败, 请确认当前账号有下载权限后重试.")}const s=o.durl;this.fragments=s.map(e=>new a(e.length,e.size,e.url,e.backup_url));e(this.fragments)});i.withCredentials=true;i.open("GET",n);i.send()})}downloadUrl(e){return new Promise((t,o)=>{const s=new XMLHttpRequest;s.open("GET",e);s.responseType="arraybuffer";s.withCredentials=false;s.addEventListener("progress",e=>{this.progress&&this.progress((this.loaded+e.loaded)/this.totalSize)});s.addEventListener("load",()=>{if(s.status===200){t(s.response)}else{o(`请求失败.`)}});s.addEventListener("error",()=>{o(`下载失败.`)});s.send()})}copyUrl(){const e=this.fragments.map(e=>e.url).reduce((e,t)=>e+"\r\n"+t);GM_setClipboard(e,"text")}async download(){const e=[];this.loaded=0;this.totalSize=this.fragments.map(e=>e.size).reduce((e,t)=>e+t);for(const t of this.fragments){const o=await this.downloadUrl(t.url);this.loaded+=t.size;e.push(o)}if(e.length<1){throw new Error("下载失败.")}let t=null;let o=null;const s=e=>(e||this.fragments[0]).url.indexOf(".flv")!==-1?".flv":".mp4";if(e.length===1){const[n]=e;t=new Blob([n],{type:s()===".flv"?"video/x-flv":"video/mp4"});o=document.title.replace("_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili","")+s()}else{const n=new JSZip;const a=document.title.replace("_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili","");e.forEach((e,t)=>{n.file(`${a} - ${t+1}${s(this.fragments[t])}`,e)});t=await n.generateAsync({type:"blob"});o=a+".zip"}const n=URL.createObjectURL(t);const a=$("a#video-complete").attr("href");if(a){URL.revokeObjectURL(a)}this.progress&&this.progress(0);return{url:n,filename:o}}}return{settingsWidget:{category:"视频与直播",content:t.data.downloadVideoDom.text,success:()=>{n.availableFormats.then(e=>{let[o]=e;const s=()=>o.downloadInfo().catch(e=>{$(".download-video-panel").addClass("error");$(".video-error").text(e)});async function n(){if(!o){return}$(".download-video-panel").removeClass("action").addClass("progress");const e=await s();e.progress=(e=>{$(".download-progress-value").text(`${fixed(e*100)}`);$(".download-progress-foreground").css("transform",`scaleX(${e})`)});const t=await e.download();const n=document.getElementById("video-complete");n.setAttribute("href",t.url);n.setAttribute("download",t.filename);n.click();$(".download-video-panel").removeClass("progress").addClass("quality")}async function a(){if(!o){return}const e=await s();e.copyUrl();$(".download-video-panel").removeClass("action").addClass("quality")}$(".video-action>#video-action-download").on("click",n);$(".video-action>#video-action-copy").on("click",a);e.forEach(e=>{$(`<li>${e.displayName}</li>`).on("click",()=>{o=e;$(".download-video-panel").removeClass("quality").addClass("action")}).prependTo("ol.video-quality")});t.applyStyle("downloadVideoStyle");$("#download-video").on("click",()=>{$(".download-video-panel").toggleClass("opened")}).parent().removeClass("hidden")});$(".video-error").on("click",()=>{$(".video-error").text("");$(".download-video-panel").removeClass("error").removeClass("progress").addClass("quality")})}}}}})();

View File

@ -1 +1 @@
.download-video-panel.opened{transform:scaleY(1);}.download-video-panel{position:absolute;top:calc(100% + 8px);transition:all .16s ease-out;transform-origin:top;transform:scaleY(0);background:white;border-radius:4px;box-shadow:0px 3px 20px 2px #0004;z-index:100;}.gui-settings-content ol.video-quality li,.video-action>div{cursor:pointer;align-items:center;margin:0;padding:8px 16px;border-radius:4px;transition:all .2s ease-out;}.gui-settings-content ol.video-quality li:hover{background:rgba(0,0,0,0.16);}.video-quality,.video-progress,.video-action,.video-error{display:none;}.download-video-panel.quality:not(.error) .video-quality,.download-video-panel.progress:not(.error) .video-progress,.download-video-panel.action:not(.error) .video-action,.download-video-panel.error .video-error{display:block;}.download-progress-text{display:flex;}.download-progress-title{flex:1 0 0;}.download-progress-background{background-color:#8884;height:4px;width:100%;margin-top:4px;}.download-progress-foreground{background-color:$customStyleColor;transform-origin:left;transition:all .2s ease-out;transform:scaleX(0);height:100%;width:100%;}.video-error,.video-progress{padding:12px;}.video-progress{min-width:160px;}#video-complete{display:none;}
.download-video-panel.opened{transform:scaleY(1);}.download-video-panel{position:absolute;top:calc(100% + 8px);transition:all .16s ease-out;transform-origin:top;transform:scaleY(0);background:white;border-radius:4px;box-shadow:0px 3px 20px 2px #0004;z-index:100;}.gui-settings-content ol.video-quality li,.video-action>div{cursor:pointer;align-items:center;margin:0;padding:8px 16px;border-radius:4px;transition:all .2s ease-out;}.video-action>div{padding:12px 24px;}.gui-settings-content ol.video-quality li:hover,.video-action>div:hover{background:rgba(0,0,0,0.16);}.video-quality,.video-progress,.video-action,.video-error{display:none;}.download-video-panel.quality:not(.error) .video-quality,.download-video-panel.progress:not(.error) .video-progress,.download-video-panel.action:not(.error) .video-action,.download-video-panel.error .video-error{display:block;}.download-progress-text{display:flex;}.download-progress-title{flex:1 0 0;}.download-progress-background{background-color:#8884;height:4px;width:100%;margin-top:4px;}.download-progress-foreground{background-color:$customStyleColor;transform-origin:left;transition:all .2s ease-out;transform:scaleX(0);height:100%;width:100%;}.video-error,.video-progress{padding:12px;}.video-progress{min-width:160px;}#video-complete{display:none;}

File diff suppressed because one or more lines are too long

View File

@ -196,11 +196,7 @@
}
}
}
const box = $(".predefined-colors");
if (box.hasClass("opened"))
{
box.removeClass("opened");
}
$(".download-video-panel,.predefined-colors").removeClass("opened");
};
$(`input[type='checkbox'][key]`)
.on("change", e => checkBoxChange($(e.target)))

View File

@ -225,7 +225,6 @@
completeLink.setAttribute("download", result.filename);
completeLink.click();
$(".download-video-panel")
.removeClass("opened")
.removeClass("progress")
.addClass("quality");
}
@ -238,7 +237,6 @@
const info = await getVideoInfo();
info.copyUrl();
$(".download-video-panel")
.removeClass("opened")
.removeClass("action")
.addClass("quality");
}

View File

@ -24,7 +24,12 @@
border-radius: 4px;
transition: all .2s ease-out;
}
.gui-settings-content ol.video-quality li:hover
.video-action>div
{
padding: 12px 24px;
}
.gui-settings-content ol.video-quality li:hover,
.video-action>div:hover
{
background: rgba(0,0,0,0.16);
}