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..e45792c0 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; } @@ -73,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', @@ -84,13 +85,22 @@ export default { const videoUrl = window.location.href; + const downloadIcon = ` + + + `; + const genDownloadLinkFromProvider = (provider, url) => /* html */ - `${provider.name}`; + ` + ${provider.name} + `; + + injectCss(); let intervalId = setInterval(function () { const container = document.querySelector('#above-the-fold #title > h1'); @@ -98,17 +108,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 */ - `
- ${links.join('')} -
` + ` + ` ); }, 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); + }); + } +}