Skip to content

Commit ef3ccf4

Browse files
yashovardhanyashovardhan
committed
Multiple fixes and new flow for quick start
1 parent fbdb4e4 commit ef3ccf4

File tree

86 files changed

+3665
-1845
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+3665
-1845
lines changed

‎src/pages/quickstart/MediaStep/MediaStep.module.css

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
/* Media Step Container */
2+
.mediaContainer {
3+
display: flex;
4+
flex-direction: column;
5+
width: 100%;
6+
height: 100%;
7+
background: var(--ifm-background-surface-color);
8+
border-radius: 12px;
9+
overflow: hidden;
10+
position: relative;
11+
}
12+
13+
/* Media Content */
14+
.mediaContent {
15+
display: flex;
16+
flex-direction: column;
17+
width: 100%;
18+
height: 100%;
19+
position: relative;
20+
transition: opacity 0.3s ease;
21+
}
22+
23+
.mediaContent.hidden {
24+
opacity: 0;
25+
pointer-events: none;
26+
}
27+
28+
/* YouTube Player */
29+
.youtubePlayer {
30+
width: 100%;
31+
height: 400px;
32+
min-height: 300px;
33+
border-radius: 8px;
34+
border: none;
35+
background: #000;
36+
aspect-ratio: 16/9;
37+
}
38+
39+
/* Video Player */
40+
.videoPlayer {
41+
width: 100%;
42+
height: auto;
43+
max-height: 100%;
44+
object-fit: contain;
45+
background: #000;
46+
border-radius: 8px;
47+
}
48+
49+
/* Image Display */
50+
.imageDisplay {
51+
width: 100%;
52+
height: auto;
53+
max-height: 100%;
54+
object-fit: contain;
55+
border-radius: 8px;
56+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
57+
}
58+
59+
/* Media Caption */
60+
.mediaCaption {
61+
padding: 1rem;
62+
background: var(--ifm-color-emphasis-50);
63+
border-top: 1px solid var(--ifm-color-emphasis-200);
64+
margin-top: auto;
65+
}
66+
67+
.mediaCaption p {
68+
margin: 0;
69+
font-size: 14px;
70+
line-height: 1.5;
71+
color: var(--ifm-color-content-secondary);
72+
text-align: center;
73+
}
74+
75+
/* Placeholder State */
76+
.mediaPlaceholder {
77+
display: flex;
78+
flex-direction: column;
79+
align-items: center;
80+
justify-content: center;
81+
height: 300px;
82+
gap: 1rem;
83+
color: var(--ifm-color-content-secondary);
84+
border: 2px dashed var(--ifm-color-emphasis-300);
85+
border-radius: 8px;
86+
margin: 1rem;
87+
}
88+
89+
.placeholderIcon {
90+
font-size: 48px;
91+
}
92+
93+
.loadButton {
94+
padding: 0.75rem 1.5rem;
95+
background: var(--ifm-color-primary);
96+
color: white;
97+
border: none;
98+
border-radius: 8px;
99+
cursor: pointer;
100+
font-size: 14px;
101+
font-weight: 500;
102+
transition: all 0.2s ease;
103+
}
104+
105+
.loadButton:hover {
106+
background: var(--ifm-color-primary-dark);
107+
transform: translateY(-1px);
108+
}
109+
110+
.mediaPlaceholder p {
111+
margin: 0;
112+
font-size: 16px;
113+
color: var(--ifm-color-content-secondary);
114+
}
115+
116+
/* Loading State */
117+
.mediaLoading {
118+
display: flex;
119+
flex-direction: column;
120+
align-items: center;
121+
justify-content: center;
122+
height: 300px;
123+
gap: 1rem;
124+
color: var(--ifm-color-content-secondary);
125+
}
126+
127+
.loadingSpinner {
128+
width: 32px;
129+
height: 32px;
130+
border: 3px solid var(--ifm-color-emphasis-300);
131+
border-top: 3px solid var(--ifm-color-primary);
132+
border-radius: 50%;
133+
animation: spin 1s linear infinite;
134+
}
135+
136+
@keyframes spin {
137+
0% {
138+
transform: rotate(0deg);
139+
}
140+
141+
100% {
142+
transform: rotate(360deg);
143+
}
144+
}
145+
146+
.mediaLoading p {
147+
margin: 0;
148+
font-size: 14px;
149+
color: var(--ifm-color-content-secondary);
150+
}
151+
152+
/* Error State */
153+
.mediaError {
154+
display: flex;
155+
flex-direction: column;
156+
align-items: center;
157+
justify-content: center;
158+
height: 300px;
159+
gap: 1rem;
160+
padding: 2rem;
161+
text-align: center;
162+
color: var(--ifm-color-content-secondary);
163+
}
164+
165+
.errorIcon {
166+
font-size: 48px;
167+
}
168+
169+
.mediaError p {
170+
margin: 0;
171+
font-size: 16px;
172+
color: var(--ifm-color-content-secondary);
173+
}
174+
175+
.retryButton {
176+
padding: 0.5rem 1rem;
177+
background: var(--ifm-color-primary);
178+
color: white;
179+
border: none;
180+
border-radius: 6px;
181+
cursor: pointer;
182+
font-size: 14px;
183+
transition: background-color 0.2s ease;
184+
}
185+
186+
.retryButton:hover {
187+
background: var(--ifm-color-primary-dark);
188+
}
189+
190+
/* Play Status Indicator */
191+
.playStatus {
192+
position: absolute;
193+
top: 1rem;
194+
right: 1rem;
195+
opacity: 0;
196+
transform: translateY(-10px);
197+
transition: all 0.3s ease;
198+
pointer-events: none;
199+
}
200+
201+
.playStatus.visible {
202+
opacity: 1;
203+
transform: translateY(0);
204+
}
205+
206+
.playIndicator {
207+
background: rgba(0, 0, 0, 0.7);
208+
color: white;
209+
padding: 0.5rem 1rem;
210+
border-radius: 20px;
211+
font-size: 12px;
212+
display: flex;
213+
align-items: center;
214+
gap: 0.5rem;
215+
backdrop-filter: blur(4px);
216+
}
217+
218+
/* Playing state effects */
219+
.mediaContent.playing .videoPlayer {
220+
box-shadow: 0 0 20px rgba(var(--ifm-color-primary-rgb), 0.3);
221+
}
222+
223+
/* Responsive Design */
224+
@media (max-width: 768px) {
225+
.mediaContainer {
226+
border-radius: 8px;
227+
}
228+
229+
.youtubePlayer {
230+
height: 250px;
231+
min-height: 200px;
232+
}
233+
234+
.mediaCaption {
235+
padding: 0.75rem;
236+
}
237+
238+
.mediaCaption p {
239+
font-size: 13px;
240+
}
241+
242+
.mediaLoading,
243+
.mediaError,
244+
.mediaPlaceholder {
245+
height: 200px;
246+
padding: 1rem;
247+
}
248+
249+
.errorIcon,
250+
.placeholderIcon {
251+
font-size: 36px;
252+
}
253+
}
254+
255+
/* Dark Mode Adjustments */
256+
[data-theme='dark'] .mediaCaption {
257+
background: var(--ifm-color-emphasis-100);
258+
border-top-color: var(--ifm-color-emphasis-300);
259+
}
260+
261+
[data-theme='dark'] .loadingSpinner {
262+
border-color: var(--ifm-color-emphasis-400);
263+
border-top-color: var(--ifm-color-primary);
264+
}
265+
266+
[data-theme='dark'] .playIndicator {
267+
background: rgba(255, 255, 255, 0.1);
268+
backdrop-filter: blur(8px);
269+
}

0 commit comments

Comments
 (0)