YACWC
This commit is contained in:
@@ -605,25 +605,52 @@ function App() {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: "16px",
|
||||
flexWrap: "wrap",
|
||||
padding: "12px 16px"
|
||||
gap: "12px",
|
||||
flexWrap: "nowrap",
|
||||
padding: "12px 16px",
|
||||
background: "linear-gradient(135deg, #2a2d3a 0%, #1f2129 100%)",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
|
||||
border: "1px solid #3a3f4f",
|
||||
overflowX: "auto"
|
||||
}}>
|
||||
<div className="control-group" style={{ margin: 0 }}>
|
||||
<div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
|
||||
<button
|
||||
className="drawer-toggle"
|
||||
onClick={() => setDrawerOpen(!drawerOpen)}
|
||||
style={{
|
||||
padding: "8px 12px",
|
||||
fontSize: "0.9em",
|
||||
minWidth: "70px"
|
||||
fontSize: "0.85em",
|
||||
minWidth: "70px",
|
||||
background: "linear-gradient(135deg, #4a90e2 0%, #357abd 100%)",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontWeight: "500",
|
||||
boxShadow: "0 2px 4px rgba(74, 144, 226, 0.3)",
|
||||
transition: "all 0.2s ease"
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.transform = "translateY(-1px)";
|
||||
e.target.style.boxShadow = "0 4px 8px rgba(74, 144, 226, 0.4)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.transform = "translateY(0)";
|
||||
e.target.style.boxShadow = "0 2px 4px rgba(74, 144, 226, 0.3)";
|
||||
}}
|
||||
>
|
||||
{drawerOpen ? "✕" : "Options"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
|
||||
<div className="control-group" style={{
|
||||
margin: 0,
|
||||
flexShrink: 0,
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
borderRadius: "6px",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)"
|
||||
}}>
|
||||
<CustomDateRangePicker
|
||||
startDate={startRange}
|
||||
endDate={endRange}
|
||||
@@ -632,24 +659,36 @@ function App() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="control-group" style={{ margin: 0, flex: "1 1 200px", minWidth: "200px" }}>
|
||||
<div className="control-group" style={{ margin: 0, flex: "1 1 180px", minWidth: "180px", maxWidth: "300px" }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter query"
|
||||
placeholder="Enter search query..."
|
||||
value={queryText}
|
||||
onChange={(e) => setQueryText(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleResubmit();
|
||||
}}
|
||||
style={{
|
||||
padding: "8px 12px",
|
||||
borderRadius: "4px",
|
||||
border: "1px solid #343a40",
|
||||
color: "#fff",
|
||||
backgroundColor: "#1a1d23",
|
||||
padding: "10px 12px",
|
||||
borderRadius: "6px",
|
||||
border: "2px solid #3a3f4f",
|
||||
color: "#e1e5e9",
|
||||
backgroundColor: "rgba(26, 29, 35, 0.8)",
|
||||
width: "100%",
|
||||
boxSizing: "border-box",
|
||||
fontSize: "0.9em"
|
||||
fontSize: "0.9em",
|
||||
fontWeight: "400",
|
||||
outline: "none",
|
||||
transition: "all 0.2s ease",
|
||||
boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.1)"
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.target.style.borderColor = "#4a90e2";
|
||||
e.target.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(74, 144, 226, 0.15)";
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.target.style.borderColor = "#3a3f4f";
|
||||
e.target.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1)";
|
||||
}}
|
||||
ref={inputRef}
|
||||
/>
|
||||
@@ -660,8 +699,13 @@ function App() {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "6px",
|
||||
color: "#fff",
|
||||
fontSize: "0.9em"
|
||||
color: "#e1e5e9",
|
||||
fontSize: "0.85em",
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
padding: "6px 10px",
|
||||
borderRadius: "6px",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -673,17 +717,34 @@ function App() {
|
||||
setSelectedHighRes,
|
||||
)
|
||||
}
|
||||
style={{
|
||||
width: "14px",
|
||||
height: "14px",
|
||||
accentColor: "#4a90e2"
|
||||
}}
|
||||
/>
|
||||
<span>HD Video</span>
|
||||
<span style={{ fontWeight: "500", whiteSpace: "nowrap" }}>HD</span>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
visibility: queryChanged ? "hidden" : "visible"
|
||||
visibility: queryChanged ? "hidden" : "visible",
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
padding: "6px 12px",
|
||||
borderRadius: "6px",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<label style={{ color: "#fff", fontSize: "0.9em", whiteSpace: "nowrap" }}>Threshold:</label>
|
||||
<label style={{
|
||||
color: "#e1e5e9",
|
||||
fontSize: "0.85em",
|
||||
whiteSpace: "nowrap",
|
||||
fontWeight: "500"
|
||||
}}>
|
||||
Threshold:
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min={sliderMin}
|
||||
@@ -692,15 +753,21 @@ function App() {
|
||||
value={sliderValue}
|
||||
onChange={(e) => updateDataAndValue(e.target.value)}
|
||||
style={{
|
||||
width: "100px",
|
||||
margin: "0 4px"
|
||||
width: "80px",
|
||||
height: "6px",
|
||||
background: "linear-gradient(to right, #3a3f4f 0%, #4a90e2 100%)",
|
||||
borderRadius: "3px",
|
||||
outline: "none",
|
||||
appearance: "none"
|
||||
}}
|
||||
/>
|
||||
<span style={{
|
||||
color: "#fff",
|
||||
fontSize: "0.9em",
|
||||
minWidth: "40px",
|
||||
textAlign: "right"
|
||||
color: "#4a90e2",
|
||||
fontSize: "0.8em",
|
||||
minWidth: "35px",
|
||||
textAlign: "right",
|
||||
fontWeight: "600",
|
||||
fontFamily: "monospace"
|
||||
}}>
|
||||
{sliderValue.toFixed(2)}
|
||||
</span>
|
||||
@@ -708,58 +775,111 @@ function App() {
|
||||
|
||||
<div className="control-group" style={{
|
||||
margin: 0,
|
||||
visibility: queryChanged ? "visible" : "hidden"
|
||||
visibility: queryChanged ? "visible" : "hidden",
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<button
|
||||
onClick={handleResubmit}
|
||||
style={{
|
||||
padding: "8px 16px",
|
||||
fontSize: "0.9em",
|
||||
backgroundColor: "#007acc",
|
||||
padding: "8px 14px",
|
||||
fontSize: "0.85em",
|
||||
background: "linear-gradient(135deg, #28a745 0%, #20a73a 100%)",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer"
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontWeight: "600",
|
||||
boxShadow: "0 2px 4px rgba(40, 167, 69, 0.3)",
|
||||
transition: "all 0.2s ease",
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.transform = "translateY(-1px)";
|
||||
e.target.style.boxShadow = "0 4px 8px rgba(40, 167, 69, 0.4)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.transform = "translateY(0)";
|
||||
e.target.style.boxShadow = "0 2px 4px rgba(40, 167, 69, 0.3)";
|
||||
}}
|
||||
>
|
||||
Resubmit
|
||||
🔄 Resubmit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="control-group" style={{ margin: 0 }}>
|
||||
<div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
|
||||
<button
|
||||
onClick={videoPlaying ? () => window.open("api/media_download/low") : undefined}
|
||||
disabled={!videoPlaying}
|
||||
style={{
|
||||
padding: "6px 10px",
|
||||
fontSize: "0.8em",
|
||||
backgroundColor: videoPlaying ? "#28a745" : "#6c757d",
|
||||
fontSize: "0.75em",
|
||||
background: videoPlaying
|
||||
? "linear-gradient(135deg, #17c671 0%, #15b565 100%)"
|
||||
: "linear-gradient(135deg, #6c757d 0%, #5a6169 100%)",
|
||||
color: videoPlaying ? "white" : "#adb5bd",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
borderRadius: "6px",
|
||||
cursor: videoPlaying ? "pointer" : "not-allowed",
|
||||
opacity: videoPlaying ? 1 : 0.6
|
||||
opacity: videoPlaying ? 1 : 0.6,
|
||||
fontWeight: "500",
|
||||
boxShadow: videoPlaying
|
||||
? "0 2px 4px rgba(23, 198, 113, 0.3)"
|
||||
: "0 1px 2px rgba(108, 117, 125, 0.2)",
|
||||
transition: "all 0.2s ease",
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (videoPlaying) {
|
||||
e.target.style.transform = "translateY(-1px)";
|
||||
e.target.style.boxShadow = "0 4px 8px rgba(23, 198, 113, 0.4)";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (videoPlaying) {
|
||||
e.target.style.transform = "translateY(0)";
|
||||
e.target.style.boxShadow = "0 2px 4px rgba(23, 198, 113, 0.3)";
|
||||
}
|
||||
}}
|
||||
>
|
||||
DL Low-Res
|
||||
DL Low-Res Video
|
||||
</button>
|
||||
</div>
|
||||
<div className="control-group" style={{ margin: 0 }}>
|
||||
<div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
|
||||
<button
|
||||
onClick={videoPlaying ? () => window.open("api/media_download/high") : undefined}
|
||||
disabled={!videoPlaying}
|
||||
style={{
|
||||
padding: "6px 10px",
|
||||
fontSize: "0.8em",
|
||||
backgroundColor: videoPlaying ? "#17a2b8" : "#6c757d",
|
||||
fontSize: "0.75em",
|
||||
background: videoPlaying
|
||||
? "linear-gradient(135deg, #007bff 0%, #0056b3 100%)"
|
||||
: "linear-gradient(135deg, #6c757d 0%, #5a6169 100%)",
|
||||
color: videoPlaying ? "white" : "#adb5bd",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
borderRadius: "6px",
|
||||
cursor: videoPlaying ? "pointer" : "not-allowed",
|
||||
opacity: videoPlaying ? 1 : 0.6
|
||||
opacity: videoPlaying ? 1 : 0.6,
|
||||
fontWeight: "500",
|
||||
boxShadow: videoPlaying
|
||||
? "0 2px 4px rgba(0, 123, 255, 0.3)"
|
||||
: "0 1px 2px rgba(108, 117, 125, 0.2)",
|
||||
transition: "all 0.2s ease",
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (videoPlaying) {
|
||||
e.target.style.transform = "translateY(-1px)";
|
||||
e.target.style.boxShadow = "0 4px 8px rgba(0, 123, 255, 0.4)";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (videoPlaying) {
|
||||
e.target.style.transform = "translateY(0)";
|
||||
e.target.style.boxShadow = "0 2px 4px rgba(0, 123, 255, 0.3)";
|
||||
}
|
||||
}}
|
||||
>
|
||||
DL High-Res
|
||||
DL High-Res Video
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user