upload video to lfs (#2138)

jo-elimu · web-flow · commit 01e5b3fa1ee3 · 2025-04-16T23:34:36.000+07:00
diff --git a/pom-dependency-tree.txt b/pom-dependency-tree.txt
@@ -1,4 +1,4 @@
-ai.elimu:webapp:war:2.5.89-SNAPSHOT
+ai.elimu:webapp:war:2.5.91-SNAPSHOT
 +- com.github.elimu-ai:model:jar:model-2.0.97:compile
 |  \- com.google.code.gson:gson:jar:2.13.0:compile
 |     \- com.google.errorprone:error_prone_annotations:jar:2.37.0:compile
diff --git a/src/main/java/ai/elimu/entity/content/multimedia/Video.java b/src/main/java/ai/elimu/entity/content/multimedia/Video.java
@@ -2,6 +2,7 @@
 
 import ai.elimu.model.v2.enums.content.VideoFormat;
 import ai.elimu.util.GitHubLfsHelper;
+import ai.elimu.web.context.EnvironmentContextLoaderListener;
 import jakarta.persistence.Column;
 import jakarta.persistence.Entity;
 import jakarta.persistence.EnumType;
@@ -45,4 +46,11 @@ public class Video extends Multimedia {
   @NotNull
   @Enumerated(EnumType.STRING)
   private VideoFormat videoFormat;
+
+  public String getUrl() {
+    return "https://raw.githubusercontent.com/elimu-ai/webapp-lfs/main" +
+        "/lang-" + EnvironmentContextLoaderListener.PROPERTIES.getProperty("content.language") +
+        "/videos" +
+        "/" + getChecksumMd5() + "." + getVideoFormat().toString().toLowerCase();
+  }
 }
diff --git a/src/main/java/ai/elimu/rest/v2/JpaToGsonConverter.java b/src/main/java/ai/elimu/rest/v2/JpaToGsonConverter.java
@@ -353,7 +353,7 @@ public static VideoGson getVideoGson(Video video) {
             videoGson.setTitle(video.getTitle());
             videoGson.setVideoFormat(video.getVideoFormat());
             videoGson.setChecksumMd5(video.getChecksumMd5());
-            videoGson.setFileUrl("/video/" + video.getId() + "_r" + video.getRevisionNumber() + "." + video.getVideoFormat().toString().toLowerCase());
+            videoGson.setFileUrl(video.getUrl());
             videoGson.setFileSize(video.getBytes().length / 1024);
             videoGson.setThumbnailUrl("/video/" + video.getId() + "_r" + video.getRevisionNumber() + "_thumbnail.png");
             Set<WordGson> wordGsons = new HashSet<>();
diff --git a/src/main/java/ai/elimu/util/GitHubLfsHelper.java b/src/main/java/ai/elimu/util/GitHubLfsHelper.java
@@ -7,6 +7,7 @@
 import com.google.gson.JsonParser;
 
 import ai.elimu.entity.content.multimedia.Image;
+import ai.elimu.entity.content.multimedia.Video;
 import ai.elimu.web.context.EnvironmentContextLoaderListener;
 import kong.unirest.core.HttpResponse;
 import kong.unirest.core.Unirest;
@@ -19,32 +20,64 @@
 @Slf4j
 public class GitHubLfsHelper {
 
+    private static final String API_BASE_URL = "https://api.github.com/repos/elimu-ai/webapp-lfs/contents/";
+
     /**
-     * Upload file to LFS.
+     * Upload image to LFS.
      * 
      * @param image The Image representing the file bytes.
      * @param bytes The file bytes to be stored.
-     * @return The hash (CID) generated by GitHub.
+     * @return The checksum (SHA) generated by GitHub.
      */
     public static String uploadImageToLfs(Image image, byte[] bytes) {
         log.info("uploadImageToLfs");
 
-        // Store file in webapp-lfs
-        // https://docs.github.com/en/rest/repos/contents?apiVersion=2022-11-28#create-or-update-file-contents
-        
         String languageCode = EnvironmentContextLoaderListener.PROPERTIES.getProperty("content.language");
         log.info("languageCode: " + languageCode);
         
         String filename = image.getId() + "_r" + image.getRevisionNumber() + "." + image.getImageFormat().toString().toLowerCase();
         log.info("filename: " + filename);
+
+        String path = "lang-" + languageCode + "/images/" + filename;
+        log.info("path: " + path);
         
-        String url = "https://api.github.com/repos/elimu-ai/webapp-lfs/contents/" +
-            "lang-" + languageCode + "/" +
-            "images/" + filename;
-        log.info("url: " + url);
+        return uploadFileToLfs(path, bytes);
+    }
+
+    /**
+     * Upload video to LFS.
+     * 
+     * @param video The Video representing the file bytes.
+     * @param bytes The file bytes to be stored.
+     * @return The checksum (SHA) generated by GitHub.
+     */
+    public static String uploadVideoToLfs(Video video, byte[] bytes) {
+        log.info("uploadVideoToLfs");
+
+        String languageCode = EnvironmentContextLoaderListener.PROPERTIES.getProperty("content.language");
+        log.info("languageCode: " + languageCode);
+        
+        String filename = video.getChecksumMd5() + "." + video.getVideoFormat().toString().toLowerCase();
+        log.info("filename: " + filename);
+
+        String path = "lang-" + languageCode + "/videos/" + filename;
+        log.info("path: " + path);
         
+        return uploadFileToLfs(path, bytes);
+    }
+
+    /**
+     * Store file in webapp-lfs
+     * https://docs.github.com/en/rest/repos/contents?apiVersion=2022-11-28#create-or-update-file-contents
+     */
+    private static String uploadFileToLfs(String path, byte[] bytes) {
+        log.info("uploadFileToLfs");
+
+        String url = API_BASE_URL + path;
+        log.info("url: " + url);
+
         JsonObject body = new JsonObject();
-        body.addProperty("message", "chore(images): add " + filename);
+        body.addProperty("message", "chore: add " + path );
         body.addProperty("content", Base64.getEncoder().encodeToString(bytes));
         
         JsonObject committer = new JsonObject();
diff --git a/src/main/java/ai/elimu/web/content/multimedia/video/VideoCreateController.java b/src/main/java/ai/elimu/web/content/multimedia/video/VideoCreateController.java
@@ -6,6 +6,8 @@
 import ai.elimu.model.v2.enums.content.LiteracySkill;
 import ai.elimu.model.v2.enums.content.NumeracySkill;
 import ai.elimu.model.v2.enums.content.VideoFormat;
+import ai.elimu.util.ChecksumHelper;
+import ai.elimu.util.GitHubLfsHelper;
 import jakarta.servlet.ServletException;
 import jakarta.servlet.http.HttpServletRequest;
 import java.io.IOException;
@@ -88,6 +90,8 @@ public String handleSubmit(
           video.setContentType(contentType);
 
           video.setBytes(bytes);
+          video.setChecksumMd5(ChecksumHelper.calculateMD5(bytes));
+          // TODO: https://github.com/elimu-ai/webapp/issues/2137
 
           // TODO: convert to a default video format?
         }
@@ -118,9 +122,13 @@ public String handleSubmit(
       return "content/multimedia/video/create";
     } else {
       video.setTitle(video.getTitle().toLowerCase());
+      String checksumGitHub = GitHubLfsHelper.uploadVideoToLfs(video, video.getBytes());
+      video.setChecksumGitHub(checksumGitHub);
       video.setTimeLastUpdate(Calendar.getInstance());
       videoDao.create(video);
 
+      // TODO: https://github.com/elimu-ai/webapp/issues/1545
+
       return "redirect:/content/multimedia/video/list#" + video.getId();
     }
   }
diff --git a/src/main/java/ai/elimu/web/content/multimedia/video/VideoCsvExportController.java b/src/main/java/ai/elimu/web/content/multimedia/video/VideoCsvExportController.java
@@ -32,14 +32,13 @@ public void handleRequest(
     List<Video> videos = videoDao.readAllOrderedById();
     log.info("videos.size(): " + videos.size());
     for (Video video : videos) {
-      String fileUrl = "/video/" + video.getId() + "." + video.getVideoFormat().toString().toLowerCase();
       csvFileContent += video.getId() + ","
           + video.getContentType() + ","
           + video.getContentLicense() + ","
           + "\"" + video.getAttributionUrl() + "\","
           + "\"" + video.getTitle() + "\","
           + "\"" + video.getChecksumMd5() + "\","
-          + "\"" + fileUrl + "\","
+          + "\"" + video.getUrl() + "\","
           + video.getVideoFormat() + "\n";
     }
 
diff --git a/src/main/java/ai/elimu/web/content/multimedia/video/VideoEditController.java b/src/main/java/ai/elimu/web/content/multimedia/video/VideoEditController.java
@@ -14,6 +14,8 @@
 import ai.elimu.model.v2.enums.content.LiteracySkill;
 import ai.elimu.model.v2.enums.content.NumeracySkill;
 import ai.elimu.model.v2.enums.content.VideoFormat;
+import ai.elimu.util.ChecksumHelper;
+import ai.elimu.util.GitHubLfsHelper;
 import jakarta.servlet.ServletException;
 import jakarta.servlet.http.HttpServletRequest;
 import java.io.IOException;
@@ -63,6 +65,14 @@ public String handleRequest(
     log.info("handleRequest");
 
     Video video = videoDao.read(id);
+    if (StringUtils.isBlank(video.getChecksumGitHub())) {
+      String checksumGitHub = GitHubLfsHelper.uploadVideoToLfs(video, video.getBytes());
+      video.setChecksumGitHub(checksumGitHub);
+      video.setRevisionNumber(video.getRevisionNumber() + 1);
+      videoDao.update(video);
+
+      // TODO: https://github.com/elimu-ai/webapp/issues/1545
+    }
     model.addAttribute("video", video);
 
     model.addAttribute("contentLicenses", ContentLicense.values());
@@ -116,6 +126,8 @@ public String handleSubmit(
           video.setContentType(contentType);
 
           video.setBytes(bytes);
+          video.setChecksumMd5(ChecksumHelper.calculateMD5(bytes));
+          // TODO: https://github.com/elimu-ai/webapp/issues/2137
 
           // TODO: convert to a default video format?
         }
@@ -140,6 +152,8 @@ public String handleSubmit(
       video.setRevisionNumber(video.getRevisionNumber() + 1);
       videoDao.update(video);
 
+      // TODO: https://github.com/elimu-ai/webapp/issues/1545
+
       return "redirect:/content/multimedia/video/list#" + video.getId();
     }
   }
diff --git a/src/main/webapp/WEB-INF/jsp/content/multimedia/image/create.jsp b/src/main/webapp/WEB-INF/jsp/content/multimedia/image/create.jsp
@@ -81,7 +81,7 @@
                 <div class="file-field input-field col s12">
                     <div class="btn">
                         <span>File</span>
-                        <form:input path="bytes" type="file" />
+                        <input name="bytes" type="file" />
                     </div>
                     <div class="file-path-wrapper">
                         <input class="file-path validate" type="text" />
diff --git a/src/main/webapp/WEB-INF/jsp/content/multimedia/image/edit.jsp b/src/main/webapp/WEB-INF/jsp/content/multimedia/image/edit.jsp
@@ -100,7 +100,7 @@
                 <div class="file-field input-field col s12">
                     <div class="btn">
                         <span>File</span>
-                        <form:input path="bytes" type="file" />
+                        <input name="bytes" type="file" />
                     </div>
                     <div class="file-path-wrapper">
                         <input class="file-path validate" type="text" />
diff --git a/src/main/webapp/WEB-INF/jsp/content/multimedia/video/edit.jsp b/src/main/webapp/WEB-INF/jsp/content/multimedia/video/edit.jsp
@@ -4,7 +4,11 @@
 
 <content:section cssId="videoEditPage">
     <h4><content:gettitle /></h4>
-    <div class="card-panel">
+    <div class="card-panel cid-${video.checksumGitHub != null}">
+        <video poster="<spring:url value='/video/${video.id}_r${video.revisionNumber}_thumbnail.png' />" controls>
+            <source src="<spring:url value='${video.url}' />" />
+        </video>
+
         <form:form modelAttribute="video" enctype="multipart/form-data">
             <tag:formErrors modelAttribute="video" />
 
@@ -112,19 +116,6 @@
 </content:section>
 
 <content:aside>
-    <h5 class="center">Preview</h5>
-    
-    <div class="video card">
-        <a class="valign-wrapper" href="<spring:url value='/video/${video.id}_r${video.revisionNumber}.${fn:toLowerCase(video.videoFormat)}' />" target="_blank">
-            <div style="position: absolute; width: 100%; text-align: center;">
-                <i class="material-icons" style=" background-color: rgba(0,0,0, 0.2); color: rgba(255,255,255, 0.8); padding: 0.5rem; font-size: 3em; border-width: 2px; border-color: rgba(255,255,255, 0.8); border-style: solid; border-radius: 50%;">play_arrow</i>
-            </div>
-            <img src="<spring:url value='/video/${video.id}_r${video.revisionNumber}_thumbnail.png' />" alt="${video.title}" />
-        </a>
-    </div>
-    
-    <div class="divider" style="margin-top: 1em;"></div>
-    
     <h5 class="center">Content labels</h5>
     
     <b>Letters</b><br />
@@ -364,4 +355,17 @@
             });
         });
     </script>
