From 5755a83dc64b259b7e5b17a2d651da9b2daf1510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Z=C3=BCbeyde=20Civelek?= <zubeydeecivelek@gmail.com>
Date: Tue, 25 Nov 2025 15:23:06 +0100
Subject: [PATCH] chapters: add modal to preview chapter frames

---
 .../templates/cds_records/video/detail.html   | 41 +++++++++-
 .../bootstrap3/js/cds_records/cdsRecord.js    | 61 ++++++++++++++
 .../theme/assets/bootstrap3/scss/cds/cds.scss | 82 ++++++++++++++++++-
 3 files changed, 182 insertions(+), 2 deletions(-)

diff --git a/cds/modules/records/static/templates/cds_records/video/detail.html b/cds/modules/records/static/templates/cds_records/video/detail.html
index c5ebe4ed6..33c5bc61c 100644
--- a/cds/modules/records/static/templates/cds_records/video/detail.html
+++ b/cds/modules/records/static/templates/cds_records/video/detail.html
@@ -344,7 +344,7 @@ <h3><strong>Chapters</strong></h3>
               <div style="display: inline-flex; gap: 15px; padding-bottom: 8px; padding-top: 8px;">
                 <div ng-repeat="chapter in chapters" 
                      class="chapter-item-horizontal-main"
-                     ng-click="jumpToChapter(chapter.seconds)"
+                     ng-click="openChapterModal($index)"
                      style="display: inline-block; cursor: pointer; width: 213px; flex-shrink: 0; padding: 12px; border: 1px solid #e1e8ed; border-radius: 8px; transition: all 0.2s ease; background-color: white;"
                      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)';">
@@ -434,3 +434,42 @@ <h3 class="cds-title-section-decoration bt bw-1 pt-10 mb-20"><i class="fa fa-sha
   </div>
   <!-- /Metadata Section -->
 </div>
