From d8e335a204030b50663b5755770553b9e4a8eb5d Mon Sep 17 00:00:00 2001 From: yungsamd17 Date: Sun, 24 Sep 2023 03:07:01 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7Update=20global.js=20/=20Create=20c?= =?UTF-8?q?lips.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Update Twitch-Screenshot - Added Clip Downloader and created clips.js --- chrome/scripts/clips.js | 104 ++++++++++++ chrome/scripts/global.js | 336 +++++++++++++++++++++++++-------------- 2 files changed, 321 insertions(+), 119 deletions(-) create mode 100644 chrome/scripts/clips.js diff --git a/chrome/scripts/clips.js b/chrome/scripts/clips.js new file mode 100644 index 0000000..1238745 --- /dev/null +++ b/chrome/scripts/clips.js @@ -0,0 +1,104 @@ +// ========================================================= +// ============= TWITCH CLIP DOWNLOADER SCRIPT ============= +// ========================================================= + +// create the button +function createClipDownloadButton() { + const targetClass = '[class*="Layout-sc-1xcs6mc-0"][class*="player-controls__right-control-group"]'; + const targetElement = document.querySelector(targetClass); + if (!targetElement) { + // if target element is not found, remove any existing button + removeClipDownloadButton(); + return; + } + + // check if we are on a clip page + const isClipPage = window.location.href.includes('/clip/') || window.location.href.includes('clips.twitch.tv'); + if (!isClipPage) { + removeClipDownloadButton(); + return; + } + + // check if the button already exists + const existingButton = document.querySelector('.twitchdownload-button'); + if (existingButton) { + return; + } + + // button CSS style + const customStyles = ` + .twitchdownload-button { + background-color: #9147ff; + border: none; + border-radius: 0.4rem; + margin-right: 6px; + padding: 5px 2px 5px 2px; + cursor: pointer; + width: auto; + height: 30px; + display: inline-block; + align-items: center; + } + .twitchdownload-button:hover { + background-color: #772ce8; + } + .twitchdownload-button:active { + background-color: #5c16c5; + } + .twitchdownload-button:focus { + background-color: #5c16c5; + } + .button-text { + color: white; + margin: 0 6px 0 6px; + font-weight: bold; + } + `; + + const styleElement = document.createElement('style'); + styleElement.textContent = customStyles; + document.head.appendChild(styleElement); + // create the button and insert it + const divWrapper = document.createElement('div'); + divWrapper.className = 'twitch-clip-downloader-userscript'; + const button = document.createElement('button'); + const buttonText = document.createElement('span'); + buttonText.textContent = 'Download'; // button Text + button.className = 'twitchdownload-button'; + // button click event listener + button.addEventListener('click', downloadClip); + buttonText.className = 'button-text'; + button.appendChild(buttonText); + divWrapper.appendChild(button); + // insert the div wrapper before the last child + targetElement.insertBefore(divWrapper, targetElement.firstChild); +} + +// function to remove the button +function removeClipDownloadButton() { + const existingButton = document.querySelector('.twitchdownload-button'); + if (existingButton) { + existingButton.remove(); + } +} + +// function to download Twitch clip +function downloadClip() { + const videoElement = document.querySelector('video'); + if (videoElement) { + const videoURL = videoElement.src; + const downloadLink = document.createElement('a'); + downloadLink.href = videoURL; + downloadLink.click(); + } +} + +// MutationObserver to watch for DOM changes +const observer = new MutationObserver(createClipDownloadButton); +const observerOptions = { + childList: true, + subtree: true, +}; +observer.observe(document.body, observerOptions); + +createClipDownloadButton(); \ No newline at end of file diff --git a/chrome/scripts/global.js b/chrome/scripts/global.js index f35ce16..ba38160 100644 --- a/chrome/scripts/global.js +++ b/chrome/scripts/global.js @@ -1,126 +1,224 @@ -(function() { - 'use strict'; - - // Function to capture for copying to clipboard and downloading the screenshot - async function captureScreenshot() { - const videoElement = document.querySelector('video'); - if (videoElement) { - const canvas = document.createElement('canvas'); - canvas.width = videoElement.videoWidth; - canvas.height = videoElement.videoHeight; - const ctx = canvas.getContext('2d'); - ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height); - - const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png')); - - try { - await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]); - console.log("%cTwitch Screenshot:", "color: #9147ff", "Screenshot copied to clipboard."); - } catch (error) { - console.log("%cTwitch Screenshot: Screenshot failed to copy to clipboard!", "color: #ff8080"); - } - - const timestamp = getFormattedTimestamp(); - - const dataURL = canvas.toDataURL('image/png'); - - // Create a temporary anchor element for downloading - const downloadLink = document.createElement('a'); - downloadLink.href = dataURL; - downloadLink.download = `Twitch-Screenshot-${timestamp}.png`; - downloadLink.click(); +// ==================================================== +// ============= TWITCH SCREENSHOT SCRIPT ============= +// ==================================================== + +// create the button +function createScreenshotButton() { + const isClipsPage = window.location.href.includes('/clip/') || window.location.href.includes('clips.twitch.tv'); + if (isClipsPage) { + // remove the button on clips pages + removeScreenshotButton(); + return; + } + const targetClass = '[class*="Layout-sc-1xcs6mc-0"][class*="player-controls__right-control-group"]'; + const targetElement = document.querySelector(targetClass); + if (!targetElement) { + // if target element is not found, remove any existing button + removeScreenshotButton(); + return; + } + // check if the button already exists + const existingButton = document.querySelector('.screenshot-button'); + if (existingButton) { + return; // exit if the button already exists + } + // button CSS style + const customStyles = ` + .screenshot-button { + border: none; + border-radius: 0.4rem; + padding: 2px; + cursor: pointer; + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + } + .screenshot-button:hover { + background-color: rgba(255,255,255,.13); + } + .screenshot-button:active { + background-color: rgba(255,255,255,.16); } + .screenshot-button:focus { + background-color: rgba(255,255,255,.13); + } + `; + const styleElement = document.createElement('style'); + styleElement.textContent = customStyles; + document.head.appendChild(styleElement); + // create the button and add insert it + const divWrapper = document.createElement('div'); + divWrapper.className = 'twitch-screenshot-userscript'; + const button = document.createElement('button'); + button.title = 'Take a screenshot (Alt+S)'; // button hover text + const buttonIcon = ` + + + + `; + button.className = 'screenshot-button'; + // button click event listener + button.addEventListener('click', captureScreenshot); + button.innerHTML = buttonIcon; + divWrapper.appendChild(button); + // insert the div wrapper as the second-to-last child + const children = targetElement.children; + if (children.length >= 2) { + targetElement.insertBefore(divWrapper, children[children.length - 2]); + } else { + targetElement.appendChild(divWrapper); } +} - // Function to get the formatted timestamp in the local time zone - function getFormattedTimestamp() { - const now = new Date(); - const options = { - weekday: 'short', - month: 'short', - day: 'numeric', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - second: '2-digit', - hour12: true, - }; - - return now.toLocaleString('en-US', options) - .replace(/ /g, '-') - .replace(/:/g, '_') - .replace(/,/g, ''); +// function to remove the button +function removeScreenshotButton() { + const existingButton = document.querySelector('.screenshot-button'); + if (existingButton) { + existingButton.remove(); } - - // Function to create and style the button - function createButton() { - - // Create a div wrapper for the button - const divWrapper = document.createElement('div'); - divWrapper.classList.add('twitch-screenshot-userscript'); - - const button = document.createElement('button'); - - // Button hover tooltip - button.title = 'Click to take a screenshot.'; - - // Create a span element for the button text - const buttonText = document.createElement('span'); - buttonText.textContent = 'Screenshot'; - - buttonText.style.color = 'white'; - buttonText.style.margin = '0 6px 0 6px'; - buttonText.style.fontWeight = 'bold'; - - button.appendChild(buttonText); - - // Button style - button.style.backgroundColor = '#9147ff'; - button.style.border = 'none'; - button.style.borderRadius = '5px'; - button.style.margin = '0 6px 0 6px'; - button.style.padding = '5px 2px 5px 2px' - button.style.cursor = 'pointer'; - button.style.width = 'auto'; - button.style.display = 'flex'; - button.style.alignItems = 'center'; - - // Button hover - button.addEventListener('mouseenter', function() { - button.style.backgroundColor = '#772ce8'; - }); - - button.addEventListener('mouseleave', function() { - button.style.backgroundColor = '#9147ff'; - }); - - button.addEventListener('mousedown', function() { - button.style.backgroundColor = '#5c16c5'; - }); - - button.addEventListener('mouseup', function() { - button.style.backgroundColor = '#772ce8'; - }); - - // Click event listener on the button - button.addEventListener('click', captureScreenshot); - - // Append the button to the div wrapper - divWrapper.appendChild(button); - - // Find the element with class - const targetClass = '[class*="Layout-sc-1xcs6mc-0"][class*="player-controls__right-control-group"]'; - const targetElement = document.querySelector(targetClass); - - if (targetElement) { - // Insert the div wrapper as the first child of the target element - targetElement.insertBefore(divWrapper, targetElement.firstChild); - console.log("%cSam's Twitch Addons:", "color: #9147ff", "Global script enabled."); - } else { - console.log("%cSam's Twitch Addons: [Global script] - Screenshot Button: Target element not found!", "color: #ff8080"); +} + +// capture and copy/download a screenshot +async function captureScreenshot() { + const videoElement = document.querySelector('video'); + if (videoElement) { + const canvas = document.createElement('canvas'); + canvas.width = videoElement.videoWidth; + canvas.height = videoElement.videoHeight; + const ctx = canvas.getContext('2d'); + ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height); + const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png')); + try { + await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]); + console.log("%cTwitch Screenshot:", "color: #9147ff", "Screenshot copied to clipboard."); + } catch (error) { + console.log("%cTwitch Screenshot: Screenshot failed to copy to clipboard!", "color: #ff8080"); } + const dataURL = canvas.toDataURL('image/png'); + const downloadLink = document.createElement('a'); + downloadLink.href = dataURL; + downloadLink.download = `Twitch-Screenshot.png`; + downloadLink.click(); } +} - // Wait for the page load, then create the button - window.addEventListener('load', createButton); -})(); +// event listener for Alt + S screenshot shortcut +window.addEventListener('keydown', function(event) { + if (event.altKey && event.key === 's' || event.key === 'S') { + captureScreenshot(); + } +}); + +// MutationObserver to watch for DOM changes +const observer1 = new MutationObserver(createScreenshotButton); +const observer1Options = { + childList: true, + subtree: true, +}; + +observer1.observe(document.body, observer1Options); + + +// ========================================================= +// ============= TWITCH CLIP DOWNLOADER SCRIPT ============= +// ========================================================= + +// create the button +function createClipDownloadButton() { + const targetClass = '[class*="Layout-sc-1xcs6mc-0"][class*="player-controls__right-control-group"]'; + const targetElement = document.querySelector(targetClass); + if (!targetElement) { + // if target element is not found, remove any existing button + removeClipDownloadButton(); + return; + } + // check if we are on a clip page + const isClipPage = window.location.href.includes('/clip/') || window.location.href.includes('clips.twitch.tv'); + if (!isClipPage) { + removeClipDownloadButton(); + return; + } + // check if the button already exists + const existingButton = document.querySelector('.twitchdownload-button'); + if (existingButton) { + return; + } + // button CSS style + const customStyles = ` + .twitchdownload-button { + background-color: #9147ff; + border: none; + border-radius: 0.4rem; + margin-right: 6px; + padding: 5px 2px 5px 2px; + cursor: pointer; + width: auto; + height: 30px; + display: inline-block; + align-items: center; + } + .twitchdownload-button:hover { + background-color: #772ce8; + } + .twitchdownload-button:active { + background-color: #5c16c5; + } + .twitchdownload-button:focus { + background-color: #5c16c5; + } + .button-text { + color: white; + margin: 0 6px 0 6px; + font-weight: bold; + } + `; + const styleElement = document.createElement('style'); + styleElement.textContent = customStyles; + document.head.appendChild(styleElement); + // create the button and insert it + const divWrapper = document.createElement('div'); + divWrapper.className = 'twitch-clip-downloader-userscript'; + const button = document.createElement('button'); + const buttonText = document.createElement('span'); + buttonText.textContent = 'Download'; // button Text + button.className = 'twitchdownload-button'; + // button click event listener + button.addEventListener('click', downloadClip); + buttonText.className = 'button-text'; + button.appendChild(buttonText); + divWrapper.appendChild(button); + // insert the div wrapper before the last child + targetElement.insertBefore(divWrapper, targetElement.firstChild); +} + +// function to remove the button +function removeClipDownloadButton() { + const existingButton = document.querySelector('.twitchdownload-button'); + if (existingButton) { + existingButton.remove(); + } +} + +// function to download Twitch clip +function downloadClip() { + const videoElement = document.querySelector('video'); + if (videoElement) { + const videoURL = videoElement.src; + const downloadLink = document.createElement('a'); + downloadLink.href = videoURL; + downloadLink.click(); + } +} + +// MutationObserver to watch for DOM changes +const observer2 = new MutationObserver(createClipDownloadButton); +const observer2Options = { + childList: true, + subtree: true, +}; +observer2.observe(document.body, observer2Options); + +createScreenshotButton(); +createClipDownloadButton();