Add locked-media-poster

app/assets/stylesheets/media.scss

@@ -306,6 +306,14 @@
         width: 100%;
       }
     }
+
+    .locked-media {
+      width: 100vw;
+      max-height: calc(100vh - 98px);
+      img {
+        height: 100%;
+      }
+    }
   }
 
   .authLinkWrapper {

app/components/embed/media_with_companion_windows_component.html.erb

@@ -88,6 +88,12 @@
       </div>
     </aside>
     <div class='sul-embed-body sul-embed-media' id='sul-embed-body'>
+      <div data-controller="locked-media-poster" data-action="auth-success@window->locked-media-poster#hide auth-denied@window->locked-media-poster#show" tabindex="-1" role="presentation" style="display: none">
+        <picture class="locked-media">
+          <%= image_tag 'locked-media-poster.svg', loading: 'lazy' %>
+        </picture>
+      </div>
+
       <%= render Embed::MediaTagComponent.with_collection(resources_with_primary_file,
                                                           include_transcripts:,
                                                           druid:,

app/javascript/src/controllers/locked_media_poster_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  // Display the lock if the video tag doesn't have a poster
+  show() {
+    if (!this.hasPoster())
+      this.element.style.display = 'flex'
+  }
+
+  hide() {
+    this.element.style.display = 'none'
+  }
+
+  hasPoster() {
+    const tags = document.querySelectorAll('video,audio')
+    return [...tags].some((tag) => tag.getAttribute('poster'))
+  }
+}