+
+<!-- Chapter Frames Modal -->
+<div class="chapter-modal-overlay"
+     ng-show="chapterModal.open"
+     ng-click="closeChapterModal()"></div>
+
+<!-- Container -->
+<div class="chapter-modal-container"
+     ng-show="chapterModal.open"
+     ng-click="closeChapterModal()">
+
+  <div class="chapter-modal" ng-click="$event.stopPropagation()">
+
+    <!-- Close button -->
+    <button class="chapter-modal-close" ng-click="closeChapterModal()">
+      ✕
+    </button>
+
+    <!-- Left arrow -->
+    <div class="chapter-modal-arrow left"
+         ng-if="chapterModal.index > 0"
+         ng-click="prevChapter($event)">‹</div>
+
+    <!-- Image -->
+    <img class="chapter-modal-image"
+         ng-src="{{ chapterModal.currentFrameUrl }}">
+
+    <!-- Right arrow -->
+    <div class="chapter-modal-arrow right"
+         ng-if="chapterModal.index < chapters.length - 1"
+         ng-click="nextChapter($event)">›</div>
+
+    <!-- Caption -->
+    <div class="chapter-modal-caption">
+      <div class="title">{{ chapterModal.currentChapter.title }}</div>
+      <div class="time">{{ chapterModal.currentChapter.timestamp }}</div>
+    </div>
+  </div>
+</div>
diff --git a/cds/modules/theme/assets/bootstrap3/js/cds_records/cdsRecord.js b/cds/modules/theme/assets/bootstrap3/js/cds_records/cdsRecord.js
index 1c865c8b2..6848b300d 100644
--- a/cds/modules/theme/assets/bootstrap3/js/cds_records/cdsRecord.js
+++ b/cds/modules/theme/assets/bootstrap3/js/cds_records/cdsRecord.js
@@ -64,12 +64,73 @@ function cdsRecordController($scope, $sce, $http, $timeout, $filter) {
   $scope.shortDescription = "";
   $scope.fullDescription = "";
   $scope.chapterFrames = {};
+  $scope.chapterModal = {
+    open: false,
+    index: 0,
+    currentChapter: null,
+    currentFrameUrl: null,
+  };
 
   const REQUEST_HEADERS = {
     "Content-Type": "application/json",
     "X-CSRFToken": getCookie("csrftoken"),
   };
 
+  // Open modal at specific chapter index
+  $scope.openChapterModal = function (index) {
+    $scope.chapterModal.index = index;
+    $scope.chapterModal.open = true;
+    $scope.updateChapterModalContent();
+  };
+
+  // Close modal
+  $scope.closeChapterModal = function () {
+    $scope.chapterModal.open = false;
+  };
+
+  // Build IIIF frame URL
+  $scope.getFrameUrl = function (frame) {
+    console.log("Getting frame URL for", frame);
+    if (!frame) return null;
+    return `/api/iiif/v2/${frame.bucket_id}:${frame.version_id}:${frame.key}/full/full/0/default.jpg`;
+  };
+
+  // Update modal contents after navigation
+  $scope.updateChapterModalContent = function () {
+    const chapter = $scope.chapters[$scope.chapterModal.index];
+    const frame = $scope.chapterFrames[chapter.seconds];
+    $scope.chapterModal.currentChapter = chapter;
+    $scope.chapterModal.currentFrameUrl = $scope.getFrameUrl(frame);
+  };
+
+  // Navigation
+  $scope.nextChapter = function ($event) {
+    $event.stopPropagation(); // prevent closing modal
+    if ($scope.chapterModal.index < $scope.chapters.length - 1) {
+      $scope.chapterModal.index++;
+      $scope.updateChapterModalContent();
+    }
+  };
+
+  $scope.prevChapter = function ($event) {
+    $event.stopPropagation();
+    if ($scope.chapterModal.index > 0) {
+      $scope.chapterModal.index--;
+      $scope.updateChapterModalContent();
+    }
+  };
+
+  // Keyboard navigation for modal
+  document.addEventListener("keydown", function (e) {
+    if (!$scope.chapterModal.open) return;
+
+    if (e.key === "ArrowRight") {
+      $scope.$apply(() => $scope.nextChapter(e));
+    } else if (e.key === "ArrowLeft") {
+      $scope.$apply(() => $scope.prevChapter(e));
+    }
+  });
+
   $scope.scrollToElement = function (id) {
     setTimeout(function () {
       const el = document.getElementById(id);
diff --git a/cds/modules/theme/assets/bootstrap3/scss/cds/cds.scss b/cds/modules/theme/assets/bootstrap3/scss/cds/cds.scss
index 28d5ec5a2..f4fecce65 100644
--- a/cds/modules/theme/assets/bootstrap3/scss/cds/cds.scss
+++ b/cds/modules/theme/assets/bootstrap3/scss/cds/cds.scss
@@ -1464,4 +1464,84 @@ div[cds-search-results] {
 .sharelink-start:has(input[type="checkbox"]:checked) .start-time {
   border-bottom: 1px solid #888;
   color: #333333;
-}
\ No newline at end of file
+}
+
+/* Dark clickable overlay */
+.chapter-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.7);
+  z-index: 9998;
+}
+
+/* Centering container (also click-to-close) */
+.chapter-modal-container {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chapter-modal {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.chapter-modal-image {
+  max-width: 80vw;
+  max-height: 80vh;
+  object-fit: contain;
+}
+
+.chapter-modal-close {
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: white;
+  cursor: pointer;
+}
+
+.chapter-modal-arrow {
+  position: absolute;
+  top: 50%;
+  font-size: 48px;
+  color: white;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.chapter-modal-arrow:hover {
+  opacity: 0.6;
+}
+
+.chapter-modal-arrow.left {
+  left: -40px;
+}
+
+.chapter-modal-arrow.right {
+  right: -40px;
+}
+
+/* Caption */
+.chapter-modal-caption {
+  margin-top: 12px;
+  text-align: center;
+  color: white;
+}
+
+.chapter-modal-caption .title {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.chapter-modal-caption .time {
+  opacity: 0.8;
+  font-size: 14px;
+}