lee/Recordly
1
0
Fork 0
mirror of https://github.com/webadderallorg/Recordly.git synced 2026-09-24 23:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(timeline): track visual polish - waveform blue, zoom purple, audio dark green, gradient fade

Browse Source
This commit is contained in:
webadderall
2026-04-02 21:09:09 +11:00
parent 8d262fbc10
commit ab04f9143c
3 changed files with 53 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/video-editor/timeline/AudioWaveform.tsx
+2 -2
View File
@@ -74,7 +74,7 @@ export default function AudioWaveform({ peaks }: AudioWaveformProps) {
ctx.lineTo(px, midY + barHeight);
}
ctx.strokeStyle = "rgba(6, 182, 212, 0.25)";
ctx.strokeStyle = "rgba(59, 130, 246, 0.45)";
ctx.lineWidth = dpr;
ctx.stroke();
}, [peaks, range.start, range.end, resizeKey]);
@@ -83,7 +83,7 @@ export default function AudioWaveform({ peaks }: AudioWaveformProps) {
<canvas
ref={setCanvasRef}
className="absolute inset-0 w-full h-full pointer-events-none"
style={{ zIndex: 0, opacity: 0.9 }}
style={{ zIndex: 0 }}
/>
);
}
src/components/video-editor/timeline/Item.tsx
+4 -4
View File
@@ -61,7 +61,7 @@ export default function Item({
const isAudio = variant === 'audio';
const glassClass = isZoom
? glassStyles.glassGreen
? glassStyles.glassPurple
: isTrim
? glassStyles.glassRed
: isClip
@@ -69,11 +69,11 @@ export default function Item({
: isSpeed
? glassStyles.glassAmber
: isAudio
? glassStyles.glassPurple
? glassStyles.glassDarkGreen
: glassStyles.glassYellow;
const endCapColor = isZoom
? '#2563EB'
? '#a855f7'
: isTrim
? '#ef4444'
: isClip
@@ -81,7 +81,7 @@ export default function Item({
: isSpeed
? '#d97706'
: isAudio
? '#a855f7'
? '#166534'
: '#B4A046';
const timeLabel = useMemo(
src/components/video-editor/timeline/ItemGlass.module.css
+47 -19
View File
@@ -2,7 +2,7 @@
position: relative;
border-radius: 8px;
-corner-smoothing: antialiased;
background: rgba(37, 99, 235, 0.15);
background: linear-gradient(to bottom, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0.08));
border: 1px solid rgba(37, 99, 235, 0.3);
box-shadow: 0 2px 12px 0 rgba(37, 99, 235, 0.1) inset;
margin: 1px 0;
@@ -12,13 +12,13 @@
}
.glassGreen:hover {
background: rgba(37, 99, 235, 0.25);
background: linear-gradient(to bottom, rgba(37, 99, 235, 0.32), rgba(37, 99, 235, 0.15));
border-color: rgba(37, 99, 235, 0.5);
box-shadow: 0 4px 20px 0 rgba(37, 99, 235, 0.2) inset;
}
.glassGreen.selected {
background: rgba(37, 99, 235, 0.35);
background: linear-gradient(to bottom, rgba(37, 99, 235, 0.42), rgba(37, 99, 235, 0.22));
border-color: #2563EB;
box-shadow: 0 0 0 1px #2563EB, 0 4px 20px 0 rgba(37, 99, 235, 0.3) inset;
z-index: 10;
@@ -28,7 +28,7 @@
position: relative;
border-radius: 8px;
-corner-smoothing: antialiased;
background: rgba(239, 68, 68, 0.15);
background: linear-gradient(to bottom, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.08));
border: 1px solid rgba(239, 68, 68, 0.3);
box-shadow: 0 2px 12px 0 rgba(239, 68, 68, 0.1) inset;
margin: 1px 0;
@@ -38,13 +38,13 @@
}
.glassRed:hover {
background: rgba(239, 68, 68, 0.25);
background: linear-gradient(to bottom, rgba(239, 68, 68, 0.32), rgba(239, 68, 68, 0.15));
border-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 4px 20px 0 rgba(239, 68, 68, 0.2) inset;
}
.glassRed.selected {
background: rgba(239, 68, 68, 0.35);
background: linear-gradient(to bottom, rgba(239, 68, 68, 0.42), rgba(239, 68, 68, 0.22));
border-color: #ef4444;
box-shadow: 0 0 0 1px #ef4444, 0 4px 20px 0 rgba(239, 68, 68, 0.3) inset;
z-index: 10;
@@ -54,7 +54,7 @@
position: relative;
border-radius: 8px;
-corner-smoothing: antialiased;
background: rgba(180, 160, 70, 0.15);
background: linear-gradient(to bottom, rgba(180, 160, 70, 0.22), rgba(180, 160, 70, 0.08));
border: 1px solid rgba(180, 160, 70, 0.3);
box-shadow: 0 2px 12px 0 rgba(180, 160, 70, 0.1) inset;
margin: 1px 0;
@@ -64,13 +64,13 @@
}
.glassYellow:hover {
background: rgba(180, 160, 70, 0.25);
background: linear-gradient(to bottom, rgba(180, 160, 70, 0.32), rgba(180, 160, 70, 0.15));
border-color: rgba(180, 160, 70, 0.5);
box-shadow: 0 4px 20px 0 rgba(180, 160, 70, 0.2) inset;
}
.glassYellow.selected {
background: rgba(180, 160, 70, 0.35);
background: linear-gradient(to bottom, rgba(180, 160, 70, 0.42), rgba(180, 160, 70, 0.22));
border-color: #B4A046;
box-shadow: 0 0 0 1px #B4A046, 0 4px 20px 0 rgba(180, 160, 70, 0.3) inset;
z-index: 10;
@@ -80,7 +80,7 @@
position: relative;
border-radius: 8px;
-corner-smoothing: antialiased;
background: rgba(245, 158, 11, 0.15);
background: linear-gradient(to bottom, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.08));
border: 1px solid rgba(245, 158, 11, 0.3);
box-shadow: 0 2px 12px 0 rgba(245, 158, 11, 0.1) inset;
margin: 1px 0;
@@ -90,13 +90,13 @@
}
.glassAmber:hover {
background: rgba(245, 158, 11, 0.25);
background: linear-gradient(to bottom, rgba(245, 158, 11, 0.32), rgba(245, 158, 11, 0.15));
border-color: rgba(245, 158, 11, 0.5);
box-shadow: 0 4px 20px 0 rgba(245, 158, 11, 0.2) inset;
}
.glassAmber.selected {
background: rgba(245, 158, 11, 0.35);
background: linear-gradient(to bottom, rgba(245, 158, 11, 0.42), rgba(245, 158, 11, 0.22));
border-color: #f59e0b;
box-shadow: 0 0 0 1px #f59e0b, 0 4px 20px 0 rgba(245, 158, 11, 0.3) inset;
z-index: 10;
@@ -106,7 +106,7 @@
position: relative;
border-radius: 8px;
-corner-smoothing: antialiased;
background: rgba(168, 85, 247, 0.15);
background: linear-gradient(to bottom, rgba(168, 85, 247, 0.22), rgba(168, 85, 247, 0.08));
border: 1px solid rgba(168, 85, 247, 0.3);
box-shadow: 0 2px 12px 0 rgba(168, 85, 247, 0.1) inset;
margin: 1px 0;
@@ -116,13 +116,13 @@
}
.glassPurple:hover {
background: rgba(168, 85, 247, 0.25);
background: linear-gradient(to bottom, rgba(168, 85, 247, 0.32), rgba(168, 85, 247, 0.15));
border-color: rgba(168, 85, 247, 0.5);
box-shadow: 0 4px 20px 0 rgba(168, 85, 247, 0.2) inset;
}
.glassPurple.selected {
background: rgba(168, 85, 247, 0.35);
background: linear-gradient(to bottom, rgba(168, 85, 247, 0.42), rgba(168, 85, 247, 0.22));
border-color: #a855f7;
box-shadow: 0 0 0 1px #a855f7, 0 4px 20px 0 rgba(168, 85, 247, 0.3) inset;
z-index: 10;
@@ -132,7 +132,7 @@
position: relative;
border-radius: 8px;
-corner-smoothing: antialiased;
background: rgba(6, 182, 212, 0.15);
background: linear-gradient(to bottom, rgba(6, 182, 212, 0.22), rgba(6, 182, 212, 0.08));
border: 1px solid rgba(6, 182, 212, 0.3);
box-shadow: 0 2px 12px 0 rgba(6, 182, 212, 0.1) inset;
margin: 1px 0;
@@ -142,18 +142,44 @@
}
.glassCyan:hover {
background: rgba(6, 182, 212, 0.25);
background: linear-gradient(to bottom, rgba(6, 182, 212, 0.32), rgba(6, 182, 212, 0.15));
border-color: rgba(6, 182, 212, 0.5);
box-shadow: 0 4px 20px 0 rgba(6, 182, 212, 0.2) inset;
}
.glassCyan.selected {
background: rgba(6, 182, 212, 0.35);
background: linear-gradient(to bottom, rgba(6, 182, 212, 0.42), rgba(6, 182, 212, 0.22));
border-color: #06b6d4;
box-shadow: 0 0 0 1px #06b6d4, 0 4px 20px 0 rgba(6, 182, 212, 0.3) inset;
z-index: 10;
}
.glassDarkGreen {
position: relative;
border-radius: 8px;
-corner-smoothing: antialiased;
background: linear-gradient(to bottom, rgba(22, 101, 52, 0.22), rgba(22, 101, 52, 0.08));
border: 1px solid rgba(22, 101, 52, 0.3);
box-shadow: 0 2px 12px 0 rgba(22, 101, 52, 0.1) inset;
margin: 1px 0;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.glassDarkGreen:hover {
background: linear-gradient(to bottom, rgba(22, 101, 52, 0.32), rgba(22, 101, 52, 0.15));
border-color: rgba(22, 101, 52, 0.5);
box-shadow: 0 4px 20px 0 rgba(22, 101, 52, 0.2) inset;
}
.glassDarkGreen.selected {
background: linear-gradient(to bottom, rgba(22, 101, 52, 0.42), rgba(22, 101, 52, 0.22));
border-color: #166534;
box-shadow: 0 0 0 1px #166534, 0 4px 20px 0 rgba(22, 101, 52, 0.3) inset;
z-index: 10;
}
.zoomEndCap {
position: absolute;
top: 0;
@@ -176,7 +202,9 @@
.glassPurple:hover .zoomEndCap,
.glassPurple.selected .zoomEndCap,
.glassCyan:hover .zoomEndCap,
.glassCyan.selected .zoomEndCap {
.glassCyan.selected .zoomEndCap,
.glassDarkGreen:hover .zoomEndCap,
.glassDarkGreen.selected .zoomEndCap {
opacity: 1;
}