Merge pull request #435 from charlielee/issue-393

Implement playback speed selection

src/common/utils.ts

@@ -20,3 +20,12 @@ export const stringToArray = (items: string) =>
   items
     .match(/[^\s"']+|"([^"]*)"/gim)
     ?.map((arg: string) => arg.replace(/"|'/g, ""));
+
+export const PLAYBACK_SPEEDS = {
+  "0.1×": 0.1,
+  "0.25×": 0.25,
+  "0.5×": 0.5,
+  "1.0×": 1,
+  "2.0×": 2,
+  "4.0×": 4,
+};

src/renderer/components/animator/AnimationToolbar/AnimationToolbar.tsx

@@ -11,6 +11,7 @@ import Toolbar from "../../common/Toolbar/Toolbar";
 import ToolbarItem, {
   ToolbarItemAlign,
 } from "../../common/ToolbarItem/ToolbarItem";
+import PlaybackSpeedSelect from "../PlaybackSpeedSelect/PlaybackSpeedSelect";
 import "./AnimationToolbar.css";
 
 interface AnimationToolbarProps {
@@ -94,6 +95,7 @@ const AnimationToolbar = ({
       </ToolbarItem>
 
       <ToolbarItem stretch align={ToolbarItemAlign.RIGHT}>
+        <PlaybackSpeedSelect />
         <IconButton
           title={`${loopPlayback ? "Disable" : "Enable"} Loop Playback`}
           icon={IconName.PLAY_LOOP}

src/renderer/components/animator/Animator/Animator.tsx

@@ -64,12 +64,13 @@ const Animator = ({ take }: AnimatorWithProviderProps): JSX.Element => {
 const AnimatorWithProvider = ({
   take,
 }: AnimatorWithProviderProps): JSX.Element => {
-  const shortPlayLength = useSelector(
-    (state: RootState) => state.app.userPreferences.shortPlayLength
-  );
+  const selectors = useSelector((state: RootState) => ({
+    shortPlayLength: state.app.userPreferences.shortPlayLength,
+    playbackSpeed: state.project.playbackSpeed,
+  }));
 
   return (
-    <PlaybackContextProvider take={take} shortPlayLength={shortPlayLength}>
+    <PlaybackContextProvider take={take} {...selectors}>
       <Animator take={take} />
     </PlaybackContextProvider>
   );

src/renderer/components/animator/PlaybackSpeedSelect/PlaybackSpeedSelect.tsx

@@ -0,0 +1,24 @@
+import { useDispatch, useSelector } from "react-redux";
+import { PLAYBACK_SPEEDS } from "../../../../common/utils";
+import { setPlaybackSpeed } from "../../../redux/project/actions";
+import { RootState } from "../../../redux/store";
+import InputSelect from "../../common/Input/InputSelect/InputSelect";
+
+const PlaybackSpeedSelect = (): JSX.Element => {
+  const dispatch = useDispatch();
+  const playbackSpeed = useSelector(
+    (state: RootState) => state.project.playbackSpeed
+  );
+
+  return (
+    <InputSelect
+      options={PLAYBACK_SPEEDS}
+      value={playbackSpeed}
+      onChange={(newValue) => dispatch(setPlaybackSpeed(parseFloat(newValue)))}
+      title={`Playback Speed ${playbackSpeed}x`}
+      fitContent
+    />
+  );
+};
+
+export default PlaybackSpeedSelect;

src/renderer/components/common/Input/InputSelect/InputSelect.css

@@ -0,0 +1,8 @@
+
+.input-select {
+  padding: var(--margin-025) var(--margin-150)  var(--margin-025) var(--margin-050);
+}
+
+.input-select--fit-content {
+  max-width: fit-content;
+}

src/renderer/components/common/Input/InputSelect/InputSelect.tsx

@@ -1,21 +1,38 @@
-interface InputSelectProps {
+import classNames from "classnames";
+import "./InputSelect.css";
+
+type InputSelectValue = string | number | undefined;
+
+interface InputSelectProps<TValue> {
   id?: string;
-  options: Record<string, string>;
-  value: string | undefined;
+  options: Record<string, TValue>;
+  value: TValue;
   onChange(newValue: string): void;
+  title?: string;
+  fitContent?: boolean;
 }
 
-const InputSelect = ({
+const InputSelect = <TValue extends InputSelectValue>({
   id,
   options,
   onChange,
   value,
-}: InputSelectProps): JSX.Element => {
+  title,
+  fitContent,
+}: InputSelectProps<TValue>): JSX.Element => {
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) =>
     onChange(event.target.value);
 
   return (
-    <select id={id} value={value} onChange={handleChange}>
+    <select
+      id={id}
+      value={value}
+      onChange={handleChange}
+      title={title}
+      className={classNames("input-select", {
+        "input-select--fit-content": fitContent,
+      })}
+    >
       {Object.entries(options).map(([k, v]) => (
         <option value={v} key={k}>
           {k}

src/renderer/context/PlaybackContext/PlaybackContextProvider.tsx

@@ -13,12 +13,14 @@ import PlaybackContext, {
 interface PlaybackContextProviderProps {
   shortPlayLength: FrameCount;
   take: Take;
+  playbackSpeed: number;
   children: ReactNode;
 }
 
 const PlaybackContextProvider = ({
   shortPlayLength,
   take,
+  playbackSpeed,
   children,
 }: PlaybackContextProviderProps) => {
   const playForDuration = getTrackLength(take.frameTrack);
@@ -30,7 +32,7 @@ const PlaybackContextProvider = ({
 
   const [liveViewVisible, setLiveViewVisible] = useState(true);
 
-  const delay = 1000 / take.frameRate;
+  const delay = 1000 / take.frameRate / playbackSpeed;
   const previousTime = useRef<number>(0);
   const lastFrameIndex = useRef<TimelineIndex>(0);
 

src/renderer/redux/app/actions.ts

@@ -12,6 +12,7 @@ export enum AppActionType {
   SET_CAMERA_ACCESS = "app/SET_CAMERA_ACCESS",
   START_LOADING = "app/START_LOADING",
   STOP_LOADING = "app/STOP_LOADING",
+  SET_PLAYBACK_SPEED = "app/SET_PLAYBACK_SPEED",
 }
 
 export type AppAction =

src/renderer/redux/project/actions.ts

@@ -8,13 +8,15 @@ export enum ProjectActionType {
   ADD_PROJECT = "project/ADD_PROJECT",
   ADD_TAKE = "project/ADD_TAKE",
   INCREMENT_EXPORTED_FRAME_NUMBER = "project/INCREMENT_EXPORTED_FRAME_NUMBER",
+  SET_PLAYBACK_SPEED = "project/SET_PLAYBACK_SPEED",
 }
 
 export type ProjectActions =
   | AddFileRefAction
   | AddFrameTrackAction
   | AddTakeAction
-  | IncrementExportedFrameNumber;
+  | IncrementExportedFrameNumber
+  | SetPlaybackSpeed;
 
 interface AddFileRefAction {
   type: ProjectActionType.ADD_FILE_REF;
@@ -38,6 +40,13 @@ interface IncrementExportedFrameNumber {
   type: ProjectActionType.INCREMENT_EXPORTED_FRAME_NUMBER;
 }
 
+interface SetPlaybackSpeed {
+  type: ProjectActionType.SET_PLAYBACK_SPEED;
+  payload: {
+    playbackSpeed: number;
+  };
+}
+
 export const addFileRef = (fileRef: FileRef) => ({
   type: ProjectActionType.ADD_FILE_REF,
   payload: { fileRef },
@@ -60,3 +69,10 @@ export const addFrameTrackItem = (trackItem: TrackItem) => ({
 export const incrementExportedFrameNumber = () => ({
   type: ProjectActionType.INCREMENT_EXPORTED_FRAME_NUMBER,
 });
+
+export const setPlaybackSpeed = (playbackSpeed: number) => ({
+  type: ProjectActionType.SET_PLAYBACK_SPEED,
+  payload: {
+    playbackSpeed,
+  },
+});

src/renderer/redux/project/reducer.ts

@@ -30,6 +30,12 @@ const projectReducer = (
             lastExportedFrameNumber: state.take.lastExportedFrameNumber + 1,
           },
         };
+
+      case ProjectActionType.SET_PLAYBACK_SPEED:
+        return {
+          ...state,
+          playbackSpeed: action.payload.playbackSpeed,
+        };
     }
   }
 

src/renderer/redux/project/state.ts

@@ -4,9 +4,11 @@ import { Take } from "../../../common/project/Take";
 export interface ProjectState {
   fileRefs: FileRef[];
   take?: Take;
+  playbackSpeed: number;
 }
 
 export const initialProjectState: ProjectState = {
   fileRefs: [],
   take: undefined,
+  playbackSpeed: 1,
 };

src/renderer/styles/_sizes.css

@@ -25,4 +25,5 @@
   --margin-025: var(--width-4);
   --margin-050: var(--width-8);
   --margin-100: var(--width-16);
+  --margin-150: calc(var(--width-16) * 1.5);
 }

src/renderer/styles/theme.css

@@ -84,7 +84,8 @@ textarea:focus {
 select {
   background-image: url("./images/dropdown.svg");
   background-repeat: no-repeat;
-  background-position: right;
+  background-position: center right var(--margin-025);
+  background-size: 1rem;
 }
 
 table {