fullgream/kodex-music-catalog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add frontend

Browse Source
This commit is contained in:
Nikiroy78 2023-10-02 11:55:35 +03:00
parent 3fe20d60f0
commit 4f0bd8670b
9 changed files with 534 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,5 +1,4 @@
node_modules/
references/
ts.txt
*.py
*.log

33
api-tests/test.py Normal file
View File

@ -0,0 +1,33 @@
import requests as req
class CreateItemChecks:
def createAuthor (result):
return 'response' in result
class CreateItemActions:
def createAuthor ():
return req.post(
"http://127.0.0.1:8080/api/v/1.0/create-item?response_format=json",
json={
"type" : "author"
}
).json()
createItemActions = CreateItemActions()
createItemChecks = CreateItemChecks()
def test (id, action, isDone):
try:
print("""Test {id} runned..""")
result = action()
if isDone(result):
print("""Test {id} success!""")
else:
print("""Test {id} ERROR""")
print(result)
except Exception as exc:
print(exc)
test(1, createItemActions.createAuthor, createItemChecks.createAuthor)

2
frontend/main.html
View File

@ -4,6 +4,7 @@
<title>Kodex Muzic</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
</head>
<body>
<!-- <h3><center>Kodex Muzic</center></h3> -->
@ -33,6 +34,7 @@
<script src="/js/api-module.js"></script>
<script src="/js/sound.js"></script>
<script src="/js/menu.js"></script>
<script src="/js/main.js"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>

141
frontend/public/js/api-module.js
View File

