I would like to modify only the content of reactplayer. That is, the play button, the music track or the background color. I use for that the react-player module. Thanks and have a nice day.
// My app
<div className="player-wrapper" >
<ReactPlayer url="https://soundcloud.com/supperclubmix/black-eye-peas-dirty-bit-remix?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing"
className="react-player"
id="music"
height="auto"
width="90%"
controls={true}
loop={true}
/>
</div>
</div>
//CSS
.player-wrapper {
}
.react-player {
margin-top: 115%;
margin-left: auto;
margin-right: auto;
}
Related
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
function App() {
return (
<Carousel showArrows={true}>
<div>
<img src="../assets/1.jpeg" alt="image1" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="../assets/2.jpeg" alt="image2" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="../assets/3.jpeg" alt="image3" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
}
export default App;
i added the css file in App component similar like react-responsive-carousel but it is not working
carousel.min.css
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
It should be working but not sure why this is happening
I don't know about this library, But I can see you are not doing something complicated with your carousel. So basically why don't you create one for yourself?
I have a base code that could help you in this matter.
I create a carousel with React and Static UI(HTML, CSS, JS).
I think it can actually help you out.
replit, codesandbox, Stackblitz
these versions are written with html css js and nothing else.
replit, codesandbox, Stackblitz
In your scenario I will do this:
const modalSlidesContainer = document.querySelector(".modal-slides-container");
const modalWidth = 300;
let modalPage = 0;
const nextPage = () => {
modalPage++;
modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};
const previousPage = () => {
modalPage--;
modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};
/* you set root to define varibales */
:root {
--modal-width: 300px;
--modal-height: 400px;
--number-of-pages: 5;
}
html body{
margin: 0px;
}
.modal-background{
background-color: rgba(0,0,0,0.4);
position: absolute;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
}
.modal-boundary{
width: var(--modal-width); /* the width boundary must be as same as every modal slide*/
height: var(--modal-height);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
overflow-x: hidden;
z-index: 10;
/* the max width must be as same as the width of modal ModalBoundary*/
#media screen and (max-width: var(--modal-width)) {
width: 100vw;
height: 100vh;
}
}
/* This container contains every slide you gonna use in your modal */
.modal-slides-container{
min-width: calc(var(--modal-width) * var(--number-of-pages)); /* The width must be total width of all the slide you gonna use */
height: var(--modal-height);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
background-color: white !important;
/*here is how to control carousel movement*/
margin: 0px; /*this how we control the place of the modal*/
transition: margin 1s; /*this how you control the animation of carousel when it's changing steps */
}
.modal-slide{
width: var(--modal-width);
height: var(--modal-height); /* in this scenario the total height of slide must be as same as modal height*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white !important;
}
.button-container{
width: 100%;
margin-top: 10px;
display: flex;
flex-direction: row;
}
.navigation-button{
margin: auto;
}
<body>
<div class="modal-background">
<div class="modal-boundary">
<div class="modal-slides-container">
<div class="modal-slide">
<img alt="first image" src="https://picsum.photos/200/200" />
<p> Legend One </p>
<div class="button-container">
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="second image" src="https://picsum.photos/200/200" />
<p> Legend Two </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="third image" src="https://picsum.photos/200/200" />
<p> Legend Three </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="fourth image" src="https://picsum.photos/200/200" />
<p> Legend Four </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="fifth image" src="https://picsum.photos/200/200" />
<p> Legend five </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
</div>
</div>
</div>
</div>
</div>
</body>
I hope this helps you.^-^
My video is not appearing in each Video element, is there anything wrong with my codes? can anyone help me? Thank you so much!
This is my Video.js:
import React from "react";
import "./Video.css";
function Video() {
return (
<div className="video">
<video src="./video.mp4"> </video>{" "}
</div>
);
}
export default Video;
This is my App.js:
import React from "react";
import Video from "./Video";
import "./App.css";
function App() {
return (
<>
hello code{" "}
<div className="app">
<div className="app-videos">
<Video />
<Video />
<Video />
<Video />
</div>{" "}
</div>{" "}
</>
);
}
export default App;
This is my App.css:
html {
scroll-snap-type: y mandatory;
}
.app {
height: 100vh;
background-color: black;
display: grid;
place-items: center;
}
.app-videos {
position: relative;
height: 800px;
overflow: scroll;
width: 80%;
max-width: 500px;
scroll-snap-type: y mandatory;
}
This is my Video.css:
.video {
position: relative;
border: 5px solid red;
background-color: white;
height: 500px;
width: 100%;
height: 100%;
scroll-snap-align: start;
}
This is my directory:
enter image description here
The video HTML tag has a children <source/>. That accepts the video URL in the src prop.
<video width="320" height="240" controls>
<source src="./video.mp4" type="video/mp4" />
</video>
Refer this link
I'm trying to add the Next Image component to my project.
And I have a problem, the image disappears when I add layout='responsive'.
code:
<Box>
<Link href='/' >
<Image src='/images/logoDark.svg'
alt='navbar-logo'
width={260}
height={56}
layout='responsive'
/>
</Link>
</Box>
Is there a solution? or any other way to optimize images?
Based on what is found here (https://github.com/vercel/next.js/issues/19314), it seems layout='responsive' has no intrinsic size. So you will have to add a width to the containing element.
You need to wrap the next/image into a container with display:block, so that the image will be displayed.
set height and width for the parent of the Image component :
<Box width={263} height={56}>
<Link href='/' >
<Image src='/images/logoDark.svg'
alt='navbar-logo'
width={260}
height={56}
layout='responsive'
/>
</Link>
</Box>
ensure the parent element uses display: block in their stylesheet like Box component or div
Component
<div className="photo">
<Image
width={300}
height={300}
src="https:/images.unsplash.com/photo-1501432377862-3d0432b87a14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
alt="photo"
layout="raw"
/>
</div>
<style jsx>{`
#media (max-width: 768px) {
.photo {
margin: 0 auto;
justify-content: center;
display: flex;
width: 200px;
height: 200px;
}
}
`}</style>
next.config.js
experimental: {
images: {
layoutRaw: true,
},
},
This worked for me, the image doesn't disappear and is responsive,
Goal: Align items centrally in div
See picture here (notice every watch is shifted to the left):
I'm trying to render each item in productcard centrally.
Currenty, each productCard__container renders to left.
Here is my ProductCard.js code:
return (
<div className="productcard">
<button onClick={(e) => history.push(`/product/${id}`)}>
<div className="productCard__container">
<img src={image} />
<h1>{brand}</h1>
<h2>{name}</h2>
<p>${price}</p>
</div>
</button>
</div>
...and the CSS code:
.productcard {
margin: 10px;
border-radius: 12px;
background-color: black;
}
.productCard__container {
align-items: center;
}
You can use css flex box
.productcard {
display: flex;
justify-content: center;
}
The Problem
I have a simple List of components that renders a title and an simple <hr /> after it.
The list gets rendered correctly and every title has it's corresponding <hr /> except the first one
Here is a screenshot how it looks:
I don't have any custom styles in my project except this one (for a rich text editor called Draft.js:
.editor {
box-sizing: border-box;
border: 1px solid #ddd;
cursor: text;
padding: 16px;
border-radius: 2px;
margin-bottom: 2em;
box-shadow: inset 0px 1px 8px -3px #ababab;
background: #fefefe;
}
.editor :global(.public-DraftEditor-content) {
min-height: 140px;
}
Other then that, no css files.
Here is the code that renders the list (it gets called in the parent for every list item I have):
return (
<div>
<h2>{props.title}</h2>
<p>Test</p>
<hr />
{renderPosts()}
</div>
);
Why is this happening? I played around with it in the dev tools and the missing<hr /> is actually there, but not visible but the styling seems ok. It makes no sense to me because the other hr's are there. Screenshot from the Dev Tools:
I found the problem.
It's another Bootstrap Component that overlapped the first element like #Gonzalo said.
This was the faulty code from the parent component:
return (
<div style={{ marginTop: 50 }}>
{/* TODO: implement AddRoom Component */}
{/* <OverlayTrigger
trigger="focus"
placement="top"
overlay={this.popoverTop()}
>
<Button>
<FontAwesomeIcon icon={faPlus} />
</Button>
</OverlayTrigger> */}
{this.renderRooms()}
</div>
);
I uncommented it and now I see the <hr /> I think now I have to give the OverlayTrigger just a bit margin and I'm guchi.