263 lines
8.1 KiB
TypeScript
263 lines
8.1 KiB
TypeScript
import './meta'
|
|
|
|
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'
|
|
|
|
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'
|
|
|
|
let pdfBlob: Blob
|
|
let msczBufferP: Promise<ArrayBuffer> | undefined
|
|
|
|
const generatePDF = async (imgURLs: string[], imgType: 'svg' | 'png', name?: string): Promise<void> => {
|
|
if (pdfBlob) {
|
|
return saveAs(pdfBlob, `${name}.pdf`)
|
|
}
|
|
|
|
const cachedImg: HTMLImageElement = document.querySelector('img[src*=score_]')
|
|
const { naturalWidth: width, naturalHeight: height } = cachedImg
|
|
|
|
const worker = new PDFWorkerHelper()
|
|
const pdfArrayBuffer = await worker.generatePDF(imgURLs, imgType, width, height)
|
|
worker.terminate()
|
|
|
|
pdfBlob = new Blob([pdfArrayBuffer])
|
|
|
|
saveAs(pdfBlob, `${name}.pdf`)
|
|
}
|
|
|
|
const getPagesNumber = (scorePlayerData: ScorePlayerData): number => {
|
|
try {
|
|
return scorePlayerData.json.metadata.pages
|
|
} catch (_) {
|
|
return document.querySelectorAll('img[src*=score_]').length
|
|
}
|
|
}
|
|
|
|
const getImgType = (): 'svg' | 'png' => {
|
|
try {
|
|
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'
|
|
} catch (_) {
|
|
return null
|
|
}
|
|
}
|
|
|
|
const getTitle = (scorePlayerData: ScorePlayerData): string => {
|
|
try {
|
|
return scorePlayerData.json.metadata.title
|
|
} catch (_) {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
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 (): Promise<ArrayBuffer> => {
|
|
const token = await recaptcha.execute()
|
|
const r = await fetch(url + token)
|
|
const data = await r.arrayBuffer()
|
|
return data
|
|
})()
|
|
}
|
|
|
|
return msczBufferP
|
|
}
|
|
|
|
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
|
|
const scorePlayer: ScorePlayerData = window.UGAPP.store.jmuse_settings.score_player
|
|
|
|
const { id } = scorePlayer.json
|
|
const baseURL = scorePlayer.urls.image_path
|
|
|
|
const filename = getScoreFileName(scorePlayer)
|
|
|
|
// 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 { 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
|
|
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')
|
|
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')
|
|
}
|
|
|
|
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,
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
|
const createBtn = (name: string) => {
|
|
const btn: HTMLButtonElement = downloadBtn.cloneNode(true) as any
|
|
|
|
if (btn.nodeName.toLowerCase() === 'button') {
|
|
btn.setAttribute('style', 'width: 205px !important')
|
|
} else {
|
|
btn.dataset.target = ''
|
|
}
|
|
|
|
const textNode = [...btn.childNodes].find((x) => {
|
|
return x.textContent.includes('Download') || x.textContent.includes('Print')
|
|
})
|
|
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 = async (): Promise<void> => {
|
|
const filename = getScoreFileName(scorePlayer)
|
|
|
|
textNode.textContent = PROCESSING_TEXT
|
|
|
|
try {
|
|
await generatePDF(sheetImgURLs, imgType, filename)
|
|
textNode.textContent = 'Download PDF'
|
|
} catch (err) {
|
|
textNode.textContent = FAILED_TEXT
|
|
console.error(err)
|
|
}
|
|
}
|
|
} 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'
|
|
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 (): Promise<void> => {
|
|
btn.onclick = null
|
|
textNode.textContent = PROCESSING_TEXT
|
|
|
|
const w = window.open('')
|
|
const txt = document.createTextNode(PROCESSING_TEXT)
|
|
w.document.body.append(txt)
|
|
|
|
// set page hooks
|
|
// eslint-disable-next-line prefer-const
|
|
let score: any
|
|
const destroy = (): void => {
|
|
score.destroy()
|
|
w.close()
|
|
}
|
|
window.addEventListener('unload', destroy)
|
|
w.addEventListener('beforeunload', () => {
|
|
score.destroy()
|
|
window.removeEventListener('unload', destroy)
|
|
textNode.textContent = 'Download Parts'
|
|
btn.onclick = cb
|
|
})
|
|
|
|
// load webmscore (https://github.com/LibreScore/webmscore)
|
|
const script = w.document.createElement('script')
|
|
script.src = WEBMSCORE_URL
|
|
w.document.body.append(script)
|
|
await new Promise(resolve => { script.onload = resolve })
|
|
|
|
// parse mscz data
|
|
const data = new Uint8Array(
|
|
new Uint8Array(await fetchMscz(msczURL)) // copy its ArrayBuffer
|
|
)
|
|
score = await w['WebMscore'].load('mscz', data)
|
|
await score.generateExcerpts()
|
|
const metadata = await score.metadata()
|
|
console.log('score metadata loaded by webmscore', metadata)
|
|
|
|
// render the part selection page
|
|
txt.remove()
|
|
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'
|
|
e.value = excerpt.id
|
|
const label = w.document.createElement('label')
|
|
label.innerText = excerpt.title
|
|
const br = w.document.createElement('br')
|
|
fieldset.append(e, label, br)
|
|
}
|
|
const submitBtn = w.document.createElement('input')
|
|
submitBtn.type = 'submit'
|
|
submitBtn.value = 'Download PDF'
|
|
fieldset.append(submitBtn)
|
|
w.document.body.append(fieldset)
|
|
|
|
submitBtn.onclick = async (): Promise<void> => {
|
|
const checked: HTMLInputElement = fieldset.querySelector('input:checked')
|
|
const id = checked.value
|
|
|
|
await score.setExcerptId(id)
|
|
|
|
const data = new Blob([await score.savePdf()])
|
|
saveAs(data, `${filename}-part-${id}.pdf`)
|
|
}
|
|
}
|
|
} else {
|
|
btn.onclick = (): void => {
|
|
window.open(url)
|
|
}
|
|
}
|
|
|
|
return btn
|
|
})
|
|
|
|
downloadBtn.replaceWith(...newDownloadBtns)
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
waitForDocumentLoaded().then(main)
|