react-icons/go#GoMute JavaScript Examples

The following examples show how to use react-icons/go#GoMute. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Previewimage.js    From SauceKudasai with MIT License 5 votes vote down vote up 
Previewimage = ({ open }) => {
	const ctx = useContext(Context);
	const { image, url, loading, video } = ctx;
	const [preview, setpreview] = useState(null);
	const [mute, setmute] = useState(true);
	const mutehandler = () => {
		setmute(prevstate => !prevstate);
	};
	// This is use to set preview to the image selected by the user
	useEffect(() => {
		if (image) return setpreview(URL.createObjectURL(image));
		setmute(true);
	}, [image]);

	// This is use to set preview to the url selected by the user
	useEffect(() => {
		if (url) setpreview(url);
		setmute(true);
	}, [url]);

	return (
		/* This code Checks first if the the video Exits
			If the video exits the video tag is set to the video
			If the video doesnot exits then it checks if the loading exits
			If loading exits then loading is rendered on the screen otherwise
			preview is rendered */
		<>
			{video === null ? (
				loading ? (
					<>
						<Loadingimg src={preview} alt="Loading..." />
						<Loader />
					</>
				) : preview ? (
					<Image src={preview} alt="Your Search image" onClick={e => e.stopPropagation()} />
				) : (
					<Uploadinfo open={open} />
				)
			) : (
				<>
					<Video autoPlay loop muted={mute} src={video}></Video>
					<Mutebtn onClick={mutehandler}>
						{mute ? (
							<IconContext.Provider value={{ size: '1.3rem', color: '#d9d9f9' }}>
								<GoMute></GoMute>
							</IconContext.Provider>
						) : (
							<IconContext.Provider value={{ size: '1.3rem', color: '#d9d9f9' }}>
								<GoUnmute></GoUnmute>
							</IconContext.Provider>
						)}
					</Mutebtn>
				</>
			)}
		</>
	);
}
Example #2
Source File: Soundscapes.js    From fokus with GNU General Public License v3.0 5 votes vote down vote up 
export function Soundscapes() {
    const soundscape = useSelector((s) => s.tasks.soundscape);
    const dispatch = useDispatch();

    const [soundscapeAudioElement, setSoundscapeAudioElement] = useState(() => generateAudioElement(soundscape.track, soundscape.volume));

    // ---- danger zone: don't change without full surety , this code is prone to issues ---///

    useEffect(() => {
        soundscapeAudioElement.src = soundscape.track !== "mute" ? soundOptions[soundscape.track].src : muteOption.src;
        return () => soundscapeAudioElement.pause();
    }, [soundscape.track, soundscapeAudioElement, soundscape.isPlaying]);

    soundscapeAudioElement.volume = soundscape.volume;
    soundscapeAudioElement.addEventListener("canplay", () => {
        if (soundscape.isPlaying) {
            soundscapeAudioElement.play();
        } else {
            soundscapeAudioElement.pause();
        }
    });

    // ---- danger zone: this might be due to my lack of knowledge of useEffect or weird Audio element behaviour ---///

    function isSelectedSound(track) {
        return soundscape.track === track;
    }

    return (
        <SoundscapesContainer>
            <SoundscapesDiv>
                <SoundscapesHeader>
                    <p>Soundscapes</p>
                    {soundscape.track === "mute" ? <GoMute id="muted" /> : <GoUnmute id="unmuted" onClick={() => dispatch(changeSoundscapeTrack("mute"))} />}
                </SoundscapesHeader>
                <SoundOptionsDiv>
                    {Object.keys(soundOptions).map((i) => (
                        <SoundOptionsInput key={i} onClick={() => dispatch(changeSoundscapeTrack(i))} isSelectedSound={isSelectedSound(i)}>
                            <img src={soundOptions[i].img} alt={i} />
                            <span>{soundOptions[i].label}</span>
                        </SoundOptionsInput>
                    ))}
                </SoundOptionsDiv>
            </SoundscapesDiv>
            <SoundVolumeControl>
                <MusicVolumeControl isDisabled={soundscape.track==="mute"}/>
            </SoundVolumeControl>
        </SoundscapesContainer>
    );
}