Master zhaoyun

example/src/App.js

@@ -46,6 +46,7 @@ const App = () => {
 				hintOnStartup
 				hintText="Drag to view"
 			/>
+
 			<button onClick={() => tridiRef.current.prev()}>Prev</button>
 			<button onClick={() => tridiRef.current.next()}>Next</button>
 			<button onClick={() => tridiRef.current.toggleAutoplay(!isAutoPlayRunning)}>

src/components/ControlBar/index.js

@@ -1,23 +1,32 @@
 import React from 'react';
 import styles from './styles.module.css';
+
 import TargetIcon from '../../assets/icons/target.svg';
 import StopIcon from '../../assets/icons/stop.svg';
 import NextIcon from '../../assets/icons/next.svg';
-import PrevIcon from '../../assets/icons/previous.svg';
 import PauseIcon from '../../assets/icons/pause.svg';
 import PlayIcon from '../../assets/icons/play.svg';
+import ZoomInIcon from '../../assets/icons/zoomIn.svg';
+import ZoomOutIcon from '../../assets/icons/zoomOut.svg';
+import MoveIcon from '../../assets/icons/move.svg';
 
 const ControlBar = ({
 	isPlaying,
 	isRecording,
+	isMoveing,
 	setIsPlaying,
 	setIsRecording,
 	onPlay,
 	onPause,
 	onNext,
 	onPrev,
 	onRecordStart,
-	onRecordStop
+	onRecordStop,
+	onZoomout,
+	onZoomin,
+	onStartMoveing,
+	onStopMoveing,
+	hideRecord
 }) => {
 	const playHandler = () => {
 		setIsPlaying(true);
@@ -39,17 +48,25 @@ const ControlBar = ({
 		onRecordStop();
 	};
 
+	const moveStartHandler = () => {
+		onStartMoveing();
+	};
+
+	const moveStopHandler = () => {
+		onStopMoveing();
+	};
+
 	return (
 		<div
 			className={`tridi-control-bar ${styles['tridi-control-bar']}`}
 			onClick={(e) => e.stopPropagation()}
 		>
-			{!isRecording && (
+			{!hideRecord && !isRecording && (
 				<a className={`${styles['tridi-control-button']}`} onClick={recordStartHandler}>
 					<TargetIcon />
 				</a>
 			)}
-			{isRecording && (
+			{!hideRecord && isRecording && (
 				<a className={`${styles['tridi-control-button']}`} onClick={recordStopHandler}>
 					<StopIcon />
 				</a>
@@ -64,12 +81,36 @@ const ControlBar = ({
 					<PauseIcon />
 				</a>
 			)}
-			<a className={`${styles['tridi-control-button']}`} onClick={onPrev}>
-				<PrevIcon />
+			<a
+				className={`${styles['tridi-control-button']}`}
+				style={{ transform: 'rotate(180deg)' }}
+				onClick={onPrev}
+			>
+				<NextIcon />
 			</a>
+
 			<a className={`${styles['tridi-control-button']}`} onClick={onNext}>
 				<NextIcon />
 			</a>
+
+			<a className={`${styles['tridi-control-button']}`} onClick={onZoomout}>
+				<ZoomOutIcon />
+			</a>
+
+			<a className={`${styles['tridi-control-button']}`} onClick={onZoomin}>
+				<ZoomInIcon />
+			</a>
+
+			{!isMoveing && (
+				<a className={`${styles['tridi-control-button']}`} onClick={moveStartHandler}>
+					<MoveIcon />
+				</a>
+			)}
+			{isMoveing && (
+				<a className={`${styles['tridi-control-button']}`} onClick={moveStopHandler}>
+					<StopIcon />
+				</a>
+			)}
 		</div>
 	);
 };