diff --git a/src/components/ChristmasButton.jsx b/src/components/ChristmasButton.jsx index e486e754..c2a0afed 100644 --- a/src/components/ChristmasButton.jsx +++ b/src/components/ChristmasButton.jsx @@ -9,12 +9,19 @@ import { GiPineTree } from 'react-icons/gi'; import SnowStorm from '../ui/snow'; const videoIds = [ - 'MU5jBhx0Tts', - 'cHtjXowWhVg', - '0qK_E5C1Zi8', - 'cHtjXowWhVg', - 'kLUKXX0sfII', - 'nhiNuN1OI6A', + 'cHtjXowWhVg', // last christmas + 'kLUKXX0sfII', // snowy + 'nhiNuN1OI6A', // cherry box + 'iTgcp1oDk2M', // red velvet vs. aespa + 'AZ2Oemlyuo4', // apink + 'o21QhCZZQJA', // weeekly + 'NtIHncxKSRM', // lightsum + 's4m6QM2mokI', // dont speak everglow + 'Gq7UubHYoag', // pinkfantasy + '_6DyJqVYSaU', // hot issue + '8A2t_tAjMz8', // knock knock twice + 'SIh8IwlDrMU', // TT live + 'w6gbPWJPXUI', // bopeep ]; const snowStorm = new SnowStorm(window, document); @@ -24,8 +31,24 @@ const ChristmasButton = () => { const prot = window.location.protocol; const video = videoIds[Math.floor(Math.random() * videoIds.length)]; + // eslint-disable-next-line no-console + console.log('chose', video); const url = `${prot}//www.youtube.com/embed/${video}?autoplay=1&loop=1`; + let style; + if (playing) { + style = { + boxShadow: '0 0 9px 6px rgba(0, 189, 47, 0.8)', + width: 'initial', + height: 'initial', + lineHeight: 0, + }; + } else { + style = { + boxShadow: '0 0 9px 6px rgba(189, 0, 0, 0.8)', + }; + } + return (
{ setPlaying(!playing); snowStorm.toggleSnow(); }} - style={{ - boxShadow: (playing) - ? '0 0 9px 6px rgba(0, 189, 47, 0.8)' - : '0 0 9px 6px rgba(189, 0, 0, 0.8)', - }} + style={style} > - - {(playing) && ( - - )} + /> : }
); };