upd

.gitignore

@@ -1 +1,2 @@
-/test
+/test
+/new_test

css/kbd.css

@@ -0,0 +1,4 @@
+kbd{
+	background-color: hsla(0, 0%, 100%, .1);
+	color:aliceblue;
+}

css/style.css

@@ -3,7 +3,7 @@
 @import url("modal.css");
 @import url("toolbar.css");
 @import url("preload.css");
-@import url("settings.css");
+@import url("kbd.css");
 
 ::-webkit-scrollbar {
 	width: 10px;

index.html

@@ -11,19 +11,18 @@
 	<title>viGU - Видеоредактор</title>
 	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
 		integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
-<<<<<<< HEAD
+
 	<!-- <link rel="preload" href="/css/style.css" as="style"> -->	
 	<link rel="preload" href="css/preload.css" as="style">
 	<link rel="preload" href="js/preload.js" as="script">
 	<link rel="stylesheet" href="css/style.css">
 	<link rel="stylesheet" href="css/timeline.css">
-=======
-	<!-- <link rel="preload" href="/css/style.css" as="style"> -->
-	<link rel="preload" href="/SkoolHack/css/preload.css" as="style">
+
+	<!-- <link rel="preload" href="/SkoolHack/css/preload.css" as="style">
 	<link rel="preload" href="/SkoolHack/js/preload.js" as="script">
 	<link rel="stylesheet" href="/SkoolHack/css/style.css">
-	<link rel="stylesheet" href="/SkoolHack/css/timeline.css">
->>>>>>> dae142b63c4c5e30225c68d41a4d647841f0fa3d
+	<link rel="stylesheet" href="/SkoolHack/css/timeline.css"> -->
+
 	<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&amp;display=swap" rel="stylesheet">
@@ -60,7 +59,7 @@
 								<li><a class="dropdown-item" href="#" >Открыть файл</a></li>
 								<li><a class="dropdown-item export" href="#">Экспортировать</a></li>
 								<li><hr class="m-2 border-1 border-top"></li>
-								<li><a class="dropdown-item" href="#">Справка</a></li>
+								<li><a id="reference-in-menu" class="dropdown-item" href="#">Справка</a></li>
 							</ul>
 
 						</div>
@@ -75,7 +74,7 @@
 							</button>
 
 							<ul class="dropdown-menu">	
-								<li><a id="split-item" class="dropdown-item" href="#">Разрезать</a></li>				
+								<li><a id="split-item" class="dropdown-item" href="#">Разделить</a></li>				
 								<li><a id="dublicate-item" class="dropdown-item" href="#">Дублировать</a></li>		
 								<li><a id="remove-item" class="dropdown-item" href="#">Удалить</a></li>
 							</ul>
@@ -180,32 +179,30 @@
 	</div>
 
 	<!-- Экспорт проекта -->
-	<div class="modal show" id="modal-error-export" tabindex="-1" aria-modal="false">
+	<div class="modal" id="modal-export-video" tabindex="-1" aria-modal="false" data-bs-backdrop="static">
 		<div class="modal-dialog modal-dialog-centered ">
 
 			<div class="modal-content">
 
 				<div class="modal-header">
-					<h5 class="modal-title">Ошибка экспорта</h5>
-					<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Закрыть"></button>
+					<h5 class="modal-title">Экспортирование видео</h5>
 				</div>
 
 				<div class="modal-body">
-					<p>Произошла неизвестная ошибка при экспорте.</p>
-					<p>[ошибка из логовов]</p>
-				</div>
-
-				<div class="modal-footer  row">
-					<button type="button" class="col-sm mx-2 btn btn-primary" data-bs-dismiss="modal">Окей</button>
+					<div class="progress ">
+						<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
+							aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
+					</div>
 				</div>
-
+
+
 			</div>
 
 		</div>
 	</div>
 
 	<!-- Модальное окно для нового проекта -->
-	<div class="modal show" id="modal-new-project" tabindex="-1" aria-modal="false">
+	<div class="modal" id="modal-new-project" tabindex="-1" aria-modal="false">
 		<div class="modal-dialog modal-dialog-centered " >
 
 			<div class="modal-content">
@@ -231,8 +228,8 @@ <h5 class="modal-title">Создание нового проекта</h5>
 	</div>
 
 	<!--File deleting panel-->
-	<div class="modal show" id="modal-delete-file" tabindex="-1" aria-modal="false" ><!--aria-hidden="false"? -->
-		<div class="modal-dialog modal-dialog-centered " >
+	<div class="modal" id="modal-delete-file" tabindex="-1" aria-modal="false" ><!--aria-hidden="false"? -->
+		<div class="modal-dialog modal-dialog-centered">
 
 			<div class="modal-content">
 
@@ -255,6 +252,36 @@ <h5 class="modal-title">Удаление файла</h5>
 		</div>
 	</div>
 
+	<!-- Reference panel -->
+	<div class="modal" id="modal-reference" tabindex="-1" aria-modal="false"  > 
+		<div class="modal-dialog modal-dialog-centered">
+
+			<div class="modal-content">
+
+				<div class="modal-header">
+					<h5 class="modal-title">Справка</h5>
+					<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Закрыть"></button>
+				</div>
+
+				<div class="modal-body">
+					<p class="mb-2"><kbd>Пробел</kbd> - Включить/остановить воспроизведение</p>
+					<p class="mb-2"><kbd>←</kbd> <kbd class="my-2">→</kbd> - Шаг влево/вправо в рабочей области</p>
+					<p class="mb-2"><kbd>+</kbd> <kbd class="my-2">-</kbd> - Увеличить/уменьшить рабочую область</p>
+					<p class="mb-2"><kbd>Delete</kbd> - Удалить эпизод</p>
+					<p class="mb-2"><kbd>C</kbd> - Разделить эпизод</p>
+					<p class="mb-2"><kbd>V</kbd> - Дублировать эпизод</p>
+					<p class="mb-2"><kbd>ヾ(＾-＾)ノ</kbd> - Have fun! You the best! ❤</p>
+				</div>
+
+				<div class="modal-footer">
+					<button type="button" class="btn btn-primary" id="close-reference-panel">Закрыть</button>
+				</div>
+
+			</div>
+
+		</div>
+	</div>
+
 	<script src="js/preload.js"></script>
 
 	<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"

js/export.js

@@ -4,6 +4,23 @@ ffmpeg.load();
 
 document.querySelectorAll(".export").forEach(element => {
     element.addEventListener("click", async (e) => {
+
+        let haveLayers = false;
+        for (const layer of layers) {
+            if (layer.tracks.length > 0) {
+                haveLayers = true;
+                break;
+            }
+        }
+        if (!haveLayers) return;
+
+        let exportWindow = document.getElementById("modal-export-video")
+        let windowSucess = new bootstrap.Modal(exportWindow, {
+		    keyboard: true,
+		    focus: true
+        });
+        windowSucess.show();
+
         const inputPaths = [];
         //for(const layer of layers) {
             const layer = layers[0];
@@ -65,8 +82,12 @@ document.querySelectorAll(".export").forEach(element => {
           })
         );
         link.download = Date.now() + ".mp4";
+
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
+
+
+        setTimeout(function() {windowSucess.hide()}, 2000);
     });
 });

