Merge pull request #3032 from uktrade/GREATUK-215-video-transcripts

GREATUK-215 - Create new view layout for transcripts over 1000 chars
uktrade · Apr 25, 2024 · 33ca48b · 33ca48b
2 parents 0f5106a + e711b16
commit 33ca48b
Show file tree

Hide file tree

Showing 26 changed files with 299 additions and 117 deletions.
diff --git a/core/templatetags/video_tags.py b/core/templatetags/video_tags.py
@@ -62,6 +62,17 @@ def render_video(block, event_name=None):  # noqa: C901
     hidden_text = event_name if event_name else video.title
 
     if video_transcript:
+
+        min_length = 1000
+        end_position = video_transcript.find('.', min_length)
+
+        if end_position != -1:
+            initial_transcript = video_transcript[: end_position + 1]
+        else:
+            initial_transcript = video_transcript[:min_length]
+
+        show_full_transcript_details = len(initial_transcript) < len(video_transcript)
+
         transcript_container = """<details
             class="govuk-details govuk-!-static-padding-top-4 govuk-!-static-margin-bottom-0"
             data-module="govuk-details">
@@ -77,7 +88,12 @@ def render_video(block, event_name=None):  # noqa: C901
         transcript_container = f"""{transcript_container}</span>
                 </summary>
                 <div class="govuk-details__text govuk-body great-video-transcipt-text govuk-!-margin-0">
