Klagarge/Melies
Klagarge/Melies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

feat: add toolbar + notifications

Browse Source
This commit is contained in:
Louis Heredero 2025-04-30 15:34:21 +02:00
parent 2afecd1c04
commit bc5371de71
Signed by: HEL
GPG Key ID: 8D83DE470F8544E7
8 changed files with 285 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
editor/public/edit/index.html
View File

@ -13,20 +13,20 @@
<img src="/static/images/improve.svg">
<img class="clicked" src="/static/images/improve_clicked.svg">
</button>
<header id="topbar">
<nav>
</nav>
<header id="toolbar">
<a href="/">Home</a>
<button id="check-integrity">Check integrity</button>
<button id="improve-all">Improve all names</button>
<button id="save">Save</button>
<button id="reload">Reload</button>
<button id="toggle-notifs">Notifications</button>
</header>
<aside id="toolbar">
</aside>
<main id="main">
<h1>Edit <code id="filename"></code><span id="unsaved"> - Unsaved</span></h1>
<h1>Editing <code id="filename"></code><span id="unsaved"> - Unsaved</span></h1>
<div class="fields">
<div class="field">
<label for="title">Title</label>
<input type="text" id="title" name="title">
<input type="text" id="title" name="title" size="50">
</div>
</div>
<div class="audio">
@ -99,5 +99,12 @@
</div>
</form>
</div>
<aside id="notifs-hist">
<button id="close-notifs">Close</button>
<h2>Notifications</h2>
<div class="list"></div>
</aside>
<div id="notifs"></div>
</body>
</html>

11
editor/public/index.html
View File

@ -8,7 +8,14 @@
<script src="/static/js/index.js"></script>
</head>
<body>
<h1>Metadata Editor</h1>
<select name="file-sel" id="file-sel" oninput="selectFile(event)"></select>
<header>
<h1>Metadata Editor</h1>
</header>
<main>
<div>
<label for="file-sel">Choose a file</label>
<select name="file-sel" id="file-sel" oninput="selectFile(event)"></select>
</div>
</main>
</body>
</html>

98
editor/public/static/css/base.css
View File

@ -1,13 +1,107 @@
* {
/*padding: 0;*/
/*margin: 0;*/
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: Ubuntu;
margin: 0;
padding: 0;
}
.template {
display: none !important;
}
main {
padding: 1.2em;
}
header {
background-color: #2b2b2b;
padding: 1.2em;
grid-area: header;
display: flex;
gap: 0.8em;
color: white;
a, button {
padding: 0.4em 0.8em;
border: none;
color: black;
background-color: #e4e4e4;
font-size: inherit;
font-family: inherit;
text-decoration: none;
border-radius: 0.2em;
cursor: pointer;
&:hover {
background-color: #dbdbdb;
}
}
}
aside {
position: fixed;
right: 0;
top: 0;
bottom: 0;
background-color: white;
border-left: solid black 2px;
}
.notif {
--bg: #f0f0f0;
--border: #727272;
--fg: black;
--col: #f0f0f0;
&[data-type="success"] {
--bg: #e0ffe0;
--border: #727f72;
--fg: black;
--col: #8dff8d;
}
&[data-type="error"] {
--bg: #ffe0e0;
--border: #7f7272;
--fg: black;
--col: #ff8d8d;
}
&[data-type="warning"] {
--bg: #ffefe0;
--border: #7f7f72;
--fg: black;
--col: #ffc36a;
}
}
#notifs {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.4em;
padding-top: 0.4em;
width: max-content;
.notif {
padding: 0.4em 0.8em;
border-radius: 0.6em;
background-color: var(--bg);
border: solid var(--border) 2px;
color: var(--fg);
max-width: 30em;
cursor: pointer;
}
}

51
editor/public/static/css/edit.css
View File

@ -1,3 +1,13 @@
main {
display: flex;
flex-direction: column;
gap: 1.2em;
}
#toggle-notifs {
margin-left: auto;
}
#filename {
font-size: 80%;
font-style: italic;
@ -117,6 +127,8 @@ button.improve {
transform: translateY(-50%);
margin-left: 0.4em;
border-radius: 0.4em;
background: none;
&:hover{
background-color: #8d8d8d42;
}
@ -319,3 +331,42 @@ button.improve {
background-color: #fafafa;
}
}
#notifs-hist {
padding: 0.8em;
height: 100%;
display: flex;
flex-direction: column;
&:not(.show) {
display: none;
}
#close-notifs {
align-self: flex-end;
background: none;
border: none;
padding: 0.4em 0.8em;
border-radius: 0.2em;
font-family: inherit;
font-size: inherit;
cursor: pointer;
&:hover {
background-color: #ebebeb;
}
}
.list {
display: flex;
flex-direction: column;
gap: 0.2em;
overflow-y: auto;
margin-top: 0.6em;
.notif {
border-left: solid var(--col) 4px;
padding: 0.4em;
}
}
}

54
editor/public/static/js/editor.mjs
View File

