From 4c28bd9f6f018ebab621d690cabb99b16b3e1929 Mon Sep 17 00:00:00 2001
From: bewe <93899302+bernarduswillson@users.noreply.github.com>
Date: Mon, 9 Oct 2023 12:48:32 +0700
Subject: [PATCH] fix: video css
---
app/views/admin/create/video/index.php | 31 ++++++++++++++++----------
app/views/admin/edit/video/index.php | 16 +++++++------
public/css/create.css | 11 ++++++++-
public/js/create-video.js | 2 ++
public/js/edit-video.js | 2 ++
5 files changed, 42 insertions(+), 20 deletions(-)
diff --git a/app/views/admin/create/video/index.php b/app/views/admin/create/video/index.php
index 7bc18a8..2058a23 100644
--- a/app/views/admin/create/video/index.php
+++ b/app/views/admin/create/video/index.php
@@ -14,29 +14,36 @@ $video = '/public/video/default.mp4';
<input type="hidden" name="user_id" value="<?= $_SESSION['user_id'] ?>">
<div class="text-input-container">
<label for="videoName" class="text-reg text-black text-xs">Video name</label>
- <input id="name-input" type="text" name="videoName" placeholder="Video name" class="font-reg text-black text-sm" autocomplete="false" required>
+ <input id="name-input" type="text" name="videoName" placeholder="Video name" class="font-reg text-black text-sm"
+ autocomplete="false" required>
<p id="video-error"></p>
<label for="description" class="text-reg text-black text-xs">Description</label>
- <input id="desc-input" type="text" name="description" placeholder="Description" class="font-reg text-black text-sm" autocomplete="false">
-
- <label for="videoUrl" class="text-reg text-black text-xs">URL</label>
+ <input id="desc-input" type="text" name="description" placeholder="Description"
+ class="font-reg text-black text-sm" autocomplete="false">
+
+ <label for="videoUrl" class="text-reg text-black text-xs">File</label>
<input type="hidden" id="new-video" name="new-video" value="<?php echo $video; ?>">
- <div class="button-container">
- <button class="font-reg text-sm primary-blue-button">
+ <div class="language-picture-container">
+ <p id="video-path">default.mp4</p>
+ <input type="hidden" id="new-language-pic" name="new-language-pic" value="<?php echo $video; ?>">
+ <div class="button-container">
<input type="file" id="upload-input" accept="video/*">
- Change video
- </button>
- <button class="font-reg text-sm secondary-blue-button" id="delete-btn">Delete video</button>
+ <label for="upload-input" class="primary-blue-button font-reg text-sm">Change video</label>
+ <button class="font-reg text-sm secondary-blue-button" id="delete-btn">Delete video</button>
+ </div>
</div>
<label for="order" class="text-reg text-black text-xs">Order</label>
- <input id="order-input" type="number" name="order" placeholder="Video order" class="font-reg text-black text-sm" autocomplete="false" required>
+ <input id="order-input" type="number" name="order" placeholder="Video order" class="font-reg text-black text-sm"
+ autocomplete="false" required>
<p id="order-error"></p>
</div>
<div class="bottom-button-container">
- <a href="/admin/manage/<?= $data["languageId"] . "/" . $data["moduleId"] ?>" class="secondary-orange-button font-reg text-sm">Back</a>
- <button id="create-btn" type="submit" class="primary-orange-button font-reg text-sm disable" onchange="checkVideo(), checkOrder()" disabled>Create</button>
+ <a href="/admin/manage/<?= $data["languageId"] . "/" . $data["moduleId"] ?>"
+ class="secondary-orange-button font-reg text-sm">Back</a>
+ <button id="create-btn" type="submit" class="primary-orange-button font-reg text-sm disable"
+ onchange="checkVideo(), checkOrder()" disabled>Create</button>
</div>
</form>
</div>
diff --git a/app/views/admin/edit/video/index.php b/app/views/admin/edit/video/index.php
index 204f6a1..20d9dad 100644
--- a/app/views/admin/edit/video/index.php
+++ b/app/views/admin/edit/video/index.php
@@ -1,5 +1,6 @@
<?php
$video = $data["video"]["video_url"];
+$parse_video = explode("/", $video);
?>
<div class="create">
@@ -38,15 +39,16 @@ $video = $data["video"]["video_url"];
<p id="video-error"></p>
<label for="description" class="text-reg text-black text-xs">Description</label>
<input id="desc-input" type="text" name="description" placeholder="Description" class="font-reg text-black text-sm" autocomplete="false" value="<?= $data["video"]["video_desc"] ?>">
- <label for="videoUrl" class="text-reg text-black text-xs">URL</label>
-
+ <label for="videoUrl" class="text-reg text-black text-xs">File</label>
<input type="hidden" id="new-video" name="new-video" value="<?php echo $video; ?>">
- <div class="button-container">
- <button class="font-reg text-sm primary-blue-button">
+ <div class="language-picture-container">
+ <p id="video-path"><?= end($parse_video); ?></p>
+ <input type="hidden" id="new-language-pic" name="new-language-pic" value="<?php echo $video; ?>">
+ <div class="button-container">
<input type="file" id="upload-input" accept="video/*">
- Change video
- </button>
- <button class="font-reg text-sm secondary-blue-button" id="delete-btn">Delete video</button>
+ <label for="upload-input" class="primary-blue-button font-reg text-sm">Change video</label>
+ <button class="font-reg text-sm secondary-blue-button" id="delete-btn">Delete video</button>
+ </div>
</div>
<label for="order" class="text-reg text-black text-xs">Order</label>
diff --git a/public/css/create.css b/public/css/create.css
index ea26af3..ac90a2f 100644
--- a/public/css/create.css
+++ b/public/css/create.css
@@ -15,7 +15,7 @@
.create .input-container .language-picture-container {
width: 100%;
- max-width: 400px;
+ max-width: 1000px;
display: flex;
gap: 50px;
align-items: center;
@@ -64,6 +64,15 @@
justify-content: center;
}
+.video-image-container {
+ width: 100%;
+ max-width: 400px;
+ display: flex;
+ gap: 50px;
+ align-items: center;
+ justify-content: center;
+}
+
/* Input container */
.create form {
diff --git a/public/js/create-video.js b/public/js/create-video.js
index e8af18d..206a467 100644
--- a/public/js/create-video.js
+++ b/public/js/create-video.js
@@ -68,6 +68,7 @@ document.getElementById('upload-input').addEventListener('change', function (eve
const reader = new FileReader();
reader.onload = function (e) {
+ document.getElementById('video-path').innerHTML = file.name;
saveVideoToRepository(file);
};
@@ -80,6 +81,7 @@ document.getElementById('delete-btn').addEventListener('click', function (event)
uploadInput.value = '';
const newVideoInput = document.getElementById('new-video');
newVideoInput.value = '/public/video/default.mp4';
+ document.getElementById('video-path').innerHTML = 'default.mp4';
});
function saveVideoToRepository(videoFile) {
diff --git a/public/js/edit-video.js b/public/js/edit-video.js
index a8c70bf..012daa4 100644
--- a/public/js/edit-video.js
+++ b/public/js/edit-video.js
@@ -68,6 +68,7 @@ document.getElementById('upload-input').addEventListener('change', function (eve
const reader = new FileReader();
reader.onload = function (e) {
+ document.getElementById('video-path').innerHTML = file.name;
saveVideoToRepository(file);
};
@@ -80,6 +81,7 @@ document.getElementById('delete-btn').addEventListener('click', function (event)
uploadInput.value = '';
const newVideoInput = document.getElementById('new-video');
newVideoInput.value = '/public/video/default.mp4';
+ document.getElementById('video-path').innerHTML = 'default.mp4';
});
function saveVideoToRepository(videoFile) {
--
GitLab