@ -1,9 +1,15 @@
class Api {
getAuthors (params, cb) {
getAuthors(params, cb) {
const xhr = new XMLHttpRequest();
params = Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&');
params = params !== '' ? `&${params}` : '';
xhr.open("GET", `/api/v/1.0/get-authors?response_format=json${params}`, true);
params = Object.entries(params)
.map(([key, value]) => `${key}=${value}`)
.join("&");
params = params !== "" ? `&${params}` : "";
xhr.open(
"GET",
`/api/v/1.0/get-authors?response_format=json${params}`,
true,
);
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
@ -11,11 +17,13 @@ class Api {
};
xhr.send();
}
getMuzic (params, cb) {
getMuzic(params, cb) {
const xhr = new XMLHttpRequest();
params = Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&');
params = params !== '' ? `&${params}` : '';
params = Object.entries(params)
.map(([key, value]) => `${key}=${value}`)
.join("&");
params = params !== "" ? `&${params}` : "";
xhr.open("GET", `/api/v/1.0/get-muzic?response_format=json${params}`, true);
xhr.onreadystatechange = function (event) {
//console.log(event);
@ -24,24 +32,121 @@ class Api {
};
xhr.send();
}
createMuzic (author_id, name, data=null, cb) {
deleteMuzic(id, cb) {
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/remove-item?response_format=json`, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
if (JSON.parse(this.responseText).response === undefined) {
throw this.responseText;
}
cb(JSON.parse(this.responseText).response);
};
xhr.send(
JSON.stringify({
type: "muzic",
id,
}),
);
}
editMuzic(id, name, data, author_id, cb) {
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/edit-item?response_format=json`, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
if (JSON.parse(this.responseText).response === undefined) {
throw this.responseText;
}
cb(JSON.parse(this.responseText).response);
};
xhr.send(
JSON.stringify({
type: "muzic",
id,
name,
author_id,
data,
}),
);
}
createMuzic(author_id, name, data = null, cb) {
data = data === null ? undefined : data;
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/create-item?response_format=json`, true);
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
cb(JSON.parse(this.responseText).response);
};
xhr.send(JSON.stringify({
type: 'muzic',
name,
author_id,
data
}));
xhr.send(
JSON.stringify({
type: "muzic",
name,
author_id,
data,
}),
);
}
createAuthor(name, cb) {
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/create-item?response_format=json`, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
cb(JSON.parse(this.responseText).response);
};
xhr.send(
JSON.stringify({
type: "author",
name,
}),
);
}
removeAuthor(id, cb) {
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/remove-item?response_format=json`, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
cb(JSON.parse(this.responseText).response);
};
xhr.send(
JSON.stringify({
type: "author",
id,
}),
);
}
editAuthor(id, name, cb) {
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/edit-item?response_format=json`, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
cb(JSON.parse(this.responseText).response);
};
xhr.send(
JSON.stringify({
type: "author",
id,
name,
}),
);
}
}
const api = new Api();
const api = new Api();

261
frontend/public/js/main.js
View File

@ -1,36 +1,86 @@
document.getElementById('app-window').innerHTML = '<p><center>Загрузка произведений...</center></p>';
document.getElementById("app-window").innerHTML =
"<p><center>Загрузка произведений...</center></p>";
function toggleShow (authorId) {
document.getElementById(`playlist-author-${authorId}`).hidden = !document.getElementById(`playlist-author-${authorId}`).hidden;
function toggleShow(authorId) {
document.getElementById(`playlist-author-${authorId}`).hidden =
!document.getElementById(`playlist-author-${authorId}`).hidden;
}
function showAudio (settingsAuthors, settingsAudio) {
function showAudio(settingsAuthors, settingsAudio) {
showAudio.settingsAuthors = settingsAuthors;
showAudio.settingsAudio = settingsAudio;
const step2 = (muzic) => {
//console.log(muzic.items);
const showedAuthors = [...(new Set(muzic.items.map(i => `author-${i.author_id}`)))];
[...document.getElementsByClassName('author-element')].forEach(el => {
const showedAuthors = [
...new Set(muzic.items.map((i) => `author-${i.author_id}`)),
];
[...document.getElementsByClassName("author-element")].forEach((el) => {
if (
JSON.stringify(settingsAuthors) === "{}" &&
JSON.stringify(settingsAudio) === "{}"
) {
if (!showedAuthors.includes(el.id)) {
const id = el.id.slice(7);
document.getElementById(`loader-muzic-${id}`).innerHTML =
"<p><b>Пусто. Добавьте произведения</b></p>";
}
return;
}
el.hidden = !showedAuthors.includes(el.id);
});
muzic.items.forEach(muzic => {
document.getElementById(`loader-muzic-${muzic.author_id}`).hidden = true;
if (muzic.is_data_exists) document.getElementById(`playlist-author-${muzic.author_id}`).innerHTML += `<p>
muzic.items
.sort((a, b) => a.date - b.date)
.forEach((muzic) => {
document.getElementById(
`loader-muzic-${muzic.author_id}`,
).hidden = true;
if (muzic.is_data_exists)
document.getElementById(
`playlist-author-${muzic.author_id}`,
).innerHTML += `<p><div id="muzic-item-${muzic.id}">
<h6><button class="btn btn-secondary" id="edit-muzic-item-${
muzic.id
}" onclick='showEditMuzic(${muzic.id}, ${JSON.stringify(
muzic.name,
)}, ${
muzic.is_data_exists
});'><i class="bi bi-pencil-square"></i></button> ${muzic.name}</h6>
<button class="btn btn-primary play-button" onclick="playMuzic(${
muzic.id
})" id="play-${muzic.id}">Прослушать</button>
<button class="btn btn-primary pause-button" onclick="" id="pause-${
muzic.id
}" disabled>Пауза</button>
<input class="road-muzic" type="range" id="road-${
muzic.id
}" name="stop" min="0" max="0" value="0" step="0.01" style="width: 70%;"/>
</div></p>`;
else
document.getElementById(
`playlist-author-${muzic.author_id}`,
).innerHTML += `<p><div id="muzic-item-${muzic.id}">
<h6>${muzic.name}</h6>
<button class="btn btn-primary play-button" onclick="playMuzic(${muzic.id})" id="play-${muzic.id}">Прослушать</button>
<button class="btn btn-primary pause-button" onclick="" id="pause-${muzic.id}" disabled>Пауза</button>
<input class="road-muzic" type="range" id="road-${muzic.id}" name="stop" min="0" max="0" value="0" step="0.01" style="width: 70%;"/>
</p>`;
else document.getElementById(`playlist-author-${muzic.author_id}`).innerHTML += `<p>
<h6>${muzic.name}</h6>
<button class="btn btn-secondary" onclick="" id="add-file-${muzic.id}">Добавить звуковой файл</button>
</p>`;
});
}
<button class="btn btn-secondary" onclick='showEditMuzic(${
muzic.id
}, ${JSON.stringify(muzic.name)}, ${
muzic.is_data_exists
});' id="add-file-${muzic.id}" id="edit-muzic-item-${
muzic.id
}">Добавить звуковой файл</button>
</div></p>`;
});
};
api.getAuthors(settingsAuthors, (authors) => {
document.getElementById('app-window').innerHTML = '';
authors.items.forEach((author) => {
document.getElementById('app-window').innerHTML += `<div class="author-element" id="author-${author.id}">
<h3>${author.name}</h3>
document.getElementById("app-window").innerHTML = "";
authors.items
.sort((a, b) => a.date - b.date)
.forEach((author) => {
document.getElementById(
"app-window",
).innerHTML += `<div class="author-element" id="author-${author.id}">
<div id="author-info-${author.id}"><h3>${author.name} <button class="btn btn-primary" id="edit-author-${author.id}" onclick="showAuthorEditor(${author.id}, '${author.name}');">Редактировать</button></h3></div>
<p>Произведения</p>
<hr/>
<a href='#' onclick="toggleShow(${author.id})">Показать/Скрыть</a>
@ -39,80 +89,111 @@ function showAudio (settingsAuthors, settingsAudio) {
</div>
<div id="add-muzic-${author.id}" style="margin-bottom: 15px;"><center><button class="btn btn-primary" id="add-muzic-button-${author.id}">Добавить произведение</button></center></div>
</div>`;
const addMuzicButtonFunct = () => setTimeout( () =>
document.getElementById(`add-muzic-button-${author.id}`).onclick = async () => {
// console.log('>>', author.id);
document.getElementById(`add-muzic-${author.id}`).innerHTML = `<p><input class="form-control" type="text" placeholder="Введите название произведения" id="muzic-name-input-${author.id}" style="width: 90%"></p>
const addMuzicButtonFunct = () =>
setTimeout(
() =>
(document.getElementById(
`add-muzic-button-${author.id}`,
).onclick = async () => {
// console.log('>>', author.id);
document.getElementById(
`add-muzic-${author.id}`,
).innerHTML = `<p><input class="form-control" type="text" placeholder="Введите название произведения" id="muzic-name-input-${author.id}" style="width: 90%"></p>
<p><button class="btn btn-primary" id="attach-file-${author.id}">Добавить файл (.mp3)</button>
<button class="btn btn-primary" id="add-muzic-${author.id}">Добавить произведение</button>
<button class="btn btn-danger" id="cancel-add-muzic-${author.id}">Отменить</button></p>
`;
setTimeout(
() => {
document.getElementById(`cancel-add-muzic-${author.id}`).onclick = function () {
document.getElementById(`add-muzic-${author.id}`).innerHTML = `<center><button class="btn btn-primary" id="add-muzic-button-${author.id}">Добавить произведение</button></center>`;
addMuzicButtonFunct();
};
document.getElementById(`add-muzic-${author.id}`).onclick = function () {
if (document.getElementById(`muzic-name-input-${author.id}`).value.length >= 2) {
api.createMuzic(
author.id,
document.getElementById(`muzic-name-input-${author.id}`).value,
document.getElementById(`attach-file-${author.id}`).filedata,
() => {
showAudio(settingsAuthors, settingsAudio);
}
);
document.getElementById(`add-muzic-${author.id}`).innerHTML = 'Добавление файла...';
}
};
document.getElementById(`attach-file-${author.id}`).onclick = function () {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'audio/mpeg';
input.click();
input.onchange = function (e) {
function arrayBufferToBase64( buffer ) {
let binary = '';
let bytes = new Uint8Array( buffer );
let len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
}
const file = e.target.files[0];
// console.log(file);
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function() {
// console.log('reader.result', reader.result);
if (file.type === 'audio/mpeg') {
document.getElementById(`attach-file-${author.id}`).filedata = arrayBufferToBase64(reader.result);
document.getElementById(`attach-file-${author.id}`).innerText = "Загружен файл: " + file.name;
}
// console.log(arrayBufferToBase64(reader.result));
<button class="btn btn-danger" id="cancel-add-muzic-${author.id}">Отменить</button></p>`;
setTimeout(() => {
document.getElementById(
`cancel-add-muzic-${author.id}`,
).onclick = function () {
document.getElementById(
`add-muzic-${author.id}`,
).innerHTML = `<center><button class="btn btn-primary" id="add-muzic-button-${author.id}">Добавить произведение</button></center>`;
addMuzicButtonFunct();
};
};
};
}, 0
document.getElementById(`add-muzic-${author.id}`).onclick =
function () {
if (
document.getElementById(`muzic-name-input-${author.id}`)
.value.length >= 2
) {
api.createMuzic(
author.id,
document.getElementById(
`muzic-name-input-${author.id}`,
).value,
document.getElementById(`attach-file-${author.id}`)
.filedata,
() => {
showAudio(settingsAuthors, settingsAudio);
},
);
document.getElementById(
`add-muzic-${author.id}`,
).innerHTML = "Добавление файла...";
}
};
document.getElementById(`attach-file-${author.id}`).onclick =
function () {
const input = document.createElement("input");
input.type = "file";
input.accept = "audio/mpeg";
input.click();
input.onchange = function (e) {
function arrayBufferToBase64(buffer) {
let binary = "";
let bytes = new Uint8Array(buffer);
let len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
const file = e.target.files[0];
// console.log(file);
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
// console.log('reader.result', reader.result);
if (file.type === "audio/mpeg") {
document.getElementById(
`attach-file-${author.id}`,
).filedata = arrayBufferToBase64(reader.result);
document.getElementById(
`attach-file-${author.id}`,
).innerText = "Загружен файл: " + file.name;
}
// console.log(arrayBufferToBase64(reader.result));
};
};
};
}, 0);
}),
0,
);
}, 0);
addMuzicButtonFunct();
});
addMuzicButtonFunct();
});
api.getMuzic(settingsAudio, step2);
document.getElementById('app-window').innerHTML += '<div id="add-author" style="margin-bottom: 15px;"><center><button class="btn btn-primary" id="add-author-button">Добавить исполнителя</button></center></div>'
document.getElementById("app-window").innerHTML +=
'<div id="add-author" style="margin-bottom: 15px;"><center><button class="btn btn-primary" id="add-author-button" onclick="addAuthorMenu();">Добавить исполнителя</button></center></div>';
});
}
setTimeout(() => showAudio({}, {}), 0);
document.getElementById('search-input').onchange = function () {
document.getElementById("search-input").onchange = function () {
console.log(this.value);
setTimeout(() => showAudio({}, {
q : this.value
}), 0);
};
setTimeout(
() =>
showAudio(
{},
{
q: this.value,
},
),
0,
);
};

185
frontend/public/js/menu.js Normal file
View File

@ -0,0 +1,185 @@
function removeAuthor(authorId) {
api.removeAuthor(authorId, () => {
showAudio(showAudio.settingsAuthors, showAudio.settingsAudio);
});
}
function editAuthor(authorId) {
const name = document.getElementById(`input-author-name-${authorId}`).value;
api.editAuthor(authorId, name, (res) => {
if (res !== undefined) removeAuthorEditor(authorId, name);
});
}
function removeAuthorEditor(authorId, authorName) {
document.getElementById(
`author-info-${authorId}`,
).innerHTML = `<h3>${authorName} <button class="btn btn-primary" id="edit-author-${authorId}" onclick="showAuthorEditor(${authorId}, '${authorName}');">Редактировать</button></h3>`;
setTimeout(() => {
document.getElementById(`edit-author-${authorId}`).onclick = () =>
showAuthorEditor(authorId, authorName);
}, 5);
}
function showAuthorEditorButtonInit(authorId) {
const authorName = document.getElementById(
`author-info-${authorId}`,
).lastValue;
document.getElementById(`cancel-edit-author-${authorId}`).onclick = () =>
removeAuthorEditor(authorId, authorName);
document.getElementById(`remove-author-${authorId}`).onclick = () =>
removeAuthor(authorId);
document.getElementById(`edit-author-${authorId}`).onclick = () =>
editAuthor(authorId);
// document.getElementById(`add-author-button`).onclick = addAuthor;
}
function showAuthorEditor(authorId, lastValue) {
document.getElementById(`author-info-${authorId}`).lastValue = lastValue;
document.getElementById(
`author-info-${authorId}`,
).innerHTML = `<h3><input id="input-author-name-${authorId}" class="form-control" type="text", value=${JSON.stringify(
lastValue,
)}/>
<button class="btn btn-primary" id="edit-author-${authorId}">Сохранить</button>
<button class="btn btn-secondary" id="cancel-edit-author-${authorId}">Отмена</button>
<button class="btn btn-danger" id="remove-author-${authorId}">Удалить</button>
</h3>`;
setTimeout(() => showAuthorEditorButtonInit(authorId), 5);
}
function addAuthor() {
const name = document.getElementById(`author-name-input`).value;
document.getElementById("add-author").innerHTML =
"<center><p>Добавляем..</center></p>";
api.createAuthor(name, () => {
showAudio(showAudio.settingsAuthors, showAudio.settingsAudio);
});
}
function rmAuthorMenuButtonInit() {
document.getElementById(`add-author-button`).onclick = addAuthorMenu;
}
function removeAuthorMenu() {
document.getElementById(
"add-author",
).innerHTML = `<center><button class="btn btn-primary" id="add-author-button">Добавить исполнителя</button></center>`;
setTimeout(rmAuthorMenuButtonInit, 5);
}
function authorMenuButtonInit() {
document.getElementById(`cancel-add-author`).onclick = removeAuthorMenu;
document.getElementById(`add-author-button`).onclick = addAuthor;
}
function addAuthorMenu() {
document.getElementById(
"add-author",
).innerHTML = `<center><p><input class="form-control" type="text" placeholder="Введите название исполнителя" id="author-name-input" style="width: 90%"></p>
<button class="btn btn-primary" id="add-author-button">Добавить исполнителя</button>
<button class="btn btn-danger" id="cancel-add-author">Отменить</button></p></center>`;
setTimeout(authorMenuButtonInit, 5);
}
function selectFile(muzicId) {
const input = document.createElement("input");
input.type = "file";
input.accept = "audio/mpeg";
input.click();
input.onchange = function (e) {
function arrayBufferToBase64(buffer) {
let binary = "";
let bytes = new Uint8Array(buffer);
let len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
const file = e.target.files[0];
// console.log(file);
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
// console.log('reader.result', reader.result);
if (file.type === "audio/mpeg") {
document.getElementById(`edit-attach-file-${muzicId}`).filedata =
arrayBufferToBase64(reader.result);
document.getElementById(`edit-attach-file-${muzicId}`).innerText =
"Загружен файл: " + file.name;
document.getElementById(`delete-attach-${muzicId}`).disabled = false;
}
// console.log(arrayBufferToBase64(reader.result));
};
};
}
function editMuzic(muzicId, muzicName) {
api.editMuzic(
muzicId,
muzicName,
document.getElementById(`edit-attach-file-${muzicId}`).filedata,
undefined,
(res) => {
showAudio(showAudio.settingsAuthors, showAudio.settingsAudio);
},
);
}
function removeMuzic(muzicId) {
api.deleteMuzic(muzicId, (res) => {
showAudio(showAudio.settingsAuthors, showAudio.settingsAudio);
});
}
function bindShowEditMuzicButtons(muzicId, muzicName, dataExists) {
document.getElementById(`cancel-edit-muzic-${muzicId}`).onclick = () => {
document.getElementById(`muzic-item-${muzicId}`).innerHTML = dataExists
? `<h6><button class="btn btn-secondary" id="edit-muzic-item-${muzicId}" onclick='showEditMuzic(${muzicId}, ${JSON.stringify(
muzicName,
)}, ${dataExists});'><i class="bi bi-pencil-square"></i></button> ${muzicName}</h6>
<button class="btn btn-primary play-button" onclick="playMuzic(${muzicId})" id="play-${muzicId}">Прослушать</button>
<button class="btn btn-primary pause-button" onclick="" id="pause-${muzicId}" disabled>Пауза</button>
<input class="road-muzic" type="range" id="road-${muzicId}" name="stop" min="0" max="0" value="0" step="0.01" style="width: 70%;"/>`
: `<p><div id="muzic-item-${muzicId}">
<h6>${muzicName}</h6>
<button class="btn btn-secondary" onclick='showEditMuzic(${muzicId}, ${JSON.stringify(
muzicName,
)}, ${dataExists});' id="add-file-${muzicId}" id="edit-muzic-item-${muzicId}">Добавить звуковой файл</button>
</div></p>`;
};
document.getElementById(`edit-attach-file-${muzicId}`).onclick = () =>
selectFile(muzicId);
document.getElementById(`delete-attach-${muzicId}`).onclick = () => {
document.getElementById(`edit-attach-file-${muzicId}`).innerText =
"Добавить файл (.mp3)";
document.getElementById(`edit-attach-file-${muzicId}`).filedata = null;
document.getElementById(`delete-attach-${muzicId}`).disabled = true;
};
document.getElementById(`edit-muzic-${muzicId}`).onclick = () =>
editMuzic(muzicId, muzicName);
document.getElementById(`delete-muzic-${muzicId}`).onclick = () =>
removeMuzic(muzicId);
}
function showEditMuzic(muzicId, muzicName, dataExists) {
document.getElementById(
`muzic-item-${muzicId}`,
).innerHTML = `<p><input class="form-control" type="text" placeholder="Введите название произведения" value=${JSON.stringify(
muzicName,
)} id="muzic-edit-name-input-${muzicId}" style="width: 90%"></p>
<p><button class="btn btn-primary" id="edit-attach-file-${muzicId}">${
dataExists ? "Сменить файл (.mp3)" : "Добавить файл (.mp3)"
}</button>
<button class="btn btn-danger" id="delete-attach-${muzicId}"${
dataExists ? "" : " disabled"
}>Удалить файл</button>
<button class="btn btn-primary" id="edit-muzic-${muzicId}">Редактировать произведение</button>
<button class="btn btn-secondary" id="cancel-edit-muzic-${muzicId}">Отменить</button>
<button class="btn btn-danger" id="delete-muzic-${muzicId}">Удалить произведение</button></p>`;
setTimeout(() => bindShowEditMuzicButtons(muzicId, muzicName, dataExists), 5);
}

26
frontend/public/js/sound.js
View File

@ -1,4 +1,4 @@
let audio = new Audio('/api/v/1.0/muzic');
let audio = new Audio("/api/v/1.0/muzic");
function stopMuzic(id, interval) {
audio.pause();
@ -6,7 +6,7 @@ function stopMuzic(id, interval) {
document.getElementById(`play-${id}`).innerText = "Прослушать";
document.getElementById(`pause-${id}`).disabled = true;
document.getElementById(`play-${id}`).onclick = () => playMuzic(id);
clearInterval(interval);
document.getElementById(`road-${id}`).value = 0;
document.getElementById(`road-${id}`).max = 0;
@ -26,18 +26,15 @@ function resumeMuzic(id) {
audio.play();
}
function changeTime (value, id) {
function changeTime(value, id) {
audio.currentTime = value;
}
function playMuzic(id) {
audio.pause();
audio.currentTime = 0;
if (audio.muzId !== undefined) stopMuzic(
audio.muzId,
audio.muzTimer
);
if (audio.muzId !== undefined) stopMuzic(audio.muzId, audio.muzTimer);
audio = new Audio(`/api/v/1.0/muzic?id=${id}`);
audio.onloadedmetadata = function () {
audio.muzId = id;
@ -45,17 +42,18 @@ function playMuzic(id) {
document.getElementById(`pause-${id}`).disabled = false;
document.getElementById(`road-${id}`).max = audio.duration;
audio.play();
const interval = setInterval(() => {
document.getElementById(`road-${id}`).value = audio.currentTime;
}, 750);
audio.muzTimer = interval;
document.getElementById(`play-${id}`).onclick = () => stopMuzic(id, interval);
document.getElementById(`play-${id}`).onclick = () =>
stopMuzic(id, interval);
document.getElementById(`pause-${id}`).onclick = () => pauseMuzic(id);
document.getElementById(`road-${id}`).onchange = function () {
// console.log('value', this.value);
changeTime(this.value, id)
changeTime(this.value, id);
};
}
}
};
}

16
page-view.js
View File

@ -1,11 +1,9 @@
const router = require('express').Router();
const fs = require('fs');
router.use(require('express').static('./frontend/public'));
const router = require("express").Router();
const fs = require("fs");
router.use(require("express").static("./frontend/public"));
router.get('/', async (req, res) => {
res.send(
fs.readFileSync("./frontend/main.html", { encoding: "utf-8" })
);
})
router.get("/", async (req, res) => {
res.send(fs.readFileSync("./frontend/main.html", { encoding: "utf-8" }));
});
module.exports = router;
module.exports = router;

2
server.js
View File

@ -90,4 +90,4 @@ server.listen(config().port, config().address, async (err) => {
`Kodex Muzic catalog runned at ${config().address}:${config().port}`,
);
}
});
});