+
+    <div class="divider" style="margin-bottom: 1em;"></div>
+
+    <label>checksum_md5</label>
+    <code>${video.checksumMd5}</code><br />
+    <br />
+
+    <label>file_url</label>
+    <code>${video.url}</code><br />
+    <br />
+
+    <label>checksum_github</label>
+    <code>${video.checksumGitHub}</code><br />
 </content:aside>
diff --git a/src/main/webapp/WEB-INF/jsp/content/multimedia/video/list.jsp b/src/main/webapp/WEB-INF/jsp/content/multimedia/video/list.jsp
@@ -24,9 +24,9 @@
         <c:forEach var="video" items="${videos}">
             <div class="col s12 m6 l4">
                 <a name="${video.id}"></a>
-                <div class="video card">
+                <div class="video card cid-${video.checksumGitHub != null}">
                     <a class="valign-wrapper" href="<spring:url value='/content/multimedia/video/edit/${video.id}' />">
-                        <div style="position: absolute; width: 100%; text-align: center;">
+                        <div class="card-image" style="position: absolute; width: 100%; text-align: center;">
                             <i class="material-icons" style=" background-color: rgba(0,0,0, 0.2); color: rgba(255,255,255, 0.8); padding: 0.5rem; font-size: 3em; border-width: 2px; border-color: rgba(255,255,255, 0.8); border-style: solid; border-radius: 50%;">play_arrow</i>
                         </div>
                         <img src="<spring:url value='/video/${video.id}_r${video.revisionNumber}_thumbnail.png' />" alt="${video.title}" />
