fix:相机优化
This commit is contained in:
@@ -71,7 +71,6 @@ export default function ImageUpload({
|
||||
const { message } = App.useApp()
|
||||
const isMobile = useIsMobile()
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
const cameraInputRef = useRef<HTMLInputElement | null>(null)
|
||||
const dragCounterRef = useRef(0)
|
||||
const targetIdRef = useRef(0)
|
||||
const valueRef = useRef(value)
|
||||
@@ -258,21 +257,25 @@ export default function ImageUpload({
|
||||
</Upload>
|
||||
{cameraEnabled && value.length < maxCount ? (
|
||||
<div className="image-upload-camera">
|
||||
<input
|
||||
ref={cameraInputRef}
|
||||
type="file"
|
||||
accept={cameraInputProps.accept}
|
||||
capture={cameraInputProps.capture}
|
||||
className="image-upload-camera-input"
|
||||
onChange={(event) => void handleCameraSelect(event)}
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<CameraOutlined />}
|
||||
onClick={() => cameraInputRef.current?.click()}
|
||||
>
|
||||
拍照
|
||||
</Button>
|
||||
{/*
|
||||
相机入口用「透明原生 input 铺满按钮」的方式:
|
||||
用户手指直接点在 input 上,浏览器才会把它当作拍照手势;
|
||||
旧实现把 input 移到 left:-9999px 再由按钮脚本 .click(),部分安卓 WebView
|
||||
会把相机 intent 降级成文件选择(表现为点了「拍照」却弹出文件浏览)。
|
||||
*/}
|
||||
<span className="camera-pick-trigger">
|
||||
<input
|
||||
type="file"
|
||||
accept={cameraInputProps.accept}
|
||||
capture={cameraInputProps.capture}
|
||||
className="image-upload-camera-input"
|
||||
aria-label="拍照"
|
||||
onChange={(event) => void handleCameraSelect(event)}
|
||||
/>
|
||||
<Button size="small" icon={<CameraOutlined />} tabIndex={-1}>
|
||||
拍照
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{showPasteHint ? (
|
||||
|
||||
@@ -50,7 +50,6 @@ export default function VideoUpload({
|
||||
const { message } = App.useApp()
|
||||
const isMobile = useIsMobile()
|
||||
const inputRef = useRef<HTMLInputElement | null>(null)
|
||||
const cameraInputRef = useRef<HTMLInputElement | null>(null)
|
||||
const [phase, setPhase] = useState<'idle' | 'compressing' | 'uploading'>('idle')
|
||||
const [progress, setProgress] = useState(0)
|
||||
|
||||
@@ -144,16 +143,6 @@ export default function VideoUpload({
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleSelect}
|
||||
/>
|
||||
{cameraEnabled ? (
|
||||
<input
|
||||
ref={cameraInputRef}
|
||||
type="file"
|
||||
accept={cameraInputProps.accept}
|
||||
capture={cameraInputProps.capture}
|
||||
className="worker-acceptance-video-camera-input"
|
||||
onChange={handleSelect}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{value ? (
|
||||
<div className="worker-acceptance-video-preview">
|
||||
@@ -170,14 +159,22 @@ export default function VideoUpload({
|
||||
</Typography.Text>
|
||||
<Space size={8} wrap>
|
||||
{cameraEnabled ? (
|
||||
<Button
|
||||
size="small"
|
||||
icon={<CameraOutlined />}
|
||||
disabled={!canPick}
|
||||
onClick={() => cameraInputRef.current?.click()}
|
||||
>
|
||||
重拍
|
||||
</Button>
|
||||
// 透明原生 input 铺满按钮:真实手势点 input 才会被当作「拍摄」,
|
||||
// 脚本 click 在部分安卓 WebView 会退化成文件选择。
|
||||
<span className="camera-pick-trigger">
|
||||
<input
|
||||
type="file"
|
||||
accept={cameraInputProps.accept}
|
||||
capture={cameraInputProps.capture}
|
||||
className="worker-acceptance-video-camera-input"
|
||||
aria-label="重拍验收视频"
|
||||
disabled={!canPick}
|
||||
onChange={handleSelect}
|
||||
/>
|
||||
<Button size="small" icon={<CameraOutlined />} disabled={!canPick} tabIndex={-1}>
|
||||
重拍
|
||||
</Button>
|
||||
</span>
|
||||
) : null}
|
||||
<Button size="small" disabled={!canPick} onClick={() => inputRef.current?.click()}>
|
||||
替换
|
||||
@@ -203,14 +200,26 @@ export default function VideoUpload({
|
||||
) : (
|
||||
<Space size={8} wrap>
|
||||
{cameraEnabled ? (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<CameraOutlined />}
|
||||
disabled={!canPick}
|
||||
onClick={() => cameraInputRef.current?.click()}
|
||||
>
|
||||
拍摄验收视频
|
||||
</Button>
|
||||
// 同「重拍」:透明原生 input 铺满按钮,靠真实手势调起系统相机。
|
||||
<span className="camera-pick-trigger">
|
||||
<input
|
||||
type="file"
|
||||
accept={cameraInputProps.accept}
|
||||
capture={cameraInputProps.capture}
|
||||
className="worker-acceptance-video-camera-input"
|
||||
aria-label="拍摄验收视频"
|
||||
disabled={!canPick}
|
||||
onChange={handleSelect}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<CameraOutlined />}
|
||||
disabled={!canPick}
|
||||
tabIndex={-1}
|
||||
>
|
||||
拍摄验收视频
|
||||
</Button>
|
||||
</span>
|
||||
) : null}
|
||||
<Button
|
||||
icon={<VideoCameraOutlined />}
|
||||
|
||||
Reference in New Issue
Block a user