js/libs/source.js

@@ -113,6 +113,45 @@ class Source {
 
   }
 
+  const HEIGHT = 100;
+const CHUNK_SIZE = 1024;
+class AudioSource extends Source {
+
+  constructor(...args) {
+    super(...args);
+    this.elem.classList.add('audio');
+    fetch(this.url)
+      .then(r => r.arrayBuffer())
+      .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
+      .then(audioBuffer => {
+        this.length = audioBuffer.duration;
+        const samples = audioBuffer.getChannelData(0);
+        let chunk = samples.length / CHUNK_SIZE > 1000 ? Math.floor(samples.length / 1000) : CHUNK_SIZE;
+        thumbnailCanvas.width = Math.ceil(samples.length / chunk);
+        thumbnailCanvas.height = HEIGHT;
+        thumbnailContext.fillStyle = 'rgba(255, 255, 255, 0.5)';
+        // calculates an RMS, according to Wikipedia
+        // why RMS? idk, that's what Scratch did though
+        // I don't even know what an RMS is
+        for (let i = 0; i * chunk < samples.length; i++) {
+          let sum = 0, n;
+          for (n = 0; n < chunk && i * chunk + n < samples.length; n++) {
+            sum += samples[i * chunk + n] * samples[i * chunk + n];
+          }
+          const rms = Math.sqrt(sum / n);
+          thumbnailContext.fillRect(i, (1 - rms) * HEIGHT, 1, rms * HEIGHT);
+        }
+        this.thumbnail = thumbnailCanvas.toDataURL();
+        this.amReady();
+      });
+  }
+
+  createTrack() {
+    return new AudioTrack(this);
+  }
+
+}
+
   function toSource(mime) {
     const [type] = mime.split('/');
     switch (type) {

js/main.js

@@ -89,7 +89,7 @@ document.addEventListener('keydown', e => {
   } else if (e.key === "Delete") {
 		if (Track.selected) Track.selected.remove("delete");
 
-	} else if (e.key === "c" || e.key === "C" || e.key === "с" || e.key === "С")  {
+	} else if (e.key === "c" || e.key === "C" || e.key === "с" || e.key === "С" || e.key === "S" || e.key === "s" || e.key==="ы" || e.key === "Ы")  {
 		if (Track.selected) Track.selected.splitAt(previewTime - Track.selected.start);
 
   } else if (e.key == "v" || e.key == "V" || e.key === "м" || e.key === "М"){

js/menubar.js

@@ -2,6 +2,8 @@ const editMenuButton = document.getElementById('edit-item')
 const splitMenuButton = document.getElementById('split-item')
 const dublicateMenuButton = document.getElementById('dublicate-item')
 const removeMenuButton = document.getElementById('remove-item')
+const referenceButton = document.getElementById('reference-in-menu')
+const closeReferenceButton = document.getElementById('close-reference-panel')
 
 splitMenuButton.addEventListener("click", (e) => {
 	if (Track.selected != null) {
@@ -25,4 +27,18 @@ removeMenuButton.addEventListener("click", (e) => {
 	if (Track.selected != null) {
 		Track.selected.remove("delete");
 	}
+});
+
+let referenceWindow = document.getElementById("modal-reference")
+let windowSucess = new bootstrap.Modal(referenceWindow, {
+		keyboard: true,
+		focus: true
+});
+
+referenceButton.addEventListener('click', e => {
+	windowSucess.show();
+});
+
+closeReferenceButton.addEventListener('click', e => {
+	windowSucess.hide();
 });