From 18dbb27a3eea48b4b6ce2899e4c33feabb110075 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 15 Dec 2025 10:06:54 +0000
Subject: [PATCH] Enhance resource handling: add support for loading and
 displaying non-DICOM resources (images, videos, embeds) in viewer overlays

---
 atlas/templates/atlas/case_display_block.html |  76 ++++-----
 atlas/templates/atlas/collection_viva.html    |  29 ++++
 atlas/templates/atlas/viewer.html             | 148 +++++++++++++++++-
 atlas/templates/atlas/viewer_local.html       |  71 +++++++++
 4 files changed, 284 insertions(+), 40 deletions(-)

diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index b10bb4da..08826e78 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -108,51 +108,51 @@
 
 
         {% else %}
-                <div class="btn-group link-buttons" role="group">
-                    <button type="button" class="btn btn-primary" onclick="window.location.href='/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}'">View case in OHIF</button>
-                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-                        <span class="visually-hidden">Toggle dropdown</span>
-                    </button>
-                    <ul class="dropdown-menu">
-                        <li>
-                            <a class="dropdown-item" target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Open in new tab</a>
-                        </li>
-                    </ul>
-                </div>
+            <div class="btn-group link-buttons" role="group">
+                <button type="button" class="btn btn-primary" onclick="window.location.href='/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}'">View case in OHIF</button>
+                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                    <span class="visually-hidden">Toggle dropdown</span>
+                </button>
+                <ul class="dropdown-menu">
+                    <li>
+                        <a class="dropdown-item" target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Open in new tab</a>
+                    </li>
+                </ul>
+            </div>
         {% endif %}
 
-    <div class="clearfix mb-2">
-        <div class="float-start">
-            <span class="id">ID: {{ case.id }}</span>
-            <span class="mx-1">/</span>
-            <span class="date">{{ case.created_date|date:"d/m/Y" }}</span>
-        </div>
+        <div class="clearfix mb-2">
+            <div class="float-start">
+                <span class="id">ID: {{ case.id }}</span>
+                <span class="mx-1">/</span>
+                <span class="date">{{ case.created_date|date:"d/m/Y" }}</span>
+            </div>
 
