no-muse
/
musescore-downloader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style: use JavaScript Standard Style

This commit is contained in:
Xmader 2020-05-17 18:57:28 -04:00
parent 0fc5b0d990
commit 435c4427f3
10 changed files with 467 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -1 +1,2 @@
dist/*
rollup*

54
.eslintrc
View File

@ -5,31 +5,41 @@
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"standard",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking"
],
"rules": {
"indent": [
"dot-notation": "off",
"no-useless-constructor": "off",
"@typescript-eslint/no-useless-constructor": "error",
"no-dupe-class-members": "off",
"@typescript-eslint/no-dupe-class-members": "error",
"@typescript-eslint/no-floating-promises": "warn",
"@typescript-eslint/member-delimiter-style": "warn",
"@typescript-eslint/ban-ts-ignore": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/prefer-regexp-exec": "off",
"no-trailing-spaces": [
"error",
4
{
"ignoreComments": true
}
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"comma-dangle": [
"warn",
"double"
],
"semi": [
"warn",
"never"
],
"no-console": "off"
"always-multiline"
]
},
"parserOptions": {
"project": [
"./tsconfig.json"
]
}
}

18
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,18 @@
{
"eslint.options": {},
"eslint.validate": [
"javascript",
"typescript",
],
"editor.tabSize": 2,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.format.insertSpaceAfterConstructor": true,
"typescript.format.insertSpaceAfterConstructor": true,
"[typescript]": {
"editor.formatOnSave": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}

149
src/main.ts
View File

@ -1,27 +1,27 @@
import "./meta"
import './meta'
import { ScorePlayerData } from "./types"
import { waitForDocumentLoaded } from "./utils"
import * as recaptcha from "./recaptcha"
import { ScorePlayerData } from './types'
import { waitForDocumentLoaded } from './utils'
import * as recaptcha from './recaptcha'
import { PDFWorkerHelper } from "./worker-helper"
import FileSaver from "file-saver/dist/FileSaver.js"
import { PDFWorkerHelper } from './worker-helper'
import FileSaver from 'file-saver/dist/FileSaver.js'
const saveAs: typeof import("file-saver").saveAs = FileSaver.saveAs
const saveAs: typeof import('file-saver').saveAs = FileSaver.saveAs
const PROCESSING_TEXT = "Processing…"
const FAILED_TEXT = "❌Download Failed!"
const WEBMSCORE_URL = "https://cdn.jsdelivr.net/npm/webmscore@0.5/webmscore.js"
const PROCESSING_TEXT = 'Processing…'
const FAILED_TEXT = '❌Download Failed!'
const WEBMSCORE_URL = 'https://cdn.jsdelivr.net/npm/webmscore@0.5/webmscore.js'
let pdfBlob: Blob
let msczBufferP: Promise<ArrayBuffer>
let msczBufferP: Promise<ArrayBuffer> | undefined
const generatePDF = async (imgURLs: string[], imgType: "svg" | "png", name?: string) => {
const generatePDF = async (imgURLs: string[], imgType: 'svg' | 'png', name?: string): Promise<void> => {
if (pdfBlob) {
return saveAs(pdfBlob, `${name}.pdf`)
}
const cachedImg = document.querySelector("img[src*=score_]") as HTMLImageElement
const cachedImg: HTMLImageElement = document.querySelector('img[src*=score_]')
const { naturalWidth: width, naturalHeight: height } = cachedImg
const worker = new PDFWorkerHelper()
@ -33,40 +33,40 @@ const generatePDF = async (imgURLs: string[], imgType: "svg" | "png", name?: str
saveAs(pdfBlob, `${name}.pdf`)
}
const getPagesNumber = (scorePlayerData: ScorePlayerData) => {
const getPagesNumber = (scorePlayerData: ScorePlayerData): number => {
try {
return scorePlayerData.json.metadata.pages
} catch (_) {
return document.querySelectorAll("img[src*=score_]").length
return document.querySelectorAll('img[src*=score_]').length
}
}
const getImgType = (): "svg" | "png" => {
const getImgType = (): 'svg' | 'png' => {
try {
const imgE: HTMLImageElement = document.querySelector("img[src*=score_]")
const imgE: HTMLImageElement = document.querySelector('img[src*=score_]')
const { pathname } = new URL(imgE.src)
const imgtype = pathname.match(/\.(\w+)$/)[1]
return imgtype as "svg" | "png"
return imgtype as 'svg' | 'png'
} catch (_) {
return null
}
}
const getTitle = (scorePlayerData: ScorePlayerData) => {
const getTitle = (scorePlayerData: ScorePlayerData): string => {
try {
return scorePlayerData.json.metadata.title
} catch (_) {
return ""
return ''
}
}
const getScoreFileName = (scorePlayerData: ScorePlayerData) => {
return getTitle(scorePlayerData).replace(/[\s<>:{}"/\\|?*~.\0\cA-\cZ]+/g, "_")
const getScoreFileName = (scorePlayerData: ScorePlayerData): string => {
return getTitle(scorePlayerData).replace(/[\s<>:{}"/\\|?*~.\0\cA-\cZ]+/g, '_')
}
const fetchMscz = async (url: string): Promise<ArrayBuffer> => {
if (!msczBufferP) {
msczBufferP = (async () => {
msczBufferP = (async (): Promise<ArrayBuffer> => {
const token = await recaptcha.execute()
const r = await fetch(url + token)
const data = await r.arrayBuffer()
@ -77,12 +77,12 @@ const fetchMscz = async (url: string): Promise<ArrayBuffer> => {
return msczBufferP
}
const main = () => {
const main = (): void => {
// @ts-ignore
if (!window.UGAPP || !window.UGAPP.store || !window.UGAPP.store.jmuse_settings) { return }
// init recaptcha
// eslint-disable-next-line @typescript-eslint/no-floating-promises
recaptcha.init()
// @ts-ignore
@ -96,46 +96,47 @@ const main = () => {
// https://github.com/Xmader/cloudflare-worker-musescore-mscz
const msczURL = `https://musescore.now.sh/api/mscz?id=${id}&token=`
const mxlURL = baseURL + "score.mxl"
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")[4]
const downloadBtn = btnsDiv.querySelector("button, .button") as HTMLElement
const btnsDiv = document.querySelector('.score-right .buttons-wrapper') || document.querySelectorAll('aside section > div')[4]
const downloadBtn = btnsDiv.querySelector('button, .button') as HTMLElement
downloadBtn.onclick = null
// fix the icon of the download btn
// if the `downloadBtn` seleted was a `Print` btn, replace the `print` icon with the `download` icon
const svgPath: SVGPathElement = downloadBtn.querySelector("svg > path")
const svgPath: SVGPathElement = downloadBtn.querySelector('svg > path')
if (svgPath) {
svgPath.setAttribute("d", "M9.6 2.4h4.8V12h2.784l-5.18 5.18L6.823 12H9.6V2.4zM19.2 19.2H4.8v2.4h14.4v-2.4z")
svgPath.setAttribute('d', 'M9.6 2.4h4.8V12h2.784l-5.18 5.18L6.823 12H9.6V2.4zM19.2 19.2H4.8v2.4h14.4v-2.4z')
}
const imgType = getImgType() || "svg"
const imgType = getImgType() || 'svg'
const sheetImgURLs = Array.from({ length: getPagesNumber(scorePlayer) }).fill(null).map((_, i) => {
return baseURL + `score_${i}.${imgType}`
})
const downloadURLs = {
"MSCZ": null,
"PDF": null,
"MusicXML": mxlURL,
"MIDI": midiURL,
"MP3": mp3URL,
"Parts": null,
MSCZ: null,
PDF: null,
MusicXML: mxlURL,
MIDI: midiURL,
MP3: mp3URL,
Parts: null,
}
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const createBtn = (name: string) => {
const btn = downloadBtn.cloneNode(true) as HTMLElement
const btn: HTMLButtonElement = downloadBtn.cloneNode(true) as any
if (btn.nodeName.toLowerCase() == "button") {
btn.setAttribute("style", "width: 205px !important")
if (btn.nodeName.toLowerCase() === 'button') {
btn.setAttribute('style', 'width: 205px !important')
} else {
btn.dataset.target = ""
btn.dataset.target = ''
}
const textNode = [...btn.childNodes].find((x) => {
return x.textContent.includes("Download") || x.textContent.includes("Print")
return x.textContent.includes('Download') || x.textContent.includes('Print')
})
textNode.textContent = `Download ${name}`
@ -149,58 +150,60 @@ const main = () => {
const url = downloadURLs[name]
const { btn, textNode } = createBtn(name)
if (name == "PDF") {
btn.onclick = async () => {
if (name === 'PDF') {
btn.onclick = async (): Promise<void> => {
const filename = getScoreFileName(scorePlayer)
textNode.textContent = PROCESSING_TEXT
try {
await generatePDF(sheetImgURLs, imgType, filename)
textNode.textContent = "Download PDF"
textNode.textContent = 'Download PDF'
} catch (err) {
textNode.textContent = FAILED_TEXT
console.error(err)
}
}
} else if (name == "MSCZ") {
btn.onclick = async () => {
} else if (name === 'MSCZ') {
btn.onclick = async (): Promise<void> => {
textNode.textContent = PROCESSING_TEXT
try {
const data = new Blob([await fetchMscz(msczURL)])
textNode.textContent = "Download MSCZ"
textNode.textContent = 'Download MSCZ'
saveAs(data, `${filename}.mscz`)
} catch (err) {
textNode.textContent = FAILED_TEXT
console.error(err)
}
}
} else if (name == "Parts") { // download individual parts
btn.title = "Download individual parts (BETA)"
const cb = btn.onclick = async () => {
} else if (name === 'Parts') { // download individual parts
btn.title = 'Download individual parts (BETA)'
const cb = btn.onclick = async (): Promise<void> => {
btn.onclick = null
textNode.textContent = PROCESSING_TEXT
const w = window.open("")
const w = window.open('')
const txt = document.createTextNode(PROCESSING_TEXT)
w.document.body.append(txt)
// set page hooks
const destroy = () => {
// eslint-disable-next-line prefer-const
let score: any
const destroy = (): void => {
score.destroy()
w.close()
}
window.addEventListener("unload", destroy)
w.addEventListener("beforeunload", () => {
window.addEventListener('unload', destroy)
w.addEventListener('beforeunload', () => {
score.destroy()
window.removeEventListener("unload", destroy)
textNode.textContent = "Download Parts"
window.removeEventListener('unload', destroy)
textNode.textContent = 'Download Parts'
btn.onclick = cb
})
// load webmscore (https://github.com/LibreScore/webmscore)
const script = w.document.createElement("script")
const script = w.document.createElement('script')
script.src = WEBMSCORE_URL
w.document.body.append(script)
await new Promise(resolve => { script.onload = resolve })
@ -209,32 +212,32 @@ const main = () => {
const data = new Uint8Array(
new Uint8Array(await fetchMscz(msczURL)) // copy its ArrayBuffer
)
const score = await w["WebMscore"].load("mscz", data)
score = await w['WebMscore'].load('mscz', data)
await score.generateExcerpts()
const metadata = await score.metadata()
console.log("score metadata loaded by webmscore", metadata)
console.log('score metadata loaded by webmscore', metadata)
// render the part selection page
txt.remove()
const fieldset = w.document.createElement("fieldset")
const fieldset = w.document.createElement('fieldset')
for (const excerpt of metadata.excerpts) {
const e = w.document.createElement("input")
e.name = "score-part"
e.type = "radio"
const e = w.document.createElement('input')
e.name = 'score-part'
e.type = 'radio'
e.value = excerpt.id
const label = w.document.createElement("label")
const label = w.document.createElement('label')
label.innerText = excerpt.title
const br = w.document.createElement("br")
const br = w.document.createElement('br')
fieldset.append(e, label, br)
}
const submitBtn = w.document.createElement("input")
submitBtn.type = "submit"
submitBtn.value = "Download PDF"
const submitBtn = w.document.createElement('input')
submitBtn.type = 'submit'
submitBtn.value = 'Download PDF'
fieldset.append(submitBtn)
w.document.body.append(fieldset)
submitBtn.onclick = async () => {
const checked: HTMLInputElement = w.document.querySelector("input:checked")
submitBtn.onclick = async (): Promise<void> => {
const checked: HTMLInputElement = fieldset.querySelector('input:checked')
const id = checked.value
await score.setExcerptId(id)
@ -244,7 +247,7 @@ const main = () => {
}
}
} else {
btn.onclick = () => {
btn.onclick = (): void => {
window.open(url)
}
}
@ -253,7 +256,7 @@ const main = () => {
})
downloadBtn.replaceWith(...newDownloadBtns)
}
// eslint-disable-next-line @typescript-eslint/no-floating-promises
waitForDocumentLoaded().then(main)

20
src/recaptcha.ts
View File

@ -2,12 +2,12 @@
/**
* the site key for Google reCAPTCHA v3
*/
const SITE_KEY = "6Ldxtt8UAAAAALvcRqWTlVOVIB7MmEWwN-zw_9fM"
const SITE_KEY = '6Ldxtt8UAAAAALvcRqWTlVOVIB7MmEWwN-zw_9fM'
type token = string;
interface GRecaptcha {
ready(cb: Function): void;
execute(siteKey: string, opts: { action: string }): Promise<token>;
ready (cb: Function): void;
execute (siteKey: string, opts: { action: string }): Promise<token>;
}
let gr: GRecaptcha | Promise<GRecaptcha>
@ -17,25 +17,25 @@ let gr: GRecaptcha | Promise<GRecaptcha>
*/
const load = (): Promise<GRecaptcha> => {
// load script
const script = document.createElement("script")
const script = document.createElement('script')
script.src = `https://www.recaptcha.net/recaptcha/api.js?render=${SITE_KEY}`
script.async = true
document.body.appendChild(script)
// add css
const style = document.createElement("style")
style.innerHTML = ".grecaptcha-badge { display: none !important; }"
const style = document.createElement('style')
style.innerHTML = '.grecaptcha-badge { display: none !important; }'
document.head.appendChild(style)
return new Promise((resolve) => {
script.onload = () => {
const grecaptcha: GRecaptcha = window["grecaptcha"]
script.onload = (): void => {
const grecaptcha: GRecaptcha = window['grecaptcha']
grecaptcha.ready(() => resolve(grecaptcha))
}
})
}
export const init = () => {
export const init = (): GRecaptcha | Promise<GRecaptcha> => {
if (!gr) {
gr = load()
}
@ -44,5 +44,5 @@ export const init = () => {
export const execute = async (): Promise<token> => {
const captcha = await init()
return captcha.execute(SITE_KEY, { action: "downloadmscz" })
return captcha.execute(SITE_KEY, { action: 'downloadmscz' })
}

2
src/types.ts
View File

@ -11,7 +11,7 @@ interface PartData {
part: {
name: string;
program: number;
}
};
}
interface Metadata {

12
src/utils.ts
View File

@ -1,19 +1,19 @@
export const getIndexPath = (id: number) => {
export const getIndexPath = (id: number): string => {
const idStr = String(id)
// 获取最后三位，倒序排列
// x, y, z are the reversed last digits of the score id. Example: id 123456789, x = 9, y = 8, z = 7
// https://developers.musescore.com/#/file-urls
// "5449062" -> ["2", "6", "0"]
const indexN = idStr.split("").reverse().slice(0, 3)
return indexN.join("/")
const indexN = idStr.split('').reverse().slice(0, 3)
return indexN.join('/')
}
export const waitForDocumentLoaded = (): Promise<void> => {
if (document.readyState !== "complete") {
if (document.readyState !== 'complete') {
return new Promise(resolve => {
document.addEventListener("readystatechange", () => {
if (document.readyState == "complete") {
document.addEventListener('readystatechange', () => {
if (document.readyState === 'complete') {
resolve()
}
}, { once: true })

14
src/worker-helper.ts
View File

@ -1,19 +1,19 @@
import { PDFWorkerMessage } from "./worker"
import { PDFWorker } from "../dist/cache/worker"
import { PDFWorkerMessage } from './worker'
import { PDFWorker } from '../dist/cache/worker'
const scriptUrlFromFunction = (fn: Function) => {
const blob = new Blob(["(" + fn.toString() + ")()"], { type: "application/javascript" })
const scriptUrlFromFunction = (fn: Function): string => {
const blob = new Blob(['(' + fn.toString() + ')()'], { type: 'application/javascript' })
return URL.createObjectURL(blob)
}
export class PDFWorkerHelper extends Worker {
constructor() {
constructor () {
const url = scriptUrlFromFunction(PDFWorker)
super(url)
}
generatePDF(imgURLs: string[], imgType: "svg" | "png", width: number, height: number): Promise<ArrayBuffer> {
generatePDF (imgURLs: string[], imgType: 'svg' | 'png', width: number, height: number): Promise<ArrayBuffer> {
const msg: PDFWorkerMessage = [
imgURLs,
imgType,
@ -22,7 +22,7 @@ export class PDFWorkerHelper extends Worker {
]
this.postMessage(msg)
return new Promise((resolve) => {
this.addEventListener("message", (e) => {
this.addEventListener('message', (e) => {
resolve(e.data)
})
})

85
src/worker.ts
View File

@ -1,53 +1,15 @@
/// <reference lib="webworker" />
import PDFDocument from "pdfkit/lib/document"
import SVGtoPDF from "svg-to-pdfkit"
import PDFDocument from 'pdfkit/lib/document'
import SVGtoPDF from 'svg-to-pdfkit'
type ImgType = "svg" | "png"
const generatePDF = async (imgURLs: string[], imgType: ImgType, width: number, height: number): Promise<ArrayBuffer> => {
// @ts-ignore
const pdf = new (PDFDocument as typeof import("pdfkit"))({
// compress: true,
size: [width, height],
autoFirstPage: false,
margin: 0,
layout: "portrait",
})
if (imgType == "png") {
const imgDataUrlList: string[] = await Promise.all(imgURLs.map(fetchDataURL))
imgDataUrlList.forEach((data) => {
pdf.addPage()
pdf.image(data, {
width,
height,
})
})
} else { // imgType == "svg"
const svgList = await Promise.all(imgURLs.map(fetchText))
svgList.forEach((svg) => {
pdf.addPage()
SVGtoPDF(pdf, svg, 0, 0, {
preserveAspectRatio: "none",
})
})
}
// @ts-ignore
const buf: Uint8Array = await pdf.getBuffer()
return buf.buffer
}
type ImgType = 'svg' | 'png'
const getDataURL = (blob: Blob): Promise<string> => {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => {
reader.onload = (): void => {
const result = reader.result
resolve(result as string)
}
@ -67,9 +29,46 @@ const fetchText = async (imgUrl: string): Promise<string> => {
return r.text()
}
const generatePDF = async (imgURLs: string[], imgType: ImgType, width: number, height: number): Promise<ArrayBuffer> => {
// @ts-ignore
const pdf = new (PDFDocument as typeof import('pdfkit'))({
// compress: true,
size: [width, height],
autoFirstPage: false,
margin: 0,
layout: 'portrait',
})
if (imgType === 'png') {
const imgDataUrlList: string[] = await Promise.all(imgURLs.map(fetchDataURL))
imgDataUrlList.forEach((data) => {
pdf.addPage()
pdf.image(data, {
width,
height,
})
})
} else { // imgType == "svg"
const svgList = await Promise.all(imgURLs.map(fetchText))
svgList.forEach((svg) => {
pdf.addPage()
SVGtoPDF(pdf, svg, 0, 0, {
preserveAspectRatio: 'none',
})
})
}
// @ts-ignore
const buf: Uint8Array = await pdf.getBuffer()
return buf.buffer
}
export type PDFWorkerMessage = [string[], ImgType, number, number];
onmessage = async (e) => {
onmessage = async (e): Promise<void> => {
const [
imgURLs,
imgType,

16
tsconfig.json Normal file
View File

@ -0,0 +1,16 @@
{
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"es2019",
],
"module": "commonjs",
"moduleResolution": "node",
"esModuleInterop": true,
"resolveJsonModule": true,
"strictNullChecks": true,
"sourceMap": false,
"newLine": "lf",
}
}