[Oxfordshire] Add videos to site and update email.

On the homepage the video is not using fancybox, because the space/size is big enough to actually play the video without the need of an overlay. Co-Authored-By: Matthew Somerville <[email protected]>
mysociety · Feb 28, 2022 · 39310b2 · 39310b2
1 parent 46ff04f
commit 39310b2
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 0 deletions.
diff --git a/t/cobrand/oxfordshire.t b/t/cobrand/oxfordshire.t
@@ -245,6 +245,7 @@ FixMyStreet::override_config {
  my $email = $mech->get_email;
  my $body = $mech->get_text_body_from_email($email);
  like $body, qr/Investigation complete/, 'state correct in email';
+ like $body, qr/fix every issue reported on FixMyStreet/;
  };
 
  subtest 'extra CSV columns are present' => sub {

diff --git a/templates/email/default/alert-update.html b/templates/email/default/alert-update.html
@@ -14,6 +14,7 @@
  [% start_padded_box | safe %]
  <h1 style="[% h1_style %]">New updates on <a href="[% problem_url %]">[% title %]</a></h1>
  [%~ INCLUDE '_email_comment_list.html' %]
+ [% TRY %][% INCLUDE '_alert_update_after_updates.html' %][% CATCH file %][% END %]
  [% IF unsubscribe_url %]
  <p style="[% p_style %]"><a href="[% unsubscribe_url %]">Unsubscribe from alerts about this report</a></p>
  [% END %]

diff --git a/templates/email/default/alert-update.txt b/templates/email/default/alert-update.txt
@@ -9,6 +9,8 @@ The following updates have been left on this report:
 
 [% state_message %]
 
+[% TRY %][% INCLUDE '_alert_update_after_updates.txt' %][% CATCH file %][% END %]
+
 If you would like to view or reply to these updates, please visit the following URL:
 
  [% problem_url %]

diff --git a/templates/email/oxfordshire/_alert_update_after_updates.html b/templates/email/oxfordshire/_alert_update_after_updates.html
@@ -0,0 +1,6 @@
+[% IF report.is_closed ~%]
+ <a href="https://youtu.be/hae9g170sA4" target="_blank">
+ <p style="[% p_style %]">Unfortunately we can’t fix every issue reported on FixMyStreet. Councillor Tim Bearder explains why.</p>
+ <img style="width: 300px" alt="Understanding when we don’t fix things video" src="/cobrands/oxfordshire/images/oxfordshire-can-cants-video.png">
+ </a>
+[%~ END %]
diff --git a/templates/email/oxfordshire/_alert_update_after_updates.txt b/templates/email/oxfordshire/_alert_update_after_updates.txt
@@ -0,0 +1,4 @@
+[% IF report.is_closed ~%]
+Unfortunately we can't fix every issue reported on FixMyStreet. Councillor Tim
+Bearder explains why: https://youtu.be/hae9g170sA4
+[% END %]
diff --git a/templates/web/oxfordshire/index-steps.html b/templates/web/oxfordshire/index-steps.html
@@ -1,3 +1,9 @@
+<h2>[% loc('What we can and can’t fix') %]</h2>
+
+<div class="embed-responsive embed-responsive-16by9">
+ <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/Uf0b_JAzpcY" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
 <h2>[% loc('How to report a problem') %]</h2>
 
 <ol class="big-numbers">

diff --git a/templates/web/oxfordshire/report/new/top_message.html b/templates/web/oxfordshire/report/new/top_message.html
@@ -0,0 +1,9 @@
+<div class="video-thumbnail-section">
+ <a class="iframe fancybox" rel="fancy" href="https://www.youtube-nocookie.com/embed/Uf0b_JAzpcY">
+ <img class="video-thumbnail" alt="What we can and can’t fix video" src="/cobrands/oxfordshire/images/oxfordshire-can-cants-video.png">
+ <div class="video-cap-wrapper">
+ <p style="color:#222"><strong>Watch</strong></p>
+ <p>Cllr Tim Bearder explains what we can and can’t fix</p>
+ </div>
+ </a>
+</div>
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
@@ -1532,6 +1532,8 @@ fixmystreet.fetch_reporting_data = function() {
  re_select(old_category_group, old_category);
  fixmystreet.reporting.topLevelPoke();
 
+ fixmystreet.set_up.fancybox_images(); // In case e.g. top_message has pulled in a fancybox
+
  if ( data.extra_name_info && !$('#form_fms_extra_title').length ) {
  // there might be a first name field on some cobrands
  var lb = $('#form_first_name').prev();

diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
@@ -277,6 +277,62 @@ textarea {
  background-color: #007258;
 }
 
+//Embed video not using fancybox
+.embed-responsive {
+ position: relative;
+ display: block;
+ padding: 0;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+
+ &::before {
+ display: block;
+ content: "";
+ }
+
+ .embed-responsive-item,
+ iframe,
+ embed,
+ object,
+ video {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ }
+}
+
+.embed-responsive-16by9 {
+ position: relative;
+ padding-bottom: 56.25%; /* 16:9 */
+ height: 0;
+ margin-bottom: 40px;
+}
+
+// Video section with thumbnail (on the report page)
+.video-thumbnail-section {
+ padding: 1em;
+ margin-bottom: 1em;
+ background-color: #E0E2E5;
+ a.iframe {
+ display: flex;
+ flex-direction: row;
+ align-items: end;
+ .video-thumbnail {
+ max-width: 50%;
+ flex-basis: 50%;
+ }
+ .video-cap-wrapper {
+ margin-left: 1em;
+ flex-basis: 50%;
+ }
+ }
+}
+
 @media print {
  body {
  background-color: #fff !important;

diff --git a/web/cobrands/oxfordshire/images/oxfordshire-can-cants-video.png b/web/cobrands/oxfordshire/images/oxfordshire-can-cants-video.png