131 lines
4.2 KiB
JavaScript
131 lines
4.2 KiB
JavaScript
import TracksTable from "./tracks_table.mjs"
|
|
import IntegrityManager from "./integrity_manager.mjs"
|
|
import { updateObjectFromJoinedKey } from "./utils.mjs"
|
|
|
|
export default class Editor {
|
|
constructor() {
|
|
const params = new URLSearchParams(window.location.search)
|
|
this.filename = params.get("f")
|
|
window.addEventListener("keydown", e => {
|
|
if (e.key === "s" && e.ctrlKey) {
|
|
e.preventDefault()
|
|
this.save()
|
|
}
|
|
})
|
|
|
|
this.tables = {
|
|
audio: new TracksTable(this, "audio", "audio-tracks", "audio_tracks"),
|
|
subtitle: new TracksTable(this, "subtitle", "subtitle-tracks", "subtitle_tracks")
|
|
}
|
|
|
|
this.data = {}
|
|
this.dirty = false
|
|
|
|
this.integrity_mgr = new IntegrityManager(this)
|
|
|
|
document.getElementById("check-integrity").addEventListener("click", () => this.checkIntegrity())
|
|
document.getElementById("improve-all").addEventListener("click", () => this.improveAllNames())
|
|
document.getElementById("save").addEventListener("click", () => this.save())
|
|
document.getElementById("reload").addEventListener("click", () => window.location.reload())
|
|
document.getElementById("toggle-notifs").addEventListener("click", () => this.toggleNotifications())
|
|
document.getElementById("close-notifs").addEventListener("click", () => this.closeNotifications())
|
|
|
|
this.setup()
|
|
}
|
|
|
|
setup() {
|
|
document.getElementById("filename").innerText = this.filename
|
|
this.fetchData()
|
|
}
|
|
|
|
fetchData() {
|
|
fetch(`/api/file/${this.filename}`).then(res => {
|
|
if (res.ok) {
|
|
return res.json()
|
|
}
|
|
return null
|
|
}).then(res => {
|
|
if (res !== null) {
|
|
this.data = res
|
|
this.displayData()
|
|
}
|
|
})
|
|
}
|
|
|
|
displayData() {
|
|
document.getElementById("title").value = this.data.title
|
|
this.tables.audio.loadTracks(this.data.audio_tracks)
|
|
this.tables.subtitle.loadTracks(this.data.subtitle_tracks)
|
|
}
|
|
|
|
save() {
|
|
fetch(`/api/file/${this.filename}`, {
|
|
method: "POST",
|
|
body: JSON.stringify(this.data),
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
}
|
|
}).then(res => {
|
|
if (res.ok) {
|
|
this.dirty = false
|
|
document.getElementById("unsaved").classList.remove("show")
|
|
this.notify("Saved successfully !", "success")
|
|
} else {
|
|
this.notify(`Error ${res.status}: ${res.statusText}`, "error", 10000)
|
|
}
|
|
})
|
|
}
|
|
|
|
setDirty() {
|
|
this.dirty = true
|
|
document.getElementById("unsaved").classList.add("show")
|
|
}
|
|
|
|
editTrack(listKey, trackIdx, key, value) {
|
|
updateObjectFromJoinedKey(this.data[listKey][trackIdx], key, value)
|
|
this.setDirty()
|
|
}
|
|
|
|
notify(text, type, duration=5000) {
|
|
const list = document.getElementById("notifs")
|
|
const hist = document.getElementById("notifs-hist").querySelector(".list")
|
|
const notif = document.createElement("div")
|
|
notif.classList.add("notif")
|
|
notif.dataset.type = type
|
|
notif.innerText = text
|
|
list.appendChild(notif)
|
|
setTimeout(() => notif.remove(), duration)
|
|
notif.addEventListener("click", () => notif.remove())
|
|
hist.prepend(notif.cloneNode(true))
|
|
}
|
|
|
|
checkIntegrity() {
|
|
if (this.integrity_mgr.checkIntegrity()) {
|
|
this.notify("No integrity error detected !", "success")
|
|
}
|
|
}
|
|
|
|
improveAllNames() {
|
|
this.integrity_mgr.improveAllNames()
|
|
this.notify("Improved all names !", "success")
|
|
}
|
|
|
|
toggleNotifications() {
|
|
const hist = document.getElementById("notifs-hist")
|
|
if (hist.classList.contains("show")) {
|
|
this.closeNotifications()
|
|
} else {
|
|
this.openNotifications()
|
|
}
|
|
}
|
|
|
|
openNotifications() {
|
|
const hist = document.getElementById("notifs-hist")
|
|
hist.classList.add("show")
|
|
}
|
|
|
|
closeNotifications() {
|
|
const hist = document.getElementById("notifs-hist")
|
|
hist.classList.remove("show")
|
|
}
|
|
} |