feat: link to YouTube in the consent placeholder

Changes the consent placeholder used when the user is trying to view an article without accepting cookies first, so that it also includes a link to YouTube to always propose the video. This is not supported by Klaro, so I had to make my own.
makigas · Mar 13, 2024 · 6b2c905 · 6b2c905
1 parent 0b68138
commit 6b2c905
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 29 deletions.
diff --git a/app/components/six/base/button_component.html.erb b/app/components/six/base/button_component.html.erb
@@ -1,5 +1,5 @@
 <% if href.present? %>
-  <%= link_to href, class: class_list, id: id, rel: rel do %>
+  <%= link_to href, class: class_list, id: id, rel: rel, target: target do %>
     <%= inner_content %>
   <% end %>
 <% else %>

diff --git a/app/components/six/base/button_component.rb b/app/components/six/base/button_component.rb
@@ -3,18 +3,19 @@
 module Six
   module Base
     class ButtonComponent < ViewComponent::Base
-      def initialize(href: nil, classes: nil, id: nil, text: nil, rel: nil)
+      def initialize(href: nil, classes: nil, id: nil, text: nil, rel: nil, target: nil)
         super
         @href = href
         @classes = classes
         @id = id
         @text = text
         @rel = rel
+        @target = target
       end
 
       private
 
-      attr_reader :href, :classes, :id, :text, :rel
+      attr_reader :href, :classes, :id, :text, :rel, :target
 
       def class_list
         base_classes = ['btn']

diff --git a/app/components/six/base/youtube_embed_component.html.erb b/app/components/six/base/youtube_embed_component.html.erb
@@ -1,11 +1,28 @@
-<div class="ytiframe">
+<div class="ytiframe" style="--thumbnail-url: url('https://i1.ytimg.com/vi/<%= youtube_id %>/maxresdefault.jpg');">
   <figure class="ytiframe__iframe">
-    <div class="ytiframe__consent" data-name="youtube-embed">
-      <div id="ytplayer" data-id="<%= youtube_id %>"></div>
-      <noscript>
-        <iframe id="ytplayer" src="https://www.youtube-nocookie.com/embed/<%= youtube_id %>?showinfo=0" allowfullscreen>
-        </iframe>
-      </noscript>
+    <div class="consent">
+      <div class="consent__box">
+        <p class="consent__lead">Necesito tu permiso</p>
+        <p>
+        ¿Quieres cargar el reproductor de YouTube? Podrían guardarse cookies de terceros en tu
+        navegador. Si no, siempre puedes ir a ver el vídeo a YouTube.
+        </p>
+        <div class="consent__buttons">
+          <%= render Six::Base::ButtonComponent.new(id: "iframe-allow-now", text: 'Permitir esta vez') %>
+          <%= render Six::Base::ButtonComponent.new(id: "iframe-allow-always", text: 'Permitir siempre') %>
+          <%= render Six::Base::ButtonComponent.new(href: "https://youtu.be/#{youtube_id}", text: 'Ver en YouTube →', target: '_blank') %>
+        </div>
+        <p><small>
+          Ves este aviso porque no has establecido aún tus preferencias de cookies
+          o porque las has rechazado previamente. Este sitio web está orgulloso de
+          no usar cookies propias ni servir anuncios.
+        </small></p>
+      </div>
     </div>
+    <div id="ytplayer" data-id="<%= youtube_id %>"></div>
+    <noscript>
+      <iframe id="ytplayer" src="https://www.youtube-nocookie.com/embed/<%= youtube_id %>?showinfo=0" allowfullscreen>
+      </iframe>
+    </noscript>
   </figure>
 </div>
diff --git a/app/javascript/six/components/button.scss b/app/javascript/six/components/button.scss
@@ -22,6 +22,7 @@
   text-decoration: inherit;
   text-align: center;
   cursor: pointer;
