https://www.lvhn.org/modules/custom/lvhn_analytics/js/video-iframes.js?tlu5oh

1(function ($, Drupal, cookies, once, drupalSettings) {
2  Drupal.behaviors.videoIframes = {
3    attach: function (context, settings) {
4      // Youtube in magnific popups.
5      $(once("mfp-video-cookie", ".mfp-video-embed-first-item, .mfp-video-embed-all-items", context)).each(function () {
6        $(this).on('mfpOpen', function (e) {
7          let mfpCookieInterval = setInterval(() => {
8            if (window.Cookies.get('OptanonConsent')) {
9              clearInterval(mfpCookieInterval);
10              mfpCookieInterval = null;
11              const onetrust = cookies.get('OptanonConsent');
12              const optanonConsent = new URLSearchParams(onetrust);
13              const groups = optanonConsent.get('groups');
14              if (groups && groups.includes(drupalSettings['lvhn_analytics']['allow_tracking_cookies'] + ':1')) {
15                Drupal.behaviors.videoIframes.allowYoutubeVideos();
16              }
17              else {
18                let popupFrames = document.querySelectorAll('.mfp-content iframe[src="about:blank"][data-src*="youtu"]');
19                let container;
20                for (frame of popupFrames) {
21                  let offsiteLink = frame.dataset.src;
22                  container = document.createElement("div");
23                  container.classList.add('video-messages');
24                  Drupal.behaviors.videoIframes.videoMessages(container, offsiteLink);
25                  frame.after(container);
26                }
27              }
28            }
29          }, 250);
30
31          // Stop waiting for onetrust cookie after 10s and show videos.
32          setTimeout(function () {
33            if (mfpCookieInterval) {
34              clearInterval(mfpCookieInterval);
35              Drupal.behaviors.videoIframes.allowYoutubeVideos();
36            }
37          }, 10000);
38        });
39      });
40
41      // @todo Need once()?
42      let cookieInterval = setInterval(() => {
43        if (window.Cookies.get('OptanonConsent')) {
44          clearInterval(cookieInterval);
45          cookieInterval = null;
46          const onetrust = cookies.get('OptanonConsent');
47          const optanonConsent = new URLSearchParams(onetrust);
48          const groups = optanonConsent.get('groups');
49          if (groups && groups.includes(drupalSettings['lvhn_analytics']['allow_tracking_cookies'] + ':1')) {
50            Drupal.behaviors.videoIframes.allowInstagramVideos();
51            Drupal.behaviors.videoIframes.allowYoutubeVideos();
52          }
53          else {
54            // Instagram
55            let instaEmbeds = document.querySelectorAll('blockquote.instagram-media');
56            let container;
57            for (embed of instaEmbeds) {
58              let offsiteLink = embed.dataset.instgrmPermalink;
59              container = document.createElement("div");
60              container.classList.add('video-messages');
61              Drupal.behaviors.videoIframes.videoMessages(container, offsiteLink);
62              embed.append(container);
63            }
64
65            // Youtube iframes
66            let ytIframes = document.querySelectorAll('iframe[src="about:blank"][data-src*="youtu"],iframe[src="about:blank"][data-src*="matterport"]');
67            for (frame of ytIframes) {
68              container = document.createElement("div");
69              container.classList.add('video-messages');
70              let offsiteLink = frame.dataset.src;
71              Drupal.behaviors.videoIframes.videoMessages(container, offsiteLink);
72              frame.after(container);
73            }
74          }
75        }
76      }, 250);
77
78      // Stop waiting for onetrust cookie after 10s and show videos.
79      setTimeout(function () {
80        if (cookieInterval) {
81          clearInterval(cookieInterval);
82          Drupal.behaviors.videoIframes.allowInstagramVideos();
83          Drupal.behaviors.videoIframes.allowYoutubeVideos();
84        }
85      }, 10000);
86
87
88      const consentInterval = setInterval(() => {
89        // check if loaded
90        if (typeof window?.OneTrust?.OnConsentChanged === "function") {
91          clearInterval(consentInterval);
92          window.OneTrust.OnConsentChanged((event) => {
93            let groupSetting = drupalSettings['lvhn_analytics']['allow_tracking_cookies'];
94            if (groupSetting && event.detail.includes(groupSetting)) {
95              Drupal.behaviors.videoIframes.allowInstagramVideos();
96              let instaEmbeds = document.querySelectorAll('.instagram-media');
97              for (embed of instaEmbeds) {
98                embed.querySelector('.video-redirect-message').style.display = 'none';
99                embed.querySelector('.video-cookie-message').style.display = 'none';
100                embed.querySelector('.video-redirect-message').style.opacity = '0';
101                embed.querySelector('.video-cookie-message').style.opacity = '0';
102              }
103
104              Drupal.behaviors.videoIframes.allowYoutubeVideos();
105            }
106          });
107        }
108      }, 250);
109    },
110
111    allowInstagramVideos: function () {
112      const script = document.createElement('script');
113      script.src = '//www.instagram.com/embed.js';
114      script.type = 'text/javascript';
115      script.async = true;
116      script.defer = true;
117      document.body.appendChild(script);
118    },
119
120    allowYoutubeVideos: function () {
121      let ytIframes = document.querySelectorAll('iframe[src="about:blank"][data-src*="youtu"],iframe[src="about:blank"][data-src*="matterport"]');
122      for (frame of ytIframes) {
123        frame.setAttribute('src', frame.dataset.src);
124        if (frame.nextElementSibling) {
125          frame.nextElementSibling.style.display = 'none';
126        }
127      }
128    },
129
130    videoMessages: function (container, offsiteLink) {
131      let timeout;
132      let blockContent = '<div class="video-cookie-message bg-gray-100 flex flex-col"><p class="body-lg text-gray-900 text-center">'
133        + drupalSettings['lvhn_analytics']['video_message_text_1'] + '</p><p class="body-sm text-gray-700 text-center">'
134        + drupalSettings['lvhn_analytics']['video_message_text_2']
135        + '</p><div class="video-cookie-buttons flex"><button class="ot-settings btn-primary-small">' + Drupal.t('Update cookie preferences')
136        + '</button><a href="' + offsiteLink + '" class="video-redirect btn-secondary-small">' + Drupal.t('Watch video') + '</a></div></div>'
137        + '<div class="video-redirect-message bg-gray-100 flex flex-col"><p class="body-lg text-gray-900 text-center">'
138        + drupalSettings['lvhn_analytics']['redirect_message_text_1'] + '</p><p class="body-sm text-gray-700 text-center">'
139        + drupalSettings['lvhn_analytics']['redirect_message_text_2']
140        + '</p><button class="cancel-redirect btn-secondary-small">' + Drupal.t('Cancel') + '</button></div>';
141      container.innerHTML = blockContent;
142      container.addEventListener('click', (event) => {
143        if (event.target.classList.contains('ot-settings')) {
144          OneTrust.ToggleInfoDisplay();
145        }
146        else if (event.target.classList.contains('video-redirect')) {
147          // Hide cookie text, show redirect text, redirect offsite.
148          event.preventDefault();
149          event.currentTarget.querySelector('.video-cookie-message').style.opacity = '0';
150          event.currentTarget.querySelector('.video-cookie-message').style.display = 'none';
151          event.currentTarget.querySelector('.video-redirect-message').style.display = 'flex';
152          event.currentTarget.querySelector('.video-redirect-message').style.opacity = '1';
153          const href = event.target.getAttribute('href');
154          timeout = setTimeout(function () {
155            window.open(href).focus()
156          }, 3000);
157        }
158        else if (event.target.classList.contains('cancel-redirect')) {
159          // Hide redirect text, show cookie text
160          clearTimeout(timeout);
161          event.currentTarget.querySelector('.video-redirect-message').style.opacity = '0';
162          event.currentTarget.querySelector('.video-redirect-message').style.display = 'none';
163          event.currentTarget.querySelector('.video-cookie-message').style.display = 'flex';
164          event.currentTarget.querySelector('.video-cookie-message').style.opacity = '1';
165        }
166      });
167    },
168
169  }
170})(jQuery, Drupal, window.Cookies, once, drupalSettings);