-        <div class="float-end text-end">
+            <div class="float-end text-end">
             {# Subspecialty badges (preserve any anchor returned by get_link) #}
-            {% if case.subspecialty.all %}
-                {% for sub in case.subspecialty.all %}
-                    <span class="badge bg-secondary ms-1">{{ sub.get_link|safe }}</span>
-                {% endfor %}
-            {% else %}
-                <span class="text-muted me-2">No subspecialty</span>
-            {% endif %}
+                {% if case.subspecialty.all %}
+                    {% for sub in case.subspecialty.all %}
+                        <span class="badge bg-secondary ms-1">{{ sub.get_link|safe }}</span>
+                    {% endfor %}
+                {% else %}
+                    <span class="text-muted me-2">No subspecialty</span>
+                {% endif %}
 
             {# Pathological process badges #}
-            {% if case.pathological_process.all %}
-                {% for p in case.pathological_process.all %}
-                    <span class="badge bg-secondary ms-1">{{ p.get_link|safe }}</span>
-                {% endfor %}
-            {% endif %}
+                {% if case.pathological_process.all %}
+                    {% for p in case.pathological_process.all %}
+                        <span class="badge bg-secondary ms-1">{{ p.get_link|safe }}</span>
+                    {% endfor %}
+                {% endif %}
 
             {# Diagnostic certainty as a badge #}
-            Diagnostic certainty: <span class="badge bg-info text-dark ms-2">{{ case.get_diagnostic_certainty_display }}</span>
+                Diagnostic certainty: <span class="badge bg-info text-dark ms-2">{{ case.get_diagnostic_certainty_display }}</span>
             {# Normal toggle HTMX block #}
-            <div class="mt-1">
-                {% include "atlas/partials/_normal_toggle.html" %}
+                <div class="mt-1">
+                    {% include "atlas/partials/_normal_toggle.html" %}
+                </div>
             </div>
         </div>
-    </div>
 
         <details id="dicom-viewer-details">
             <summary>Viewer</summary>
@@ -175,7 +175,7 @@
             </ul>
         </p>
 
-    <div class="row g-3 mb-3">
+        <div class="row g-3 mb-3">
             <div class="col-12 col-md-12">
                 <div class="card h-100">
                     <div class="card-header">History</div>
@@ -492,12 +492,12 @@
         </ul>
     </p>
 
-    
+
     {% if casedetail %}
         {% include 'atlas/partials/collection_question_block.html' with can_edit=can_edit %}
-        
+
     {% endif %}
-        
+
 
 
 
diff --git a/atlas/templates/atlas/collection_viva.html b/atlas/templates/atlas/collection_viva.html
index cb657ff7..616ff57d 100644
--- a/atlas/templates/atlas/collection_viva.html
+++ b/atlas/templates/atlas/collection_viva.html
@@ -71,6 +71,22 @@
                                     <div class="question-block-snippet" style="display:none;">
                                         {% include 'atlas/partials/collection_question_block.html' with casedetail=casedetail %}
                                     </div>
+                                    {# Attached resources for this case: allow loading into the shared viewer #}
+                                    {% if case.caseresource_set.exists %}
+                                        <div class="mt-2">
+                                            <strong>Resources:</strong>
+                                            <div class="d-flex flex-column gap-1">
+                                                {% for cr in case.caseresource_set.all %}
+                                                    {% with res=cr.resource %}
+                                                        <div>
+                                                            <span class="me-2">{{ res.name }}</span>
+                                                            <button class="open-resource btn btn-sm btn-outline-primary ms-1" data-src="{% if res.file %}{{ res.file.url }}{% else %}{{ res.url }}{% endif %}" data-title="{{ res.name|escapejs }}">Load</button>
+                                                        </div>
+                                                    {% endwith %}
+                                                {% endfor %}
+                                            </div>
+                                        </div>
+                                    {% endif %}
                                     {% if case.display_sets.all %}
                                         <details class="displayset-detail"><summary>Display Sets:</summary>
                                             {% for ds in case.display_sets.all %}
@@ -335,6 +351,19 @@
                 //}
             //win2 = openSecondaryWindow(url);
             })
+            // Load resource into linked viewer
+            $('.open-resource').click(function() {
+                var src = $(this).data('src');
+                var title = $(this).data('title') || 'Resource';
+                $('#loading-case').show();
+                $("#open-viewer-local").addClass("flash-button");
+                $('#current-case-title').html("<span class='title'>Resource:</span> "+title);
+                $('#current-case-history').html('');
+                $('#current-case-discussion').html('');
+                $('#current-case-report').html('');
+
+                bc.postMessage({"type": "open", "url": src});
+            });
             $('.send-message').click(function() {
                 var url = $(this).data('target');
                 bc.postMessage(url);
diff --git a/atlas/templates/atlas/viewer.html b/atlas/templates/atlas/viewer.html
index 01151d28..aed14352 100644
--- a/atlas/templates/atlas/viewer.html
+++ b/atlas/templates/atlas/viewer.html
@@ -18,7 +18,14 @@
 <body>
     <p>Awating load request</p>
     This page will display series when loaded from other pages.
-    <iframe id="viewer" style="width: 100%; height: 100%; border: none; padding: 0px;" ></iframe>
+    <div id="viewerContainer" style="width:100%; height:100%; position:relative;">
+        <iframe id="viewer" style="width: 100%; height: 100%; border: none; padding: 0px;" ></iframe>
+        <div id="resourceDisplay" style="display:none; position:absolute; inset:0; background:#000; align-items:center; justify-content:center; z-index:100000;">
+            <div id="resourceInner" style="position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
+            </div>
+            <button id="resourceClose" style="position:absolute; top:8px; right:8px; z-index:9999;" class="btn btn-sm btn-light">Close</button>
+        </div>
+    </div>
 
     <script type="text/javascript">
         var win2 = false;
@@ -27,12 +34,149 @@
             document.title = "Case: {{current_case.title}}";
             console.log('ready');
             const bc = new BroadcastChannel("viva_load");
+            function isMediaUrl(url) {
+                if (!url) return false;
+                const lower = url.toLowerCase();
+                if (lower.match(/\.(jpe?g|png|gif|webp|svg)(?:$|\?|#)/)) return 'image';
+                if (lower.match(/\.(mp4|webm|ogg)(?:$|\?|#)/)) return 'video';
+                if (lower.indexOf('youtube.com') !== -1 || lower.indexOf('youtu.be') !== -1) return 'embed';
+                if (lower.indexOf('vimeo.com') !== -1) return 'embed';
+                return false;
+            }
+
+            function showResource(url) {
+                const type = isMediaUrl(url);
+                const disp = document.getElementById('resourceDisplay');
+                const inner = document.getElementById('resourceInner');
+                inner.innerHTML = '';
+                if (!type) {
+                    // fallback: open in iframe
+                    document.getElementById('viewer').src = url;
+                    disp.style.display = 'none';
+                    return;
+                }
+                // create a transform wrapper so we can pan/zoom the content uniformly
+                const transformWrap = document.createElement('div');
+                transformWrap.style.display = 'flex';
+                transformWrap.style.alignItems = 'center';
+                transformWrap.style.justifyContent = 'center';
+                transformWrap.style.width = '100%';
+                transformWrap.style.height = '100%';
+                transformWrap.style.overflow = 'hidden';
+                transformWrap.style.touchAction = 'none';
+                transformWrap.style.position = 'relative';
+
+                if (type === 'image') {
+                    const img = document.createElement('img');
+                    img.src = url;
+                    img.style.maxWidth = '95%';
+                    img.style.maxHeight = '95%';
+                    img.style.objectFit = 'contain';
+                    img.style.cursor = 'grab';
+                    img.draggable = false;
+                    transformWrap.appendChild(img);
+                } else if (type === 'video') {
+                    const v = document.createElement('video');
+                    v.controls = true; v.autoplay = false; v.style.maxWidth = '95%'; v.style.maxHeight = '95%'; v.style.objectFit = 'contain';
+                    v.style.cursor = 'grab';
+                    const s = document.createElement('source'); s.src = url; v.appendChild(s); transformWrap.appendChild(v);
+                } else if (type === 'embed') {
+                    let embed = url;
+                    try {
+                        const m = url.match(/(?:v=|v\/|embed\/|youtu\.be\/)([A-Za-z0-9_-]{6,})/);
+                        if (m && m[1]) embed = 'https://www.youtube.com/embed/' + m[1];
+                        else if (url.indexOf('vimeo.com') !== -1) {
+                            const m2 = url.match(/vimeo\.com\/(\d+)/);
+                            if (m2 && m2[1]) embed = 'https://player.vimeo.com/video/' + m2[1];
+                        }
+                    } catch(e){}
+                    const iframe = document.createElement('iframe');
+                    iframe.src = embed; iframe.setAttribute('frameborder','0'); iframe.setAttribute('allowfullscreen','');
+                    iframe.style.width = '95%'; iframe.style.height = '85%'; iframe.style.maxWidth = '95%'; iframe.style.maxHeight = '95%';
+                    transformWrap.appendChild(iframe);
+                }
+
+                inner.appendChild(transformWrap);
+
+                // Setup zoom/pan controls for the transformWrap
+                (function enablePanZoom(target){
+                    let scale = 1; let minScale = 0.5; let maxScale = 6; let startX=0, startY=0; let translateX=0, translateY=0; let dragging=false;
+                    const content = target.firstElementChild;
+
+                    function updateTransform(){
+                        if (content) content.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+                    }
+
+                    // Wheel to zoom (allow wheel-only zoom while overlay is shown)
+                    target.addEventListener('wheel', function(e){
+                        // require overlay active (safety) - if not active, ignore
+                        const dispEl = document.getElementById('resourceDisplay');
+                        if (!dispEl || dispEl.style.display === 'none') return;
+                        e.preventDefault();
+                        const delta = -e.deltaY || e.wheelDelta;
+                        const zoomFactor = delta > 0 ? 1.12 : 0.9;
+                        const newScale = Math.min(maxScale, Math.max(minScale, scale * zoomFactor));
+                        // adjust translate to zoom to mouse position
+                        const rect = content.getBoundingClientRect();
+                        const mx = e.clientX - rect.left; const my = e.clientY - rect.top;
+                        const dx = (mx - rect.width/2); const dy = (my - rect.height/2);
+                        // compute scale ratio
+                        const ratio = newScale/scale - 1;
+                        translateX -= dx * ratio;
+                        translateY -= dy * ratio;
+                        scale = newScale; updateTransform();
+                    }, {passive:false});
+
+                    // Pointer drag to pan
+                    target.addEventListener('pointerdown', function(e){
+                        dragging = true; startX = e.clientX; startY = e.clientY; target.setPointerCapture(e.pointerId); content.style.cursor = 'grabbing';
+                    });
+                    target.addEventListener('pointermove', function(e){
+                        if (!dragging) return; e.preventDefault(); const dx = e.clientX - startX; const dy = e.clientY - startY; startX = e.clientX; startY = e.clientY; translateX += dx; translateY += dy; updateTransform();
+                    });
+                    target.addEventListener('pointerup', function(e){ dragging = false; try{ target.releasePointerCapture(e.pointerId);}catch(_){} if (content) content.style.cursor = 'grab'; });
+                    target.addEventListener('pointercancel', function(e){ dragging=false; if (content) content.style.cursor='grab'; });
+
+                    // double click to reset
+                    target.addEventListener('dblclick', function(e){ scale = 1; translateX = 0; translateY = 0; updateTransform(); });
+
+                    // Escape to close
+                    document.addEventListener('keydown', function(ev){ if (ev.key === 'Escape'){ document.getElementById('resourceDisplay').style.display='none'; document.getElementById('resourceInner').innerHTML=''; } });
+                })(transformWrap);
+                }
+                disp.style.display = 'flex';
+            }
+
+            // Centralized hide helper
+            function hideResource() {
+                const disp = document.getElementById('resourceDisplay');
+                const inner = document.getElementById('resourceInner');
+                if (disp) disp.style.display = 'none';
+                if (inner) inner.innerHTML = '';
+            }
+
+            // Robust close: delegate clicks on the overlay so pointer capture doesn't block the button
+            (function(){
+                const disp = document.getElementById('resourceDisplay');
+                if (!disp) return;
+                disp.addEventListener('click', function(e){
+                    // if click was on the close button (or inside it), hide
+                    const close = e.target.closest && e.target.closest('#resourceClose');
+                    if (close) { hideResource(); }
+                });
+            })();
+
             bc.onmessage = (event) => {
                 console.log("message received");
                 console.log(event);
                 if (event.data.type == "open") {
+                    // If URL looks like an image/video/embed, render in the resource panel
+                    if (event.data.url && isMediaUrl(event.data.url)) {
+                        showResource(event.data.url);
+                        bc.postMessage({"type": "open-complete", "url" : event.data.url});
+                        return;
+                    }
                     document.getElementById("viewer").src = event.data.url;
-                    //document.querySelectorAll("[data-cy='seriesList-btn']")[0].click()
                     bc.postMessage({"type": "open-complete", "url" : event.data.url});
                 }
             };
diff --git a/atlas/templates/atlas/viewer_local.html b/atlas/templates/atlas/viewer_local.html
index fe0d72aa..c6525572 100644
--- a/atlas/templates/atlas/viewer_local.html
+++ b/atlas/templates/atlas/viewer_local.html
@@ -73,6 +73,12 @@
              data-auto-cache-stack="true"
         ></div>
 
+        <!-- Overlay for non-DICOM resources (images/videos/embeds) -->
+        <div id="resourceDisplay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.96); z-index:100000; align-items:center; justify-content:center;">
+            <div id="resourceInner" style="max-width:95vw; max-height:95vh; display:flex; align-items:center; justify-content:center;"></div>
+            <button id="resourceClose" style="position:fixed; top:12px; right:12px; z-index:2001;" class="btn btn-sm btn-light">Close</button>
+        </div>
+
         <script type="text/javascript">
             var win2 = false;
 
@@ -84,6 +90,71 @@
                     console.log("message received");
                     console.log(event);
                     if (event.data.type == "open") {
+                        // If a resource URL is provided (image/video/embed), show it in overlay
+                        function isMediaUrl(url) {
+                            if (!url) return false;
+                            const lower = url.toLowerCase();
+                            if (lower.match(/\.(jpe?g|png|gif|webp|svg)(?:$|\?|#)/)) return 'image';
+                            if (lower.match(/\.(mp4|webm|ogg)(?:$|\?|#)/)) return 'video';
+                            if (lower.indexOf('youtube.com') !== -1 || lower.indexOf('youtu.be') !== -1) return 'embed';
+                            if (lower.indexOf('vimeo.com') !== -1) return 'embed';
+                            return false;
+                        }
+
+                        function showResource(url) {
+                            const type = isMediaUrl(url);
+                            const disp = document.getElementById('resourceDisplay');
+                            const inner = document.getElementById('resourceInner');
+                            inner.innerHTML = '';
+                            if (!type) return false;
+
+                            const transformWrap = document.createElement('div');
+                            transformWrap.style.display = 'flex'; transformWrap.style.alignItems = 'center'; transformWrap.style.justifyContent = 'center';
+                            transformWrap.style.width = '100%'; transformWrap.style.height = '100%'; transformWrap.style.overflow = 'hidden'; transformWrap.style.touchAction = 'none';
+
+                            if (type === 'image') {
+                                const img = document.createElement('img'); img.src = url; img.style.maxWidth = '95%'; img.style.maxHeight = '95%'; img.style.objectFit = 'contain'; img.style.cursor='grab'; img.draggable=false; transformWrap.appendChild(img);
+                            } else if (type === 'video') {
+                                const v = document.createElement('video'); v.controls=true; v.autoplay=false; v.style.maxWidth='95%'; v.style.maxHeight='95%'; v.style.objectFit='contain'; const s=document.createElement('source'); s.src=url; v.appendChild(s); transformWrap.appendChild(v);
+                            } else if (type === 'embed') {
+                                let embed = url; try{ const m=url.match(/(?:v=|v\/|embed\/|youtu\.be\/)([A-Za-z0-9_-]{6,})/); if (m&&m[1]) embed='https://www.youtube.com/embed/'+m[1]; else if (url.indexOf('vimeo.com')!==-1){ const m2=url.match(/vimeo\.com\/(\d+)/); if(m2&&m2[1]) embed='https://player.vimeo.com/video/'+m2[1]; } }catch(e){}
+                                const iframe=document.createElement('iframe'); iframe.src=embed; iframe.setAttribute('frameborder','0'); iframe.setAttribute('allowfullscreen',''); iframe.style.width='95%'; iframe.style.height='85%'; transformWrap.appendChild(iframe);
+                            }
+
+                            inner.appendChild(transformWrap);
+
+                            // pan/zoom
+                            (function enablePanZoom(target){
+                                let scale=1, minScale=0.5, maxScale=6, startX=0, startY=0, translateX=0, translateY=0, dragging=false;
+                                const content=target.firstElementChild;
+                                function update(){ if(content) content.style.transform=`translate(${translateX}px, ${translateY}px) scale(${scale})`; }
+                                target.addEventListener('wheel', function(e){
+                                    const dispEl = document.getElementById('resourceDisplay');
+                                    if (!dispEl || dispEl.style.display === 'none') return;
+                                    e.preventDefault();
+                                    const delta=-e.deltaY||e.wheelDelta; const zoom=delta>0?1.12:0.9; const newScale=Math.min(maxScale, Math.max(minScale, scale*zoom)); const rect=content.getBoundingClientRect(); const mx=e.clientX-rect.left, my=e.clientY-rect.top; const ratio=newScale/scale-1; translateX -= (mx-rect.width/2)*ratio; translateY -= (my-rect.height/2)*ratio; scale=newScale; update();
+                                }, {passive:false});
+                                target.addEventListener('pointerdown', function(e){ dragging=true; startX=e.clientX; startY=e.clientY; target.setPointerCapture(e.pointerId); if(content) content.style.cursor='grabbing'; });
+                                target.addEventListener('pointermove', function(e){ if(!dragging) return; e.preventDefault(); const dx=e.clientX-startX, dy=e.clientY-startY; startX=e.clientX; startY=e.clientY; translateX+=dx; translateY+=dy; update(); });
+                                target.addEventListener('pointerup', function(e){ dragging=false; try{target.releasePointerCapture(e.pointerId)}catch(_){} if(content) content.style.cursor='grab'; });
+                                target.addEventListener('dblclick', function(){ scale=1; translateX=0; translateY=0; update(); });
+                                document.addEventListener('keydown', function(ev){ if(ev.key==='Escape'){ document.getElementById('resourceDisplay').style.display='none'; document.getElementById('resourceInner').innerHTML=''; } });
+                            })(transformWrap);
+
+                            disp.style.display='flex'; return true;
+                        }
+
+                        // Centralized hide helper and delegated close handling
+                        function hideResourceLocal(){ const disp=document.getElementById('resourceDisplay'); const inner=document.getElementById('resourceInner'); if(disp) disp.style.display='none'; if(inner) inner.innerHTML=''; }
+                        (function(){ const disp=document.getElementById('resourceDisplay'); if(!disp) return; disp.addEventListener('click', function(e){ const close = e.target.closest && e.target.closest('#resourceClose'); if (close) hideResourceLocal(); }); })();
+
+                        if (event.data.url && isMediaUrl(event.data.url)) {
+                            // show resource overlay and do not attempt to mount DICOM viewer
+                            if (showResource(event.data.url)) {
+                                bc.postMessage({"type": "open-complete-local"});
+                                return;
+                            }
+                        }
                         // Hide modal when data is loaded
                         document.getElementById("awaiting-modal").style.display = "none";
                         document.getElementById("root").dataset.images = event.data.images;