2019-11-03 19:13:06 +00:00
|
|
|
import "./meta"
|
|
|
|
|
|
|
|
import { ScorePlayerData } from "./types"
|
2019-12-01 05:16:07 +00:00
|
|
|
import { waitForDocumentLoaded } from "./utils"
|
2019-11-03 19:13:06 +00:00
|
|
|
|
2019-12-01 08:57:54 +00:00
|
|
|
import PDFDocument from "pdfkit/lib/document"
|
2019-12-01 09:11:40 +00:00
|
|
|
import saveAs from "file-saver/dist/FileSaver.js"
|
|
|
|
|
|
|
|
let pdfBlob: Blob
|
2019-12-01 07:10:51 +00:00
|
|
|
|
|
|
|
const generatePDF = (name?: string) => {
|
2019-12-01 09:11:40 +00:00
|
|
|
if (pdfBlob) {
|
|
|
|
return saveAs(pdfBlob, `${name}.pdf`)
|
|
|
|
}
|
|
|
|
|
2019-12-01 07:10:51 +00:00
|
|
|
const scoreImgs: NodeListOf<HTMLImageElement> = document.querySelectorAll("img[id^=score_]")
|
|
|
|
|
|
|
|
const { naturalWidth: width, naturalHeight: height } = scoreImgs[0]
|
|
|
|
|
|
|
|
const canvas = document.createElement("canvas")
|
|
|
|
const canvasContext = canvas.getContext("2d")
|
|
|
|
|
|
|
|
canvas.width = width
|
|
|
|
canvas.height = height
|
|
|
|
canvas.style.display = "none"
|
|
|
|
|
|
|
|
document.body.appendChild(canvas)
|
|
|
|
|
|
|
|
const imgDataList = [...scoreImgs].map((i) => {
|
|
|
|
canvasContext.clearRect(0, 0, width, height)
|
|
|
|
canvasContext.drawImage(i, 0, 0)
|
|
|
|
return canvas.toDataURL("image/png")
|
|
|
|
})
|
|
|
|
|
2019-12-01 08:57:54 +00:00
|
|
|
// @ts-ignore
|
|
|
|
const pdf = new (PDFDocument as typeof import("pdfkit"))({
|
2019-12-01 07:10:51 +00:00
|
|
|
// compress: true,
|
2019-12-01 08:57:54 +00:00
|
|
|
size: [width, height],
|
|
|
|
autoFirstPage: false,
|
|
|
|
margin: 0,
|
|
|
|
layout: "portrait",
|
2019-12-01 07:10:51 +00:00
|
|
|
})
|
|
|
|
|
2019-12-01 08:57:54 +00:00
|
|
|
imgDataList.forEach((data) => {
|
|
|
|
pdf.addPage()
|
2019-12-01 09:11:40 +00:00
|
|
|
pdf.image(data, {
|
2019-12-01 08:57:54 +00:00
|
|
|
width,
|
|
|
|
height,
|
|
|
|
})
|
2019-12-01 07:10:51 +00:00
|
|
|
})
|
2019-12-01 08:57:54 +00:00
|
|
|
|
2019-12-01 09:11:40 +00:00
|
|
|
// TODO: webworker
|
|
|
|
|
2019-12-01 08:57:54 +00:00
|
|
|
// @ts-ignore
|
2019-12-01 09:11:40 +00:00
|
|
|
return pdf.getBlob().then((blob: Blob) => {
|
|
|
|
pdfBlob = blob
|
|
|
|
saveAs(blob, `${name}.pdf`)
|
|
|
|
})
|
2019-12-01 07:10:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const getTitle = (scorePlayerData: ScorePlayerData) => {
|
|
|
|
try {
|
|
|
|
return scorePlayerData.json.metadata.title
|
|
|
|
} catch (_) {
|
|
|
|
return ""
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const getScoreFileName = (scorePlayerData: ScorePlayerData) => {
|
|
|
|
return getTitle(scorePlayerData).replace(/\W+/g, "_")
|
|
|
|
}
|
|
|
|
|
2019-11-29 23:07:43 +00:00
|
|
|
const main = () => {
|
2019-11-03 19:13:06 +00:00
|
|
|
|
2019-12-01 05:13:14 +00:00
|
|
|
// @ts-ignore
|
|
|
|
if (!window.UGAPP || !window.UGAPP.store || !window.UGAPP.store.jmuse_settings) { return }
|
|
|
|
|
2019-11-29 23:07:43 +00:00
|
|
|
// @ts-ignore
|
|
|
|
const scorePlayer: ScorePlayerData = window.UGAPP.store.jmuse_settings.score_player
|
|
|
|
|
2019-12-01 05:16:07 +00:00
|
|
|
const { id } = scorePlayer.json
|
2019-11-29 23:07:43 +00:00
|
|
|
const baseURL = scorePlayer.urls.image_path
|
2019-11-03 19:13:06 +00:00
|
|
|
|
2019-12-01 05:16:07 +00:00
|
|
|
// const msczURL = `https://musescore.com/static/musescore/scoredata/score/${getIndexPath(id)}/${id}/score_${vid}_${scoreHexId}.mscz`
|
|
|
|
|
|
|
|
// https://github.com/Xmader/cloudflare-worker-musescore-mscz
|
|
|
|
const msczURL = `https://musescore-mscz.99.workers.dev/${id}`
|
|
|
|
|
2019-11-29 23:07:43 +00:00
|
|
|
const mxlURL = baseURL + "score.mxl"
|
|
|
|
const { midi: midiURL, mp3: mp3URL } = scorePlayer.urls
|
|
|
|
|
|
|
|
const btnsDiv = document.querySelector(".score-right .buttons-wrapper") || document.querySelectorAll("aside section > div")[3]
|
|
|
|
const downloadBtn = btnsDiv.querySelector("button, .button") as HTMLElement
|
|
|
|
downloadBtn.onclick = null
|
|
|
|
|
|
|
|
const downloadURLs = {
|
|
|
|
"Musescore": msczURL,
|
2019-12-01 07:10:51 +00:00
|
|
|
"PDF": null,
|
2019-11-29 23:07:43 +00:00
|
|
|
"MusicXML": mxlURL,
|
|
|
|
"MIDI": midiURL,
|
|
|
|
"MP3": mp3URL,
|
2019-11-03 20:21:59 +00:00
|
|
|
}
|
2019-11-03 20:12:15 +00:00
|
|
|
|
2019-12-01 07:10:51 +00:00
|
|
|
const createBtn = (name: string) => {
|
2019-11-29 23:07:43 +00:00
|
|
|
const btn = downloadBtn.cloneNode(true) as HTMLElement
|
|
|
|
|
|
|
|
if (btn.nodeName.toLowerCase() == "button") {
|
|
|
|
btn.setAttribute("style", "width: 205px !important")
|
|
|
|
} else {
|
|
|
|
btn.dataset.target = ""
|
|
|
|
}
|
|
|
|
|
2019-12-01 07:10:51 +00:00
|
|
|
const textNode = [...btn.childNodes].find((x) => {
|
|
|
|
return x.nodeName.toLowerCase() == "#text"
|
|
|
|
&& x.textContent.includes("Download")
|
2019-11-29 23:07:43 +00:00
|
|
|
})
|
2019-12-01 07:10:51 +00:00
|
|
|
textNode.textContent = `Download ${name}`
|
|
|
|
|
|
|
|
return {
|
|
|
|
btn,
|
|
|
|
textNode,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const newDownloadBtns = Object.keys(downloadURLs).map((name) => {
|
|
|
|
const url = downloadURLs[name]
|
|
|
|
const { btn, textNode } = createBtn(name)
|
|
|
|
|
|
|
|
if (name !== "PDF") {
|
|
|
|
btn.onclick = () => {
|
|
|
|
window.open(url)
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
btn.onclick = () => {
|
|
|
|
const text = textNode.textContent
|
|
|
|
textNode.textContent = "Processing…"
|
|
|
|
generatePDF(getScoreFileName(scorePlayer)).then(() => {
|
|
|
|
textNode.textContent = text
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2019-11-29 23:07:43 +00:00
|
|
|
|
|
|
|
return btn
|
2019-11-03 20:21:59 +00:00
|
|
|
})
|
2019-11-03 20:01:29 +00:00
|
|
|
|
2019-11-29 23:07:43 +00:00
|
|
|
downloadBtn.replaceWith(...newDownloadBtns)
|
|
|
|
|
|
|
|
}
|
2019-11-03 19:13:06 +00:00
|
|
|
|
2019-11-29 23:07:43 +00:00
|
|
|
waitForDocumentLoaded().then(main)
|