Youtube Click To Load - UI Implementation (#1433)

* POC Youtube CTL

* Implement YouTube CTL Dialog with Previews toggle

* Implement YouTube CTL Preview Placeholder UI

* Update modal UI for both Facebook CTL and YouTube CTL.

* Fix typos in options.json

* Update styles for "Enable YouTube Previews" in options page

* Fix styles for centering modal and cursor for preview title

* Add Share Feedback element to CTL blocked dialog and YT Preview placeholder

* Enable YT CTL integration tests again

* Clean up click-to-load.js and add more comments to funcitons

* Lint code

* Comment out YT Preview option while feature is not released

* Show "Share Feedback" link only with YT CTL enabled

* Clean up and code improvements to message-handlers.js

* Clean up sendAllTabsMessage()

* Size YT placeholder according to original element size

* Clean up YT CTL code and add more comments

* Update YouTube CTL integration test configuration

* Rollback YT CTL feature flag

* Change hideTrackingElement to true for YT block dialog

* Only build YT placeholders according to active setting

* Fix getCloseIcon path

* Remove social_ctp_configuration.json

* Update ClickToLoadConfig to use external resource

Co-authored-by: francielefaccin <franfaccin@duck.com>

integration-test/data/configs/click-to-load-youtube.json

@@ -37,10 +37,19 @@
                 ],
                 "replaceSettings": {
                     "type": "youtube-video",
-                    "buttonText": "Unblock Video",
-                    "infoTitle": "DuckDuckGo blocked this video to prevent YouTube from tracking you",
-                    "infoText": "We blocked YouTube from tracking you when the page loaded. If you unblock this Video, YouTube will know your activity.",
-                    "simpleInfoText": "We blocked YouTube from tracking you when the page loaded. If you unblock this Video, YouTube will know your activity."
+                    "buttonText": "Unblock video",
+                    "infoTitle": "DuckDuckGo blocked this YouTube video to prevent Google from tracking you",
+                    "infoText": "We blocked Google (which owns YouTube) from tracking you when the page loaded. If you unblock this video, Google will know your activity.",
+                    "simpleInfoText": "We blocked Google (which owns YouTube) from tracking you when the page loaded. If you unblock this video, Google will know your activity.",
+                    "previewToggleText": "Previews disabled for additional privacy",
+                    "placeholder": {
+                        "previewToggleEnabledText": "Previews enabled",
+                        "previewInfoText": "Turn previews off for additional privacy from DuckDuckGo.",
+                        "videoPlayIcon": {
+                            "lightMode": "video_play_light.svg",
+                            "darkMode": "video_play_dark.svg"
+                        }
+                    }     
                 },
                 "clickAction": {
                     "type": "youtube-video"
@@ -58,7 +67,13 @@
                 }
             }
         },
-        "informationalModal": {},
+        "informationalModal": {
+            "icon": "blocked_youtube_video.svg",
+            "messageTitle": "Enable YouTube previews and reduce privacy?",
+            "messageBody": "Showing previews will allow Google (which owns YouTube) to see some of your device’s information, but is still more private than playing the video.",
+            "confirmButtonText": "Enable Previews",
+            "rejectButtonText": "No Thanks"
+        },
         "surrogates": [
             {
                 "rule": "(www.)?youtube(-nocookie)?.com/iframe_api",

shared/data/defaultSettings.js

@@ -2,6 +2,7 @@ module.exports = {
     httpsEverywhereEnabled: true,
     embeddedTweetsEnabled: false,
     GPC: true,
+    youtubePreviewsEnabled: false,
     atb: null,
     set_atb: null,
     'config-etag': null,

shared/js/background/message-handlers.js

@@ -126,6 +126,34 @@ export async function initClickToLoad (unused, sender) {
     return config
 }
 
+export async function getYouTubeVideoDetails (videoURL) {
+    const endpointURL = new URL('https://www.youtube.com/oembed?format=json')
+    const parsedVideoURL = new URL(videoURL)
+
+    const playlistID = parsedVideoURL.searchParams.get('list')
+    const videoId = parsedVideoURL.pathname.split('/').pop()
+
+    if (playlistID) {
+        parsedVideoURL.hostname = endpointURL.hostname
+        endpointURL.searchParams.set('url', parsedVideoURL.href)
+    } else {
+        endpointURL.searchParams.set('url', 'https://youtu.be/' + videoId)
+    }
+
+    try {
+        const youTubeVideoResponse = await fetch(
+            endpointURL.href, {
+                referrerPolicy: 'no-referrer',
+                credentials: 'omit'
+            }
+        ).then(response => response.json())
+        const { title, thumbnail_url: previewImage } = youTubeVideoResponse
+        return { status: 'success', title, previewImage }
+    } catch (e) {
+        return { status: 'failed' }
+    }
+}
+
 export function getLoadingImage (theme) {
     if (theme === 'dark') {
         return utils.imgToData('img/social/loading_dark.svg')
@@ -146,6 +174,10 @@ export function getLogo () {
     return utils.imgToData('img/social/dax.png')
 }
 
+export function getCloseIcon () {
+    return getImage('close.svg')
+}
+
 export function getCurrentTab () {
     return utils.getCurrentTab()
 }
@@ -186,6 +218,7 @@ export async function enableSocialTracker (data, sender) {
 export async function updateSetting ({ name, value }) {
     await settings.ready()
     settings.updateSetting(name, value)
+    utils.sendAllTabsMessage({ messageType: `ddg-settings-${name}`, value })
 }
 
 export async function getSetting ({ name }) {

shared/js/background/utils.es6.js

@@ -38,6 +38,16 @@ export async function sendTabMessage (id, message, details) {
     }
 }
 
+export async function sendAllTabsMessage (message, details) {
+    try {
+        for (const { id: tabId } of await browser.tabs.query({})) {
+            sendTabMessage(tabId, message, details)
+        }
+    } catch {
+        // Ignore errors
+    }
+}
+
 /**
  * @param {string} urlString
  * @returns {string | null} etld plus one of the URL