keyframe indicator on timeline

Author: seveibar

src/Header/index.js

@@ -43,7 +43,8 @@ export const Header = ({
  currentVideoTime,
  multipleImages,
  videoPlaying,
- onChangeCurrentTime
+ onChangeCurrentTime,
+ keyframes
 }: Props) => {
  const classes = useStyles()
  return (
@@ -53,6 +54,7 @@ export const Header = ({
  currentTime={currentVideoTime}
  duration={videoDuration}
  onChangeCurrentTime={onChangeCurrentTime}
+ keyframes={keyframes}
  />
  <div className={classes.headerActions}>
  <HeaderButtonContext.Provider value={{ onHeaderButtonClick }}>

src/KeyframeTimeline/index.js

@@ -64,6 +64,39 @@ const PositionCursor = styled("div")({
  }
 })
 
+const KeyframeMarker = styled("div")({
+ position: "absolute",
+ bottom: 8,
+ cursor: "pointer",
+ opacity: 0.75,
+ fontSize: 10,
+ fontWeight: "bold",
+ color: "#fff",
+ display: "grid",
+ placeItems: "center",
+ width: 16,
+ marginLeft: 0,
+ borderTopLeftRadius: 2,
+ borderTopRightRadius: 2,
+ height: 12,
+ marginLeft: -8,
+ backgroundColor: colors.red[500],
+ userSelect: "none",
+ fontVariantNumeric: "tabular-nums",
+
+ "&::before": {
+ position: "absolute",
+ bottom: -8,
+ left: 0,
+ content: '""',
+ width: 0,
+ height: 0,
+ borderTop: `8px solid ${colors.red[500]}`,
+ borderLeft: "8px solid transparent",
+ borderRight: "8px solid transparent"
+ }
+})
+
 const min = 60000
 const displayIntervalPairs = [
  [50, 250],
@@ -98,6 +131,10 @@ export default ({
  const [ref, bounds] = useMeasure()
  const [instantCurrentTime, changeInstantCurrentTime] = useState(currentTime)
  const [draggingTime, changeDraggingTime] = useRafState(false)
+ const keyframeTimes = Object.keys(keyframes || {})
+ .map(t => parseInt(t))
+ .filter(t => !isNaN(t))
+ .sort((a, b) => a - b)
 
  useEffect(() => {
  if (currentTime !== instantCurrentTime) {
@@ -159,6 +196,13 @@ export default ({
  }}
  />
  ))}
+ {keyframeTimes.map(kt => (
+ <KeyframeMarker
+ onClick={() => onChangeCurrentTime(kt)}
+ key={kt}
+ style={{ left: (kt / duration) * bounds.width }}
+ />
+ ))}
  <PositionCursor
  onMouseDown={e => changeDraggingTime(true)}
  style={{

src/MainLayout/index.js

@@ -90,6 +90,7 @@ export const MainLayout = ({ state, dispatch }: Props) => {
  onChangeCurrentTime={action("CHANGE_VIDEO_TIME", "newTime")}
  videoPlaying={state.videoPlaying}
  currentVideoTime={state.currentVideoTime}
+ keyframes={state.keyframes}
  />
  </div>
  <div className={classes.workspace}>

src/SettingsDialog/index.js

@@ -26,6 +26,13 @@ export const SettingsDialog = ({ open, onClose }) => {
  type: "boolean",
  title: "Show Crosshairs",
  name: "showCrosshairs"
+ },
+ {
+ type: "dropdown",
+ title: "Video Playback Speed",
+ name: "videoPlaybackSpeed",
+ defaultValue: "1x",
+ choices: ["0.25x", "0.5x", "1x", "2x"]
  }
  ]
  }}

src/VideoOrImageCanvasBackground/index.js

@@ -3,6 +3,7 @@
 import React, { useRef, useEffect, useMemo } from "react"
 import { styled } from "@material-ui/core/styles"
 import useEventCallback from "use-event-callback"
+import { useSettings } from "../SettingsProvider"
 
 const Video = styled("video")({
  zIndex: 0,
@@ -25,6 +26,7 @@ export default ({
  onChangeVideoTime,
  onChangeVideoPlaying
 }) => {
+ const settings = useSettings()
  const videoRef = useRef()
  const imageRef = useRef()
 
@@ -40,6 +42,11 @@ export default ({
  if (videoPlaying) {
  videoRef.current.play()
  renderLoopRunning = true
+ if (settings.videoPlaybackSpeed) {
+ videoRef.current.playbackRate = parseFloat(
+ settings.videoPlaybackSpeed
+ )
+ }
  } else {
  videoRef.current.pause()
  }