Merge branch 'fixVideo' into 'dev'

fix: video css

See merge request bernarduswillson/if-3110-2023-01-f!61

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>

app/views/admin/edit/video/index.php

 <?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>

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 {

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) {

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) {