sallbet/pixelplanet-fork
1
Fork 1
forked from ppfun/pixelplanet
Code Pull Requests Activity

make video visible in christmas button

Browse Source
This commit is contained in:
HF 2023-12-21 21:28:34 +01:00
parent 464d72ceed
commit 1411dbf39d
1 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/ChristmasButton.jsx
View File

@ -9,12 +9,19 @@ import { GiPineTree } from 'react-icons/gi';
import SnowStorm from '../ui/snow'; import SnowStorm from '../ui/snow';
const videoIds = [ const videoIds = [
'MU5jBhx0Tts', 'cHtjXowWhVg', // last christmas
'cHtjXowWhVg', 'kLUKXX0sfII', // snowy
'0qK_E5C1Zi8', 'nhiNuN1OI6A', // cherry box
'cHtjXowWhVg', 'iTgcp1oDk2M', // red velvet vs. aespa
'kLUKXX0sfII', 'AZ2Oemlyuo4', // apink
'nhiNuN1OI6A', '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); const snowStorm = new SnowStorm(window, document);
@ -24,8 +31,24 @@ const ChristmasButton = () => {
const prot = window.location.protocol; const prot = window.location.protocol;
const video = videoIds[Math.floor(Math.random() * videoIds.length)]; 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`; 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 ( return (
<div <div
id="christmasbutton" id="christmasbutton"
@ -36,20 +59,14 @@ const ChristmasButton = () => {
setPlaying(!playing); setPlaying(!playing);
snowStorm.toggleSnow(); snowStorm.toggleSnow();
}} }}
style={{ style={style}
boxShadow: (playing)
? '0 0 9px 6px rgba(0, 189, 47, 0.8)'
: '0 0 9px 6px rgba(189, 0, 0, 0.8)',
}}
> >
<GiPineTree /> {(playing) ? <embed
{(playing) && ( style={{ margin: 10 }}
<embed width="320"
height="0" height="180"
width="0"
src={url} src={url}
/> /> : <GiPineTree />}
)}
</div> </div>
); );
}; };