Add clip player

2022-04-29 12:12:06 +08:00
parent c923efcd99
commit bc67782365
9 changed files with 246 additions and 1 deletions
@@ -0,0 +1,136 @@
+@import "../Theme/Theme.scss";
+
+div.recorder-root {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 10px;
+
+	div.recorder-slider {
+		width: 100%;
+
+		div.ms-Slider-slideBox {
+			height: 16px;
+		}
+
+		span.ms-Slider-thumb {
+			width: 12px;
+			height: 12px;
+			line-height: 16px;
+			border-width: 3px;
+			top: -4px;
+		}
+
+		span.ms-Slider-active {
+			height: 3px;
+		}
+		
+		span.ms-Slider-inactive {
+			height: 3px;
+		}
+	}
+
+	div.recorder-content {
+		width: 100%;
+		height: 32px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		box-sizing: border-box;
+		padding: 0 8px;
+
+		div.time-view {
+			flex-shrink: 1;
+			width: 50%;
+			text-align: left;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		div.ctrl-button {
+			cursor: pointer;
+			user-select: none;
+			width: 96px;
+			flex-shrink: 0;
+			text-align: center;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			div.ctrl-action {
+				width: 32px;
+				height: 32px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			div.ctrl-action-main {
+				font-size: 1.5em;
+			}
+		}
+
+		div.speed-view {
+			flex-shrink: 1;
+			width: 50%;
+			text-align: right;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}
+
+div.recorder-root.light {
+
+	div.recorder-slider {
+
+		span.ms-Slider-thumb {
+			background-color: $lt-bg-color-lvl1-light;
+			border-color: $lt-font-color-normal-light;
+		}
+
+		span.ms-Slider-active {
+			background-color: $lt-font-color-normal-light;
+		}
+		
+		span.ms-Slider-inactive {
+			background-color: $lt-bg-color-lvl1-light;
+		}
+	}
+
+	div.recorder-content {
+
+		div.ctrl-button div.ctrl-action:hover {
+			background-color: $lt-bg-color-lvl3-light;
+			color: $lt-font-color-lvl1-light;
+		}
+	}
+}
+
+div.recorder-root.dark {
+	
+	div.recorder-slider {
+
+		span.ms-Slider-thumb {
+			background-color: $lt-bg-color-lvl1-dark;
+			border-color: $lt-font-color-normal-dark;
+		}
+
+		span.ms-Slider-active {
+			background-color: $lt-font-color-normal-dark;
+		}
+		
+		span.ms-Slider-inactive {
+			background-color: $lt-bg-color-lvl1-dark;
+		}
+	}
+
+	div.recorder-content {
+
+		div.ctrl-button div.ctrl-action:hover {
+			background-color: $lt-bg-color-lvl3-dark;
+			color: $lt-font-color-lvl1-dark;
+		}
+	}
+}
@@ -0,0 +1,73 @@
+import { Localization } from "@Component/Localization/Localization";
+import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
+import { Icon, Slider } from "@fluentui/react";
+import { Component, ReactNode } from "react";
+import "./Recorder.scss";
+
+interface IRecorderProps {
+	mode?: "P" | "R",
+	name?: string;
+	fps?: number;
+	allFrame?: number;
+	currentFrame?: number;
+	allTime?: number;
+	currentTime?: number;
+}
+
+class Recorder extends Component<IRecorderProps> {
+
+	private parseTime(time?: number): string {
+		if (time === undefined) {
+			return "--:--:--:--";
+		}
+		const h = Math.floor(time / 3600);
+		const m = Math.floor((time % 3600) / 60);
+		const s = Math.floor((time % 3600) % 60);
+		const ms = Math.floor((time % 1) * 1000);
+		return `${h}:${m}:${s}:${ms}`;
+	}
+
+	public render(): ReactNode {
+		return <Theme
+			className="recorder-root"
+			backgroundLevel={BackgroundLevel.Level4}
+			fontLevel={FontLevel.normal}
+		>
+			<Slider
+				min={0}
+				value={this.props.currentFrame}
+				max={this.props.allFrame}
+				className="recorder-slider"
+				showValue={false}
+			/>
+			<div className="recorder-content">
+				<div className="time-view">
+					<Localization
+						i18nKey="Panel.Info.Behavior.Clip.Time.Formate"
+						options={{
+							current: this.parseTime(this.props.currentTime),
+							all: this.parseTime(this.props.allTime),
+							fps: this.props.fps ? this.props.fps.toString() : "--"
+						}}
+					/>
+				</div>
+				<div className="ctrl-button">
+					<div className="ctrl-action">
+						<Icon iconName="Back"/>
+					</div>
+					<div className="ctrl-action ctrl-action-main">
+						<Icon iconName="Play"/>
+					</div>
+					<div className="ctrl-action">
+						<Icon iconName="Forward"/>
+					</div>
+				</div>
+				<div className="speed-view">
+					{this.props.name}
+				</div>
+			</div>
+		</Theme>;
+	}
+}
+
+export { Recorder };