I use 16 React Players on my site and imported 16 different mp3 files. I´m worried about the loading time, so I thought it might be a good solution, if the mp3 file is only loaded, when the play button is clicked. Is this possible and can anyone give me a hint how to achieve this?
This is the beginning of the code from my Home.js component:
import React from 'react';
import ReactAudioPlayer from 'react-audio-player';
import Badge from 'react-bootstrap/Badge';
import mp3_file from '../assets/music/mein_ahnenland_peru_maintheme_titel_torben_jan_mueller.mp3';
import action from '../assets/music/99firefilm2018_torben_jan_mueller_16bit_48khz_v3m_action.mp3';
import adventure from '../assets/music/schmonz_ep2_goldgraeber3_torben_jan_mueller_ueberarbeitet_n_cut.mp3';
import animation from '../assets/music/revolution_radio_torben_jan_mueller_16bit_48khz_final_m.mp3';
import comedy from '../assets/music/99firefilm2018_torben_jan_mueller_16bit_48khz_v3m.mp3';
import doku from '../assets/music/mein_ahnenland_peru_maintheme_titel_torben_jan_mueller.mp3';
import drama from '../assets/music/mein_ahnenland_peru_umweltzerstoerung_torben_jan_mueller.mp3';
import erotic from '../assets/music/02- Carefree.mp3';
import fantasy from '../assets/music/logo_jugendfoerderung_torben_jan_mueller_16bit_48khz_v8_final_master.mp3';
import horror from '../assets/music/13- Searching For Their Friends.mp3';
import lovemovie from '../assets/music/mein_ahnenland_peru_wiedersehen2_torben_jan_mueller.mp3';
import music from '../assets/music/daughterly_trailer_strings.mp3';
import other from '../assets/music/wodka_gorbatschow_plakadiva_torben_jan_mueller_16bit_48khz_v2m.mp3';
import sciencefiction from '../assets/music/block701_crowdfunding_halfbeat_atmo_torben_jan_mueller_16bit_48khz_n.mp3';
import western from '../assets/music/italowestern_suite_torben_jan_mueller_16bit_48khz_vintage1.mp3';
export const Home = () => (
<div className="flex-container">
<div>
<div className="adventure genreHeight">
<div className="genreBackground">
<h4>Adventure <Badge variant="success">New</Badge></h4>
</div>
<div className="playerBottom">
<ReactAudioPlayer
src={adventure}
controls
/>
</div>
</div>
<p>© Iván Tamás - Pixabay</p>
</div>
And finally a screenshot of the page:
After I read this documentation I found the solution: You just have to add this line
preload="none"
to each player instance and the audio file is only loaded, when you press the play button.
You can check the result with the Google Chrome dev tools. Go to Network, enable "Disable cache" and reload the page. As you can see in this screenshot, there´s no mp3 file preloaded.
This is, how the player looks:
<div>
<ReactAudioPlayer
src={mp3_file}
controls
preload="none"
/>
</div>
Related
I'm trying to use Material UI to use buttons in my web app using ReactJS for the frontend. I installed Material UI with the terminal command
npm install #material-ui/core
And my code looks like this:
import React from 'react';
import './Header.css';
import { Button } from '#material-ui/core';
function Header() {
return (
<div className="header">
<div className="headerRight">
<h1>Hi There</h1>
<img
className="headerIcon"
src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg"
alt=""
/>
<div className="button">
<Button>Click Me</Button>
</div>
</div>
</div>
);
}
export default Header;
and the compiler says "Compiled Successfully!" when I hit save, but when I look at the app in my browser, nothing is there at all. When I take out the button, everything else shows up, but when I put the button back in, nothing shows up, and I get a blank screen. I'm really frustrated trying to figure out why the Material UI button does not work. Please help me.
My App.js code looks like this
import './App.css';
import React from 'react';
import Header from './Header';
import Banner from './Banner';
function App() {
return (
<div className="App">
<Header/>
<Banner/>
</div>
);
}
export default App;
Issue for me was that I had installed MUI before jumping into my react ap (cd my-app), so the MUI package was in a parent "Node Modules" directory of my react app.
Deleted the parent Node Modules directory and reinstalled MUI in my react app.
I am building nextjs application. I want a lightbox feature that only show a button, then when I click the button it show the lightbox gallery. But default or on page load there should not be show images. Just when I click a button it show light box. Like when I clicked the button-
Then It start lightbox-
How can I do that?
Here I am trying to use Simple React LightBox. This package support hook. But there are not well documented to understand how to use hook. First Of all I create a button and then I create a lightbox component. Like this-
import {Container, Flex, Box, Image, Paragraph} from "theme-ui";
import SingleRooms from "data/SingleRooms";
import SimpleReactLightbox, {SRLWrapper, useLightbox} from "simple-react-lightbox";
const SingleImages = () => {
const {openLightbox, closeLightbox} = useLightbox()
return (
<Container>
<button onClick={() => openLightbox()}>
Open the third image
</button>
<SimpleReactLightbox>
<SRLWrapper>
<a href={SingleRooms.images[0].path}>
<img src={SingleRooms.images[0].path} alt="Umbrella"/>
</a>
<a href={SingleRooms.images[1].path}>
<img src={SingleRooms.images[1].path} alt="Blue sky"/>
</a>
</SRLWrapper>
</SimpleReactLightbox>
</Container>
);
};
export default SingleImages;
It is not working. Actually I don't know to use it. Please help me to use it with my wanted options. Just show a button then when clicked button there should be show the light box. Please help me.
According to the simple-react-lightbox documentation:
First of all you need to wrap your React app with the main component so that it can create the context.
So in your top-level (root/main/index) component:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import SimpleReactLightbox from 'simple-react-lightbox'
ReactDOM.render(
<React.StrictMode>
<SimpleReactLightbox> // ----> here
<App />
</SimpleReactLightbox>
</React.StrictMode>,
document.getElementById("root")
);
export default App;
Now, in the SingleImages component:
import {Container, Flex, Box, Image, Paragraph} from "theme-ui";
import SingleRooms from "data/SingleRooms";
import {SRLWrapper, useLightbox} from "simple-react-lightbox";
const SingleImages = () => {
const {openLightbox, closeLightbox} = useLightbox()
return (
<Container>
<button onClick={() => openLightbox()}>
Open the third image
</button>
<SRLWrapper>
<a href={SingleRooms.images[0].path}>
<img src={SingleRooms.images[0].path} alt="Umbrella"/>
</a>
<a href={SingleRooms.images[1].path}>
<img src={SingleRooms.images[1].path} alt="Blue sky"/>
</a>
</SRLWrapper>
</Container>
);
};
export default SingleImages;
I created a react app and it looked good , until I deployed it. After deployment, i cannot see the images, even if react loads them (i see that in the networking tab on chrome). Also the Content type was set right. Also when i go directly to the miage links, chrome renderes them.
This is the component responsable for showing the images:
import "./../styles/firstPart.css";
import logo from "./../images/croped_down.png";
import background from "./../images/background.jpg";
import PreloadImage from "react-preload-image";
import Navbar from "./../components/navbar";
const FirstPart = () => {
return (
<div className="firstPart">
<div className="mainGradient"></div>
<PreloadImage className="background" src={background} />
<PreloadImage className="logo" src={logo} />
<Navbar />
</div>
);
};
export default FirstPart;
Image path is relative and works for local. The same won't be working in prod as it takes absolute page. Check the path of image in Developer Console and see if the path is same as existed
I can't figure out something very simple :-(
I'm building an image slider in react, with this idea:
Import a data.js file, containing the image filepaths.
the user clicks on a button and moves through the array.
Of course, I cant import images one by one...
import React from 'react';
import pics from './data'; //-->array with paths to images.
function App() {
let path =`./wallpapers/${pics[0]}`
console.log(path)
return (
<div className="App">
<img className='image' src={path} alt='dont know how will fix this, we dont have a way to generate alt content'/>
<div className='panel'>
<button>Left</button>
<button>Right</button>
</div>
</div>
);
}
export default App;
Now I'm confused since as this is javascript images won't be loaded like that. Is there any way to achieve this, or any technology I should take a look at?
You would need some sort of "current" image setting. Clicking the buttons would trigger the value to up or down. Default it to 0. This code isn't going to work as is, but the concept is like this:
import React, { useState } from 'react'
import wallpapers from './wallpapers'
function App() {
[ currentImage, setCurrentImage ] = useState(0)
const path =`./wallpapers/${wallpapers[currentImage]}`
return (
<div className="App">
<img className='image' src={path} alt='dont know how will fix this, we dont have a way to generate alt content'/>
<div className='panel'>
<button onClick={() => setCurrentImage(currentImage - 1)}>Left</button>
<button onClick={() => setCurrentImage(currentImage + 1)}>Right</button>
</div>
</div>
);
}
In a separate file, you can import all the images
// wallpapers/index.js
import Wall1 from './wallpapers/1.png';
import Wall2 from './wallpapers/2.png';
import Wall3 from './wallpapers/3.png';
import Wall4 from './wallpapers/4.png';
import Wall5 from './wallpapers/5.png';
import Wall6 from './wallpapers/6.png';
export default [
Wall1,
Wall2,
Wall3,
Wall4,
Wall5,
Wall6
]
I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;