Merge pull request #2670 from sciencehistory/video_icon_thumb_overlay

Video work thumbs have a video icon overlay

Author: eddierubeiz

app/components/search_result/base_component.html.erb

@@ -4,7 +4,7 @@
     <div class="scihist-results-list-item-thumb">
       <%#  hide redundant thumb link from assitive tech
            https://www.sarasoueidan.com/blog/keyboard-friendlier-article-listings/.  -%>
-      <%= link_to link_to_href, tabindex: "-1", "aria-hidden" => "true" do %>
+      <%= link_to link_to_href, tabindex: "-1", "aria-hidden" => "true", class: ("img-wrapper-video-icon" if model.leaf_representative&.content_type&.start_with?("video/"))  do %>
         <%= thumbnail_html %>
       <% end %>
       <%= display_num_children_and_extent %>

app/components/work_show_info_component.html.erb

@@ -195,7 +195,7 @@
     <% related_or_more_like_this_works.each do |work| %>
       <li class="related-work">
         <div class="related-work-thumb">
-          <%= link_to work_path(work.friendlier_id) do %>
+          <%= link_to work_path(work.friendlier_id), class: ("img-wrapper-video-icon" if work.leaf_representative.content_type.start_with?("video/")) do %>
             <%= render ThumbComponent.new(work.leaf_representative, thumb_size: :standard, lazy: true) %>
           <% end %>
         </div>

app/frontend/stylesheets/local/site_wide.scss

@@ -301,3 +301,39 @@ hr.brand {
     color: white;
   }
 }
+
+// Add to a WRAPPER class around an image to add a video icon overlay
+.img-wrapper-video-icon {
+  position: relative;
+  display: block;
+  &:after {
+    position: absolute;
+    content: "";
+
+    // center it
+    // top: 50%;
+    // left: 50%;
+    // translate: -50% -50%;
+
+
+    // nah, bottom right
+    bottom: min(6%, 0.5rem);
+    right:  min(6%, 0.5rem);
+
+
+    // a square between min and max, or 50% of width of wrapper
+    width: clamp(1.5rem, 40%, 3rem);
+    aspect-ratio: 1;
+
+    // image from bootstrap icons https://icons.getbootstrap.com/icons/camera-reels-fill/
+    // https://github.com/twbs/bootstrap/blob/main/LICENSE
+    // removed height/width, specified color, converted to css url at https://www.svgbackgrounds.com/tools/svg-to-css/
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="black" viewBox="0 0 16 16"><path d="M6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/><path d="M9 6a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/><path d="M9 6h.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 7.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 16H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"/></svg>');
+    background-position: center;
+    background-size: 75%;
+    background-repeat: no-repeat;
+
+    background-color: white;
+    opacity: 0.7;
+  }
+}

app/views/homepage/_recent_items.html.erb

@@ -6,7 +6,7 @@
   <div class="recent-items-list">
       <% RecentItems.new.recent_items.each do |work| %>
           <%= link_to work_path(work.friendlier_id), class: "recent-item" do %>
-            <div class="image-wrapper">
+            <div class="image-wrapper <%= "img-wrapper-video-icon" if work.leaf_representative&.content_type&.start_with?("video/")%>">
               <%= render ThumbComponent.new(
                 work.leaf_representative,
                 thumb_size: :standard,