chapters: improve task and landing page

Author: zubeydecivelek

cds/modules/deposit/api.py

@@ -926,7 +926,7 @@ def _has_chapters_changed(self, old_record=None):
             if curr["seconds"] != old["seconds"] or curr["title"] != old["title"]:
                 return True
 
-        if current_chapters and not get_existing_chapter_frame_timestamps(self):
+        if len(current_chapters) != len(get_existing_chapter_frame_timestamps(self)):
             # Chapters did not change, but chapter frames doesn't exist
             return True
 

cds/modules/flows/tasks.py

@@ -931,7 +931,10 @@ def _create_chapter_frames(
 
                 frame_filename = "chapter-{0}.jpg".format(int(chapter_seconds))
                 frame_path = os.path.join(output_dir, frame_filename)
-                
+
+                # Ensure we don't exceed duration
+                if chapter_seconds + 0.01 >= duration:
+                    chapter_seconds = max(0, duration - 0.02)
                 try:
                     # Extract single frame at chapter timestamp using ff_frames
                     ff_frames(
@@ -978,6 +981,8 @@ def _build_chapter_vtt(self, chapters, duration):
         for i, c in enumerate(sorted(chapters, key=lambda x: x["seconds"])):
             start = c["seconds"]
             end = chapters[i+1]["seconds"] if i+1 < len(chapters) else duration
+            if end > duration:
+                end = duration
             start_str = "{:02}:{:02}:{:02}.000".format(
                 int(start // 3600),
                 int((start % 3600) // 60),

cds/modules/records/static/templates/cds_records/video/detail.html

@@ -88,7 +88,7 @@ <h3 class="bt bw-1 pt-10 mb-0">
                     class="chapter-item"
                     ng-class="{ 'active': currentChapter === chapter }">
                   <div class="chapter-content">
-                    <div class="chapter-thumbnail" ng-init="frame = getChapterFrame(chapter)">
+                    <div class="chapter-thumbnail" ng-init="frame = chapterFrames[chapter.seconds]">
                       <div ng-class="{'is-placeholder': !frame}" class="thumbnail-container">
                         <img 
                           ng-if="frame"
@@ -326,13 +326,14 @@ <h3><strong>Chapters</strong></h3>
                      onmouseover="this.style.backgroundColor='#f8f9fa'; this.style.borderColor='#2196F3'; this.style.transform='translateY(-2px)';"
                      onmouseout="this.style.backgroundColor='white'; this.style.borderColor='#e1e8ed'; this.style.transform='translateY(0)';">
                   <!-- Chapter Thumbnail -->
-                  <div class="chapter-thumbnail-main-horizontal" style="width: 189px; height: 106px; border-radius: 6px; overflow: hidden; background-color: #f5f5f5; margin-bottom: 8px; position: relative;">
-                    <img ng-if="getChapterFrame(chapter)"
-                         ng-src="/api/iiif/v2/{{ getChapterFrame(chapter).bucket_id }}:{{ getChapterFrame(chapter).version_id }}:{{ getChapterFrame(chapter).key }}/full/320,180/0/default.jpg"
+                  <div class="chapter-thumbnail-main-horizontal" style="width: 189px; height: 106px; border-radius: 6px; overflow: hidden; background-color: #f5f5f5; margin-bottom: 8px; position: relative;"
+                  ng-init="chapterFrame = chapterFrames[chapter.seconds]">
+                    <img ng-if="chapterFrame"
+                         ng-src="/api/iiif/v2/{{ chapterFrame.bucket_id }}:{{ chapterFrame.version_id }}:{{ chapterFrame.key }}/full/320,180/0/default.jpg"
                          style="width: 100%; height: 100%; object-fit: cover;"
                          alt="Chapter {{ chapter.timestamp }}"
                          onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
-                    <div ng-if="!getChapterFrame(chapter)" 
+                    <div ng-if="!chapterFrame" 
                          style="width: 100%; height: 100%; background-color: #e9ecef; display: flex; align-items: center; justify-content: center;">
                       <i class="fa fa-film" style="color: #6c757d; font-size: 20px;"></i>
                     </div>

cds/modules/theme/assets/bootstrap3/js/cds_records/cdsRecord.js

@@ -63,6 +63,7 @@ function cdsRecordController($scope, $sce, $http, $timeout, $filter) {
   $scope.activeTab = "chapters"; // Default to chapters tab
   $scope.shortDescription = "";
   $scope.fullDescription = "";
+  $scope.chapterFrames = {};
 
   const REQUEST_HEADERS = {
     "Content-Type": "application/json",
@@ -191,6 +192,7 @@ function cdsRecordController($scope, $sce, $http, $timeout, $filter) {
     if (newVal) {
       $scope.initVttLoad(newVal);
       $scope.prepareDescriptions(newVal.metadata.description);
+      $scope.buildChapterFrames();
     }
   });
 
@@ -202,10 +204,14 @@ function cdsRecordController($scope, $sce, $http, $timeout, $filter) {
     }
 
     const lines = description.split(/\r?\n/);
-    const firstTen = lines.slice(0, $scope.DESCRIPTION_PREVIEW_LINES).join("\n");
-
-    $scope.shortDescription = $scope.processDescriptionWithClickableTimestamps(firstTen);
-    $scope.fullDescription = $scope.processDescriptionWithClickableTimestamps(description);
+    const firstTen = lines
+      .slice(0, $scope.DESCRIPTION_PREVIEW_LINES)
+      .join("\n");
+
+    $scope.shortDescription =
+      $scope.processDescriptionWithClickableTimestamps(firstTen);
+    $scope.fullDescription =
+      $scope.processDescriptionWithClickableTimestamps(description);
   };
 
   $scope.initVttLoad = function (record) {
@@ -405,43 +411,55 @@ function cdsRecordController($scope, $sce, $http, $timeout, $filter) {
     });
   };
 
-  $scope.getChapterFrame = function (chapter) {
-    if (!$scope.record || !chapter) return null;
+  $scope.buildChapterFrames = function () {
+    if (!$scope.record || !$scope.chapters) return;
 
-    // Use the findMaster filter to get the master file (this filter is defined in cds/module.js)
     const master = $filter("findMaster")($scope.record);
+    if (!master || !master.frame) return;
 
-    if (!master || !master.frame) return null;
-
-    // Look for a frame with filename that matches chapter timestamp
-    // Chapter frames are named like "chapter-{seconds}.jpg"
-    const expectedFrameName = `chapter-${chapter.seconds}.jpg`;
+    const frames = master.frame;
+    let matches = {};
 
-    let chapterFrame = master.frame.find(
-      (frame) => frame.key === expectedFrameName
+    // --- Exact filename match ---
+    $scope.chapters.forEach((chapter) => {
+      const expectedName = `chapter-${chapter.seconds}.jpg`;
+      const frame = frames.find((f) => f.key === expectedName);
+      if (frame) {
+        matches[chapter.seconds] = frame;
+      }
+    });
+    console.log("Exact matches found:", matches);
+    // Collect chapters still missing
+    let missing = $scope.chapters.filter(
+      (c) => !matches.hasOwnProperty(c.seconds)
     );
-    if (!chapterFrame) {
-      // Find the frame with closest timestamp
+
+    // If none missing, return
+    if (missing.length === 0) {
+      $scope.chapterFrames = matches;
+      return;
+    }
+
+    // --- Fallback closest timestamp ---
+    missing.forEach((chapter) => {
       const target = Number(chapter.seconds);
       let closest = null;
       let minDiff = Infinity;
 
-      master.frame.forEach((frame) => {
+      frames.forEach((frame) => {
         if (!frame.tags || frame.tags.timestamp == null) return;
-
         const ts = Number(frame.tags.timestamp);
-
         const diff = Math.abs(ts - target);
         if (diff < minDiff) {
           minDiff = diff;
           closest = frame;
         }
       });
 
-      chapterFrame = closest;
-    }
+      matches[chapter.seconds] = closest || null;
+    });
 
-    return chapterFrame || null;
+    $scope.chapterFrames = matches;
   };
 
   $scope.cleanHtmlFromTitle = function (title) {