feat: video player and cookie management ✨

Co-authored-by: Fabio Bonelli <[email protected]>

lib/path_helpers.rb

@@ -138,7 +138,7 @@ def page_path(page, locale: I18n.locale)
   end
 
   def page_path_with_anchor(page, anchor)
-      anchor ? "#{page_path(page)}#{anchor}" : page_path(page,locale)
+      anchor ? "#{page_path(page)}#{anchor}" : page_path(page, locale)
   end
 
   def home_path

source/javascripts/index.js

@@ -14,6 +14,10 @@ import 'focus-visible/src/focus-visible.js';
 import Sharer from 'sharer.js/sharer.js';
 import ChartWrapper from '../components/ChartWrapper';
 
+import VideoPlayer from 'bootstrap-italia/src/js/plugins/videoplayer';
+import AcceptOverlay from 'bootstrap-italia/src/js/plugins/accept-overlay';
+import { cookies } from 'bootstrap-italia/src/js/plugins/util/cookies';
+
 const progressIndicator = require('progress-indicator.js');
 const DatoCmsSearch = require('datocms-search.widget.js');
 const searchClient = new DatoCmsSearch(
@@ -79,29 +83,103 @@ for (let index = 0; index < carouselCalendarList.length; index++) {
   carouselInstances[index] = new CarouselCalendar(carousel);
 }
 
+// setup yt videos
+const YT_SERVICE = 'youtube.com';
+const loadYouTubeVideo = (videoId) => {
+  const videoEl = document.getElementById(videoId);
+  const url = videoEl.dataset.url;
+  const video = VideoPlayer.getOrCreateInstance(videoEl);
+  video.setYouTubeVideo(url);
+};
+
+const manageVideo = (overlay) => {
+  const videoLoadButton = overlay.querySelector('button');
+  const videoId = videoLoadButton.dataset.videoid;
+  if (cookies.isChoiceRemembered(YT_SERVICE)) {
+    loadYouTubeVideo(videoId);
+    const overlayAccept = new AcceptOverlay(overlay, {
+      service: YT_SERVICE,
+    });
+    overlayAccept.hide();
+  } else {
+    videoLoadButton.addEventListener('click', () => {
+      const checkbox = overlay.querySelector('input');
+      if (checkbox.checked) {
+        cookies.rememberChoice(YT_SERVICE, true);
+      }
+      loadYouTubeVideo(videoId);
+      const overlayAccept = new AcceptOverlay(overlay, {
+        service: YT_SERVICE,
+      });
+      overlayAccept.hide();
+    });
+  }
+};
+
+const overlay = document.querySelector('[data-bs-accept-overlay]');
+if (overlay) {
+  manageVideo(overlay);
+}
+
+//setup charts
 const chartWrap = document.getElementsByClassName('chartWrap');
 if (chartWrap) {
   for (let i = 0; i < chartWrap.length; i++) {
     try {
-      const chartTemplate = chartWrap[i].parentNode.getElementsByTagName(
-        'template'
-      )[0].innerHTML;
-      const infoTemplate = chartWrap[i].parentNode.getElementsByClassName(
-        'info'
-      )[0].innerHTML;
-
+      const chartTemplate =
+        chartWrap[i].parentNode.getElementsByTagName('template')[0].innerHTML;
+      const infoTemplate =
+        chartWrap[i].parentNode.getElementsByClassName('info')[0].innerHTML;
       const domNode = chartWrap[i];
-
       const chartData = JSON.parse(chartTemplate);
       const data = JSON.parse(chartData); //double parse ?
       const infoData = JSON.parse(infoTemplate);
       const info = JSON.parse(infoData); //double parse ?
       const root = createRoot(domNode);
       root.render(
-        <ChartWrapper id={domNode.id} data={data} info={info} {...domNode.dataset} />
+        <ChartWrapper
+          id={domNode.id}
+          data={data}
+          info={info}
+          {...domNode.dataset}
+        />
       );
     } catch (error) {
       console.log('error', error);
     }
   }
 }
+
+const hookDiv = document.getElementById('cookies-management');
+function CookieManager({ onRevoke }) {
+  return (
+    <div>
+      <span>YouTube per la visualizzazione di video</span>
+      <button
+        type="button"
+        className="btn btn-outline-primary ms-5"
+        onClick={() => onRevoke()}
+      >
+        Revoca consenso
+      </button>
+    </div>
+  );
+}
+
+if (hookDiv) {
+  const hasYtCookies = cookies.isChoiceRemembered(YT_SERVICE);
+  let content = 'Non hai installato cookie di terze parti.';
+  const root = createRoot(hookDiv);
+  if (hasYtCookies) {
+    content = (
+      <CookieManager
+        services={[YT_SERVICE]}
+        onRevoke={() => {
+          cookies.clearAllRememberedChoices();
+          window.location.reload();
+        }}
+      />
+    );
+  }
+  root.render(content);
+}

source/partials/_video-cover.html.slim

@@ -9,9 +9,8 @@
 
 ruby:
   if item.video.present?
-    nocookie_url = item.video.url.gsub("youtube.com/watch?v=",
-                   "youtube-nocookie.com/embed/")
-    minheight = item.video.height < 400 ? 400 : video.height
+    nocookie_url = item.video.url.gsub("youtube.com/watch?v=","youtube-nocookie.com/embed/")
+    minheight = item.video.height < 480 ? 480 : video.height
     allows = %w[accelerometer
                 autoplay
                 clipboard-write
@@ -21,22 +20,23 @@ ruby:
   end
 
 - if item.present?
-  .d-none.d-lg-block
-    div class=offset
-      iframe [width="100%"
-              height=minheight
-              src=nocookie_url
-              frameborder="0"
-              allow=allows
-              title="Youtube video"
-              allowfullscreen="allowfullscreen"]
-
-  / Trick: dimensionare altezza iframe video in mobile RT 05-05-2021
-  .col-12.d-lg-none.p-0
-    iframe [width="100%"
-            height="200"
-            src=nocookie_url
-            frameborder="0"
-            allow=allows
-            title="Youtube video"
-            allowfullscreen="allowfullscreen"]
+  div [class="acceptoverlayable" data-bs-accept-overlay width="100%" height=minheight ]
+    div [class="acceptoverlay acceptoverlay-primary fade show" ]
+      div class="acceptoverlay-inner"
+        div class="acceptoverlay-icon"
+          svg.icon.icon-xl [
+            focusable="false"
+            role="img"
+            ]
+            use xlink:href="/images/sprite.svg#it-video"
+        div class="text-white"
+          span Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella nostra
+          a [class="text-white px-2" target="_blank" href="/informativa-sul-trattamento-dei-dati-personali"] Informativa sulla privacy
+        div class="acceptoverlay-buttons bg-dark"
+          button [
+              type="button" class="btn btn-primary" data-videoid="vid1"   data-bs-accept-from="youtube.com" data-bs-accept-button] Accetta
+          div class="form-check"
+            input [id="chk-remember" type="checkbox" data-bs-accept-remember]
+            label [for="chk-remember"] Ricorda per tutti i video
+    div
+      video [controls data-bs-video id="vid1" class="video-js" width="100%"  height=minheight  data-url=nocookie_url]

source/partials/links/_link_internal.html.slim

@@ -3,8 +3,7 @@ ruby:
   label ||= cta_label(item)
   white_outline ||= nil
   border = white_outline ? "box-shadow: inset 0 0 0 2px white" : ""
-page_link_path = item.anchor&.present? ? page_path_with_anchor(item.link, "##{item.anchor}") : page_path(item.link)
-
+  page_link_path = item.anchor&.present? ? page_path_with_anchor(item.link, "##{item.anchor}") : page_path(item.link)
 
 = proxy_link_to label,
   page_link_path,