From bd17a9f596ccf5e2aaad502f5105438e50176c48 Mon Sep 17 00:00:00 2001
From: yuran1811 <trieuvanbd123@gmail.com>
Date: Sat, 6 Jul 2024 21:11:59 +0700
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E2=9C=A8=20enhance=20ui=20with=20d?=
 =?UTF-8?q?ropdown=20and=20youtube-like=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

	new file:   scripts/youtube_downloadVideoUI.css
	modified:   scripts/youtube_downloadVideoUI.js
---
 scripts/youtube_downloadVideoUI.css | 33 ++++++++++++++++++
 scripts/youtube_downloadVideoUI.js  | 52 +++++++++++++++++++++++------
 2 files changed, 75 insertions(+), 10 deletions(-)
 create mode 100644 scripts/youtube_downloadVideoUI.css

diff --git a/scripts/youtube_downloadVideoUI.css b/scripts/youtube_downloadVideoUI.css
new file mode 100644
index 00000000..c3e8a20d
--- /dev/null
+++ b/scripts/youtube_downloadVideoUI.css
@@ -0,0 +1,33 @@
+.ufs-ytDownloadVideoUI__btn {
+  color: #f1f1f1;
+  display: inline-block;
+  padding: 2px 12px;
+  border-radius: 6px;
+  text-decoration: none;
+  font-weight: bold;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ufs-ytDownloadVideoUI__btn:hover {
+  background-color: #333;
+}
+
+.ufs-ytDownloadVideoUI__container {
+  background-color: #272727;
+  z-index: 999;
+  position: absolute;
+  top: 45px;
+  left: 0;
+
+  display: none;
+  flex-flow: column;
+  justify-content: start;
+  align-items: start;
+
+  overflow: hidden auto;
+  width: max-content;
+  max-height: 250px;
+  padding: 8px;
+  border-radius: 12px;
+}
diff --git a/scripts/youtube_downloadVideoUI.js b/scripts/youtube_downloadVideoUI.js
index a9c22a7b..124dec10 100644
--- a/scripts/youtube_downloadVideoUI.js
+++ b/scripts/youtube_downloadVideoUI.js
@@ -1,3 +1,4 @@
+import { UfsGlobal } from './content-scripts/ufs_global.js';
 import { BADGES } from './helpers/badge.js';
 
 export default {
@@ -17,8 +18,8 @@ export default {
       setTimeout(function () {
         // https://stackoverflow.com/a/8260383/11898496
         function getIdFromYoutubeURL(url) {
-          let regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
-          let match = url.match(regExp);
+          const regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
+          const match = url.match(regExp);
           return match && match[1].length == 11 ? match[1] : false;
         }
 
@@ -84,13 +85,18 @@ export default {
 
         const videoUrl = window.location.href;
 
+        const downloadIcon = `
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events:none;display:inherit;width:100%;height:100%;">
+          <path d="M17 18v1H6v-1h11zm-.5-6.6-.7-.7-3.8 3.7V4h-1v10.4l-3.8-3.8-.7.7 5 5 5-4.9z"></path>
+        </svg>`;
+
         const genDownloadLinkFromProvider = (provider, url) =>
           /* html */
-          `<a href="${provider.func(
-            url
-          )}" target="_blank" style="display:inline-block;font-size:16px;padding:8px 12px;background-color:${
-            provider.color
-          };color:white;border-radius:12px;text-decoration:none;font-weight:bold">${provider.name}</a>`;
+          `<a href="${provider.func(url)}" target="_blank" class="ufs-ytDownloadVideoUI__btn">
+            ${provider.name}
+          </a>`;
+
+        injectCss();
 
         let intervalId = setInterval(function () {
           const container = document.querySelector('#above-the-fold #title > h1');
@@ -98,17 +104,43 @@ export default {
 
           clearInterval(intervalId);
 
+          document.addEventListener('click', () => {
+            const el = document.querySelector('#ufs-ytDownloadBtn__container');
+            if (el && el.style.display === 'flex') el.style.display = 'none';
+          });
+
           const links = providers.map((provider) => genDownloadLinkFromProvider(provider, videoUrl));
 
           container.insertAdjacentHTML(
             'afterend',
             /* html */
-            `<div style="display:flex;justify-content:start;align-items:center;flex-wrap:wrap;gap:6px;width:100%;h:max-content">
-            ${links.join('')}
-          </div>`
+            `
+            <button
+              class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading"
+              style="position:relative;margin:6px 0;"
+              onclick="((function(event){event.preventDefault();event.stopPropagation();const el = document.querySelector('#ufs-ytDownloadBtn__container');if (!el) return;el.style.display = el.style.display == 'flex' ? 'none' : 'flex'}))(event)"
+            >
+              <div class="yt-spec-button-shape-next__icon">
+                ${downloadIcon}
+              </div>
+
+              <div class="yt-spec-button-shape-next__button-text-content"><span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">Tải video</span></div>
+
+              <div id="ufs-ytDownloadBtn__container" class="ufs-ytDownloadVideoUI__container">
+                ${links.join('')}
+              </div>
+            </button>`
           );
         }, 500);
       }, 500);
     },
   },
 };
+
+function injectCss(path = '/scripts/youtube_downloadVideoUI.css', id = 'ufs-yt_downloadVideoUI-css') {
+  if (!document.querySelector('#' + id)) {
+    UfsGlobal.Extension.getURL(path).then((url) => {
+      UfsGlobal.DOM.injectCssFile(url, id);
+    });
+  }
+}

From 25890b234a811c206617ea7886247259fb45895b Mon Sep 17 00:00:00 2001
From: yuran1811 <trieuvanbd123@gmail.com>
Date: Sat, 6 Jul 2024 21:54:53 +0700
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=F0=9F=90=9B=20fix=20link=20button?=
 =?UTF-8?q?=20and=20ymp4=20download=20url?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/youtube_downloadVideoUI.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/scripts/youtube_downloadVideoUI.js b/scripts/youtube_downloadVideoUI.js
index 124dec10..e45792c0 100644
--- a/scripts/youtube_downloadVideoUI.js
+++ b/scripts/youtube_downloadVideoUI.js
@@ -74,7 +74,7 @@ export default {
           {
             name: 'ymp4.com',
             color: colors.default,
-            func: (url) => 'https://ymp4.download/en50/?url=' + url,
+            func: (url) => 'https://ymp4.download/?url=' + url,
           },
           {
             name: 'getlinks.vip',
@@ -92,7 +92,11 @@ export default {
 
         const genDownloadLinkFromProvider = (provider, url) =>
           /* html */
-          `<a href="${provider.func(url)}" target="_blank" class="ufs-ytDownloadVideoUI__btn">
+          `<a
+            href="${provider.func(url)}"
+            target="_blank"
+            class="ufs-ytDownloadVideoUI__btn"
+            onclick="((e)=>e.stopPropagation())(event)">
             ${provider.name}
           </a>`;
 
@@ -118,7 +122,7 @@ export default {
             <button
               class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading"
               style="position:relative;margin:6px 0;"
-              onclick="((function(event){event.preventDefault();event.stopPropagation();const el = document.querySelector('#ufs-ytDownloadBtn__container');if (!el) return;el.style.display = el.style.display == 'flex' ? 'none' : 'flex'}))(event)"
+              onclick="((e)=>{e.stopPropagation();const el = document.querySelector('#ufs-ytDownloadBtn__container');if (!el) return;el.style.display = el.style.display == 'flex' ? 'none' : 'flex'})(event)"
             >
               <div class="yt-spec-button-shape-next__icon">
                 ${downloadIcon}