Skip to content

Commit 851f819

Browse files
gouravmoregouravmore
authored
Merge pull request #289 from ajinkyapandetekdi/19-feb-test-rig-1.1
#235866 Working on Ui Part on Story Mode
2 parents 2576ac4 + 4cb39b9 commit 851f819

File tree

1 file changed

+158
-128
lines changed

1 file changed

+158
-128
lines changed

‎src/components/Mechanism/WordsOrImage.jsx

Lines changed: 158 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const WordsOrImage = ({
5151
const audioRef = createRef(null);
5252
const [duration, setDuration] = useState(0);
5353
const [isReady, setIsReady] = useState(false);
54-
54+
const [imageLoaded, setImageLoaded] = useState(false);
5555
const [isPlaying, setIsPlaying] = useState(false);
5656

5757
const togglePlayPause = () => {
@@ -101,159 +101,189 @@ const WordsOrImage = ({
101101
pointerEvents: disableScreen ? "none" : "initial",
102102
}}
103103
>
104-
{image && (
105-
<Box sx={{ display: "flex", justifyContent: "center" }}>
106-
<img
107-
src={image}
108-
onError={(e) => {
109-
e.target.style.display = "none"; // Hide the image if it fails to load
110-
}}
111-
style={{
112-
width: "100%", // Image will take full width of the parent container
113-
maxWidth: "500px", // Limit the width to 500px
114-
height: "auto", // Maintain aspect ratio
115-
maxHeight: "200px", // Cap the height at 200px
116-
marginBottom: "40px",
117-
objectFit: "contain", // Ensures the image fits well within the dimensions
118-
}}
119-
alt="Responsive content" // Adding alt text for accessibility
120-
/>
121-
</Box>
122-
)}
123-
{type === "image" ? (
124-
<Box sx={{ display: "flex", justifyContent: "center" }}>
125-
<img
126-
src={image}
127-
style={{
128-
maxWidth: "450px",
129-
maxHeight: "130px",
130-
marginBottom: "40px",
131-
}}
132-
/>
133-
</Box>
134-
) : type === "phonics" ? (
135-
<Box
136-
position="relative"
137-
sx={{
138-
width: "100%",
139-
display: "flex",
140-
justifyContent: "center",
141-
mb: "40px",
142-
}}
143-
>
104+
<Box>
105+
{type === "image" ? (
106+
<Box sx={{ display: "flex", justifyContent: "center" }}>
107+
<img
108+
src={image}
109+
style={{
110+
maxWidth: "450px",
111+
maxHeight: "130px",
112+
marginBottom: "40px",
113+
}}
114+
/>
115+
</Box>
116+
) : type === "phonics" ? (
144117
<Box
145118
position="relative"
146119
sx={{
147-
minWidth: "403px",
148-
borderRadius: "15px",
149-
background: "rgba(255, 161, 50, 0.1)",
150-
height: "88px",
120+
width: "100%",
151121
display: "flex",
122+
justifyContent: "center",
123+
mb: "40px",
152124
}}
153125
>
154-
<audio
155-
ref={audioRef}
156-
preload="metadata"
157-
onDurationChange={(e) => setDuration(e.currentTarget.duration)}
158-
onCanPlay={(e) => {
159-
setIsReady(true);
160-
}}
161-
onPlaying={() => setIsPlaying(true)}
162-
onPause={() => setIsPlaying(false)}
163-
onTimeUpdate={(e) => {
164-
setCurrrentProgress(e.currentTarget.currentTime);
165-
}}
166-
>
167-
<source type="audio/mp3" src={v11} />
168-
</audio>
169-
{/* <AudioPlayerSvg color="#FFA132" /> */}
170-
171126
<Box
127+
position="relative"
172128
sx={{
129+
minWidth: "403px",
130+
borderRadius: "15px",
131+
background: "rgba(255, 161, 50, 0.1)",
173132
height: "88px",
174133
display: "flex",
175-
justifyContent: "center",
176-
alignItems: "center",
177134
}}
178135
>
179-
<Box
180-
sx={{
181-
cursor: "pointer",
182-
marginLeft: "20px",
183-
marginTop: "5px",
136+
<audio
137+
ref={audioRef}
138+
preload="metadata"
139+
onDurationChange={(e) =>
140+
setDuration(e.currentTarget.duration)
141+
}
142+
onCanPlay={(e) => {
143+
setIsReady(true);
184144
}}
185-
onClick={() => {
186-
togglePlayPause();
145+
onPlaying={() => setIsPlaying(true)}
146+
onPause={() => setIsPlaying(false)}
147+
onTimeUpdate={(e) => {
148+
setCurrrentProgress(e.currentTarget.currentTime);
187149
}}
188150
>
189-
{isReady && (
190-
<>
191-
{isPlaying ? (
192-
<StopAudioButton color="#FFA132" />
193-
) : (
194-
<PlayAudioButton color="#FFA132" />
195-
)}
196-
</>
197-
)}
198-
</Box>
199-
<Typography
200-
variant="h5"
201-
component="h4"
151+
<source type="audio/mp3" src={v11} />
152+
</audio>
153+
{/* <AudioPlayerSvg color="#FFA132" /> */}
154+
155+
<Box
202156
sx={{
203-
color: "#333F61",
204-
fontSize: "44px",
205-
letterSpacing: "2.2px",
206-
lineHeight: "normal",
207-
fontWeight: 600,
208-
fontFamily: "Quicksand",
209-
marginLeft: "20px",
157+
height: "88px",
158+
display: "flex",
159+
justifyContent: "center",
160+
alignItems: "center",
210161
}}
211162
>
212-
{"REF LECTION"}
213-
</Typography>
163+
<Box
164+
sx={{
165+
cursor: "pointer",
166+
marginLeft: "20px",
167+
marginTop: "5px",
168+
}}
169+
onClick={() => {
170+
togglePlayPause();
171+
}}
172+
>
173+
{isReady && (
174+
<>
175+
{isPlaying ? (
176+
<StopAudioButton color="#FFA132" />
177+
) : (
178+
<PlayAudioButton color="#FFA132" />
179+
)}
180+
</>
181+
)}
182+
</Box>
183+
<Typography
184+
variant="h5"
185+
component="h4"
186+
sx={{
187+
color: "#333F61",
188+
fontSize: "44px",
189+
letterSpacing: "2.2px",
190+
lineHeight: "normal",
191+
fontWeight: 600,
192+
fontFamily: "Quicksand",
193+
marginLeft: "20px",
194+
}}
195+
>
196+
{"REF LECTION"}
197+
</Typography>
198+
</Box>
214199
</Box>
215200
</Box>
216-
</Box>
217-
) : (
218-
<Box>
219-
{!words && (
220-
<Box sx={{ display: "flex", justifyContent: "center" }}>
221-
<CircularProgress size="3rem" sx={{ color: "#E15404" }} />
222-
</Box>
223-
)}
224-
{words && !matchedChar && (
225-
<Typography
226-
variant="h5"
227-
component="h4"
228-
sx={{
229-
mb: 4,
230-
color: "#333F61",
231-
textAlign: "center",
232-
fontSize: "clamp(1.6rem, 2.5vw, 3.8rem)",
233-
// lineHeight: "normal",
234-
fontWeight: 700,
235-
fontFamily: "Quicksand",
236-
lineHeight: "50px",
237-
}}
238-
>
239-
{words || ""}
240-
</Typography>
241-
)}
242-
{matchedChar && (
201+
) : (
202+
<Box
203+
sx={{
204+
display: {
205+
xs: "",
206+
md: imageLoaded ? "flex" : "",
207+
},
208+
justifyContent: "center",
209+
width: "100%",
210+
}}
211+
>
212+
{image && (
213+
<Box
214+
sx={{
215+
display: "flex",
216+
justifyContent: "center",
217+
width: "100%",
218+
}}
219+
>
220+
<img
221+
src={image}
222+
onLoad={() => setImageLoaded(true)} // When image loads, set state to true
223+
onError={(e) => {
224+
e.target.style.display = "none"; // Hide if error occurs
225+
setImageLoaded(false);
226+
}}
227+
style={{
228+
width: "100%", // Image will take full width of the parent container
229+
maxWidth: "500px", // Limit the width to 500px
230+
height: "auto", // Maintain aspect ratio
231+
maxHeight: "500px", // Cap the height at 200px
232+
marginBottom: "40px",
233+
objectFit: "contain", // Ensures the image fits well within the dimensions
234+
}}
235+
alt="Responsive content" // Adding alt text for accessibility
236+
/>
237+
</Box>
238+
)}
243239
<Box
244-
display={"flex"}
245-
mb={4}
246240
sx={{
241+
display: "flex",
242+
flexDirection: "column",
243+
justifyContent: "center", // Centers content vertically
244+
alignItems: "center", // Centers content horizontally
247245
width: "100%",
248-
justifyContent: "center",
249-
flexWrap: "wrap",
250246
}}
251247
>
252-
{highlightWords(words, matchedChar)}
248+
{!words && (
249+
<Box sx={{ display: "flex", justifyContent: "center" }}>
250+
<CircularProgress size="3rem" sx={{ color: "#E15404" }} />
251+
</Box>
252+
)}
253+
{words && !matchedChar && (
254+
<Typography
255+
variant="h5"
256+
component="h4"
257+
sx={{
258+
mb: 4,
259+
color: "#333F61",
260+
textAlign: "center",
261+
fontSize: "clamp(1.6rem, 2.5vw, 3.8rem)",
262+
fontWeight: 700,
263+
fontFamily: "Quicksand",
264+
lineHeight: "60px",
265+
}}
266+
>
267+
{words || ""}
268+
</Typography>
269+
)}
270+
{matchedChar && (
271+
<Box
272+
display={"flex"}
273+
mb={4}
274+
sx={{
275+
width: "100%",
276+
justifyContent: "center",
277+
flexWrap: "wrap",
278+
}}
279+
>
280+
{highlightWords(words, matchedChar)}
281+
</Box>
282+
)}
253283
</Box>
254-
)}
255-
</Box>
256-
)}
284+
</Box>
285+
)}
286+
</Box>
257287
<Box sx={{ display: "flex", justifyContent: "center" }}>
258288
<VoiceAnalyser
259289
setVoiceText={setVoiceText}

0 commit comments

Comments
 (0)