I'm rendering two tabs on a page. The tab content is a video player and other elements under it. The problem is that when switching tabs the layout glitches. Anyone can help me with that?
To solve this I tried with no success (on mounting height is 0):
const [videoHeight, setVideoHeight] = useState<number | null>(0);
useEffect(() => {
const { height } = videoElement.current?.getBoundingClientRect() as DOMRect;
setVideoHeight(height);
}, []);
<CardMedia
component={'video'}
src={videourl}
ref={videoElement}
height={videoHeight}
width={'100%'}
/>
Here's a codesandbox: https://codesandbox.io/s/video-player-mw4c98?file=/src/App.tsx
UPD
I tried useLayoutEffect instead of useEffect with no success as well. I believe that is because video is not fully loaded at that moment.
I think the issue is not with height jumping from 0 to the actual height. The height is correctly set. The thing is video elements have a default black poster that appears in a bit after you mount them on the page. I'm not sure if there is a native or better way to work around it, but it seems some people have found a solution by setting a white poster instead. If you don't want to rely on the body's background color (which is usually white), you could go with a transparent png as the poster. Here is the original question/answer I'm referring to:
Remove black background from html5 video. Appears for a second
I tested it here:
https://codesandbox.io/s/video-player-forked-5jxd7m
Related
I am a beginner in coding and as a challenge, I decided to make my own portfolio website on react.js + tailwind without the use of extra plugins. (I know, I know, as I figured out later, it was not my best idea)
The main complexity was around making a background behind the slider to look similar to the central slide, and to make a smooth transition.
After hosting the website, I found a glitch that is only visible on mobile browsers. Basically, every time when I change a slide, in the moment of changing State, it flicks the next slide in the array of slides for a millisecond.
I was able to see the same issue in dev tools but does not work every time.
100% visible only on mobile browsers
Small clarification: the slider is functioning by rotating elements within the array by the method Splice. So elements [1],[2], and [3] are always visible on the desktop version while elements [0] and [4] exist but have zero opacity (it is made for the sake of the smooth background transitioning).
The glitch itself: On clicking 'left' the image from element [1] is becoming the central image [2] and it flicks somehow the image from [0] for a millisecond. The same behavior is related to the right image from element[3] and background images. Though, it does not affect the left visible slide [1], because its predecessor is only becoming visible after State change.
My best assumption is that the issue is related to the component "Portfolio" 126 line in the code, but I can not find any other solutions which work.
const onChangeSlide = (direction) => {
if (direction === "left") {
setTimeout(() => {
slides.splice(0, 0, slides.splice(length-1, 1)[0]);
setSlider((prev) => ({...prev , ...slides}));
},700);
You can see the hosted website here > https://Othary.github.io/ArtPhoto
Link to the code here > https://github.com/Othary/PortfolioTest.git
GIF of the issue > https://1drv.ms/u/s!ApRsK-vfrh8MrY9guwisAKJl5bJAfA?e=vkjdGX
I will appreciate any help. Thank you in advance.
Regarding the first issue I checked all images, and their order, and removed StrictMode. No luck for me. I can not grasp how the slider shows the element which supposed to be visible only on the next click. And it is not visible on the fast internet desktop version. As stated above, my best guess is that it is related to the way how I change State.
UPDATE: It looks like after scrolling through all carousels BOTH left and right the flick is disappearing.
So, I assume, it somehow connected with the browser's cache, but I don't understand why it needs to be scrolled in both directions first before the issues disappear. All files are supposed to be preloaded after the first scroll in either direction, not both.
Please help🙌
Use case: I have a client who'd like on their homepage to have a gif version of a video that, when clicked, opens up a full screen video player. How can I manage this? I've been building the site in the NextJS framework.
I'm looking to do something like this but instead of autoplaying an mp4, auto loop a gif of the video and, upon clicking the gif, play mp4 in fullscreen.
Any help would be greatly appreciated - I've never really messed with videos in React.
There is no one way to do this but the beauty of React are components. You are definitely going in the right direction. I would actually do two separate components, one for background and one with the video player. That is cleaner and good practice to separate concerns in code.
Simply swap components conditionally, as in this simplified example;
if(onclick) {
render (
<Player />
) else {
<Index />
}
}
You can very well use state to set the conditions. The only problem in React is that components technically do not share state but on the other hand, the "background component" only needs to know if its in the foreground and if it receives an onClick event. The video component only needs to know about its own onClick to for it to disappear again. So two separate event handlers is no issue in this very specific case.
i would create a react state and set it to false
then onClick of the gif i will update the state to true
then have a conditional statement to show the video in fullscreen when the state turns to true
and set the state back to false when video is removed from full screen
As I read, embedding an svg in another SVG leads to create another document and therefore complexify a lot the styling of those svg ...
Is there a way to use the css property transform : rotate(90Deg) easily on only 1 of the embbed svg ?
I'm trying to rotate the background only and not the front svg which needs to stay vertically ...
This example will help you a lot to understand what I'm trying :
https://codesandbox.io/s/example-rotate-svg-mucs3
Edit
Its seems that it works on Firefox but not in Chrome ... Does anyone know a solution for this in Chrome ?
Chrome's overview:
Firefox (and wanted) overview:
I've submitted this problem. Its has been merged here
As a work-around while waiting for this "bug" to be corrected. ( Should take some time as it's been reported since 2013... )
I've added a transform porperty with rotate(90) translate(0, -600) directly ON the <g> inside of the "background.svg".
The translate thing is here beacause the center used for rotating is by default [0,0]. It's clearly explained HERE
I am trying to implement a component with absolute position, zIndex > 0 to make it render above other components. I am setting position: absolute. The problem is that if the component is close to the bottom of the screen, it gets cropped. I don't want to make it push the components below it. I want it to be above. The snack is here:
enter link description here
I also tried with ScrollView but the result was even worse, nothing was being displayed anymore if I set overflow:'visible' to the scrollview. Any ideas how I could get this working ?
please remove all overflow: 'visible' style.
Link Video: https://drive.google.com/file/d/1ifx1orms0PHYb3LLhf5lcwrVFyjPVk1j/view
As you can see from the video, native base in this case behaves very strangely, as if it were broken.
First problem:
The tabs are not fixed under the toolbar, as they
normally should.
Second problem:
I am in the first "TAB1" (Info), I scroll, no problem except for the
fact that the "TABS" should be fixed.
I click on the "TAB2" (Movie), the elements are rendered.
I do not even need to scroll the elements, if I click on the "TAB1"
(Info) already, it will take the same height as the "TAB2" (Movie),
that is the maximum height rendered.
Instead, as usual, each TAB should have its own height.
Link expo to try it: https://snack.expo.io/HJrZ9jXEf
The problem seems to be Animated.ScrollView together with the tab do not get along.
But without Animated.ScrollView I can not do the scroll effect.
How can I solve?