From 503e45a0a9f1c3e5eba0a319cc47a24047531fd3 Mon Sep 17 00:00:00 2001
From: ShadyNagy <info@shadynagy.com>
Date: Fri, 20 Dec 2024 19:26:36 +0200
Subject: [PATCH] fix

---
 .../Pages/Admin/Videos/Create.cshtml          | 365 +++++++++---------
 1 file changed, 181 insertions(+), 184 deletions(-)

diff --git a/src/DevBetterWeb.Web/Pages/Admin/Videos/Create.cshtml b/src/DevBetterWeb.Web/Pages/Admin/Videos/Create.cshtml
index a81c4208..dddcaa2d 100644
--- a/src/DevBetterWeb.Web/Pages/Admin/Videos/Create.cshtml
+++ b/src/DevBetterWeb.Web/Pages/Admin/Videos/Create.cshtml
@@ -2,21 +2,21 @@
 @model DevBetterWeb.Web.Pages.Admin.Videos.CreateModel
 
 @{
-  ViewData["Title"] = "Create";
+	ViewData["Title"] = "Create";
 }
 
 <style>
 	.progress {
-    position: relative;
-  }
+		position: relative;
+	}
 
-    .progress span {
-      position: absolute;
-      color: black;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
+		.progress span {
+			position: absolute;
+			color: black;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
 
 </style>
 
@@ -25,35 +25,35 @@
 <hr />
 
 <form method="post" enctype="multipart/form-data" onsubmit="return uploadVideo(event)">
-  <div class="row mb-3">
-    <div class="col-md-6">
-      <div class="form-group">
-        <label for="videoName" class="form-label">Video Name</label>
-	      <input id="videoName" name="videoName" class="form-control" />
-	      <span class="text-danger"></span>
-      </div>
-    </div>
-    <div class="col-md-6">
-      <div class="form-group">
-        <label class="form-label">Video Creation Date</label>
-        <input id="videoCreationDate" type="date" class="form-control" />
-      </div>
-    </div>
-  </div>
-  <div class="row mb-3">
-    <div class="col-md-6">
-      <div class="form-group">
-        <label class="form-label">Video File</label>
-        <input id="videoFile" type="file" name="videoFile" class="form-control-file" />
-      </div>
-    </div>
-    <div class="col-md-6">
-      <div class="form-group">
-        <label class="form-label">MD File</label>
-        <input id="mdFile" type="file" name="mdFile" class="form-control-file" />
-      </div>
-    </div>
-  </div>
+	<div class="row mb-3">
+		<div class="col-md-6">
+			<div class="form-group">
+				<label for="videoName" class="form-label">Video Name</label>
+				<input id="videoName" name="videoName" class="form-control" />
+				<span class="text-danger"></span>
+			</div>
+		</div>
+		<div class="col-md-6">
+			<div class="form-group">
+				<label class="form-label">Video Creation Date</label>
+				<input id="videoCreationDate" type="date" class="form-control" />
+			</div>
+		</div>
+	</div>
+	<div class="row mb-3">
+		<div class="col-md-6">
+			<div class="form-group">
+				<label class="form-label">Video File</label>
+				<input id="videoFile" type="file" name="videoFile" class="form-control-file" />
+			</div>
+		</div>
+		<div class="col-md-6">
+			<div class="form-group">
+				<label class="form-label">MD File</label>
+				<input id="mdFile" type="file" name="mdFile" class="form-control-file" />
+			</div>
+		</div>
+	</div>
 	<div class="row mb-3">
 		<div class="col-12">
 			<div class="form-group">
@@ -71,30 +71,30 @@
 			</div>
 		</div>
 	</div>
-  <div class="row mb-3">
-    <div class="col-12">
-      <div class="progress">
-	      <div id="uploadProgressBar" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-	      </div>
-	      <span id="progressText" class="justify-content-center d-flex position-absolute w-100">
-		      0%
-	      </span>
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-12">
-      <div class="form-group">
-	      <button type="button" class="btn btn-primary" id="confirmCreate">Upload</button>
-      </div>
-    </div>
-  </div>
+	<div class="row mb-3">
+		<div class="col-12">
+			<div class="progress">
+				<div id="uploadProgressBar" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+				</div>
+				<span id="progressText" class="justify-content-center d-flex position-absolute w-100">
+					0%
+				</span>
+			</div>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-12">
+			<div class="form-group">
+				<button type="button" class="btn btn-primary" id="confirmCreate">Upload</button>
+			</div>
+		</div>
+	</div>
 </form>
 
 
 
 <div>
-  <a asp-page="Index">Back to List</a>
+	<a asp-page="Index">Back to List</a>
 </div>
 
 @section Scripts {
@@ -103,70 +103,69 @@
 	}
 
 	<script>
-    const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
-
-    function arrayBufferToBase64(buffer) {
-      let binary = '';
-      const bytes = new Uint8Array(buffer);
-      for (let i = 0; i < bytes.byteLength; i++) {
-        binary += String.fromCharCode(bytes[i]);
-      }
-      return window.btoa(binary);
-    }
-
-    $(document).ready(function () {
-
-      if (window.FileReader) {
-        $('#videoFile').on('change', function (e) {
-          if (e.target.files == undefined || e.target.files.length <= 0) {
-            $('#videoName').val('');
-          } else {
-            var fileName = e.target.files[0].name;
-            $('#videoName').val(fileName.split('.')[0]);
-            var creationDate = new Date(e.target.files[0].lastModified);
-            const formattedDate = creationDate.toISOString().slice(0, 10);
-            $('#videoCreationDate').val(formattedDate);
-          }
-        });
-        $('#mdFile').on('change', function (e) {
-          var file = e.target.files[0];
-          var reader = new FileReader();
-          reader.onload = function (e) {
-            var data = reader.result;
-            $('#description').val(data);
-            updateMdPreview(data);
-          }
-          reader.readAsText(file);
-        });
-      }
-
-      document.querySelector("#confirmCreate").addEventListener("click", function (e) {
-        var videoFileInput = document.getElementById("videoFile");
-        if (!videoFileInput.files.length) {
-          alert("Please select a video file.");
-          return false;
-        }
-
-        const mdFileInput = document.getElementById("mdFile");
-        if (!mdFileInput.files.length) {
-          alert("Please select an MD file.");
-          return false;
-        }
-
-        const videoCreationDateInput = document.getElementById("videoCreationDate");
-        const file = videoFileInput.files[0];
-        const videoCreationDate = videoCreationDateInput.valueAsDate || new Date(file.lastModified);
-
-        const videoNameInput = document.getElementById("videoName");
-        const videoName = videoNameInput.value || file.name;
-
-        if (file) {
-          startUpload(file, videoName, videoCreationDate);
-        }
-      });
-    });
-
-	function startUpload(file, videoName, videoCreationDate) {
+		const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
+
+		function arrayBufferToBase64(buffer) {
+			let binary = '';
+			const bytes = new Uint8Array(buffer);
+			for (let i = 0; i < bytes.byteLength; i++) {
+				binary += String.fromCharCode(bytes[i]);
+			}
+			return window.btoa(binary);
+		}
+
+		$(document).ready(function () {
+
+			if (window.FileReader) {
+				$('#videoFile').on('change', function (e) {
+					if (e.target.files == undefined || e.target.files.length <= 0) {
+						$('#videoName').val('');
+					} else {
+						var fileName = e.target.files[0].name;
+						$('#videoName').val(fileName.split('.')[0]);
+						var creationDate = new Date(e.target.files[0].lastModified);
+						const formattedDate = creationDate.toISOString().slice(0, 10);
+						$('#videoCreationDate').val(formattedDate);
+					}
+				});
+				$('#mdFile').on('change', function (e) {
+					var file = e.target.files[0];
+					var reader = new FileReader();
+					reader.onload = function (e) {
+						var data = reader.result;
+						$('#description').val(data);
+						updateMdPreview(data);
+					}
+					reader.readAsText(file);
+				});
+			}
+
+			document.querySelector("#confirmCreate").addEventListener("click", function (e) {
+				var videoFileInput = document.getElementById("videoFile");
+				if (!videoFileInput.files.length) {
+					alert("Please select a video file.");
+					return false;
+				}
+
+				const mdFileInput = document.getElementById("mdFile");
+				if (!mdFileInput.files.length) {
+					alert("Please select an MD file.");
+					return false;
+				}
+
+				const videoCreationDateInput = document.getElementById("videoCreationDate");
+				const file = videoFileInput.files[0];
+				const videoCreationDate = videoCreationDateInput.valueAsDate || new Date(file.lastModified);
+
+				const videoNameInput = document.getElementById("videoName");
+				const videoName = videoNameInput.value || file.name;
+
+				if (file) {
+					startUpload(file, videoName, videoCreationDate);
+				}
+			});
+		});
+		function startUpload(file, videoName, videoCreationDate) {
 			const videoSize = file.size;
 
 			const uploadVideoStartRequest = {
@@ -185,7 +184,7 @@
 				.then(response => {
 					if (!response.ok) {
 						document.getElementById('confirmCreate').disabled = false;
-						throw new Error(HTTP error! status: ${response.status});
+						throw new Error(`HTTP error! status: ${response.status}`);
 					} else {
 						return response.text();
 					}
@@ -208,47 +207,46 @@
 				});
 		}
 
+		function uploadChunks(sessionId, file, folderId) {
+			let offset = 0;
+
+			function nextChunk() {
+				if (offset < file.size) {
+					const chunk = file.slice(offset, offset + CHUNK_SIZE);
+					let isLastChunk = offset + CHUNK_SIZE >= file.size;
+					uploadChunk(sessionId, chunk, isLastChunk, isLastChunk ? folderId : null)
+						.then(data => {
+							if (data == 2) { //uploadComplete
+								document.getElementById('confirmCreate').disabled = false;
+							}
+							offset += CHUNK_SIZE;
+
+							let progress = Math.min(100, (offset / file.size) * 100).toFixed(2);
+							updateProgressBar(progress);
 
-    function uploadChunks(sessionId, file, folderId) {
-      let offset = 0;
-
-      function nextChunk() {
-        if (offset < file.size) {
-          const chunk = file.slice(offset, offset + CHUNK_SIZE);
-          let isLastChunk = offset + CHUNK_SIZE >= file.size;
-          uploadChunk(sessionId, chunk, isLastChunk, isLastChunk ? folderId : null)
-            .then(data => {
-              if (data == 2) { //uploadComplete
-                document.getElementById('confirmCreate').disabled = false;
-              }
-              offset += CHUNK_SIZE;
-
-              let progress = Math.min(100, (offset / file.size) * 100).toFixed(2);
-              updateProgressBar(progress);
-
-              nextChunk();
-            })
-            .catch(error => {
-              console.error('Request failed', error);
-              document.getElementById('confirmCreate').disabled = false;
-              alert(error.message);
-            });
-        } else {
-        }
-      }
-
-      nextChunk();
-    }
-
-    function updateProgressBar(progress) {
-      let progressBar = document.getElementById("uploadProgressBar");
-      let progressText = document.getElementById("progressText");
-      progressBar.style.width = progress + "%";
-      progressBar.setAttribute("aria-valuenow", progress);
-      progressText.innerText = progress + "%";
-    }
-
-	function uploadChunk(sessionId, chunk, isLastChunk, folderId) {
+							nextChunk();
+						})
+						.catch(error => {
+							console.error('Request failed', error);
+							document.getElementById('confirmCreate').disabled = false;
+							alert(error.message);
+						});
+				} else {
+				}
+			}
+
+			nextChunk();
+		}
+
+		function updateProgressBar(progress) {
+			let progressBar = document.getElementById("uploadProgressBar");
+			let progressText = document.getElementById("progressText");
+			progressBar.style.width = progress + "%";
+			progressBar.setAttribute("aria-valuenow", progress);
+			progressText.innerText = progress + "%";
+		}
+
+		function uploadChunk(sessionId, chunk, isLastChunk, folderId) {
 			return new Promise((resolve, reject) => {
 				mdFileContentPromise = readMdFilePromise();
 
@@ -288,30 +286,29 @@
 
 				reader.readAsArrayBuffer(chunk);
 			});
-	}
-
+		}
 
-    function updateMdPreview(descriptionContent) {
-      var converter = new showdown.Converter();
-      var htmlContent = converter.makeHtml(descriptionContent);
+		function updateMdPreview(descriptionContent) {
+			var converter = new showdown.Converter();
+			var htmlContent = converter.makeHtml(descriptionContent);
 
-      $('#mdPreview').html(htmlContent);
-    }
+			$('#mdPreview').html(htmlContent);
+		}
 
-    function readMdFilePromise() {
-      const mdFileInput = document.getElementById("mdFile");
-      const mdFile = mdFileInput.files[0];
-      const mdFileReader = new FileReader();
-      const mdFileContentPromise = new Promise((resolve) => {
-        mdFileReader.onload = (e) => {
-          resolve(e.target.result);
-        };
-        mdFileReader.readAsText(mdFile);
-      });
+		function readMdFilePromise() {
+			const mdFileInput = document.getElementById("mdFile");
+			const mdFile = mdFileInput.files[0];
+			const mdFileReader = new FileReader();
+			const mdFileContentPromise = new Promise((resolve) => {
+				mdFileReader.onload = (e) => {
+					resolve(e.target.result);
+				};
+				mdFileReader.readAsText(mdFile);
+			});
 
-      return mdFileContentPromise;
-    }
+			return mdFileContentPromise;
+		}
 
 
-  </script>
-}
+	</script>
+}
\ No newline at end of file