-                    {linebreaksbr(video_transcript)}
+                    {linebreaksbr(initial_transcript)}
+                    {'<div class="govuk-!-margin-top-2">'
+                     '<a class="govuk-link" href="?fullTranscript=true">'
+                     'Read full transcript'
+                     '</a>'
+                     '</div>' if show_full_transcript_details else ''}
                 </div>
             </details>
         """
@@ -95,3 +111,15 @@ def render_video(block, event_name=None):  # noqa: C901
     )
 
     return rendered
+
+
+@register.simple_tag
+def get_video_transcript(block):
+    video_transcript = getattr(block['video'], 'transcript', '')
+    rendered = format_html(
+        f"""
+            {linebreaksbr(video_transcript)}
+        """
+    )
+
+    return rendered
diff --git a/export_academy/templates/export_academy/event_on_demand_video.html b/export_academy/templates/export_academy/event_on_demand_video.html
@@ -6,86 +6,120 @@
 {% block head_title %}Event recording – {{ object.name }}{% endblock %}
 {% block meta_title %}Event recording – {{ object.name }}{% endblock %}
 {% block css_layout_class %}great-bg-white{% endblock %}
-{% block breadcrumbs_block %}
-    <div id="breadcrumbs"
-         class="great-display-from-tablet great-bg-light-blue">
-        {% breadcrumbs %}
-        <a href="/">Home</a>
-        <a href="../../">UK Export Academy</a>
-    {% endbreadcrumbs %}
-</div>
-{% endblock %}
 {% block content %}
+    {% if full_transcript %}
+        <div id="breadcrumbs" class="great-bg-light-blue">
+            <div class="great-container">
+                {% breadcrumbs great-breadcrumbs %}
+                <a href="/export-academy/event-recordings/{{ video_page_slug }}"
+                   class="great-back-link">Back</a>
+            {% endbreadcrumbs %}
+        </div>
+    </div>
     <div class="great" id="video-on-demand-page">
         <section class="govuk-!-padding-bottom-6 govuk-!-padding-top-9 great-bg-white">
             <div class="great-container event-details-header-container">
                 <div class="event-details-header-info govuk-grid-column-two-thirds-from-desktop govuk-!-static-padding-0">
-                    <h2 class="govuk-caption-l">Event Recording</h2>
-                    <h1 class="govuk-heading-l govuk-!-static-margin-0 govuk-!-static-margin-bottom-2">{{ event.name }}</h1>
-                    <time datetime="{{ event.past_event_recorded_date|date:"Y-m-d" }}T{{ event.past_event_recorded_date|time:"H:i:s" }}{{ event.past_event_recorded_date|date:"O" }}">Recorded: {{ event.past_event_recorded_date|date:"l j F Y" }}</time>
-                </div>
-                <div class="event-details-header-logo">
-                    <img class="ea-logo"
-                         src="{% static 'images/uk-export-academy-logo.svg' %}"
-                         alt="UK Export Academy logo" />
-                </div>
-            </div>
-        </section>
-        <div class="great-bg-light-blue">
-            <section id="past-video-recording"
-                     class="great-container govuk-!-padding-top-0  govuk-!-padding-bottom-0">
-                <div class="event-on-demand-video-container">
-                    <div class="video-wrapper govuk-!-static-margin-bottom-4 govuk-!-static-margin-top-4 ">
-                        {% if signed_in %}
-                            {% render_video event_video event.name %}
-                        {% else %}
-                            <img id="thumbnail"
-                                 src="{% if video_thumbnail.url %}{{ video_thumbnail.url }}{% else %}{% static 'images/video-placeholder.png' %}{% endif %}"
-                                 alt="" />
-                        {% endif %}
-                        {% if not signed_in %}
-                            <div class="video-button-overlay great-container">
-                                <a role="button"
-                                   class="button  primary-button great-primary-button--chevron"
-                                   href="{% url 'export_academy:signup' %}?next={% url 'export_academy:video-on-demand' slug=video_page_slug %}">Sign up to watch</a>
-                                <p class="great-text-white govuk-!-static-margin-top-3 govuk-!-static-margin-bottom-1">
-                                    Already joined the UK Export Academy?
-                                </p>
-                                <a class="govuk-link great-text-white great-font-bold great-white-overlay-link govuk-link--no-visited-state ukea-signin-link"
-                                   href="{% url 'export_academy:signin' %}?next={% url 'export_academy:video-on-demand' slug=video_page_slug %}">Sign in</a>
-                            </div>
-                        {% endif %}
-                    </div>
-                    <div id="next-live-event" class="govuk-!-static-padding-bottom-6">
-                        <div id="ask-the-experts"
-                             class="great-display-flex great-align-items-flex-end">
-                            <div>
-                                <span class="govuk-caption-m govuk-!-static-margin-top-4">Ask the experts</span>
-                                <h2 class="govuk-heading-s">Next live event with Q&A</h2>
-                            </div>
-                            <img class="govuk-!-margin-bottom-5"
-                                 src="{% static 'images/ask-the-experts.svg' %}"
-                                 alt="" />
+                    <span aria-hidden="true" class="govuk-caption-l">Transcript</span>
+                    <h1 class="govuk-heading-l govuk-!-static-margin-0 govuk-!-static-margin-bottom-2">
+                        <span class="great-visually-hidden">Transcript for</span>{{ event.name }}
+                    </h1>
+                    <div class="govuk-!-margin-top-6">{% get_video_transcript event_video %}</div>
+                    <div class="govuk-!-margin-top-6">
+                        <h3 class="govuk-heading-s govuk-!-static-margin-0 govuk-!-static-margin-bottom-3">
+                            Back to event recording
+                        </h1>
+                        <div class="govuk-!-static-margin-bottom-2">
+                            {% include './includes/event_item_badge.html' with event=event display_past_recording=True no_bg=True %}
                         </div>
-                        <div class="govuk-!-static-margin-bottom-2">{% include './includes/event_item_badge.html' with event=event %}</div>
-                        <a href="../../events" class="govuk-link">View all live events</a>
                     </div>
                 </div>
-            </section>
+            </div>
+        </section>
+    </div>
+{% else %}
+    <div id="breadcrumbs"
+         class="great-display-from-tablet great-bg-light-blue">
+        <div class="great-container">
+            {% breadcrumbs great-breadcrumbs %}
+            <a href="/">Home</a>
+            <a href="../../">UK Export Academy</a>
+        {% endbreadcrumbs %}
+    </div>
+</div>
+<div class="great" id="video-on-demand-page">
+    <section class="govuk-!-padding-bottom-6 govuk-!-padding-top-9 great-bg-white">
+        <div class="great-container event-details-header-container">
+            <div class="event-details-header-info govuk-grid-column-two-thirds-from-desktop govuk-!-static-padding-0">
+                <span aria-hidden="true" class="govuk-caption-l">Event Recording</span>
+                <h1 class="govuk-heading-l govuk-!-static-margin-0 govuk-!-static-margin-bottom-2">
+                    <span class="great-visually-hidden">Event Recording for</span>{{ event.name }}
+                </h1>
+                <time datetime="{{ event.past_event_recorded_date|date:"Y-m-d" }}T{{ event.past_event_recorded_date|time:"H:i:s" }}{{ event.past_event_recorded_date|date:"O" }}">Recorded: {{ event.past_event_recorded_date|date:"l j F Y" }}</time>
+            </div>
+            <div class="event-details-header-logo">
+                <img class="ea-logo"
+                     src="{% static 'images/uk-export-academy-logo.svg' %}"
+                     alt="UK Export Academy logo" />
+            </div>
         </div>
-        {% if event_document_url %}
-            <section class="great-container govuk-!-padding-top-6 govuk-!-padding-bottom-0">
-                <div class="govuk-grid-column-two-thirds-from-desktop govuk-!-padding-0 govuk-!-padding-bottom-6 great-grey-bottom-border govuk-!-margin-bottom-4">
+    </section>
+    <div class="great-bg-light-blue">
+        <section id="past-video-recording"
+                 class="great-container govuk-!-padding-top-0  govuk-!-padding-bottom-0">
+            <div class="event-on-demand-video-container">
+                <div class="video-wrapper govuk-!-static-margin-bottom-4 govuk-!-static-margin-top-4 ">
                     {% if signed_in %}
-                        <a class="govuk-link govuk-link--no-visited-state"
-                           href="{{ event_document_url }}"><span role="img" class="fa fa-file-download govuk-!-padding-right-2"></span>Download event presentation</a>
+                        {% render_video event_video event.name %}
                     {% else %}
-                        <a class="govuk-link govuk-link--no-visited-state"
-                           href="{% url 'export_academy:signup' %}?next={% url 'export_academy:video-on-demand' slug=video_page_slug %}"><span role="img" class="fa fa-file-download govuk-!-padding-right-2"></span>Sign up to download event presentation</a>
+                        <img id="thumbnail"
+                             src="{% if video_thumbnail.url %}{{ video_thumbnail.url }}{% else %}{% static 'images/video-placeholder.png' %}{% endif %}"
+                             alt="" />
+                    {% endif %}
+                    {% if not signed_in %}
+                        <div class="video-button-overlay great-container">
+                            <a role="button"
+                               class="button  primary-button great-primary-button--chevron"
+                               href="{% url 'export_academy:signup' %}?next={% url 'export_academy:video-on-demand' slug=video_page_slug %}">Sign up to watch</a>
+                            <p class="great-text-white govuk-!-static-margin-top-3 govuk-!-static-margin-bottom-1">
+                                Already joined the UK Export Academy?
+                            </p>
+                            <a class="govuk-link great-text-white great-font-bold great-white-overlay-link govuk-link--no-visited-state ukea-signin-link"
+                               href="{% url 'export_academy:signin' %}?next={% url 'export_academy:video-on-demand' slug=video_page_slug %}">Sign in</a>
+                        </div>
                     {% endif %}
                 </div>
-            </section>
-        {% endif %}
-        {% include './includes/event_details_main_content.html' with duration=video_duration series=series %}
+                <div id="next-live-event" class="govuk-!-static-padding-bottom-6">
+                    <div id="ask-the-experts"
+                         class="great-display-flex great-align-items-flex-end">
+                        <div>
+                            <span class="govuk-caption-m govuk-!-static-margin-top-4">Ask the experts</span>
+                            <h2 class="govuk-heading-s">Next live event with Q&A</h2>
+                        </div>
+                        <img class="govuk-!-margin-bottom-5"
+                             src="{% static 'images/ask-the-experts.svg' %}"
+                             alt="" />
+                    </div>
+                    <div class="govuk-!-static-margin-bottom-2">{% include './includes/event_item_badge.html' with event=event %}</div>
+                    <a href="../../events" class="govuk-link">View all live events</a>
+                </div>
+            </div>
+        </section>
     </div>
+    {% if event_document_url %}
+        <section class="great-container govuk-!-padding-top-6 govuk-!-padding-bottom-0">
+            <div class="govuk-grid-column-two-thirds-from-desktop govuk-!-padding-0 govuk-!-padding-bottom-6 great-grey-bottom-border govuk-!-margin-bottom-4">
+                {% if signed_in %}
+                    <a class="govuk-link govuk-link--no-visited-state"
+                       href="{{ event_document_url }}"><span role="img" class="fa fa-file-download govuk-!-padding-right-2"></span>Download event presentation</a>
+                {% else %}
+                    <a class="govuk-link govuk-link--no-visited-state"
+                       href="{% url 'export_academy:signup' %}?next={% url 'export_academy:video-on-demand' slug=video_page_slug %}"><span role="img" class="fa fa-file-download govuk-!-padding-right-2"></span>Sign up to download event presentation</a>
+                {% endif %}
+            </div>
+        </section>
+    {% endif %}
+    {% include './includes/event_details_main_content.html' with duration=video_duration series=series %}
+</div>
+{% endif %}
 {% endblock %}
diff --git a/export_academy/templates/export_academy/includes/event_item_badge.html b/export_academy/templates/export_academy/includes/event_item_badge.html
@@ -2,7 +2,7 @@
 {% load wagtailcore_tags %}
 {% load replace_underscores from component_tags %}
 {% load remove_string from component_tags %}
-<div class="great-bg-light-blue event-listing-summary-info">
+<div class="{% if not no_bg %}great-bg-light-blue {% endif %}event-listing-summary-info">
     {% if event %}
         <div class="event-date-badge">
             {% if display_past_recording %}

diff --git a/export_academy/views.py b/export_academy/views.py
@@ -917,4 +917,5 @@ def get_context_data(self, **kwargs):
         ctx['series'] = event.get_course()[0] if len(event.get_course()) else None
         ctx['slug'] = kwargs['object'].slug
         ctx['video_page_slug'] = event.get_past_event_recording_slug()
+        ctx['full_transcript'] = self.request.GET.get('fullTranscript')
         return ctx
diff --git a/learn/context.py b/learn/context.py
@@ -13,4 +13,5 @@ def get_context_data(request, page):
             'topics': CuratedListPage.objects.sibling_of(page.get_parent()),
             'country_choices': [{'value': key, 'label': label} for key, label in choices.COUNTRY_CHOICES],
             'suggested_countries': helpers.get_suggested_countries_for_user(request),
+            'full_transcript': request.GET.get('fullTranscript'),
         }
diff --git a/learn/templates/learn/detail_page.html b/learn/templates/learn/detail_page.html
@@ -3,7 +3,41 @@
 {% load routablepageurl from wagtailroutablepage_tags %}
 {% load url_map %}
 {% load content_tags %}
+{% load component_tags %}
+{% load video_tags %}
+{% load breadcrumbs from component_tags %}
 {% block content %}
+    {% if full_transcript %}
+        <div id="breadcrumbs" class="great-bg-light-blue">
+            <div class="great-container">
+                {% breadcrumbs great-breadcrumbs %}
+                <a href="{{ page.url }}" class="great-back-link">Back</a>
+            {% endbreadcrumbs %}
+        </div>
+    </div>
+    <div class="great" id="lte-transcript">
+        <section class="govuk-!-padding-bottom-6 govuk-!-padding-top-9 great-bg-white">
+            <div class="great-container event-details-header-container">
+                <div class="event-details-header-info govuk-grid-column-two-thirds-from-desktop govuk-!-static-padding-0">
+                    <span aria-hidden="true" class="govuk-caption-l">Transcript</span>
+                    <h1 class="govuk-heading-l govuk-!-static-margin-0 govuk-!-static-margin-bottom-2">
+                        <span class="great-visually-hidden">Transcript for</span>
+                        {% for block in page.hero %}
+                            {% if block.block_type == 'Video' %}{{ block.value.video.title }}{% endif %}
+                        {% endfor %}
+                    </h1>
+                    <div class="govuk-!-margin-top-6">
+                        {% for block in page.hero %}
+                            {% if block.block_type == 'Video' %}
+                                {% get_video_transcript block.value %}
+                            {% endif %}
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+{% else %}
     {% load breadcrumbs from component_tags %}
     <div class="great-container">
         {% breadcrumbs great-breadcrumbs %}
@@ -17,8 +51,10 @@
     <div class="great-container govuk-!-padding-top-9">
         <div class="govuk-grid-row">
             <div class="govuk-grid-column-two-thirds-from-desktop">
-                <h2 class="govuk-caption-xl">{{ page.get_lesson_category_name }}</h2>
-                <h1 class="govuk-heading-xl" id="lesson-title">{{ page.title }}</h1>
+                <span aria-hidden="true" class="govuk-caption-xl">{{ page.get_lesson_category_name }}</span>
+                <h1 class="govuk-heading-xl" id="lesson-title">
+                    <span class="great-visually-hidden">{{ page.get_lesson_category_name }}:</span>{{ page.title }}
+                </h1>
             </div>
         </div>
     </div>
@@ -70,9 +106,8 @@ <h3 class="govuk-heading-s">Explore the topic</h3>
         </div>
     </div>
 </div>
-<div class="govuk-!-padding-0">
-    {% include 'learn/promo.html' with bg_class='great-bg-light-blue' %}
-</div>
+{% endif %}
+<div class="govuk-!-padding-0">{% include 'learn/promo.html' with bg_class='great-bg-light-blue' %}</div>
 {% endblock %}
 {% block body_js %}
     {{ block.super }}

diff --git a/react-components/dist/components_styles.css b/react-components/dist/components_styles.css
diff --git a/react-components/dist/components_styles.css.map b/react-components/dist/components_styles.css.map
diff --git a/react-components/dist/expand_your_business_styles.css b/react-components/dist/expand_your_business_styles.css
diff --git a/react-components/dist/expand_your_business_styles.css.map b/react-components/dist/expand_your_business_styles.css.map
diff --git a/react-components/dist/international_styles.css b/react-components/dist/international_styles.css
diff --git a/react-components/dist/international_styles.css.map b/react-components/dist/international_styles.css.map
diff --git a/react-components/dist/learn_styles.css b/react-components/dist/learn_styles.css
diff --git a/react-components/dist/learn_styles.css.map b/react-components/dist/learn_styles.css.map
diff --git a/react-components/dist/loggedout_styles.css b/react-components/dist/loggedout_styles.css
diff --git a/react-components/dist/loggedout_styles.css.map b/react-components/dist/loggedout_styles.css.map
diff --git a/react-components/dist/magna_styles.css b/react-components/dist/magna_styles.css
diff --git a/react-components/dist/magna_styles.css.map b/react-components/dist/magna_styles.css.map
diff --git a/react-components/dist/microsite_styles.css b/react-components/dist/microsite_styles.css
diff --git a/react-components/dist/microsite_styles.css.map b/react-components/dist/microsite_styles.css.map
diff --git a/react-components/dist/profile_styles.css b/react-components/dist/profile_styles.css
diff --git a/react-components/dist/profile_styles.css.map b/react-components/dist/profile_styles.css.map
diff --git a/styles/great/_components.scss b/styles/great/_components.scss
@@ -696,28 +696,33 @@ figure.great-blockquote {
 }
 
 .great-back-link {
-  color: $govuk-brand-colour;
-  padding-left: 20px;
+  color: $color-main-text;
   position: relative;
 
   &:visited {
-    color: $govuk-brand-colour;
+    color: $color-main-text;
   }
 
   &::before {
-    background-image: url(/static/icons/arrow.svg);
-    background-size: 11px;
-    background-repeat: no-repeat;
-    background-position: 50%;
-    position: absolute;
+    box-sizing: initial;
+    transform: rotate(135deg);
+    content: "";
+    border-style: solid;
     display: inline-block;
-    content: '';
-    pointer-events: none;
-    height: 20px;
-    width: 12px;
-    top: 2px;
-    left: 0;
-    transform: rotate(180deg);
+    height: 5px;
+    width: 5px;
+    position: relative;
+    vertical-align: top;
+    border-color: #333;
+    border-width: 0 2px 2px 0;
+    margin: 0px 10px 0 0px;
+    top: 0.7em;
+
+    @include govuk-media-query($from: tablet) {
+      height: 6px;
+      width: 6px;
+      top: 0.5em;
+    }
   }
 }
 
@@ -1489,6 +1494,7 @@ nav.great-breadcrumbs {
   }
 
   a,
+  a:active:focus,
   span {
     font-size: 16px;
     color: $color-main-text;

diff --git a/styles/great/_utils.scss b/styles/great/_utils.scss
@@ -972,10 +972,6 @@ great-icon {
     max-width: 615px;
   }
 }
-.great-video-transcipt-text {
-  max-height: 200px;
-  overflow: auto;
-}
 
 .great-icon-box-container {
   @include govuk-media-query($from: desktop) {