@ -23,6 +23,13 @@ export default class Editor {
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()
}
@ -49,7 +56,6 @@ export default class Editor {
document.getElementById("title").value = this.data.title
this.tables.audio.loadTracks(this.data.audio_tracks)
this.tables.subtitle.loadTracks(this.data.subtitle_tracks)
this.integrity_mgr.checkIntegrity()
}
save() {
@ -63,8 +69,9 @@ export default class Editor {
if (res.ok) {
this.dirty = false
document.getElementById("unsaved").classList.remove("show")
this.notify("Saved successfully !", "success")
} else {
alert(`Error ${res.status}: ${res.statusText}`)
this.notify(`Error ${res.status}: ${res.statusText}`, "error", 10000)
}
})
}
@ -78,4 +85,47 @@ export default class Editor {
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")
}
}

22
editor/public/static/js/integrity_manager.mjs
View File

@ -78,7 +78,7 @@ class MismatchCorrection {
export default class IntegrityManager {
IGNORE_KEYS = [
"type", "channels"
"type", "channels_details"
]
/**
@ -136,11 +136,17 @@ export default class IntegrityManager {
}
checkIntegrity() {
this.ignoreList = []
this.mismatches = []
for (const table of Object.values(this.editor.tables)) {
this.checkTableIntegrity(table)
}
if (this.mismatches.length === 0) {
return true
}
this.nextError()
return false
}
/**
@ -198,7 +204,7 @@ export default class IntegrityManager {
const channels = lower.match(/\d+\.\d+/)
if (channels) {
fields.channels = channels[0]
fields.channels_details = channels[0]
}
break
@ -297,8 +303,8 @@ export default class IntegrityManager {
if (fields.flags.visual_impaired) {
name += " AD"
}
if (fields.channels) {
name += " / " + fields.channels
if (fields.channels_details) {
name += " / " + fields.channels_details
}
break
case "subtitle":
@ -346,6 +352,14 @@ export default class IntegrityManager {
return input
}
improveAllNames() {
for (const table of Object.values(this.editor.tables)) {
for (const track of table.tracks) {
this.improveName(track)
}
}
}
/**
*
* @param {Track} track

55
editor/public/static/js/tracks_table.mjs
View File

@ -1,4 +1,4 @@
import { flattenObj, getLanguageOptions } from "./utils.mjs"
import { findLanguage, flattenObj, getLanguageOptions } from "./utils.mjs"
export class Track {
constructor(table, idx, fields) {
@ -54,29 +54,36 @@ export class Track {
case "bool":
input.type = "checkbox"
input.checked = value
getValue = () => input.checked
const hotone = this.table.CONSTRAINTS[field.key]?.type == "hotone"
if (listeners && hotone) {
getValue = () => input.checked
const onehot = this.table.CONSTRAINTS[field.key]?.type == "onehot"
if (listeners && onehot) {
if (value) {
if (field.key in this.table.hotones) {
alert(`Error in metadata file: field ${field.name} is hotone but multiple tracks are enabled`)
if (field.key in this.table.onehots) {
this.table.editor.notify(
`Error in metadata file: field '${field.name}' is onehot but multiple tracks are enabled. Only the first one will be enabled`,
"error",
20000
)
value = false
} else {
this.table.onehots[field.key] = input
}
this.table.hotones[field.key] = input
}
input.addEventListener("click", e => {
if (!input.checked) {
e.preventDefault()
} else {
if (field.key in this.table.hotones) {
this.table.hotones[field.key].checked = false
this.table.hotones[field.key].dispatchEvent(new Event("change"))
if (field.key in this.table.onehots) {
this.table.onehots[field.key].checked = false
this.table.onehots[field.key].dispatchEvent(new Event("change"))
}
this.table.hotones[field.key] = input
this.table.onehots[field.key] = input
}
})
}
input.checked = value
break
case "sel":
@ -91,11 +98,31 @@ export class Track {
opt.value = option.value
input.appendChild(opt)
})
if (field.key === "language") {
const lang = findLanguage(value)
if (lang === null) {
this.table.editor.notify(
`Unknown language '${value}' for ${this.table.type} track ${this.idx}`,
"error",
20000
)
} else if (lang !== value) {
this.table.editor.notify(
`Language of ${this.table.type} track ${this.idx} was corrected (${value} -> ${lang})`,
"warning"
)
value = lang
}
}
input.value = value
default:
break
}
input.name = field.key + "[]"
input.dataset.key = field.key
if (this.table.CONSTRAINTS[field.key]?.type === "readonly") {
input.disabled = true
@ -135,7 +162,7 @@ export default class TracksTable {
}
CONSTRAINTS = {
"flags/default": {
type: "hotone"
type: "onehot"
},
"index": {
type: "readonly"
@ -160,7 +187,7 @@ export default class TracksTable {
this.fields = []
this.tracks = []
this.dataKey = dataKey
this.hotones = {}
this.onehots = {}
}
getFieldProps(key) {

4
editor/public/static/js/utils.mjs
View File

@ -75,10 +75,10 @@ export function getLanguageAliases(langTag) {
export function findLanguage(value) {
for (const lang in LANGUAGES) {
const aliases = getLanguageAliases(lang)
const matches = aliases.map(a => {
const matches = aliases.some(a => {
return new RegExp("\\b" + a + "\\b").test(value)
})
if (matches.some(v => v)) {
if (matches) {
return lang
}
}