Merge pull request #8 from nationalarchives/feature/media-style-updates

Media style updates
nationalarchives · Aug 23, 2024 · d4e7455 · d4e7455
2 parents 6717301 + 0cddf95
commit d4e7455
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 57 deletions.
diff --git a/app/templates/blog/post.html b/app/templates/blog/post.html
@@ -17,7 +17,7 @@
 {% block stylesheets %}
 {{ super() }}
     {% if bodyContainsMedia %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='video.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='media.css') }}">
     {% endif %}
 {% endblock %}
 
@@ -53,6 +53,6 @@ <h1 class="tna-hgroup__title">{{ page_data.title }}</h1>
 {% block bodyEnd %}
 {{ super() }}
     {% if bodyContainsMedia %}
-    <script src="{{ url_for('static', filename='video.min.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='media.min.js') }}" defer></script>
     {% endif %}
 {% endblock %}
diff --git a/app/templates/explore-the-collection/article-focused.html b/app/templates/explore-the-collection/article-focused.html
@@ -27,7 +27,7 @@
 {{ super() }}
     <link rel="stylesheet" href="{{ url_for('static', filename='article.css') }}">
     {% if bodyContainsMedia %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='video.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='media.css') }}">
     {% endif %}
 {% endblock %}
 
@@ -178,6 +178,6 @@ <h2 class="etna-author-list__heading tna-heading-s">Author{{ 's' if page_data.au
     <script src="{{ url_for('static', filename='article.min.js') }}" defer></script>
     <script src="{{ url_for('static', filename='sidebar.min.js') }}" defer></script>
     {% if bodyContainsMedia %}
-    <script src="{{ url_for('static', filename='video.min.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='media.min.js') }}" defer></script>
     {% endif %}
 {% endblock %}
diff --git a/app/templates/explore-the-collection/article.html b/app/templates/explore-the-collection/article.html
@@ -23,7 +23,7 @@
 {{ super() }}
     <link rel="stylesheet" href="{{ url_for('static', filename='article.css') }}">
     {% if bodyContainsMedia %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='video.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='media.css') }}">
     {% endif %}
 {% endblock %}
 
@@ -110,6 +110,6 @@ <h1 class="tna-hgroup__title" itemprop="name">{{ page_data.title }}</h1>
     <script src="{{ url_for('static', filename='article.min.js') }}" defer></script>
     <script src="{{ url_for('static', filename='sidebar.min.js') }}" defer></script>
     {% if bodyContainsMedia %}
-    <script src="{{ url_for('static', filename='video.min.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='media.min.js') }}" defer></script>
     {% endif %}
 {% endblock %}
diff --git a/app/templates/macros/wagtail_blocks/media.html b/app/templates/macros/wagtail_blocks/media.html
@@ -2,58 +2,57 @@
 
 {% macro wagtailMedia(block_value, itemHeadingLevel) %}
   {%- if block_value.media.type == 'audio' %}
-  <aside class="etna-space-above" itemprop="audio" itemscope itemtype="https://schema.org/AudioObject">
-    <div class="tna-aside etna-background-masked-image">
-      <img src="{{ block_value.background_image.jpeg.full_url }}" class="etna-background-masked-image__image" alt="">
-      <hgroup class="tna-hgroup-l">
-        <p class="tna-hgroup__supertitle">Listen</p>
-        <h{{ itemHeadingLevel }} class="tna-hgroup__title" itemprop="name">
-          {{ block_value.title }}
-        </h{{ itemHeadingLevel }}>
-      </hgroup>
-      <div itemprop="description" class="tna-!--margin-top-s">
-        {{ block_value.media.description | tna_html | safe }}
+  <aside class="etna-media-block tna-aside tna-background-contrast" itemprop="audio" itemscope itemtype="https://schema.org/AudioObject">
+    <div class="tna-container tna-container--nested">
+      {% if block_value.background_image %}
+      <div class="tna-column tna-column--width-1-6 tna-column--width-1-3-medium tna-column--width-1-4-small tna-!--hide-on-tiny">
+        <img src="{{ block_value.background_image.jpeg.full_url }}" alt="">
+      </div>
+      {% endif %}
+      <div class="tna-column tna-column--flex-1">
+        <hgroup class="tna-hgroup-l">
+          <p class="tna-hgroup__supertitle">Listen</p>
+          <h{{ itemHeadingLevel }} class="tna-hgroup__title" itemprop="name">
+            {{ block_value.title }}
+          </h{{ itemHeadingLevel }}>
+        </hgroup>
+        <div itemprop="description" class="tna-!--margin-top-s">
+          {{ block_value.media.description | tna_html | safe }}
+        </div>
       </div>
-      <audio class="etna-audio" controls{% if block_value.media.transcript %} aria-label="Transcript provided below"{% endif %} data-plyr-svg="{{ url_for('static', filename='assets/images/plyr.svg') }}">
-        <source itemprop="contentUrl" src="{{ block_value.media.full_url }}" type="{{ block_value.media.mime }}" itemprop="contentUrl">
-        <p>Your browser doesn't support HTML5 audio. <a href="{{ block_value.media.full_url }}">Download the audio file</a>.</p>
-      </audio>
-      <meta itemprop="encodingFormat" content="{{ block_value.media.mime }}">
     </div>
+    <audio class="etna-audio" controls{% if block_value.media.transcript %} aria-label="Transcript provided below"{% endif %} data-plyr-svg="{{ url_for('static', filename='assets/images/plyr.svg') }}">
+      <source itemprop="contentUrl" src="{{ block_value.media.full_url }}" type="{{ block_value.media.mime }}" itemprop="contentUrl">
+      <p>Your browser doesn't support HTML5 audio. <a href="{{ block_value.media.full_url }}">Download the audio file</a>.</p>
+    </audio>
+    <meta itemprop="encodingFormat" content="{{ block_value.media.mime }}">
     {% if block_value.media.transcript %}
-    <div class="tna-aside tna-aside--tight tna-background-contrast tna-!--no-margin-top">
-      {{ tnaDetails({
-        'title': 'Transcript',
-        'body': '<div itemprop="transcript">' + (block_value.media.transcript | tna_html) + '</div>'
-      }) }}
-    </div>
+    {{ tnaDetails({
+      'title': 'Transcript',
+      'body': '<div itemprop="transcript">' + (block_value.media.transcript | tna_html) + '</div>'
+    }) }}
     {% endif %}
   </aside>
   {%- elif block_value.media.type == 'video' %}
-  <aside class="etna-space-above" itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
-    <div class="tna-aside etna-background-masked-image">
-      <img src="{{ block_value.background_image.jpeg.full_url }}" class="etna-background-masked-image__image" alt="">
-      <hgroup class="tna-hgroup-l">
-        <p class="tna-hgroup__supertitle">Watch</p>
-        <h{{ itemHeadingLevel }} class="tna-hgroup__title" itemprop="name">
-          {{ block_value.title }}
-        </h{{ itemHeadingLevel }}>
-      </hgroup>
-      <div itemprop="description" class="tna-!--margin-top-s">
-        {{ block_value.media.description | tna_html | safe }}
-      </div>
-      <video class="etna-video etna-video--selfhosted" controls{% if block_value.media.transcript %} aria-label="Transcript provided below"{% endif %} data-plyr-svg="{{ url_for('static', filename='assets/images/plyr.svg') }}">
-        <source itemprop="contentUrl" src="{{ block_value.media.full_url }}" type="{{ block_value.media.mime }}" itemprop="contentUrl">
-        <p>Your browser doesn't support HTML5 video. <a href="{{ block_value.media.full_url }}">Download the audio file</a>.</p>
-      </video>
-      <meta itemprop="encodingFormat" content="{{ block_value.media.mime }}">
+  <aside class="etna-media-block tna-aside tna-background-contrast" itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
+    <hgroup class="tna-hgroup-l">
+      <p class="tna-hgroup__supertitle">Watch</p>
+      <h{{ itemHeadingLevel }} class="tna-hgroup__title" itemprop="name">
+        {{ block_value.title }}
+      </h{{ itemHeadingLevel }}>
+    </hgroup>
+    <div itemprop="description" class="tna-!--margin-top-s">
+      {{ block_value.media.description | tna_html | safe }}
     </div>
+    <video class="etna-video etna-video--selfhosted" controls{% if block_value.media.transcript %} aria-label="Transcript provided below"{% endif %} data-plyr-svg="{{ url_for('static', filename='assets/images/plyr.svg') }}">
+      <source itemprop="contentUrl" src="{{ block_value.media.full_url }}" type="{{ block_value.media.mime }}" itemprop="contentUrl">
+      <p>Your browser doesn't support HTML5 video. <a href="{{ block_value.media.full_url }}">Download the audio file</a>.</p>
+    </video>
+    <meta itemprop="encodingFormat" content="{{ block_value.media.mime }}">
     {% if block_value.media.transcript %}
-    <div class="tna-aside tna-background-contrast tna-!--no-margin-top">
-      <h{{ itemHeadingLevel + 1 }} class="tna-heading-m tna-!--padding-bottom-s">Transcript</h{{ itemHeadingLevel + 1 }}>
-      <div itemprop="transcript">
-        {{ block_value.media.transcript | tna_html | safe }}
-      </div>
+    <h{{ itemHeadingLevel + 1 }} class="tna-heading-m tna-!--padding-bottom-s">Transcript</h{{ itemHeadingLevel + 1 }}>
+    <div itemprop="transcript">
+      {{ block_value.media.transcript | tna_html | safe }}
     </div>
     {% endif %}
   </aside>

diff --git a/app/templates/macros/wagtail_blocks/youtube_video.html b/app/templates/macros/wagtail_blocks/youtube_video.html
@@ -1,3 +1,4 @@
+{%- from 'components/button/macro.html' import tnaButton -%}
 {%- from 'components/details/macro.html' import tnaDetails -%}
 
 {% macro wagtailYouTubeVideo(block_value) %}
@@ -15,6 +16,14 @@
     </span>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="etna-video__icon" aria-hidden="true" width="64"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#fff" d="M 50 100 H 476 V 412 H 100 L 100 100"/><path fill="#f00" d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg>
   </a>
+  <div class="tna-button-group tna-!--margin-top-s" hidden>
+    {{ tnaButton({
+      'text': 'Watch on YouTube',
+      'href': 'https://www.youtube.com/watch?v=' + block_value.video_id,
+      'icon': 'brands fa-youtube',
+      'small': True
+    }) }}
+  </div>
   {% if block_value.transcript %}
   {{ tnaDetails({
     'title': 'Video transcript',

diff --git a/app/templates/main/general.html b/app/templates/main/general.html
@@ -27,7 +27,7 @@
 {% block stylesheets %}
 {{ super() }}
     {% if bodyContainsMedia %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='video.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='media.css') }}">
     {% endif %}
 {% endblock %}
 
@@ -193,7 +193,7 @@ <h2 class="tna-heading-m">Contents</h2>
 {% block bodyEnd %}
 {{ super() }}
     {% if bodyContainsMedia %}
-    <script src="{{ url_for('static', filename='video.min.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='media.min.js') }}" defer></script>
     {% endif %}
     {% if page_data.page_sidebar == 'sections' %}
     <script src="{{ url_for('static', filename='sidebar.min.js') }}" defer></script>

diff --git a/src/scripts/video.js → src/scripts/media.js b/src/scripts/video.js → src/scripts/media.js
@@ -8,6 +8,10 @@ if (cookies.isPolicyAccepted("marketing")) {
       '.etna-video--youtube:has([data-plyr-provider="youtube"][data-plyr-embed-id])',
     )
     .forEach(($video) => {
+      const $nextButtonGroup = $video.nextElementSibling;
+      if ($nextButtonGroup.classList.contains("tna-button-group")) {
+        $nextButtonGroup.removeAttribute("hidden");
+      }
       const iconUrl = $video.dataset["plyrSvg"] || null;
       const $videoEl = $video.querySelector(
         '[data-plyr-provider="youtube"][data-plyr-embed-id]',

diff --git a/src/styles/font-awesome.scss b/src/styles/font-awesome.scss
@@ -1 +1,8 @@
-@use "@nationalarchives/frontend/nationalarchives/font-awesome";
+// @use "@nationalarchives/frontend/nationalarchives/font-awesome";
+
+@use "@nationalarchives/frontend/nationalarchives/variables/assets";
+
+$fa-font-path: assets.$fa-font-path;
+@import "@nationalarchives/frontend/nationalarchives/lib/font-awesome/fontawesome";
+@import "@nationalarchives/frontend/nationalarchives/lib/font-awesome/solid";
+@import "@nationalarchives/frontend/nationalarchives/lib/font-awesome/brands";
diff --git a/src/styles/main/_frontend-overrides.scss b/src/styles/main/_frontend-overrides.scss
@@ -1,4 +1,5 @@
 @use "@nationalarchives/frontend/nationalarchives/tools/colour";
+@use "@nationalarchives/frontend/nationalarchives/tools/grid";
 @use "@nationalarchives/frontend/nationalarchives/tools/media";
 @use "@nationalarchives/frontend/nationalarchives/tools/spacing";
 @use "@nationalarchives/frontend/nationalarchives/tools/typography";
@@ -86,9 +87,26 @@
   }
 }
 
-.tna-dl {
-  dd {
-    @include typography.font-size(16);
+// .tna-dl {
+//   dd {
+//     @include typography.font-size(16);
+//   }
+// }
+
+.tna-picture {
+  @include media.on-small {
+    .tna-column & {
+      width: calc(100% + #{grid.gutter-width-double()});
+      margin-right: 0;
+      margin-left: 0;
+
+      position: relative;
+      left: -#{grid.gutter-width()};
+    }
+
+    .tna-column &__image {
+      width: 100%;
+    }
   }
 }
 

diff --git a/src/styles/video.scss → src/styles/media.scss b/src/styles/video.scss → src/styles/media.scss
@@ -1,4 +1,5 @@
 @use "@nationalarchives/frontend/nationalarchives/tools/a11y";
+@use "@nationalarchives/frontend/nationalarchives/tools/media";
 @use "@nationalarchives/frontend/nationalarchives/tools/spacing";
 @use "@nationalarchives/frontend/nationalarchives/tools/typography";
 
@@ -107,4 +108,36 @@ $plyr-tooltip-radius: 0;
       }
     }
   }
+
+  @include media.on-tiny {
+    &__volume input[type="range"] {
+      min-width: 30px;
+      max-width: 40px;
+    }
+
+    &__controls__item#{&}__menu,
+    [data-plyr="pip"] {
+      display: none;
+    }
+  }
+}
+
+.etna-media-block {
+  @include spacing.space-above;
+
+  .tna-details {
+    padding-top: spacing.space(0.25);
+
+    &__summary {
+      padding: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    &__content {
+      margin-top: spacing.space(0.5);
+    }
+  }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -7,13 +7,13 @@ module.exports = {
     analytics: "./src/scripts/analytics.js",
     article: "./src/scripts/article.js",
     cookies: "./src/scripts/cookies.js",
+    media: "./src/scripts/media.js",
     offline: "./src/scripts/offline.js",
     "record-article": "./src/scripts/record-article.js",
     search: "./src/scripts/search.js",
     sentry: "./src/scripts/sentry.js",
     "service-worker": "./src/scripts/service-worker.js",
     sidebar: "./src/scripts/sidebar.js",
-    video: "./src/scripts/video.js",
   },
   mode: "production",
   module: {