+  line-height: 1.2;
 
   &:hover {
     border-color: var(--button-focus-border-color);

diff --git a/app/javascript/six/components/ytiframe.scss b/app/javascript/six/components/ytiframe.scss
@@ -1,22 +1,39 @@
 .ytiframe {
-  aspect-ratio: 16 / 9;
   width: 100%;
-  background: black;
-  max-height: 70vh;
+
+  background-color: #181818;
+  background-image: var(--thumbnail-url);
+  background-position: center;
+  background-size: cover;
+  background-blend-mode: multiply;
+
   display: flex;
   justify-content: center;
 
+  @media screen and (width >= 480px) {
+    aspect-ratio: 16 / 9;
+    max-height: 70vh;
+  }
+
   &__iframe {
     height: 100%;
-    aspect-ratio: 16 / 9;
     margin: 0;
     padding: 0;
-    max-height: 70vh; // WebKit
+
+    @media screen and (width >= 480px) {
+      aspect-ratio: 16 / 9;
+      max-height: 70vh;
+    }
   }
 
-  &__consent {
-    height: 100%;
-    width: 100%;
+  &--loaded {
+    aspect-ratio: 16 / 9;
+    max-height: 70vh;
+  }
+
+  &--loaded &__iframe {
+    aspect-ratio: 16 / 9;
+    max-height: 70vh;
   }
 
   // Klaro placeholder
@@ -33,11 +50,13 @@
   }
 
   .klaro.cm-as-context-notice {
-    flex: 1;
-    height: unset;
-    max-width: 600px;
-    margin-left: 2rem;
-    margin-right: 2rem;
+    @media screen and (width >= 480px) {
+      flex: 1;
+      height: unset;
+      max-width: 600px;
+      margin-left: 2rem;
+      margin-right: 2rem;
+      }
 
     button {
       padding-left: 3ch;
@@ -50,3 +69,52 @@
     height: 100%;
   }
 }
+
+.consent {
+  width: 100%;
+  height: 100%;
+  display: none;
+
+  &--visible {
+    display: block;
+  }
+
+  &__box {
+    --button-foreground: black;
+    height: fit-content;
+    padding: 5px 15px;
+    text-align: center;
+  }
+
+  p {
+    line-height: 1.2;
+    color: white;
+  }
+
+  &__lead {
+    font-size: 1.3rem;
+    font-weight: bold;
+  }
+
+  small {
+    font-size: 0.9rem;
+    color: white;
+  }
+
+  &__buttons {
+    display: inline-flex;
+    gap: 1rem;
+  }
+
+  @media screen and (width >= 480px) {
+    &--visible {
+      display: flex;
+    }
+    justify-content: center;
+    align-items: center;
+
+    &__box {
+      max-width: 70ch;
+    }
+  }
+}
diff --git a/app/javascript/six/cookies.js b/app/javascript/six/cookies.js
@@ -2,6 +2,36 @@ import * as Klaro from "klaro/dist/klaro-no-css";
 import "klaro/dist/klaro.css";
 import "klaro/dist/translations";
 
+function iframeRenderConsentDialog() {
+  const consent = document.querySelector(".ytiframe .consent");
+  if (consent) {
+    consent.classList.add("consent--visible");
+
+    document.getElementById("iframe-allow-now").addEventListener("click", () => {
+      const manager = window.klaro.getManager();
+      manager.updateConsent("youtube-embed", true);
+      manager.applyConsents(false, true, "youtube-embed");
+      manager.updateConsent("youtube-embed", false);
+    });
+
+    document.getElementById("iframe-allow-always").addEventListener("click", () => {
+      const manager = window.klaro.getManager();
+      manager.updateConsent("youtube-embed", true);
+      if (manager.confirmed) {
+        manager.saveConsents("contextual-accept");
+      }
+      manager.applyConsents(false, true, "youtube-embed");
+    });
+  }
+}
+
+function iframeHideConsentDialog() {
+  const consent = document.querySelector(".ytiframe .consent");
+  if (consent) {
+    consent.classList.remove("consent--visible");
+  }
+}
+
 const config = {
   cookieExpiresAfterDays: 180,
   default: false,
@@ -14,6 +44,18 @@ const config = {
           title: "Servicios de vídeo",
         },
       },
+      consentModal: {
+        title: "Servicios que usan cookies",
+        description:
+          "Aquí puedes ajustar tu configuración para permitir ciertos componentes de la web que pueden depositar cookies en tu navegador.",
+      },
+      consentNotice: {
+        description:
+          "Este sitio web utiliza cookies para reproducir los vídeos en las páginas de artículo. Puedes aceptarlas o rechazarlas. Si no las aceptas no funcionarán los vídeos, aunque a cambio puedes rechazarlas gratis.",
+        learnMore: "Déjame ver",
+      },
+      ok: "Aceptar todo",
+      decline: "Rechazar todo",
       contextualConsent: {
         description: "¿Cargar el contenido externo? {title}",
         acceptOnce: "Sí por esta vez",
@@ -34,10 +76,8 @@ const config = {
     },
   },
   styling: {
-    // Klaro's variable name picking is not very semantic...
-    dark1: "#8eff92",
-    light1: "#333",
-    green1: "#4d6699",
+    "notice-left": "20px",
+    "notice-max-width": "600px",
     "font-size": "16px",
   },
   services: [
@@ -49,6 +89,9 @@ const config = {
       callback(consent) {
         if (consent && window.startYouTubePlayer) {
           window.startYouTubePlayer();
+          iframeHideConsentDialog();
+        } else if (!consent) {
+          iframeRenderConsentDialog();
         }
       },
       translations: {

diff --git a/app/javascript/six/events.js b/app/javascript/six/events.js
@@ -3,6 +3,10 @@ import YouTubePlayer from "youtube-player";
 
 /* Build a YouTube player. Keep the player variable to use later. */
 function startYouTubePlayer() {
+  const youtubeIframe = document.querySelector(".ytiframe");
+  if (youtubeIframe) {
+    youtubeIframe.classList.add("ytiframe--loaded");
+  }
   const youtubePlayer = document.getElementById("ytplayer");
   if (youtubePlayer) {
     const player = YouTubePlayer(youtubePlayer, {

diff --git a/app/javascript/six/layout/colors.scss b/app/javascript/six/layout/colors.scss
@@ -18,3 +18,9 @@
   --tag-foreground: var(--link-color);
   --tag-background: #cce3f1;
 }
+
+// Klaro
+.klaro .cookie-notice .cm-link.cn-learn-more {
+  --green1: var(--tag-background);
+  text-decoration: underline;
+}
diff --git a/esbuild.mjs b/esbuild.mjs
@@ -5,7 +5,6 @@ import Watcher from "watcher";
 const options = {
   entryPoints: ["app/javascript/packs/dashboard.js", "app/javascript/packs/six.js"],
   bundle: true,
-  sourcemap: true,
   logLevel: "info",
   outdir: "app/assets/builds",
   minify: process.env.NODE_ENV == "production",
@@ -26,7 +25,7 @@ const options = {
 await esbuild.build(options);
 
 if (process.argv.indexOf("--watch") > -1 || process.argv.indexOf("-w") > -1) {
-  const watcher = new Watcher(["app/components", "app/views"], {
+  const watcher = new Watcher(["app/components", "app/views", "app/javascript"], {
     recursive: true,
     ignoreInitial: true,
   });