Added missing image support to search results

davidjgonzalez · Jul 22, 2024 · 1e54730 · 1e54730
1 parent 5bd7171
commit 1e54730
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 9 deletions.
diff --git a/.../content/jcr_root/apps/asset-share-commons/components/details/video/templates/player.html b/.../content/jcr_root/apps/asset-share-commons/components/details/video/templates/player.html
@@ -37,21 +37,14 @@
 	       style="height:${height @ context = 'styleToken'}px;"
 	       controls controlsList="nodownload"
 	       data-sly-test.height="${properties['height']}">
-         	<source src="${video.src}" 
-          		type="video/webm"/>
-  		<source src="${video.src}"
-          		type="video/mp4"/>       
-
+			<source src="${video.src}" />
         </video>
 
         <!--/* Video element without a max height */-->
         <video class="ui centered image cmp-image"
                poster="${properties['posterImage']}" controls controlsList="nodownload"
                data-sly-test="${!height}">
-        	<source src="${video.src}" 
-          		type="video/webm"/>
-  		<source src="${video.src}"
-          		type="video/mp4" />        
+        	<source src="${video.src}"/>
         </video>
 
 </template>
diff --git a/...ontent/jcr_root/apps/asset-share-commons/components/search/results/clientlibs/site/js.txt b/...ontent/jcr_root/apps/asset-share-commons/components/search/results/clientlibs/site/js.txt
@@ -0,0 +1,3 @@
+#base=js
+
+scripts.js
diff --git a/...jcr_root/apps/asset-share-commons/components/search/results/clientlibs/site/js/scripts.js b/...jcr_root/apps/asset-share-commons/components/search/results/clientlibs/site/js/scripts.js
@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const images = document.querySelectorAll('img[data-asset-share-missing-image]');
+    images.forEach(img => {
+        img.onerror = function() {
+            this.src = this.getAttribute('data-asset-share-missing-image');
+        };
+    });
+});
diff --git a/...r_root/apps/asset-share-commons/components/search/results/result/card/templates/card.html b/...r_root/apps/asset-share-commons/components/search/results/result/card/templates/card.html
@@ -31,6 +31,7 @@
                  class="cmp-image--card"
                  width="237px"
                  height="175px"
+                 data-asset-share-missing-thumbnail="${properties['missingImage']}"
                  alt="${asset.properties['title']}"/>
         </a>
 

diff --git a/...hare-commons/components/search/results/result/horizontal-masonry-card/templates/card.html b/...hare-commons/components/search/results/result/horizontal-masonry-card/templates/card.html
@@ -32,6 +32,7 @@
         <a class="cmp-card__link" href="${assetDetails.url @ suffix = asset.path}">
             <img src="${asset.properties['rendition?name=card'] || properties['missingImage'] @ context = 'attribute'}"
                  class="cmp-card__image"
+                 data-asset-share-missing-thumbnail="${properties['missingImage']}"
                  alt="${asset.properties['title']}"/>
         </a>
 

diff --git a/...r_root/apps/asset-share-commons/components/search/results/result/list/templates/list.html b/...r_root/apps/asset-share-commons/components/search/results/result/list/templates/list.html
@@ -41,6 +41,7 @@
 		<td class="image">
 			<a href="${assetDetails.fullUrl}"><img src="${asset.properties['rendition?name=list'] || properties['missingImage'] @ context = 'attribute'}"
 												   width="98px"
+												   data-assets-share-missing-thumbnail="${properties['missingImage']}"
 												   alt="${asset.properties['title']}"/></a>
 		</td>
 		<td class="header">