upd-last

README.MD

@@ -2,7 +2,7 @@
 -----------------
 Главная фишка нашего проекта заключается в том, что он полностью иполняется на стороне клиента.
 
-Для того, что бы протестировать функционал проекта достаточно всего-лишь перейти по ссылке: https://artemlapys.github.io/skoolhack/
+Для того, что бы протестировать функционал проекта достаточно всего-лишь перейти по ссылке: https://artemlapys.github.io/SkoolHack/ (может не работать, если мы не успеем залить проект)
 
 -----------------
 Стек технологий
@@ -16,7 +16,8 @@ coi-serviceworker - Библиотека для решения проблем с
 -----------------
 Рендер видео
 -----------------
-Отрисовка превью идёт в виде анимации в canvas. Реднер итогового видео происходит с помощью библиотеки FFMPEG.
+Отрисовка превью идёт в виде анимации в canvas. 
+Реднер итогового видео происходит с помощью библиотеки FFMPEG. В данный момент видео по сути не рендерятся, из-за этого достигается достаточно большая скорость экспорта, но это делает невозможным некоторые планируемые функции, например изменение размера или разрешения.
 
 На старте проекта нами рассматривались следующие варианты рендера:
 1. Хранение метаданных на стороне клиента, а рендеринг на стороне сервера.
@@ -27,8 +28,13 @@ coi-serviceworker - Библиотека для решения проблем с
 Стабильный, но медленный рендер. Ввиду того, что это рендер в реальном времени, он будет ни больше ни меньше оригинального видео.
 Невозможность свернуть окно браузера. По факту самая главная проблема данного подхода.
 3. Использование рендера на стороне клиента.
-Тот вариант, который по итогу был нами выбран, но у которого также есть минус: при рендере браузер потребляет большое количество ресурсов и рендер всё равно идёт медленно.
+Тот вариант, который по итогу был нами выбран, но у которого также есть минус: при рендере браузер потребляет большое количество ресурсов а рендер всё равно идёт медленно.
 
 -----------------
 Возможные улучшения
------------------
+-----------------
+Самое важное: перенос рендера на сторону сервера.
+Добавление возможности рендера со слоями.
+Рендер чёрного экрана между треками, если между ними есть пробел.
+Изменение координат слоёв на итоговом видео.
+Экспорт видео в различные форматы.

css/files.css

@@ -2,21 +2,20 @@
 	flex:auto;
 	display: flex;
 }
+
 .files-users{
 	max-height: 460px;
 	overflow-y: overlay;
-
 }
+
 .main-files{
-	/* min-width: 100px; */
-	/* max-width: 313px; */
 	width: 313px;
-	/* min-width: 50%; */
 	display: flex;
 	flex-direction: column;	
 	flex:none;
 	margin-right: 15px;
 }
+
 .input-for-file-add{
 	width: 0.1px;
 	height: 0.1px;
@@ -26,11 +25,8 @@
 	z-index: -1;
 }
 
-
 .main-video{
-	/* background-color: #1d1d1d; */
 	flex: auto;
-	/* height: 0; */
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -44,7 +40,6 @@
 	border-radius: 5px;
 	background-color: #000;
 	transition: all 2s ease-in-out;
-
 }
 
 .files{
@@ -62,41 +57,6 @@
 .files-background-add{
 	background-color: hsla(0, 0%, 100%, .1);
 	border-radius: var(--bs-nav-pills-border-radius);
-
-	display: inline-block;
-		width: 128px;
-		height: 72px;
-		cursor: pointer;
-		vertical-align: top;
-		margin: 5px;
-		overflow: hidden;
-		transition: all 0.2s ease-in-out;
-		word-break: break-word;
-		background-position: center;
-		background-repeat: no-repeat;
-		background-size: contain;
-	}
-
-.files-background-add:hover {
-	background-color: hsla(0, 0%, 100%, .3);
-}
-
-.files-add{
-	display:inline-flex;
-	align-items: center;
-	justify-content: center;
-}
-
-
-/* .video-file{
-	/* display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-
-	background-color: hsla(0, 0%, 100%, .1);
-	border-radius: var(--bs-nav-pills-border-radius);
-
 	display: inline-block;
 	width: 128px;
 	height: 72px;
@@ -108,24 +68,25 @@
 	word-break: break-word;
 	background-position: center;
 	background-repeat: no-repeat;
-	background-size: contain; 
+	background-size: contain;
 }
-
-
- .video-file:hover{
+
+.files-background-add:hover {
 	background-color: hsla(0, 0%, 100%, .3);
-} */
+}
 
+.files-add{
+	display:inline-flex;
+	align-items: center;
+	justify-content: center;
+}
 
 .video .video-file .files-background-add{
 	opacity:60%;
 	backdrop-filter: blur(50px);
-
-
 }
 
 .name-file{
 	padding: 5px 10px;
 	text-shadow: 0 1px 3px rgb(0 0 0 / 100%);
-}
-
+}

