update

Author: HoangTran0410

popup/styles/style.css

@@ -351,6 +351,8 @@ a:hover {
     height: 100vh;
     background-color: rgb(0, 0, 0);
     background-color: rgba(0, 0, 0, 0.4);
+    -webkit-backdrop-filter: blur(.1rem);
+    backdrop-filter: blur(.1rem);
 }
 
 .modal-content {
@@ -396,6 +398,8 @@ a:hover {
     right: 0;
     bottom: 0;
     background: #e8e8e8db;
+    -webkit-backdrop-filter: blur(.1rem);
+    backdrop-filter: blur(.1rem);
 }
 
 .loading-container {

popup/tabs.js

@@ -200,6 +200,7 @@ const tabs = [
     scripts: [
       s.shortenURL,
       s.unshorten,
+      s.changeAudioOutput,
       createTitle("--- QRCode ---", "--- QRCode ---"),
       s.textToQRCode,
       s.webToQRCode,

scripts/changeAudioOutput.js

@@ -0,0 +1,124 @@
+export default {
+  icon: "",
+  name: {
+    en: "",
+    vi: "",
+  },
+  description: {
+    en: "",
+    vi: "",
+  },
+
+  // Fb Post: https://www.facebook.com/groups/j2team.community/posts/1362716140727169
+  // Source: https://gist.github.com/monokaijs/44ef4bd0770f83272b83c038a2769c90
+  onClick: async () => {
+    await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+    let popupParent = document.createElement("div");
+    /* positioning for the dialog */
+    popupParent.style.width = "320px";
+    popupParent.style.height = "120px";
+    popupParent.style.position = "fixed";
+    popupParent.style.left = "50%";
+    popupParent.style.top = "50%";
+    popupParent.style.marginLeft = "-160px";
+    popupParent.style.marginTop = "-60px";
+    /* stylizing the dialog */
+    popupParent.style.backgroundColor = "#fff";
+    popupParent.style.border = "1px solid rgba(0, 0, 0, .08)";
+    popupParent.style.zIndex = "999999";
+
+    /* navigation bar */
+    let navbar = document.createElement("div");
+    navbar.style.width = "100%";
+    navbar.style.height = "28px";
+    navbar.style.backgroundColor = "rgba(0, 0, 0, .05)";
+
+    let closeButton = document.createElement("button");
+    closeButton.innerText = "Close";
+    closeButton.style.padding = "6px 8px";
+    closeButton.style.backgroundColor = "transparent";
+    closeButton.style.color = "black";
+    closeButton.style.position = "absolute";
+    closeButton.style.right = "0";
+    closeButton.style.top = "0";
+    closeButton.style.border = "none";
+
+    navbar.appendChild(closeButton);
+
+    closeButton.onclick = function (e) {
+      popupParent.parentNode.removeChild(popupParent);
+    };
+    closeButton.onmouseover = function (e) {
+      e.target.style.backgroundColor = "#e74c3c";
+      e.target.style.color = "white";
+    };
+    closeButton.onmouseleave = function (e) {
+      e.target.style.backgroundColor = "transparent";
+      e.target.style.color = "black";
+    };
+
+    /* PLEASE DO NOT REMOVE CREDIT LINE */
+    let popupTitle = document.createElement("div");
+    popupTitle.innerHTML =
+      "SoundSwitcher - by <a href='https://north.studio' target='_blank'>NorthStudio</a>";
+    popupTitle.style.fontSize = "12px";
+    popupTitle.style.position = "absolute";
+    popupTitle.style.left = "6px";
+    popupTitle.style.top = "8px";
+    navbar.appendChild(popupTitle);
+
+    let titleLink = popupTitle.querySelector("a");
+    titleLink.style.fontWeight = "500";
+    titleLink.style.textDecoration = "none";
+
+    let popupContent = document.createElement("div");
+    popupContent.style.height = "92px";
+    popupContent.style.display = "relative";
+    popupContent.style.width = "100%";
+
+    let bottomArea = document.createElement("div");
+    bottomArea.style.position = "absolute";
+    bottomArea.style.left = "10px";
+    bottomArea.style.right = "10px";
+    bottomArea.style.bottom = "10px";
+
+    let submitButton = document.createElement("button");
+    submitButton.style.backgroundColor = "#3498db";
+    submitButton.style.color = "#FFF";
+    submitButton.style.width = "100%";
+    submitButton.style.padding = "6px";
+    submitButton.style.border = "none";
+    submitButton.style.borderRadius = "3px";
+    submitButton.innerText = "Set Device";
+
+    submitButton.onclick = function (e) {
+      document.querySelectorAll("audio,video").forEach((el) => {
+        el.setSinkId(deviceSelector.value);
+      });
+    };
+
+    bottomArea.appendChild(submitButton);
+
+    let deviceSelector = document.createElement("select");
+    navigator.mediaDevices.enumerateDevices().then((devices) => {
+      devices = devices.filter((x) => x.kind === "audiooutput");
+      devices.forEach((device) => {
+        let choice = document.createElement("option");
+        choice.innerText = device.label;
+        choice.value = device.deviceId;
+        deviceSelector.appendChild(choice);
+      });
+      popupContent.appendChild(deviceSelector);
+    });
+
+    deviceSelector.style.margin = "10px";
+    deviceSelector.style.padding = "5px";
+    deviceSelector.style.width = "calc(100% - 20px)";
+
+    popupContent.appendChild(bottomArea);
+
+    popupParent.appendChild(navbar);
+    popupParent.appendChild(popupContent);
+    document.body.appendChild(popupParent);
+  },
+};

scripts/fb_moreReactionStory.js

@@ -25,7 +25,7 @@ export default {
 
         loadModal(EMOJI_LIST);
       } catch (e) {
-        console.error(e);
+        alert("ERROR: " + e);
       }
     })();
 

scripts/index.js

@@ -161,6 +161,7 @@ import fb_revealDeletedMessages from "./fb_revealDeletedMessages.js";
 import fb_whoIsTyping from "./fb_whoIsTyping.js";
 import detect_zeroWidthCharacters from "./detect_zeroWidthCharacters.js";
 import fb_moreReactionStory from "./fb_moreReactionStory.js";
+import changeAudioOutput from "./changeAudioOutput.js";
 
 // inject badges
 const allScripts = {
@@ -343,6 +344,7 @@ const allScripts = {
   fb_whoIsTyping: addBadge(fb_whoIsTyping, BADGES.new),
   detect_zeroWidthCharacters: addBadge(detect_zeroWidthCharacters, BADGES.new),
   fb_moreReactionStory: addBadge(fb_moreReactionStory, BADGES.new),
+  changeAudioOutput: addBadge(changeAudioOutput, BADGES.new),
 };
 
 // alert(Object.keys(allScripts).length);