feat: video player and cookie management ✨

Co-authored-by: Fabio Bonelli <fb@fabiobonelli.it>
teamdigitale · Jul 17, 2024 · 0bba897 · 0bba897
1 parent 4014167
commit 0bba897
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 29 deletions.
diff --git a/lib/path_helpers.rb b/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

diff --git a/source/javascripts/index.js b/source/javascripts/index.js
@@ -11,9 +11,12 @@ import 'sticky-header-custom.js';
 import 'lazysizes';
 import 'lazysizes/plugins/respimg/ls.respimg';
 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,16 +82,56 @@ 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];
 
@@ -105,3 +148,36 @@ if (chartWrap) {
     }
   }
 }
+
+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);
+}
diff --git a/source/partials/_video-cover.html.slim b/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,26 @@ 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]
+
+