Merge pull request #12637 from craftcms/feature/video-text-alternative

When alternative text field is used for a video asset, the transcript is shown in preview modals

CHANGELOG-WIP.md

@@ -29,6 +29,7 @@
 - Improved _conditional_ and _required_ field indicators for screen readers. ([#12509](https://github.com/craftcms/cms/pull/12509))
 - Improved bulk element action triggers on element index pages. ([#12415](https://github.com/craftcms/cms/pull/12415))
 - Improved the color contrast of element indexes. ([#12213](https://github.com/craftcms/cms/pull/12213))
+- Asset preview modals now show videos’ alt text. ([#12637](https://github.com/craftcms/cms/pull/12637))
 
 ### Administration
 - Conditional layout components are now identified using a condition icon within field layout designers. ([#12250](https://github.com/craftcms/cms/issues/12250))

src/templates/assets/_previews/video.twig

@@ -1,4 +1,18 @@
-<video autoplay controls style="width: 100%; height: 100%">
+{% set height = asset.alt ? '70%' : '100%' %}
+{% set transcriptHeight = '30%' %}
+
+<video autoplay controls style="width: 100%; height: {{ height }};">
   <source src="{{ url }}" type="{{ asset.mimeType }}">
   Your browser does not support the video tag.
 </video>
+
+{% if asset.alt %}
+  <div class="video-transcript" tabindex="0" style="height: {{ transcriptHeight }};">
+    <div class="video-transcript__inner">
+      <h2 class="video-transcript__heading">{{ 'Transcript'|t('app') }}</h2>
+      <p class="video-transcript__text">
+        {{ asset.alt|nl2br }}
+      </p>
+    </div>
+  </div>
+{% endif %}

src/translations/en/app.php

@@ -1584,6 +1584,7 @@
     'Total Price' => 'Total Price',
     'Total releases' => 'Total releases',
     'Townland' => 'Townland',
+    'Transcript' => 'Transcript',
     'Transfer it to:' => 'Transfer it to:',
     'Transform Filesystem' => 'Transform Filesystem',
     'Transform Subpath' => 'Transform Subpath',

src/web/assets/admintable/dist/manifest.json

@@ -1 +1 @@
-{"app.css":"/css/app.css","app.js":"/js/app.js","app.css.map":"/css/app.css.map","app.js.map":"/js/app.js.map"}
+{"app.css":"/css/app.css","app.js":"/js/app.js","app.js.map":"/js/app.js.map"}

src/web/assets/cp/src/css/_main.scss

@@ -5395,6 +5395,30 @@ $min2ColWidth: 400px;
   }
 }
 
+/* ----------------------------------------
+/*  Alternative Text
+/* ----------------------------------------*/
+.video-transcript {
+  background-color: var(--gray-050);
+  overflow-y: scroll;
+  font-size: 1rem;
+  position: relative;
+
+  @include focus-styles {
+    // Unset default
+    box-shadow: none;
+    color: var(--white);
+    background-color: var(--gray-800);
+  }
+}
+
+.video-transcript__inner {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 550px;
+  padding: var(--xl);
+}
+
 /* ----------------------------------------
 /*  Menus
 /* ----------------------------------------*/