diff --git a/src/main/webapp/static/css/styles.css b/src/main/webapp/static/css/styles.css
@@ -59,18 +59,19 @@ video {
     max-width: 100%;
 }
 
-main img {
+main img,
+main video {
     background-color: rgba(255,255,255, 0.5);
     border-radius: 8px;
     border: 2px solid rgba(103,58,183, 0.3); /* deep-purple */
     box-shadow: 4px 4px rgba(103,58,183, 0.15); /* deep-purple */
 }
-main .card-panel img {
+main .card-panel img,
+main .card-panel video {
     border-width: 1px;
     box-shadow: 2px 2px rgba(103,58,183, 0.15); /* deep-purple */
 }
-.cid-false,
-main .card-panel img.cid-false {
+.cid-false {
     border-top: 8px solid orangered;
 }
 main .card .card-image img {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-ai.elimu:webapp:war:2.5.89-SNAPSHOT`
	`1`	`+ai.elimu:webapp:war:2.5.91-SNAPSHOT`
`2`	`2`	`+- com.github.elimu-ai:model:jar:model-2.0.97:compile`
`3`	`3`	`\| \- com.google.code.gson:gson:jar:2.13.0:compile`
`4`	`4`	`\| \- com.google.errorprone:error_prone_annotations:jar:2.37.0:compile`