diff --git a/popup.html b/popup.html index cdc5d4a..777bb85 100644 --- a/popup.html +++ b/popup.html @@ -1,174 +1,175 @@ - + - - -
+ + +
-
- - - -
+
+ + + +
-
- - - -
+
+ + + +
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrevYou
-
-
-
- - -
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrevYou
+
+
+
+ + +
-
- - -
-
+
+ + +
+
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Preview -
-
-

Produced with ♥️ by BenjaminCode. Design by BastiUi

-
- -
- - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Preview +
+
+

Produced with ♥️ by BenjaminCode. Design by BastiUi

+
+ +
+ + diff --git a/popup.js b/popup.js index c8a38c6..f68efc3 100644 --- a/popup.js +++ b/popup.js @@ -6,6 +6,7 @@ const titleInput = document.querySelector('.js-title-input') const channelThumbnailInput = document.querySelector('.js-channel-thumbnail-input') const channelNameInput = document.querySelector('.js-channel-name-input') const randomButton = document.querySelector('#random') +const thumbnailVideoDropzone = document.querySelector('.py-label-video-thumbnail') const thumbnailInput = document.querySelector('.js-thumbnail-input') const errorMessageSpan = document.querySelector('#extErrorMessage') const darkModeBtn = document.querySelector('.js-darkmode-btn') @@ -20,53 +21,67 @@ const eyesPupils = document.querySelectorAll('.js-animated-eyes') // Once the page is loaded, check if the Dark Mode is activated with a function that // returns 'on' or null depending on the existence of a 'darkMode' key on LocalStorage -window.onload = () =>{ - if ( isDarkModeOn() == 'on' ){ +window.onload = () => { + if (isDarkModeOn() == 'on') { setTimeout(darkMode, 300) } -} +} -darkModeBtn.addEventListener( 'click', () => { - if ( isDarkModeOn() == null ) { +darkModeBtn.addEventListener('click', () => { + if (isDarkModeOn() == null) { darkMode() - localStorage.setItem( 'darkMode', 'on' ) + localStorage.setItem('darkMode', 'on') } else { lightMode() - localStorage.removeItem( 'darkMode' ) + localStorage.removeItem('darkMode') } }) // Function that checks the existence of the key 'darkMode' on LocalStorage -function isDarkModeOn(){ - return localStorage.getItem( 'darkMode' ) ? 'on' : null +function isDarkModeOn() { + return localStorage.getItem('darkMode') ? 'on' : null } -function darkMode(){ - darkModeBtn.innerHTML = +function darkMode() { + darkModeBtn.innerHTML = '' - +'' - +'' - - let styleToChange = { bg : '#161827', btnBg : '#1C1F30', headerColor : '#FFFFFF', formText : '#FFFFFF', btnColor : '#24008C', btnBorder : '#6116FF' } + + '' + + '' + + let styleToChange = { + bg: '#161827', + btnBg: '#1C1F30', + headerColor: '#FFFFFF', + formText: '#FFFFFF', + btnColor: '#24008C', + btnBorder: '#6116FF' + } - switchProperties( styleToChange ) + switchProperties(styleToChange) } -function lightMode(){ - darkModeBtn.innerHTML = +function lightMode() { + darkModeBtn.innerHTML = '' - +'' - +'' - - let styleToChange = { bg : '#FFFFFF', btnBg : '#F8F5FF', headerColor : '#000000', formText : '#000000', btnColor : '#6116FF', btnBorder : '#24008C' } + + '' + + '' + + let styleToChange = { + bg: '#FFFFFF', + btnBg: '#F8F5FF', + headerColor: '#000000', + formText: '#000000', + btnColor: '#6116FF', + btnBorder: '#24008C' + } - switchProperties( styleToChange ) + switchProperties(styleToChange) } -function switchProperties(properties){ - for ( let el in properties ){ - root.style.setProperty( '--'+el, properties[el] ) +function switchProperties(properties) { + for (let el in properties) { + root.style.setProperty('--' + el, properties[el]) } } @@ -92,13 +107,13 @@ function initInputs() { channelNameInput.value = storedThumbnail.channelName || null videoThumbnail = storedThumbnail.thumbnail - if(videoThumbnail) { + if (videoThumbnail) { previewVideo.src = videoThumbnail thumbnailInput.classList.add('loaded') } channelThumbnailBase64 = storedThumbnail.channelThumbnail - if(channelThumbnailBase64) { + if (channelThumbnailBase64) { preview.src = channelThumbnailBase64 channelThumbnailInput.classList.add('loaded') } @@ -113,7 +128,7 @@ randomButton.addEventListener('change', (e) => { const isChecked = e.target.checked if (isChecked) { e.target.parentNode.parentNode.classList.add('active') - }else { + } else { e.target.parentNode.parentNode.classList.remove('active') } }) @@ -126,7 +141,7 @@ async function launchScript(shuffle = false) { let [tab] = await chrome.tabs.query({active: true, currentWindow: true}) // If the user is on another site than YT if (tab === undefined || !tab.url.startsWith('https://www.youtube.com/')) { - chrome.storage.local.set({ errorMessage: 'You need to be on the Youtube homepage !' }) + chrome.storage.local.set({errorMessage: 'You need to be on the Youtube homepage !'}) return } @@ -174,6 +189,31 @@ thumbnailInput.addEventListener('change', () => { } }) +thumbnailVideoDropzone.addEventListener('dragover', (e) => { + e.preventDefault() +}) + +thumbnailVideoDropzone.addEventListener('drop', (e) => { + e.preventDefault() + + if (e.dataTransfer.items.length) { + const file = e.dataTransfer.items[0].getAsFile() + const reader = new FileReader() + const dtFile = new DataTransfer() + dtFile.items.add(file) + thumbnailInput.files = dtFile.files + + reader.addEventListener('load', function () { + // Convert image file to base64 string + videoThumbnail = reader.result + previewVideo.src = reader.result + thumbnailInput.classList.add('loaded') + }, false) + + reader.readAsDataURL(file) + } +}) + channelThumbnailInput.addEventListener('change', () => { const file = channelThumbnailInput.files[0] const reader = new FileReader() @@ -200,13 +240,13 @@ function findCard() { const activeScreen = document.querySelector('[role="main"]') // Target only ytd-rich-item-renderer element and not ytd-rich-item-renderer with id content for the main page let cards = activeScreen.querySelectorAll('.ytd-rich-item-renderer:not(#content)') - if(cards.length === 0) { + if (cards.length === 0) { cards = activeScreen.getElementsByTagName('ytd-grid-video-renderer') } chrome.storage.local.get('thumbnailProperties', (result) => { - if(result.thumbnailProperties.shuffle) { + if (result.thumbnailProperties.shuffle) { const min = 1 const max = 12 cardPositionIndex = Math.floor(Math.random() * (max - min + 1)) + min @@ -267,58 +307,58 @@ function refreshApp() { // First, we find the eyes's positions and their center : let eyeCoord = headerEye.getBoundingClientRect() -let centerOfEyeX = Math.round(( ( eyeCoord.right - eyeCoord.left ) / 2 ) + eyeCoord.left) -let centerOfEyeY = Math.round(( ( eyeCoord.bottom - eyeCoord.top ) / 2 ) + eyeCoord.top) +let centerOfEyeX = Math.round(((eyeCoord.right - eyeCoord.left) / 2) + eyeCoord.left) +let centerOfEyeY = Math.round(((eyeCoord.bottom - eyeCoord.top) / 2) + eyeCoord.top) // On mousemove, we locate the mouse position and compare its X & Y coordinates to the eyes's center. // let=eyeDirection indicates the eyes's direction with cardinal directions -document.addEventListener('mousemove', (e) =>{ +document.addEventListener('mousemove', (e) => { let mouseX = e.clientX let mouseY = e.clientY let eyeDirection eyeDirection = mouseY < centerOfEyeY ? 'N' : 'S' eyeDirection += mouseX < centerOfEyeX ? 'W' : 'E' - - if ( approx ( mouseX, centerOfEyeX ) ){ - eyeDirection = mouseY > centerOfEyeY ? 'S' : 'N' + + if (approx(mouseX, centerOfEyeX)) { + eyeDirection = mouseY > centerOfEyeY ? 'S' : 'N' } - - if ( approx ( mouseY, centerOfEyeY ) ){ + + if (approx(mouseY, centerOfEyeY)) { eyeDirection = mouseX > centerOfEyeX ? 'E' : 'W' } - if ( approx ( mouseY, centerOfEyeY ) && approx ( mouseX, centerOfEyeX )){ + if (approx(mouseY, centerOfEyeY) && approx(mouseX, centerOfEyeX)) { eyeDirection = 'C' } // Cardinal directions are calculated on an approximative direction ( eyes's center +/- 10px ) - function approx(nbToCompare, nbToApprox){ - return ( nbToApprox-10 < nbToCompare && nbToCompare < nbToApprox + 10) + function approx(nbToCompare, nbToApprox) { + return (nbToApprox - 10 < nbToCompare && nbToCompare < nbToApprox + 10) } - function wichDirection(dir){ + function wichDirection(dir) { let direction = { - 'N' : '(2px, -5px)', - 'NE' : '(4px, -4px)', - 'E' : '(5px, 0px)', - 'SE' : '(4px, 4px)', - 'S' : '(2px, 5px)', - 'SW' : '(0px, 4px)', - 'W' : '(0px, 0px)', - 'NW' : '(0px, -4px)', - 'C' : '(2px, 0px)', + 'N': '(2px, -5px)', + 'NE': '(4px, -4px)', + 'E': '(5px, 0px)', + 'SE': '(4px, 4px)', + 'S': '(2px, 5px)', + 'SW': '(0px, 4px)', + 'W': '(0px, 0px)', + 'NW': '(0px, -4px)', + 'C': '(2px, 0px)', } return direction[dir] } - function setPupilsDirection(dir){ - for (let pupils of eyesPupils){ - pupils.style.setProperty('transform', 'translate'+(dir)) - + function setPupilsDirection(dir) { + for (let pupils of eyesPupils) { + pupils.style.setProperty('transform', 'translate' + (dir)) + } }