Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const rawSegmenterMachine = Machine({
    id: 'rawSegmenter',
    initial: 'initialFetching',
    context: {
      currentPlayheadPosition: 0, // ms
      currentReticlePosition: 0,
      currentLoopStartTime: 0,
      currentLoopEndTime: 0,
      currentlyHoveredSegmentId: null,
      viewportStartTime: null,
      viewportEndTime: null,
      secondsPerLine: 5
    },
    states: {
      initialFetching: {
        id: 'resourceFetching',
        initial: 'idle',
        onDone: 'editing',
        states: {
          idle: {
            on: {
              FETCH: 'loading'
            }
          },
          loading: {
            on: {
              RESOLVE: 'success',
              REJECT: 'failure'
            }
          },
          failure: {
            on: {
              RETRY: {
                target: 'loading',
                actions: assign({
                  retries: (context, event) => context.retries + 1
                })
              }
            }
          },
          success: {
            type: 'final'
          }
        }
      },
      editing: {
        initial: 'paused',
        type: 'parallel',
        states: {
          timelinePlayState: {
            initial: 'paused',
            states: {
              paused: {
                on: {
                  PLAY: 'playing'  
                }
              },
              playing: {
                on: {
                  DONE: 'paused'  
                }
              }
            }
          },
          dragSelectionState: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  GRAB_SELECTION: 'grabbing',
                  RELEASE_SELECTION: 'idle'
                }
              },
              grabbing: {
                on: {
                  MOVE_SELECTION: 'dragging',
                  RELEASE_SELECTION: 'idle'
                }
              },
              dragging: {
                on: {
                  STOP_MOVING_SELECTION: 'grabbing',
                  DROP_SELECTION: 'idle'
                }
              }
            }
          },
          dragHandleState: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  MOUSEDOWN: 'grabbing',
                  MOUSEUP: 'idle'
                }
              },
              grabbing: {
                on: {
                  MOUSEMOVE: 'dragging',
                  MOUSEUP: 'idle'
                }
              },
              dragging: {
                on: {
                  MOUSESTOP: 'grabbing',
                  MOUSEUP: 'idle'
                }
              }
            }
          },
          shiftState: {
            initial: 'notDepressed',
            states: {
              notDepressed: {
                on: {
                  PRESS: 'depressed'
                }
              },
              depressed: {
                on: {
                  RELEASE: 'notDepressed'
                }
              }
            }
          },
          reticleState: {
            initial: 'idle',
            states: {
              hovering: {
                on: {
                  MOUSEOUT: 'idle'  
                }
              },
              idle: {
                on: {
                  MOUSEIN: 'hovering'  
                }
              }
            }
          },
          selectionPlaying: {
            initial: 'paused',
            states: {
              paused: {
                on: {
                  PLAY: 'playing'  
                }
              },
              playing: {
                on: {
                  DONE: 'paused'  
                }
              }
            }
          }
        }
      }
    }
  });