css/header.css

@@ -2,12 +2,12 @@
 	color:aliceblue;
 	transition: all 0.2s ease-in-out;
 }
+
 .header-text .nav-item-text a:hover {
 	background: 0 0;
 	border: 0;
 	border-radius: var(--bs-nav-pills-border-radius);
 	background-color: hsla(0, 0%, 100%, .05);
-
 }
 
 hr {
@@ -18,7 +18,6 @@ hr {
 	opacity: 0.25;
 }
 
-
 .nav-main-drop {
 	color: aliceblue;
 }
@@ -43,6 +42,4 @@ hr {
 	border-radius: var(--bs-nav-pills-border-radius);
 	background-color: rgba(0, 0, 0, 0.2);
 	backdrop-filter: blur(50px);
-}
-
-
+}

css/preload.css

@@ -10,7 +10,6 @@
 	transition: 1s all;
 	opacity: 1;
 	visibility: visible;
-
 }
 
 .done{
@@ -25,7 +24,6 @@
 	top:50%;
 	transform: translate(-50%,-50%);
 	animation: 2s spin infinite linear;
-	/* animation: 3s linear 1s slidein; */
 }
 
 @keyframes spin{

css/style.css

@@ -7,22 +7,13 @@
 
 ::-webkit-scrollbar {
 	width: 10px;
-
-
-}
-
-
-::-webkit-scrollbar-thumb {
-	/* background-color: hsla(0, 0%, 100%, .3); */
-
 }
 
 html, body{
 	max-height: 100vh;
 	width: 100%;
 }
 
-
 body{
 	overflow-y: scroll;
 	-webkit-touch-callout: none;
@@ -40,17 +31,10 @@ body{
 	background-color: #22262c;
 	font-family: 'Montserrat', sans-serif;
 	transition: all 0.2s ease-in-out;
-	/* -webkit-transition: -webkit-transform 1s ease-in;
-	/* Changed here */
-	/* -moz-transition: -moz-transform 1s ease-in;
-	-o-transition: -o-transform 1s ease-in;
-	transition: transform 1s ease-in; */
-} */
+}
 
 i{
 	align-items: center;
 	display:inline-block;
 	justify-content:center;
-
-}
-
+}

css/timeline.css

@@ -107,7 +107,7 @@ body {
 
 .layer:nth-child(2n+1) {
 	background-color: var(--layer);
-  }
+}
 
 .track {
 	display: flex;
@@ -122,78 +122,85 @@ body {
 	left: var(--start);
 	width: var(--length);
 	overflow: hidden;
-  }
-  .dragging {
+}
+
+.dragging {
 	position: fixed;
 	height: 40px;
 	opacity: 0.5;
 	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
 	margin: 0;
 	bottom: auto;
 	pointer-events: none;
-  }
+}
 
-  .trim {
+.trim {
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	cursor: ew-resize;
 	width: 15px;
-  }
-  .trim-start {
+}
+
+.trim-start {
 	left: 0;
-  }
-  .trim-start:hover {
+}
+
+.trim-start:hover {
 	border-left: 4px solid #0084ff;
-  }
-  .trim-end {
+}
+
+.trim-end {
 	right: 0;
-  }
+}
 
-  .trim-end:hover {
+.trim-end:hover {
 	border-right: 4px solid #0084ff;
-  }
+}
 
-  .selected {
+.selected {
 	position: relative;
 	margin: 0;
 	z-index: 10;
 	overflow: visible;
 	border: 2px solid #0084ff;
-  }
-  .audio.selected {
+}
+
+.audio.selected {
 	--background-size-y: 16px;
-  }
+}
 
-  .no-selected {
+.no-selected {
 	font-size: 12px;
 	padding: 10px;
-  }
+}
 
-  .placeholder {
+.placeholder {
 	background-color: var(--text-em);
-  }
+}
 
-  .selection {
+.selection {
 	position: absolute;
 	border: 1px solid rgba(0, 255, 255, 0.5);
 	background-color: rgba(0, 255, 255, 0.5);
-  }
+}
 
-  .selected .keys {
+.selected .keys {
 	display: block;
 	min-height: 20px;
-  }
-  .selected .key-row {
+}
+
+.selected .key-row {
 	position: relative;
 	height: 20px;
-  }
+}
 
-  .exporting .main,
+.exporting .main,
 .exporting .timeline-scroller {
   pointer-events: none;
   opacity: 0.5;
 }
+
 .exporting-msg {
   display: none;
   position: fixed;
@@ -205,6 +212,7 @@ body {
   margin: 50px auto;
   font-size: 16px;
 }
+
 .exporting .exporting-msg {
   display: block;
 }